html笔记

来源：互联网发布：日语班知乎编辑：程序博客网时间：2024/05/19 12:37

以下内容大部分来自http://www.w3school.com.cn/

Html 概述
1.HTML 元素以开始标签起始 , 以结束标签终止 . 元素内容是开始标签与结束标签之间内容
2. 某些 HTML 元素具有空内容（ empty content ）
3. 空元素在开始标签中进行关闭（以开始标签的结束而结束）
4. 大多数 HTML 元素可拥有属性
5. 对大小写不敏感
6. 注释 :

Html的头部
1.头部格式 :  <head>......</head>
2.根据 html 标准 , 仅有几个标签在 html 的头部分是合法的 . 它们是 :<base>, <link>, <meta>, <title>, <style> 和 <script>
3.网页信息标记 :
格式 :  <meta ......>
属性 :
向服务器请求,完成浏览所能完成的http功能 : http-equiv = "content-type | expires | keyword | refresh | cache-control"
网页编码 content-type:   content = " ....( 一般为 text/html) ; charset = ..."
有效期限 expires:  content = " 有效时限 " [ 格式 : 星期日月年时 : 分 : 秒 GMT]
网页关键字 keyword:  content = " 关键字 " [ 便于搜索引擎查找分类 ]
自动刷新与跳转 refresh:  content = " 秒数 ; url = 跳转地址 "
设置禁用缓存 cache-control:  content ="no-cache"
使用时间: page-enter | page-exit:  content = "blendtrans(duration= 秒数 )"
设置属性 :    name = "author | build | copyright | content-language | description | robots | reply-to | generator"
限制搜索方式 robots:  content = "none | noindex | nofollow | index | all"
根据所搭配的属性设置对应的属性值 :  content=".... ; ...."
设置编码类型   charset = 编码类型 [编码类型:gb2312(简体中文) | big5(繁体中文) | iso-8859-1(纯英文) | ..]
设置载入页面   url
4.标题 :     格式 :  <title>........</title>   [ 在游览器标题栏显示 ]

Html 的主体
1.主体格式 : <body>........</body>
2.主体属性 :
背景颜色 :　　 bgcolor = " #000000~ffffff | rgb(0,0,0) | black"
背景图片 :　　 background = " 图形文件路径 "
字体颜色 : 　　 text = " #000000~ffffff | rgb(0,0,0) | black"
背景固定 : 　　 bgproperties = "fixed | scroll"
主体水平开始位置 : 　　 leftmargin = "N"
主体垂直开始位置 : 　　 topmargin = "N"
主体水平结束位置 : 　　 rightmargin = "N"
主体垂直结束位置 : 　　 bottommargin = "N"
3.<body> 元素定义了 HTML 文档的主体

排版设计
1.文字换行 :          ...........< br />  [ 当其被 <nobr> 包含时就 ]
2.关闭文字换行 :      <nobr>.......</nobr>  [ 取消游览器窗口改变而强制文字换行 ]
3.段落 :
格式 : 　　<p>..........</p>      [ 在文本后加一个空白行 ]
属性 :　　
水平对齐方式: 　　 align= " right( 默认 ) | left | center "
4.原始文字样式 :      <pre>.......</pre>    [ 文件在游览所呈现的效果与我们编辑的一样 ]
5.在文字上标注说明 : 格式 : <ruby> 被标注说明的文字 <rt> 说明文字 </rt></ruby>
6.特殊字符 :
空格符 : & nbsp
大于号 : &gt
小于号 : &lt
双引号 : &quot
地址符 : &amp
乘号 ; &times
加减号 : &plusmn
7.居中对齐 :          <center>....</center>
8.定义块引用 :          <blockquote>......</blockquote>   [ 向左、右缩排空出五个空格 ]
9.标题 :
格式 :    <hx>......</hx>  [x = 1 ~ 6]
属性 :
对齐方式 :　　 align= " right( 默认 ) | left | center "
10.文字效果 :
     1) 粗体 :
<strong>........</strong>
<b>.....</b>
     2) 斜体 :
<em>.......</em>
<i>........</i>
<cite>........</cite>
     3) 下划线 :   <u>.........</u> 或 <ins>......</ins>
     4) 删除线 :   <strike>........</strike> 或 <s>.....</s> 或 <del>....</del>
     5) 文字闪烁 :   <blink>........</blink>
     6) 大型字体 :   <big>.....</big>  [ 比原先所设的字体大一级 ]
     7) 小型字体 :   <small>......</small>  [ 比原先所设字体小一级 ]
     8) 文字下标 :   <sub>....</sub>   [ 文字稍向下移 , 且比原先字体小一级 ]
     9) 文字上标 :   <sup>....</sup>   [ 文字稍向上移 , 且比原先字体小一级 ]
     10) 预设字形设定 :
格式 :  <basefont>
属性 :
大小:　　 size = "1 ~ 7" ( 默认为 3)
字形 : 　　 face = " 字形 "
颜色: 　　 color = "#000000~ffffff | rgb(0,0,0) | black"
     11) 更改字型 :
格式 :  <font>................</font>
属性 : [ 属性之间用空格隔开 ]
大小:　　 size = "1 ~ 7 "( 默认为 3)
字形 :　　 face = " 字形 "
颜色:　　 color = "#000000~ffffff | rgb(0,0,0) | black"
     12) 固定文字宽度 :  <tt>......</tt>   [ 文字宽度一样 ]
11.特殊字型标签 :
显示专有名词与人名 　　 <dfn>.........</dfn>  [ 与字段文字效果无不同 ]
显示计算机输出结果   　　<samp>.....</samp>  [ 呈现字体一般大且细 ]
显示代码   　　　　　　 <code>..........</code>  [ 与 samp 相同 ]
显示使用者输入文本 　　 <kbd>......</kbd>   [ 与 samp 相同 ]
声明变量   　　　　　　 <var>........</var>   [ 呈现字体一般细且斜体 ]
显示地址文本   　　　　　 <address>........</address>  [ 与 var 相同 ]
显示引文 / 引用 　　   <cite>........</cite>   [ 字体为斜体 ]
12.直线制作 :
形式 :   <hr>
属性 :
宽度属性 :　　 width = "N | M%" [N 线段表大小 ,M 表线段与窗口比例 ]
对齐方式 : 　　align = " left | center( 默认 ) | right "
直线厚度 : 　　size = "N" [N 为数字 ]
无阴影属性 : 　　noshade [ 无此属性 , 直线看像框框 , 有就像一条线 ]
颜色 :  　　color = "#000000~ffffff | rgb(0,0,0) | black"
13.忽略 html 标记 :  <plaintext>   [ 使该标记后的 html 标记失去作用 ]
14.不执行 html 标记 :   <xmp>.......</xmp>  [ 在该标签内所有 html 标记失去作用 ]
15.跑马灯文字 :
格式 :   <marquee>.....</marquee>
属性 :
背景颜色 :  　　bgcolor = "#000000~ffffff | rgb(0,0,0) | black"
高度 :   　　height = " N | M%"
宽度 :   　　width = " N | M%"
两侧与网页的水平间隔 :    　　hspace = "N"
两侧与网页的水平间隔 :   　　vspace = "N"
滚动效果 :   　　behavior = "scroll( 默认 ) | alternate | slide"
scrol 一边进一边出
alternate 弹来弹去
slide 碰到边界就停下来
运动方向 :   　　direction = "left | right | up | down"
运动次数 :   　　loop = "N"
移动距离 :  　　scrollamount = "N"
移动间隔时间 :   　　scrolldelay = "N"   [ 单位千分之一秒 ]

列表设计

1.菜单列表 :
形式:
列表形式 :   <menu>.........</menu>
列表项形式 :  <li>........</li>
列表属性 :
符号形式: 　　   type = "disc / circle / square"
2.目录列表:
形式:
列表形式 :   <dir>........</dir>
列表项形式 :    <li>........</li>
3.符号列表:
形式:
列表形式 :   <lh>.........</lh>   [列表无 type 属性 ]
列表项形式 :  <li>........</li>
特点:
与前两个相比 lh 不向右排缩 , 同时与上下文件间也不空一行
4.无序列表 :
形式:
列表形式 :   <ul>.........</ul>
列表项形式 :  <li>........</li>
列表属性 :
符号形式 　　 type = "disc / circle / square"
特点:
与一二个个相比 uh 向右排缩 , 更小
5.说明格式列表 :
形式:
列表形式 :  <dl>.............</dl>
列表项形式 :  <dt>.....</dt>
列表项说明 :   <dd>.......</dd>
特点:
一个列表可以有好几个列表项 , 一个列表项可以有好几个列表项说明
6.有序列表 :
形式:
列表形式 :  <ol>.......</ol>
列表项形式 :   <li>........</li>
列表属性 :
符号样式: 　　type = "1( 数字 ) / a( 小写英文 ) / A( 大写 ) / i( 小写罗马 ) / I( 大写 )"
开始值: 　　start = "N" [N 为最开始的数值 , 且 N 为数字 ]
7.列表项属性 :
样式 : 　　 type = "1 / a / A / i / I / disc / circle / square"
起始值 : 　　 value = " N " [N 为数字 ]

表格设计

1.表格框 :   <table>.......</table>  [ 在此间设计表格 ]
2.表格头部 , 主体 , 尾部 :
可以不用这三个 , 如果用了 thead,tbody,tfoot 要按顺序出现
出现次序是 thead, tbody, tfoot
属性 :
水平对齐方式 :  align = " right( 默认 ) | left | center "
文本垂直对齐方式 :  valign = " top | middle( 默认 ) | bottom "
背景颜色 :  bgcolor = "#000000~ffffff | rgb(0,0,0) | black"
3.表格标题 :
格式 :  <caption>......</caption>
属性 :
水平对齐方式 :  align = " left | right( 默认 ) | center "
垂直对齐方式 :  valign= " top | bottom "
4. 定义行 :   <tr>.....</tr>  [ 要把列定义在行当中 ,<tr><td>....</td><th>....</th></tr>]
5. 定义列 :
形式：
<td>.......</td>
<th>.......</th> [ 与 <td> 相似 , 里面的文本用粗体居中显示 ]
特有属性 :
合并同行表格项 :  colspan = "N"
合并同列表格项 :  rowspan = "N"
表格的背景图片 :  background = " 图片位置 "
6. 表格框属性 :
表格边线厚度 :  border = "N"
表格宽度 :  width = "N | M%" [N 表表格宽度 ,M 表表格宽与窗口比例 ]
表格高度 :  height = "N | M%"
表格项间隔宽度 :  cellspacing = "N"
表格项里文本与边框的距离 :   cellpadding = "N"
表格背景颜色 :  bgcolor = "#000000~ffffff | rgb(0,0,0) | black"
表格的背景图片 :  background = " 图片位置 "
表格的边框颜色 :  bordercolor = "#000000~ffffff | rgb(0,0,0) | black"
表格暗边框的颜色 : bordercolordark = "#000000~ffffff | rgb(0,0,0) | black"
表格亮边框的颜色 : bordercolorlight = "#000000~ffffff | rgb(0,0,0) | black"
表格外框样式 : flame = " above | below | border | box | hsides | lhs | rhs | void | vsides"
above: 显示上边框
below: 显示下边框
box: 显示上下左右边框
border: 显示上下左右边框
lhs: 显示左边框
rhs 显示右边框
hsides: 显示上下边框
vsides: 显示左右边框
void: 不显示边框
表格内框样式 :  rules = " all | cols | rows | none "
cols: 显示列之间边框
rows: 显示行之间边框
all: 显示所有边框
none: 不显示边框
7. 表格项的属性 :
表格项宽度属性 :  width = "N"
表格项高度属性 :  height = "N"
文本水平对齐方式 :  align = " right( 默认 ) | left | center "
文本垂直对齐方式 :  valign = " top | middle( 默认 ) | bottom "
表格项内颜色 :  bgcolor = "#000000~ffffff | rgb(0,0,0) | black"

框架设计
1.框架建立:[ n1,n2, ...  可以为像素点也可以为百分比]
水平框架:  <frameset rows = "n1,n2, ..."><frame ...>....</frameset>
垂直框架:  <frameset cols = "n1,n2, ..."><frame ...>....</frameset>
2.框架属性<frameset>:
边框厚度:   border = "N"
边框颜色:   bordercolor = "#000000~ffffff | rgb(0,0,0) | black"
边框属性:   frameborder = "yes | no"
3.框架项<frame>:
内部链接   src = " 链接地址 "
固定框架项大小 noresize(固定)
框架项是否允许滚动条  scrolling = "yes | no | auto(默认)"
内容水平开始位置  marginheight = "N"
内容垂直开始位置  marginwidth = "N"
框架项名  name = "框架项名"  [超链接打开指定框架项]
4.内镶框架<iframe>:
格式:  <iframe ....></iframe> [将框架镶套到网页任意位置,大小固定]
属性:
对齐方式:  align = " right(默认) | left | center"
框架链接内容:  src = "链接地址"
框架边框是否可见:  frameborder = "0 | 1"
框架高度:  height = "N"
框架宽度:  width = "N"
设置内容与框架上下边框间距:  marginheight = "N"
设置内容与框架左右边框间距:  marginwidth = "N"
镶套框架名称:  name = "名字"
是否显示滚动条:  scrolling = "yes | no | auto(默认)"
设置代替文字:  alt = "代替文字内容"

表单设计
1.表单:
格式:   <form>.......</form>   [允许用户其中输入信息]
属性:
表单传送数据到处理程序的url地址:  action = "传送位置"
表单数据的编码方式:  enctype = "text/plain | application/x-www-form-urlencoded | multipart/form-data"
text/plain:　　使用纯文本形式编码
application/x-www-form-urlencoded:　　默认的编码方式
multipart/form-data:　　使用mine编码
表单的名称:  name = "表单名字"
设置返回信息的显示方式:　　target = _blank | _top | _self(默认) | _parent | _new | 框架名
_blank | _new :　　将链接的内容显示在新开启窗口内
_top:　　将链接的内容显示在同一窗口的上方框架中
_self:　　将返回内容显示在本身所在窗口内
_parent:　　将链接的内容显示在本身所在的主框架中
框架名:　　在网页中找到与框架名相同的框架并在其中打开链接地址
表单的传送方法:  method = "get(默认) | post"
get:　　不安全且不能传送非ascii码的字符
Post:　　此表单信息在表单主体中,字符无长度限制,包括iso10646字符集
2.表单项:
-1-表单输入项---------------------------------------------------------
格式:  <input>.....</input>
共有属性:
表单项的类型: type = "text | password | radio | checkbox | file | hidden | button | reset | submit | image"
文本text: type="text "  name="名称"  size="长度"  maxlength="最大字符串"  value="初值"
密码password : type="password"  name="名称"  size="长度"  maxlength="最大字符串"  value="初值"
单选按钮radio : type="radio"  name="表单项名称"  value="传送内容"  checked
多选按钮checkbox : type="checkbox"  name="表单项名称"  value="传送内容"  checked
创建文件file : type="file"  name="表单项名称"  value="初始值"
表单隐藏域hidden : type="hidden"  name="表单项名称"  value="传送内容"
按钮button : type="button"  name="表单项名称"   value="显示文字"
重置按钮reset : type="reset"  name="表单项名称"   value="显示文字"
提交按钮submit : type="submit"  name="表单项名称"   value="显示文字"
图像image : type="image"    name="表单项名称"   scr="图像地址"
设置表单按下tab键时表单项获取焦点顺序: tabindex = "N"
选有属性:
表单项的名称:  name = "名称"
表单项的初始值:  value = "初始值"
表单项的显示长度:  size = "长度"
输入最大字符数:  maxlength = "N"
是否按钮被指定:  checked
-2-菜单表单项---------------------------------------------------------
菜单栏:
格式:   <select>.....</select>
属性:
菜单名:  name = "表单项名称"
显示一个或n(n大于4)个:  size = "N"
设置菜单为多选:  multiple
设置表单获取焦点顺序:   tabindex = "N"
菜单项:
格式: <option>......</option>
属性:
选中后传送内容: value = "传送内容"
默认选项:  selected
-3-文本表单项---------------------------------------------------------
格式:  <textarea ...>....</textarea>
属性:
设置文本域宽度:  cols = "N"
设置文本表单项名称:  name = "表单项名称"
设置文本域高度:  rows = "N"
设置文本自动换行: 　 wrap = " off | virtual | soft | physical | hard "
off  :无自动换行
virtual | soft :自动换行,传送时数据只在有输入回车才显示换行
physical | hard: 自动换行,按自动换行效果传送
设置表单获取焦点顺序:   tabindex = "N"
-4-按钮表单项---------------------------------------------------------
格式:<button>按钮上的文本显示</button>
属性:
按钮样式:  type="button/reset/submit"
按钮名称:  name="按钮名称"
禁止使用此按钮:  disabled="disabled"
初始值:  value="按钮的初始值"
3.标题框:
格式:<fieldset><legend>标题框名</legend>.......</fieldset>
<legend>属性:
水平对齐方式:　　 align= " right(默认) | left | center "
垂直对齐方式: 　　valign = " top(默认) | bottom "
标题框可以框住表单也可以框住表单中几个表单项,标题框名只有一个

链接设计
1.文件路径表示法:
绝对路径:  file : /// 磁盘名称 |/ 路径 / 文件名
相对路径:  file: /// 部分路径 / 文件名  [以当前所在文件夹为基准]
2.文字超链接格式:
<a href=" 据对路径 | 相对路径 | 万维网地址 | #锚位置 ">.......</a>
<a href="(据对路径 | 相对路径 | 万维网地址)#锚位置 ">.......</a>
3.文字超链接属性:
标明页内锚地址:  name = " 锚名称 "
链接在何处显示:　　target = "_blank | _top | _self(默认) | _parent | _new | 框架名"
_blank　　浏览器总在一个新打开、未命名的窗口中载入目标文档
_self　　目标文档载入并显示在相同框架或者窗口中作为源文档
_parent　　当窗口无框架时与_self一样,有则与_top一样
_top　　这个目标使得文档载入包含这个超链接的窗口
_new 　　开启个新视窗显示链接窗口]
框架名　　在网页中找到与框架名相同的框架并在其中打开链接地址]
4.超链接颜色设定:[下述属性是放在<body>标签内的]
未链接过的字体颜色     link = "#000000~ffffff | rgb(0,0,0) | black"
已链接过的字体颜色     vlink = "#000000~ffffff | rgb(0,0,0) | black"
鼠标按在链接上字体颜色 　　alink = "#000000~ffffff | rgb(0,0,0) | black"
5.图形超链接:
单图单链接  <a href=" ..."><img src="...."></a>
单图多链接:
设置图形地图:　　<map name=" 地图名 "><area...><area...>...</map>
设置地图区域:　　<area shape = " circle | rect | poly" coords = "坐标" href = ".....">
rect (矩形):　　coords = X1,Y1,X2,Y2,
circle(圆):　　coords = X1,Y1,r
poly(多边形):　　coords = X1,Y1,X2,Y2...
把地图信息添加到图形上:　　<img src="..." usemap = "#地图名" >

插图 | 影像 | 音乐设计
1.插入图形:
格式  <img src="文件绝对或相对路径" .... >
属性:
图形显示宽度  width = "N | M%"
图形显示高度  height = "N | M%"
图形显示初始的水平位置  hspace = "N"
图形显示初始的垂直位置  vspace = "N"
图形外框的厚度   border = "N"
图形与相邻文字的对齐方式  align = "top | bottom | middle | left | right | texttop | baseline"
游览器图形自动载入功能关闭时,文字取代  alt = " 取代文字 "
2.插入影像:
the one
格式  <embed src = "影像文件地址 | 音乐文件地址">
属性
播放影像文件的宽度   width = "N"
播放影像文件的高度   height = "N"
是否自动播放        autostart = "true | no(默认)"
是否无限循环     loop = "no(默认) | true"
播放多面体时是否隐藏播放器 hidden = "true | false(默认)"
the two
格式 <img dynsrc=" 影像文件地址 ">
属性:
影像宽度    width = "N"
影像高度    height= "N"
循环次数    loop = "N"  [N为-1或infinite时为无限次]
二次播放时间   loopdelay = "N" [N为千分之一秒]
播放控制元件是否出现  controls(出现)
3.背景音乐:
格式:  <bgsound src="音乐文件地址"  .... >
属性:
循环次数loop = "N " [N为infinite表无数次]

Div
作用
通过 div 布局网页, CSS 设置其属性,完全符合内容与表现分离.
div的css属性
float 属性
作用:
对前面的 div 元素设置浮动属性后,当前面的 div 元素留有足够的空白宽度时,后面的 div 元素将自动浮上来,和前面的div元素并列于一行.
注意:
仅对后面紧跟的后面第一个 div 有效
属性值:
left:　　块状元素将向左浮动
right:　　块状元素将向右浮动
none:　　块状元素不会浮动,这也是块状元素的默认值
inherit:　　继承属性,代表继承父容器的属性.
clear属性
作用:
为了避免当某个块状元素由于前一个设置浮动属性而并列时,可设置相应的 clear 属性
属性值:
none:　　默认值为none
left:　　如果上个 div 浮动属性为 left,那么它不浮动上去
right:　　如果上个 div 浮动属性为 right,那么它不浮动上去
both: 无论上个 div 是浮属性是什么,它都不浮动上去
特点
使 n 个 div 并列于一行的前提是,这一行有足够的宽度容纳 n 个 div 的宽度
不过一个 div 标签占据一行,块状元素有一个很重要的 “float” 属性,可以使多个块状元素并列于一行
块状元素（包括div）浮动的范围由其被包含的父容器所决定.

参考链接
Html概述部分:
Html 简介: http://www.w3school.com.cn/html/html_intro.asp
Html 入门: http://www.w3school.com.cn/html/html_getstarted.asp
基本的 Html 标签: http://www.w3school.com.cn/html/html_primary.asp
Html 的属性: http://www.w3school.com.cn/html/html_attributes.asp
Html 颜色: http://www.w3school.com.cn/html/html_colors.asp
Html 颜色值: http://www.w3school.com.cn/html/html_colorsfull.asp
Html 颜色名: http://www.w3school.com.cn/html/html_colornames.asp
Html 字符集: http://www.w3school.com.cn/tags/html_ref_charactersets.asp
Html ASCII 参考手册: http://www.w3school.com.cn/tags/html_ref_ascii.asp
Html 头部:
Html 头部: http://www.w3school.com.cn/html/html_head.asp
Html 元信息: http://www.w3school.com.cn/html/html_meta.asp
Html 主体:
Html 元素: http://www.w3school.com.cn/html/html_elements.asp
Html 背景: http://www.w3school.com.cn/html/html_backgrounds.asp
排版设计:
Html 标题: http://www.w3school.com.cn/html/html_headings.asp
Html 段落: http://www.w3school.com.cn/html/html_paragraphs.asp
Html 文本格式化: http://www.w3school.com.cn/html/html_formatting.asp
Html 字体: http://www.w3school.com.cn/html/html_fonts.asp
Html 字符实体: http://www.w3school.com.cn/html/html_entities.asp
Html 4.01 符号实体: http://www.w3school.com.cn/tags/html_ref_symbols.html
列表:
Html 列表: http://www.w3school.com.cn/html/html_lists.asp
表格:
Html 表格: http://www.w3school.com.cn/html/html_tables.asp
框架:
Html 框架: http://www.w3school.com.cn/html/html_frames.asp
表单:
Html 表单和输入: http://www.w3school.com.cn/html/html_forms.asp
链接:
Html 链接: http://www.w3school.com.cn/html/html_links.asp
Html URL（统一资源定位器）: http://www.w3school.com.cn/html/html_url.asp
图像,影像,音乐:
Html 图像: http://www.w3school.com.cn/html/html_images.asp

[返回目录]