首页 > 代码库 > HTML标签详解
HTML标签详解
HTML标签
1、<!DOCTYPE>
声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
<!DOCTYPEhtml
PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2、<a> 标签可定义锚
| 属性 | 取值 | 描述 |
| href | url | 连接目标的url |
| name | section_name | 命令一个锚。使用此属性在文档中创建某个书签。在XHTML的未来版本中，name属性会被id属性取代 |
| target | _blank _parent _self _top | 在何处打开目标 URL。 _blank：在一个新的未命名的窗口载入文档 _self：在相同的框架或窗口中载入目标文档 _parent：把文档载入父窗口或包含了超链接引用的框架的框架集 _top：把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架 |
一个锚有两种用法：
通过使用 href 属性，创建一个到另外一个文档的链接
通过使用 name 或 id 属性，创建一个文档内部的书签
(1)创建锚
<ahref="http://www.mamicode.com/#C4">锚</a>
点击上面的连接，会定位到
<aid="C4">Chapter 4</a>或者<a name="C4">Chapter4</a>的文件
(2)创建电子邮件
<aref="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
3、<abbr>
表示一个缩写形式，比如 "Inc."、"etc."。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
注释：在某些浏览器中，当您把鼠标移至缩略词语上时，title 属性可被用来展示表达的完整版本。
4、<acronym>
定义只取首字母缩写，比如 "NATO"。通过对只取首字母缩写进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
5、<address>
定义一个地址（比如电子邮件地址）。您应当使用它来定义地址、签名或者文档的作者身份
6、<area> 映射区域
定义图像映射中的某个区域
| 属性 | 取值 | 描述 | ||
| coords | 坐标值 | 定义可点击区域的坐标 | ||
| href | URL | 定义此区域的目标URL | ||
|
| 从图像映射排除某个区域。 | ||
| shape | rect rectangle circ circle poly polygon | 定义区域的形状 |
注：coords 属性
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
下面列出了每种形状的适当值：
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），z 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0"是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如
<map name="map">
<area shape="rect" coords="75,75,99,99"nohref="http://www.mamicode.com/nohref">
<area shape="circ" coords="50,50,25"nohref="http://www.mamicode.com/nohref">
</map>
注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
案例：
<img src="http://www.mamicode.com/eg_planets.jpg" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
hrefhttp://www.mamicode.com/=" "
target ="_blank"
alt="Venus" />
</map>
注释：img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
7、字体样式元素
它们不被赞成使用,通过使用样式表会取得更加多样的效果。
<tt> 呈现类似打字机或者等宽的文本效果。
<i> 显示斜体文本效果。
<b> 呈现粗体文本效果。
<big> 呈现大号字体效果。
<small> 呈现小号字体效果。
<sub> 标签可定义下标文本
<sup> 可定义上标文本
8、base 元素：基准的url
可规定页面中所有链接的基准 URL。
通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。
使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。
| 属性 | 取值 | 描述 |
| href | URL | 规定页面中所有链接的基准URL |
| traget | …… | …… |
注释：<base> 标签必须位于 head 元素内部。
案例：
head中
<base target="_blank"href="http://www.mamicode.com/img/">href可以是绝对的url或者相对的url
body中
<img src="http://www.mamicode.com/520.jpg"/>
实际是这样的代码
<img src="http://www.mamicode.com/img/520.jpg"/>
9、bdo 元素：文本方向
可覆盖默认的文本方向。
| 属性 | 取值 | 描述 |
| dir | ltr rtl | 定义文件的方向 |
案例：逆序输出
<bdo dir="rtl">Here issome Hebrew text</bdo>
10、<blockquote> 标签
可定义一个块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。
11、body标签
body中的alink(规定文档中活动链接（activelink）的的颜色)、background(用作背景的图像)、bgcolor(文档的背景颜色)、link(文档中所有链接的颜色)、text(文档中所有文本的颜色)、vlink(文档中所有被访链接的颜色)这些属性不推荐使用，推荐使用样式表中的属性。
12、 <caption> 标签
caption 元素可定义一个表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
案例：
<table>
<caption>我的标题</caption>
<tr>
<td>100</td>
</tr>
</table>
13、<col> 标签：表格列的属性
为表格中一个或多个列定义属性值。您只能在表格或 colgroup 中使用此元素。
如果您希望在 colgroup 内部为每个列规定不同的属性值时，请使用此元素。如果没有 col 元素，列会从 colgroup 那里继承所有的属性值。
案例
<table border="1">
<colgroup span="3">
<col width="20"></col>
<col width="50"></col>
<col width="80"></col>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
| 属性 | 取值 | 描述 |
| align | right left center justify char | 在列中定义单元格中内容的水平排列方式 |
| char | character | 规定根据那种字符来进行文本对奇。仅当align=char使用 |
| span | number | 定义<col>应当横跨的列数 |
| valign | top middle bottom | 在列中定义单元格中内容的垂直排列方式 |
| width |
| 定义列的宽度 |
创建一个有 5 列的<colgroup>。我们分别将第一列和最后一列靠左和靠右对齐，中间的三列居中。
<colgroup>
<col align="left" />
<col align="center" span="3" />
<col align="right" />
</colgroup>
14、<dl> ：列表
标签定义了定义列表。
15、<dt>
定义列表中的项目（即术语部分）。
16、<dd>
可在定义列表中定义条目的定义部分。
案例
<dl>
<dt>Coffee</dt>
<dd>Black hot drink1</dd>
<dd>Black hot drink2</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
输出：
Coffee
Blackhot drink1
Blackhot drink2
Milk
Whitecold drink
17、<del> ：删除线
定义文档中已被删除的文本
18、<ins>：下划线
来描述文档中的更新和修正。
19、fieldset 元素。表单打包
<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。<fieldset> 标签没有必需的或唯一的属性。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素
legend 元素可为 fieldset 定义一个标题
案例
<fieldset>
<legend>健康信息：</legend>
<form>
<label>身高：<inputtype="text" /></label>
<label>体重：<inputtype="text" /></label>
</form>
</fieldset>
20、form标签
form 元素可为用户输入创建表单。
表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。
| 属性 | 取值 | 描述 |
| action | URL | 当确认按钮按下时，接受和处理表单数据的url |
| method
| get post | 用于向action URL传递数据的HTTP方法，默认是get |
| accept-charset | 字符集名称列表 | 一个服务器可接受的字符集的列表(用逗号分隔) |
| enctype | MIME类型 | 用来编码表单内容的MIME类型 |
| name | 表单名称 | 定义表单的唯一名称 |
| target |
| 在何处打开目标URL |
发送邮件表单案例
<formaction="http:///someone@w3school.com.cn" method="post"enctype="text/plain">
<input type="text" name="name"value="http://www.mamicode.com/yourname" size="20">
<input type="submit"value="http://www.mamicode.com/发送">
<input type="reset"value="http://www.mamicode.com/重置">
</form>
21、<frameset>
在 <frameset> 中定义一个框架
注释：如果您希望验证某个包含框架的页面，请确保DTD 被设置为 "Frameset DTD"。阅读更多有关 XHTML 验证的内容。
重要事项：您不能与<frameset></frameset> 标签一起使用 <body></body>标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！
| 属性 | 取值 | 描述 |
| frameborder | 0 1 | 是否显示框架周围的边框 |
| longdesc | url | 此框架内容的长的url，可为那些不支持框架的浏览器使用此属性 |
| marginheight | pixels | 定义框架中的顶部和底部的边距 |
| marginwidth | pixels | 定义框架中左侧和右侧边距 |
| name | frame_name | 为框架定义唯一的名称(以便在脚本中使用) |
| noresize | noresize | 用户无法对框架调整尺寸 |
| scrolling | yes no atuo | 确定滚动条的行为 |
| src | url | 定义显示框架中的文件的url |
案例：
水平框架
<frameset cols="35%,30%,35%"noresize="noresize" frameborder="0">
<frame src="http://www.mamicode.com/a.html">
<frame src="http://www.mamicode.com/b.html">
<frame src="http://www.mamicode.com/c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
垂直框架
<framesetrows="35%,30%,35%" noresize="noresize"frameborder="0">
<frame src="http://www.mamicode.com/a.html">
<frame src="http://www.mamicode.com/b.html">
<frame src="http://www.mamicode.com/c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
混合框架
<html>
<framesetrows="50%,50%">
<frame src="http://www.mamicode.com/a.html">
<framesetcols="25%,75%">
<frame src="http://www.mamicode.com/b.html">
<frame src="http://www.mamicode.com/c.html">
</frameset>
</html>
导航框架
<html>
<frameset cols="120,*">
<frame src=http://www.mamicode.com/"content.html">
<frame src="http://www.mamicode.com/a.html" name="showframe">
</frameset>
</html>
content.html
<html>
<body>
<a href ="a.html" target ="showframe">Framea</a><br />
<a href ="http://www.mamicode.com/b.html" target ="showframe">Frameb</a><br />
<a href ="http://www.mamicode.com/c.html" target ="showframe">Framec</a>
</body>
</html>
带锚的框架
<frame src="http://www.mamicode.com/link.html#C10">
22 、frameset 框架
可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性
| 属性 | 取值 | 描述 |
| cols | pixels % * | 定义框架集中列的数目和尺寸 |
| rows | pixels % * | 定义框架集中行的数目和尺寸 |
cols和rows作用和用法
<frameset> 标签有一个必需的属性：要么是 rows，要么是 cols，这取决于您的选择，它们定义了文档窗口中框架或嵌套的框架集的行或列的大小及数目。
这两个属性都接受用引号括起来并用逗号分开的值列表，这些数值指定了框架的绝对（像素点）或相对（百分比或其余空间）宽度（对列而言），或者绝对或相对高度（对行而言）。这些属性值的数目决定了浏览器将会在文档窗口中显示多少行或列的框架。
与表格一样，浏览器在显示时会尽可能接近给定的框架集尺寸。但是，浏览器不会为了能够容纳下超出边沿的框架集而扩展文档窗口的边界，也不会在指定的框架没有填满整个窗口时用空白区域来填满窗口。相反，浏览器会根据一个框架在行和列中相对于其他框架的大小来分配空间，这样就能够填满整个文档窗口了。（注意到一个主框架文档中没有滚动条了吗？）
23、head 元素
可包含关于文档的信息。浏览器不会向用户显示这些头部信息（"headinformation"）。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>,<style>, 以及 <title>。
字符编码：
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
描述：
<meta name="description" content="HTML examples">
关键字：
<meta name="keywords"content="HTML,DHTML, CSS">
重定向：5秒后
<meta http-equiv="Refresh" content="5;url=../index.htm"tppabs="http://www.w3school.com.cn/">
24、<hr> 标签可插入一个水平线
| 属性 | 取值 | 描述 |
| align | center left right | 规定水平线的排列 |
| noshade | noshade | 设为TRUE：水平线呈现纯色(2D效果) 设为FALSE：水平线呈现双色凹槽(3D效果) |
| size | pixels % | 水平线的厚度(高度) |
| width | pixels % | 水平线的宽度 |
25、iframe 元素：内联框架
创建一个包含另外一个文档的内联框架
比frameset多一个align属性。
案例
<iframesrc="http://www.mamicode.com/img/520.jpg" ></iframe>
26、img元素
如果您在 Firefox 中使用 alt 属性，那么当鼠标悬浮在图片或图像地图时不会像其他的浏览器那样出现提示文本。可以title属性提示文本。
| 属性 | 取值 | 描述 |
| alt | text | 定义图像的简短描述 |
| src | URL | 显示图像的url |
| align | top bottom middle left right | 规定如何根据周围的文本排列图像 |
| border | pixels | 图像周围的边框 |
| height | pixels % | 图像的高度 |
| hspace | pixels | 图片左侧和右侧的空白 |
| ismap | URL | 定义作为服务器端图片映射的一幅图像 |
| longdesc | url | 包含长的图像描述文档的url |
| usemap | url | 作为客户端图像映射的一幅图像 |
| vspace | pixels | 图像顶部和底部的空白 |
| width | pixels % | 图像的宽度 |
27、<input> 标签
<input>标签可定义输入域的开始，在其中用户可输入数据。
| 属性 | 取值 | 描述 |
| type | button checkbox file hidden imgage password radio reset submit text |
指定input元素的类型，默认是text |
| name | fileld_name | 用于此input元素的唯一名称 |
| accept | list_of_mime_types | 一个逗号分割的MIME类型列表，指示文件传输的MIME类型。注释：仅与type=”file”配合使用 |
| align | left right top texttop middle baseline bottom absbottom |
定义图像之后的文本的排列，仅与type=image配合使用 |
| alt | text | 定义图像的替代文本，仅与type=imgae配合使用 |
| checked | checked | 此input元素首次加载时应当被选中。请于tpye=checkbox及type=radio配合使用 |
| disabled | disabled | 当input元素首次加载时，禁用此元素这样用户就无法在其中写文本，或选定它。 注释：不能与 type="hidden" 一同使用。 |
| maxlength | number | 定于在某个文本域中所允许的最大字符数。仅与type=text配合使用 |
| readonly | readonly | 指示此域的值不能被修改，仅与type=text配合使用 |
| size | number_of_char | 定义input元素的尺寸，不能与input=hidden一同使用 |
| src | url | 定义显示图像的url，仅与type=image配合使用 |
| value | value | 对于按钮、重置按钮和确认按钮：定义按钮上的文本。 对于图像按钮：定义传递向某个脚本的此域的符号结果 对于复选框和单选按钮：定义 input 元素被点击时的结果。 对于隐藏域、密码域以及文本域：定义元素的默认值。 注释：不能与 type="file" 一同使用。 注释：与 type="checkbox" 和 type="radio" 一同使用时，此元素是必需的。 |
28、<label> 标签
向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
显式：
<labelfor="SSN">SocialSecurity Number:</label>
<inputtype="text" name="SocSecNum" id="SSn" />
隐式：
<label>Dateof Birth: <input type="text" name="DofB"/></label>
29、<ol> 标签定义了有序列表。
注释：请使用样式来定义列表的类型。
| 属性 | 取值 | 描述 |
| compact | compact_rendering | 不赞成使用，使用样式表 |
| start | start_on_number | 规定起始的数字 |
| type | A a I i 1 | 规定列表的类型 |
30、<ul> 标签定义了无序列表。
31、<li> 标签定义了列表项目。
<li>标签可用在有序列表(<ol>) 和无序列表 (<ul>) 中
注释：请使用样式来定义列表的类型。
| 属性 | 取值 | 描述 |
| type | A（ol） a（ol） I（ol） i（ol） disc（ul） square（ul） circle（ul） | 规定列表的类型 |
| value | number_of_list_item |
|
案例
<h4>数字有序列表：</h4>
<oltype="A" start="6">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>一个嵌套无序列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
32、<meta> 元素：元信息
提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
| 属性 | 取值 | 描述 |
| content | some_text | 定义与http_equiv或name属性相关的元信息 |
| http_equiv | content_type expires refresh set_cookie | 把content属性关联到hhtp头部 |
| name | author description keywords | 把content属性关联到一个名称 |
| scheme | some_text | 定义用于content属性值的格式 |
name 属性
name属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords"是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。
类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：
<metaname="keywords" content="HTML,ASP,PHP,SQL"
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
http-equiv 属性
http-equiv属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。
当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。
使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<metahttp-equiv="charset" content="iso-8859-1">
<metahttp-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
content-type:text/html
charset:iso-8859-1
expires:31Dec 2007
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。
content 属性
content属性提供了名称/值对中的值。该值可以是任何有效的字符串。
content属性始终要和name 属性或 http-equiv 属性一起使用。
scheme 属性
scheme属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义
33、noframes ：不支持框架的浏览器
可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。
注释：如果浏览器有能力处理框架，就不会显示出 frameset 元素中的文本。
重要事项：如果您希望 frameset 添加 <noframes> 标签，就必须报其中的文本包装在 <body></body> 标签中！
34、script标签
定义一段诸如javascript的脚本
35、<noscript> 标签
noscript元素用来定义在脚本未被执行时的替代内容（文本）。
此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。
注释：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。
注释：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！
案例
<scripttype="text/javascript">
<!--
document.write("如果显示了这段文字，那么您的浏览器支持JavaScript！")
//-->
</script>
<noscript>NoJavaScript support!</noscript>
36、object：潜入对象
定义个潜入对象。可以向页面添加多媒体。
注释：object 元素可位于在 head 元素或 body 元素内部。<object> 与 </object> 之间的文本是替换文本，针对不支持此标签的浏览器。<param>标签可定义用于对象的 run-time 设置。
注释：至于图像，请使用 <img> 标签代替 <object> 标签
| 属性 | 取值 | 描述 |
| align | left right top bottom
| 定义围绕该对象的文本对齐方式 |
| archive | URL | 一个空格分隔的指向档案文件的 URL 列表。这些档案文件包含了与对象相关的资源。有关 archive 属性的详细信息 |
| border | pixels | 定义对象周围的边框 |
| classid | class ID | 定义嵌入 Windows Registry 中或某个 URL 中的类的 ID 值，此属性可用来指定浏览器中包含的对象的位置，通常是一个 Java 类。 有关 classid 属性的详细信息 |
| codebase | URL | 定义在何处可找到对象所需的代码，提供一个基准 URL。 有关 codebase 属性的详细信息。
|
| codetype | MIME type | 通过 classid 属性所引用的代码的 MIME 类型。 有关 codetype 属性的详细信息。
|
| data | URL | 定义引用对象数据的 URL。如果有需要对象处理的数据文件,要用 data 属性来指定这些数据文件。
|
| declare | declare | 可定义此对象仅可被声明，但不能被创建或例示，直到此对象得到应用为止。
|
| height | pixels | 定义对象的高度 |
| hspace | pixels | 定义对象周围水平方向的空白 |
| name | unique_name | 为对象定义唯一的名称（以便在脚本中使用） |
| standby | text | 定义当对象正在加载时所显示的文本 |
| type | MIME_type | 定义被规定在 data 属性中指定的文件中出现的数据的 MIME 类型。 |
| usemap | URL | 规定与对象一同使用的客户端图像映射的 URL |
| vspace | pixels | 定义对象的垂直方向的空白 |
| width | pixels | 定义对象的宽度 |
37、select 元素可创建单选或多选菜单。
当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
| 属性 | 值 | 描述 |
| disabled | disabled | 当设置此属性时，会禁用该菜单 |
| multiple | multiple | 可以同时选定多个项目 |
| name | unique_naem | 下拉列表的唯一描述符 |
| size | number | 定义菜单中可见项目的数目 |
38、<optgroup> 标签：定义选项组
此元素允许您组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易
| 属性 | 取值 | 描述 |
| label | text-lable | 定义选项组的标记 |
| disabled | disabled | 禁用此选项组 |
39、option 元素：下拉列表中的一个选项（一个条目）。
浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。
注释：<option> 标签可以在不带有任何属性的情况下使用，但是您通常需要使用value 属性，此属性会指示出被送往服务器的内容。
注释：请与 select 元素配合使用此标签，否则这个标签是没有意义的。
| 属性 | 取值 | 描述 |
| disabled | disabled | 首次加载时被禁用 |
| lable | text | 定义当使用optgroup时所使用的标注 |
| selected | selected | 在首次显示在列表中时表现为选中状态 |
| value | text | 送往服务器的选项值 |
案例:
<select>
<optgroup label="SwedishCars">
<option value ="http://www.mamicode.com/volvo"selected="selected">Volvo</option>
<option value="http://www.mamicode.com/saab">Saab</option>
</optgroup>
<optgroup label="GermanCars" disabled="disabled">
<option value="http://www.mamicode.com/mercedes">Mercedes</option>
<option value="http://www.mamicode.com/audi">Audi</option>
</optgroup>
</select>
40、pre 元素：定义预格式化的文本。
被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre>标签的一个常见应用就是用来表示计算机的源代码。
制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
41、span：行内元素
<span> 标签被用来组合文档中的行内元素。
提示和注释：
提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。
注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
42、<table> 标签：定义表格。
在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。
| 属性 | 取值 | 描述 |
| align | left right center | 排列表格，不赞成使用，使用样式表取代 |
| bgcolor | rgb | 规定表格的背景颜色，不赞成使用，使用样式表 |
| border | pixels | 规定表格边框的宽度 可以通过border=‘0’来显示无边框的表格 |
| cellpadding | pixels % | 规定单元边沿与其内容之间的空白 |
| cellspacing | pixels % | 规定单元格之间的空白 |
| frame | void，above，bellow， hsides，lhs，rhs， vsides，box，border | 规定表格周围的那一侧的边框是可见，要与border配合使用 |
| rules | none，groups，rows cols，all | 规定水平或垂直的分界线 必须要与border属性配合使用 |
| summary | text | 为语音合成/非视觉浏览器规定表格的摘要 |
| width | pixels % | 规定表格的宽度 |
案例：
带标题的表格：
<tableborder="6">
<caption>我的标题</caption>
<tr>
<td>100</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
跨列：colspan="2"
跨行：rowspan="2"
43、<tbody> 标签：表格主体（正文）。
使用 <tbody> 标签，可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。
虽然您可能想包括一个，甚至会在表格中包括两个或更多个 <tbody> 标签，但是我们建议最好在表格中没有 <tbody> 标签。
在 <tbody> 标签中，只有 <tr> 标签可以定义表格行。并且一旦定义，一个 <tbody> 标签就是表格中的一个独立的部分。例如不能从一个 <tbody> 跨越到另一个 <tbody> 中。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上
HTML 事件
1、表单事件（仅在表单元素中有效）
| 属性 | 值 | 描述 |
| onchange | 脚本 | 当元素改变时执行 |
| onsubmit | 脚本 | 当表单被提交时执行 |
| onreset | 脚本 | 当表单被重置时执行 |
| onselect | 脚本 | 当元素被选取时执行 |
| onblur | 脚本 | 当元素失去焦点执行 |
| onfocus | 脚本 | 当元素获得焦点执行 |
2、键盘事件
| 属性 | 值 | 描述 |
| onkeydown | 脚本 | 当键盘被按下时执行 |
| onkeypress | 脚本 | 当键盘被按下后又松开时执行 |
| onkeyup | 脚本 | 当键盘被松开时执行脚本 |
3、鼠标事件
| 属性 | 值 | 描述 |
| onclick | 脚本 | 当鼠标被单击时执行 |
| ondblclick | 脚本 | 当鼠标被双击时执行 |
| onmousedown | 脚本 | 当鼠标按钮被按下时执行 |
| onmousemove | 脚本 | 当鼠标指针移动时执行脚本 |
| onmouseout | 脚本 | 当鼠标指针移出某元素时执行脚本 |
| onmouseover | 脚本 | 当鼠标指针悬停于某元素之上时执行脚本 |
| onmouseup | 脚本 | 当鼠标按钮被松开时执行脚本 |
HTTP消息状态
1xx: 信息
| 消息 | 描述 |
| 100 continue | 服务器仅接受到部分请求，但是一旦服务器并没有拒绝该请求，客户端应继续发送其余的请求 |
| 101 switching protocols | 服务器转换协议：服务器将遵从客户的请求转换到另外一种协议 |
2xx: 成功
| 消息 | 描述 |
| 200 ok | 请求成功(其后对GET和POST请求的应答文档 ) |
| 201 create | 请求被创建成功，同时新的资源被创建 |
| 202 accepted | 供处理的请求已被接受，但是处理未完成 |
| 203 non-authoritative information | 文档已经正常地返回，但一些应答可能不正确，因为使用的是文档的拷贝 |
| 204 no content | 新页面，而servlet可以确定用户文档足够新，这个状态代码是很有用的 |
| 205reset content | 没有想新文档，但浏览器应该重置它所显示的内容，用来强制浏览器清除表单输入内容 |
| 206 partial content | 客户发送一个带有Range头的get请求，服务器完成了它 |
3xx: 重定向
| 消息 | 描述 |
| 300 multiple choices | 多重选择，链接列表，用户可以选择某链接到达目的地。最多允许五个地址 |
| 301 moved permanently | 所请求的页面已经转移 至新的url |
| 302 found | 所请求的页面已经临时转移至新的url |
| 303 see other | 所请求的页面可在别的url下找到 |
| 304 not modified | 未按预期修改文档，客户端有缓冲的文档并发出一个条件性的请求(一般是提供if-modified-since头表示客户只想指定日期更新的文档)。服务器告诉客户，原来缓冲的文档还可以继续使用 |
4xx: 客户端错误
| 消息: | 描述: |
| 400 Bad Request | 服务器未能理解请求。 |
| 401 Unauthorized | 被请求的页面需要用户名和密码。 |
| 402 Payment Required | 此代码尚无法使用。 |
| 403 Forbidden | 对被请求页面的访问被禁止。 |
| 404 Not Found | 服务器无法找到被请求的页面。 |
| 405 Method Not Allowed | 请求中指定的方法不被允许。 |
| 406 Not Acceptable | 服务器生成的响应无法被客户端所接受。 |
| 408 Request Timeout | 请求超出了服务器的等待时间。 |
5xx: 服务器错误
| 消息: | 描述: |
| 500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
| 501 Not Implemented | 请求未完成。服务器不支持所请求的功能。 |
| 502 Bad Gateway | 请求未完成。服务器从上游服务器收到一个无效的响应。 |
| 503 Service Unavailable | 请求未完成。服务器临时过载或当机。 |
| 504 Gateway Timeout | 网关超时。 |
| 505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP协议版本。 |