html

程序员文章站 2022-03-07 18:12:00

...

1.注释

<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>

属性:

注意:
注释并不是不起作用,而是隐藏,所以一些php代码仍然会起作用

2.文档声明

<!DOCTYPE HTML>

属性:

注意:

声明必须是 HTML 文档的第一行，位于标签之前。
文档声明不区分大小写

3.超链接

<!--同一个页面不同部分的跳转，锚点的写法-->
目标元素：<p id="test"></p>     锚点超链接：<a href="#test"></a>
<!--不同页面跳转，同时存在锚点-->
目标元素：a.html页面的<div id="test"/>   锚点超链接：<a href="a.html#test"></a>
<!--不同页面带参数跳转，同时存在锚点-->
目标元素：a.php?p=abc页面的<div id="test"/>   锚点超链接：<a href="a.php?p=abc#test"></a>

点击超链接调用 JavaScript 函数，一般人都用： <a href="javascript:function();">

但这有个缺点，就是点击链接后，页面上的GIF动画将静止。

试看如下代码： 
<script type="text/javascript"> 
  <!-- 
  function Foo() 
  { 
      //do something 
  } 
  //--> 
  </script> 
  <img src="logo.gif" alt="GIF 动画" /> 
  <a href="javascript:Foo();">使 GIF 动画静止的链接</a>

解决方法探讨：
<a onclick="javascript:Foo();">链接</a>
此时不影响动画显示，但鼠标移上去后，鼠标及超链接样式不发生变化，虽然可以利用样式表来改变鼠标及超链接样式，但毕竟有些繁琐，况且这种思路也不好。

再考查如下代码： 
<a onclick="javascript:Foo();" href="#">链接</a>
我们可以发现，虽然点击链接后不影响动画显示，但页面总是滚到最上面，这种效果也不是我们想要的。

最终解决方法： 
<a onclick="javascript:Foo();return false;" href="#">不影响 GIF 的链接</a>

如果不考虑GIF图片的问题，以上方法均可。

属性:

href = 'www.i-joker.com' 链接的目标 URL。
target='_blank'; _self ; _parent ; top target 属性规定在何处打开被链接文档。
1.在框架中打开窗口

<frameset cols="100,*">
  <frame src="toc.html">
  <frame src="pref.html" name="view_frame">
</frameset>

toc.html

<h3>Table of Contents</h3>
<ul>
  <li><a href="pref.html" target="view_frame">Preface</a></li>
  <li><a href="chap1.html" target="view_frame">Chapter 1</a></li>
  <li><a href="chap2.html" target="view_frame">Chapter 2</a></li>
  <li><a href="chap3.html" target="view_frame">Chapter 3</a></li>
</ul>

hreflang = 'zh' ; en 规定目标 URL 的基准语言，主流的浏览器几乎都不支持该属性。
1. 基准语言参考
media = 'handheld and (min-width:500px)' ; 'projection' ; 'print' ; 'tv'该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。
type='text/html' type 属性规定目标文档的 MIME 类型。
download='filename'规定被下载的超链接目标,只有 Firefox 和 Chrome 支持 download 属性。
rel='external'规定当前文档与目标 URL 之间的关系。

注意:

4.缩写

The <abbr title="People's *">PRC</abbr>

属性:

注意:
IE 6 或更早版本的 IE 浏览器不支持 <abbr> 标签。

5.联系信息

定义文档作者或拥有者的联系信息。

<address>
Written by W3School.com.cn<br />
<a href="mailto:aaa@qq.com">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

属性:

注意:

如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者或拥有者的联系信息。
不应该使用 <address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。
通常的做法是将<address>元素添加到网页的头部或底部,比如 <footer> 元素中。

6.图像映射

定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id="planetmap">

    <!--
    矩形：shape="rectangle"，coords="x1,y1,x2,y2"
    第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
    -->
     <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />

     <!--
     圆形：shape="circle"，coords="x,y,z"
     这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
     -->
     <area shape ="circ" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />

     <!--
     多边形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."
     每一对 "x,y" 坐标都定义了多边形的一个顶点,定义三角形至少需要三组坐标；高纬多边形则需要更多数量   的顶点。

     多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
     -->
     <area shape ="poly" coords ="180,139,14,15" nohref="nohref" alt="Venus" />

</map>

属性:

href
alt
coords规定区域的坐标
shape = 'rect ; rectangle ; circ ; circle ; poly ; polygon'规定区域的形状。
shape 属性的值会影响浏览器对 coords 属性的解释。如果未使用 shape 属性，那么会假设使用值 default。依照标准，default 意味着该区域覆盖整个图像。在实际中，浏览器默认使用矩形区域，并期望能找到 4 个 coords 值。如果没有指定形状，而且在标签中也没有包括 4 个坐标，那么浏览器会忽略整个区域。

可以识别 shape 属性的 default 值的浏览器，可以提供一个包括全部热点的区域，以用于在超过其他热点定义的范围之外单击的情况。由于区域在标签中是采用“先来先得”的顺序，所有必须将默认区域放置在后面。否则，默认区域会覆盖其他的图像映射中出现的所有区域。
nohref='nohref'nohref 属性规定该区域没有相关的链接。
target
hreflang
media
rel
type

注意:
1. <area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
2. <img> 标签中的 usemap 属性与 <map> 元素中的 name 相关联，以创建图像与映射之间的关系。
3. 如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标

6.图像地图

<map> 标签用于定义客户端图像映射。图像映射指的是带有可点击区域的图像。

<img src="planets.gif" alt="Planets" usemap ="#planetmap" />

<map id="planetmap">
 <area shape ="rect" coords ="0,0,110,260" href ="sun.htm" alt="Sun" />
 <area shape ="circle" coords ="129,161,10" href ="mercur.htm" alt="Mercury" />
 <area shape ="circle" coords ="180,139,14" href ="venus.htm" alt="Venus" />
</map>

属性:

注意:

在 HTML5 中，可以单独定义 name 或者 id ,如果同时规定了 <map> 标签的 id 属性，则必须为 name 属性规定相同的值。
2.<img> 中的 usemap 属性可引用中的 id 或 name 属性(由浏览器决定)，所以我们需要同时向添加 id 和 name 两个属性。

7.文章

<article> 标签规定独立的自包含内容。一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <article> 标签。
<article>元素的潜在来源：1论坛帖子 ; 2报纸文章 ; 3博客条目 ; 4用户评论

8.侧边栏

<aside> 标签定义其所处内容之外的内容，且应该与附近的内容相关，比如文章的侧栏。

<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <aside> 标签。

9.音频

<audio src="someaudio.wav">
您的浏览器不支持音频。
</audio>

<audio controls="controls" autoplay="autoplay" loop="loop" muted preload="meta">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
您的浏览器不支持音频。
</audio>

属性:

autoplay='autoplay' 自动播放
controls='controls' 播放控件
loop='loop' 循环播放
muted='muted' 静音
preload='meta ; auto ; none' 预加载
src='url'

注意:

Internet Explorer 8 以及更早的版本不支持 <audio> 标签。
可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

10.视频

<video src="movie.ogg">
您的浏览器不支持视频。
</audio>

<video controls="controls" autoplay="autoplay" loop="loop" muted preload="meta" width="320" height="240" poster="/images/w3school.gif">
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.mp4" type="video/mp4" />
您的浏览器不支持视频。
</video>

属性:

autoplay='autoplay' 自动播放
controls='controls' 播放控件
loop='loop' 循环播放
muted='muted' 静音
preload='meta ; auto ; none' 预加载
src='url'
height='px'
width='px'
poster='url'规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

注意:

Internet Explorer 8 以及更早的版本不支持 <video> 标签。
可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
规定视频的高度和宽度是一个好习惯。如果设置这些属性，在页面加载时会为视频预留出空间。如果没有设置这些属性，那么浏览器就无法预先确定视频的尺寸，这样就无法为视频保留合适的空间。结果是，在页面加载的过程中，其布局也会产生变化。
请勿通过 height 和 width 属性来缩放视频！通过 height 和 width 属性来缩小视频，只会迫使用户下载原始的视频（即使在页面上它看起来较小）。正确的方法是在网页上使用该视频前，使用软件对视频进行压缩。

11.媒介资源

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源

<audio controls="controls" autoplay="autoplay" loop="loop" muted preload="meta">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
您的浏览器不支持音频。
</audio>

属性:

media='value' 规定媒体资源的类型（文件是为何种媒体/设备进行了优化），任何浏览器都不支持该属性。
type='MIME_type' 规定媒体资源的 MIME 类型。
1.audio: ogg ; mpeg
2.video: ogg ; mp4 ; webm
src='url'

注意:

Internet Explorer 8 以及更早的版本不支持 <source> 标签。

12.粗体

<b>这是粗体文本</b>

属性:

注意:

HTML5 规范声明：应该使用 <h1> - <h6> 来表示标题，使用 <em> 标签来表示强调的文本，应该使用 <strong> 标签来表示重要文本，应该使用 <mark> 标签来表示标注的/突出显示的文本。

13.链接默认地址

<base>标签为页面上的所有链接规定默认地址或默认目标

<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>

<body>
<img src="eg_smile.gif" />
<a href="http://www.w3school.com.cn">W3School</a>
</body>

属性:

href='url'
target='_blank ; _parent ; _self ; _top ; framename'

注意:

在 HTML 中，<base> 标签没有结束标签；在 XHTML 中，<base> 标签必须被正确地关闭。

14.文本隔离

允许您设置一段文本，使其脱离其父元素的文本方向设置。

<ul>
<li>Username <bdi dir='rtl'>Bill</bdi>:80 points</li>
<li>Username <bdi>Steve</bdi>: 78 points</li>
</ul>

属性:

dir='ltr' ; 'rtl'规定 <bdi> 元素内的文本的文本方向。默认值：auto。

注意:

目前只有 Firefox 和 Chrome 支持 <bdi> 标签

15.文本方向

覆盖默认的文本方向。

<bdo dir="rtl">Here is some text</bdo>

属性:

dir='ltr' ; 'rtl'规定 <bdi> 元素内的文本的文本方向。默认值：auto。

注意:

16.大号字体

覆盖默认的文本方向。

<big>Here is some text</big>

属性:

注意:

浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。
可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号，直到上限 7 号文本。

17.大号字体

定义块引用。

<blockquote>
Here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation 
here is a long quotation here is a long quotation here is a long quotation.
</blockquote>

属性:

注意:

<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
请使用 q 元素来标记短的引用。

18.主体

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

属性:

注意:

所有 body 元素的“呈现属性”均不被赞成使用。

19.折行

<br />

属性:

clear='left ; right ; both'与<img>的align连用，不推荐

注意:

20.按钮

定义块引用。

<button type="button" autofocus="autofocus" disabled="disabled">Click Me!</button>

属性:

autofocus="autofocus"规定当页面加载时按钮应当自动地获得焦点。
disabled="disabled"规定禁用按钮。
name="subject"为按钮规定名称，不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮，以便在表单中使用时能够提交不同的值。
form="nameform"规定按钮属于一个或多个表单，form 属性的值必须是按钮所属表单的 id，如需引用一个以上的表单，请使用空格分隔的列表。
type="button ; reset ; submit"
value="HTML"
formaction="demo_admin.asp"
formenctype="multipart/form-data"
formmethod="post"
formnovalidate="formnovalidate"
formtarget="_blank"

注意:

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

21.图形容器

<canvas id="myCanvas"></canvas>

属性:

width="200px ; 200"
height="200px ; 200"

注意:

Internet Explorer 8 以及更早的版本不支持该标签。

22.表格标题

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

属性:

align="bottom"不推荐使用

注意:

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

23.文本居中

<center>文本居中</center>

属性:

注意:

不推荐使用

24.引用

表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。

<cite>引用的文献</cite>

属性:

注意:

按照惯例，引用的文本将以斜体显示。
如果引用的这些文档有联机版本，还应该把引用包括在一个标签中，从而把一个超链接指向该联机版本。
<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

25.强调

<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。除强调之外，当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 <em> 标签。例如，W3School 经常对重要的术语使用 <em> 标签。<em> 标签可以用来把这些名称和其他斜体字区别开来。

<em>强调文本</em>

属性:

注意:

按照惯例，引用的文本将以斜体显示。

26.强调

<strong> 标签和 <em> 标签一样，用于强调文本，但它强调的程度更强一些。

<strong>强调文本</strong>

属性:

注意:

按照惯例，引用的文本将加粗显示。
如果常识告诉我们应该较少使用 <em> 标签的话，那么 <strong> 标签出现的次数应该更少。如果说用 <em> 标签修饰的文本好像是在大声呼喊，那么用 <strong> 标签修饰的文本就无异于尖叫了。
举一个例子，经常访问 W3school 的用户可以注意到了，许多教程页面的第一句摘要都是以粗体显示的，而实际上，我们对这一句摘要使用了 <strong> 标签。使用这个标签的理由是，我们认为教程摘要不仅概括了其所在页面的内容，而且位于页面的最重要的位置，其内容自然是非常重要的且值得强调的。

27.标记术语

<dfn> 标签可标记那些对特殊术语或短语的定义。

<dfn>特殊术语</dfn>

属性:

注意:

按照惯例，引用的文本将斜体显示。
与其他许多基于内容的样式和物理样式标签一样，<dfn> 标签尽量少用为妙。作为一种通用样式，尤其在技术文档中，当第一次新的术语时，应该将它们与普通文本分开，这样读者可以更好地理解文章当前的主题，而从那以后就不要再对这个术语进行任何标记了。

28.代码文本

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

<code>源码</code>

属性:

注意:

如果只是希望使用等宽字体的效果，请使用 <tt> 标签。或者，如果想要在严格限制为等宽字体格式的文本中显示编程代码，请使用 <pre> 标签。

29.代码文本

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre>
&lt;html&gt;

&lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;
    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);
    document.write(&quot;xmlDoc is loaded, ready for use&quot;);
  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
</pre>
在上面的代码中，<pre> 标签中的特殊符号被转换为符号实体，比如 "&lt;" 代表 "<"，"&gt;" 代表 ">"。另外，请注意蓝色的代码，我们在 <pre> 标签中使用了链接，也就是 <a> 标签。上面这段代码的显示效果如下：
<html>

<head>
  <script type="text/javascript" src="loadxmldoc.js">
</script>
</head>

<body>

  <script type="text/javascript">
    xmlDoc=loadXMLDoc("books.xml");
    document.write("xmlDoc is loaded, ready for use");
  </script>

</body>

</html>

属性:

width='80'定义每行的最大字符数（通常是 40、80 或 132）。
注意:

可以导致段落断开的标签（例如标题、

和

标签）绝不能包含在

 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的。

pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可
制表符（tab）在 <pre> 标签定义的块当中可以起到应有的作用，每个制表符占据 8 个字符的位置。但是我们不推荐使用它，因为在不同的浏览器中，Tab 的实现各不相同。在用 <pre> 标签格式化的文档段中使用空格，可以确保文本正确的水平位置。
如果您希望使用 <pre> 标签来定义计算机源代码，比如 HTML 源代码，请使用符号实体来表示特殊字符，比如 “<” 代表 “<”，”>” 代表 “>”，”&” 代表 “&”。

30.样本文本

<samp> 标签表示一段用户应该对其没有什么其他解释的文本字符。要从正常的上下文抽取这些字符时，通常要用到这个标签。

字符序列 <samp>ae</samp> 可能会被转换为 &aelig; 连字字符。

上面的 HTML 代码会显示为：

字符序列 ae 可能会被转换为 æ 连字字符。

属性:

注意:

<samp> 标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来，对它们加以强调的极少情况下，才使用这个标签。

31.键盘文本

<kbd> 标签定义键盘文本。

键入 <kbd>quit</kbd> 来退出程序，或者键入 <kbd>menu</kbd> 来返回主菜单。

属性:

注意:

按照惯例，引用的文本将等宽字体显示。

32.变量

<var> 标签表示变量的名称，或者由用户提供的值。

<var>a</var>

属性:

注意:

按照惯例，引用的文本将斜体显示。

33.等宽文本

<tt> 标签呈现类似打字机或者等宽的文本效果。

<tt>等宽文本</tt>

属性:

注意:

按照惯例，引用的文本将斜体显示。

34.小号文本

<small> 标签呈现小号字体效果。

<small>等宽文本</small>

属性:

注意:

<small> 标签和它所对应的 <big> 标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。
与 <big> 标签类似，<small> 标签也可以嵌套，从而连续地把文字缩小。每个 <small> 标签都把文本的字体变小一号，直到达到下限的一号字。

35.表格列

<col> 为表格中一个或多个列定义属性值。

<table width="100%" border="1">
  <col span="3" background="yellow" />
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

属性:

span="3"

注意:

您只能在 table 或 colgroup 元素中使用 <col> 标签。
如果您希望在 colgroup 内部为每个列规定不同的属性值时，请使用此元素。如果没有 col 元素，列会从 colgroup 那里继承所有的属性值。
col 元素是仅包含属性的空元素。如需创建列，您就必须在 tr 元素内部规定 td 元素。

36.表格列组

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。

<table width="100%" border="1">
<colgroup span="2" style="background-color:red" />
<colgroup span="2" style="background:red"></colgroup>
<colgroup><col span="3" background="yellow" /></colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

属性:

span="3"

注意:

<colgroup> 标签只能在 table 元素中使用。
如果您希望为一组表格列规定相同的属性值，请使用 <colgroup> 元素 , 如果您希望为一组表格列规定相同的属性值，请使用 <colgroup> 元素。

37.选项列表

<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

属性:

注意:

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。
Internet Explorer 和 Safari 不支持该元素。

38.选项列表

<dd> 在定义列表中定义条目的定义部分。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

属性:

注意:

39.选项列表

<dl> 标签定义了定义列表。<dl> 标签用于结合 <dt> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

属性:

注意:

40.选项列表

<dt> 标签定义了定义列表。<dt> 标签用于结合 <dl> （定义列表中的项目）和 <dd> （描述列表中的项目）。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

属性:

注意:

41.删除文本

<del> 定义文档中已被删除的文本。

a dozen is <del>20</del> 12 pieces

属性:

cite="why_deleted.htm"指向一个文档的 URL，该文档解释了文本被删除的原因,浏览器不支持
datetime="2009-08-08T21:55:06Z"规定文本被删除的日期和时间,浏览器不支持

注意:

42.描述文档(折叠选项)

<details> 用于描述文档或文档某个部分的细节。

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

属性:

open="open"规定在 HTML 页面上 details 应该是可见的。

注意:

目前只有 Chrome 和 Safari 6 支持 <details> 标签
与 <summary> 标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

43.文档标题(折叠选项)

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。

<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>

属性:

注意:

“summary” 元素应该是 “details” 元素的第一个子元素。
与 <summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。
目前只有 Chrome 和 Safari 6 支持 <summary> 标签

43.对话框

<dialog> 标签定义对话框或窗口。

<table border="1">
<tr>
  <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
  <th>二月</th>
  <th>三月</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

属性:

open="open"规定 dialog 元素是活动的，用户可与之交互。

注意:

44.目录列表

<dir>
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</dir>

属性:

open="open"规定 dialog 元素是活动的，用户可与之交互。

注意:

不赞成使用

45.块元素

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

属性:

注意:

46.块元素

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

属性:

注意:

47.嵌入内容

定义嵌入的内容，比如插件。

<embed src="helloworld.swf" width="200" height="200" />

属性:

height='px'
width='px'
type='application/x-shockwave-flash'定义嵌入内容的类型
src='url'

注意:

48.表单分组

fieldset 元素可将表单内的相关元素分组。

<form>
  <fieldset form="iceform" name="person">
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

属性:

disabled='disabled'
form='iceform'form 属性规定 fieldset 所属的一个或多个表单,form 属性的值必须是所属表单的 id,如需引用一个以上的表单，请使用空格分隔的列表。
type='application/x-shockwave-flash'定义嵌入内容的类型
src='url'

注意:

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。
当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。
HTML5 拥有如下属性：disabled、form、name，HTML 4.01 中不支持这些属性。

49.表单分组标题

legend 元素为 fieldset 元素定义标题（caption）。

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

属性:

align='left'不赞成使用。

注意:

50.独立元素标题

<figcaption> 标签定义 figure 元素的标题（caption）。

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <figcaption> 标签。
“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

51.独立元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <figcaption> 标签。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

52.页脚

<footer> 标签定义文档或节的页脚。

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:aaa@qq.com">aaa@qq.com</a>.</p>
</footer>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <figcaption> 标签。
<footer> 元素应当含有其包含元素的信息,页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。
<footer> 元素内的联系信息应该位于 <address> 标签中。

53.标题

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

属性:

注意:

54.头部

<html>

<head>
  <title>文档的标题</title>
</head>

<body>
  文档的内容... ...
</body>

</html>

属性:

注意:

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。
应该把 <head> 标签放在文档的开始处，紧跟在 <html> 后面，并处于 <body> 标签或 <frameset> 标签之前。

55.页头

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

<p>The rest of my home page...</p>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <header> 标签。

56.水平线

<h1>This is header 1</h1>
<hr />
<p>This is some text</p>

属性:

注意:

56.文档

<!DOCTYPE HTML>
<html>

<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

属性:

manifest='url'定义一个 URL，在这个 URL 上描述了文档的缓存信息。

注意:

57.表单

<form action="form_action.asp" method="get" autocomplete="on">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" /></p>
  <input type="submit" value="Submit" />
</form>

属性:

action="form_action.asp"
method="get"
target="_blank" 不赞成
name="myForm"form 元素的 name 属性提供了一种在脚本中引用表单的方法。
accept-charset="GBK,gb2312,UTF-8"accept-charset 属性规定服务器用哪种字符集处理表单数据
enctype="text/plain ; multipart/form-data"enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。
autocomplete="on"自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
novalidate="novalidate"如果使用该属性，则表单不会验证表单的输入。

注意:

58.框架

<frame> 标签定义 frameset 中的一个特定的窗口（框架）。

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>

</html>

属性:

frameborder="0"是否显示框架周围的边框。
marginheight="50"规定框架内容与框架的上方和下方之间的高度，以像素计。
marginwidth="50"规定框架内容与框架的左方和右方之间的高度，以像素计。
name="frame_a"提供了一种在脚本中引用表单的方法。
noresize="noresize"规定用户无法调整框架的大小
scrolling="yes"enctype 规定是否在框架中显示滚动条。
src="frame_a.htm"

注意:

您希望验证包含框架的页面，请确保 doctype 被设置为 “Frameset DTD”。
您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。
HTML5不支持该标签

59.无框架

noframes 元素可为那些不支持框架的浏览器显示文本。noframes 元素位于 frameset 元素内部。

<frameset cols = "25%, 25%,*">
  <noframes>
  <body>Your browser does not handle frames!</body>
  </noframes>
  <frame src ="venus.htm" />
  <frame src   ="sun.htm" />
  <frame src ="mercur.htm"   />
</frameset>

属性:

注意:

您希望验证包含框架的页面，请确保 doctype 被设置为 “Frameset DTD”。
您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。如果您希望 frameset 添加 <noframes> 标签，就必须把其中的文本包装在 <body></body> 标签中！
HTML5不支持

60.框架集

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。

<html>

<frameset cols="25%,50%,25%">
  <frame src="frame_a.htm" />
  <frame src="frame_b.htm" />
  <frame src="frame_c.htm" />
</frameset>
<frameset rows="150,300,150">
<frameset cols="100, *">
<frameset rows="*, 100, *">
<frameset cols="10%, 3*, *, *">
</html>

属性:

rows="10%,10%,10%"
cols="10%,10%,10%"

注意:

您希望验证包含框架的页面，请确保 doctype 被设置为 “Frameset DTD”。
您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。如果您希望 frameset 添加 <noframes> 标签，就必须把其中的文本包装在 <body></body> 标签中！
HTML5不支持
frame 和 iframe 的区别

61.内联框架

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

<iframe src ="/index.html" width="400" height="300" seamless>
<p>Your browser does not support iframes.</p>
</iframe>

属性:

frameborder="0"
height="300 ; 20%"
width="300 ; 20%"
marginheight="50px"
marginwidth="50"规定框架内容与框架的左方和右方之间的高度，以像素计。
name="frame_a"提供了一种在脚本中引用表单的方法。
scrolling="yes"规定是否在框架中显示滚动条。
src="frame_a.htm"
sandbox="" ; allow-same-origin ; allow-top-navigation ; allow-forms ; allow-scripts如果被规定为空字符串（sandbox=”“），sandbox 属性将会启用一系列对行内框架中内容的额外限制。sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）。IE 9 以及更早的版本不支持 sandbox 属性，Opera 12 以及更早的版本也不支持该属性。
seamless当设置该属性后，它规定了 <iframe> 看上去像是包含文档的一部分（无边框或滚动条）。Opera 12 以及更早的版本不支持 seamless 属性，Safari 5 以及更早的版本也不支持该属性。
srcdoc="<p>Hello world!</p>"显示在框架中的 HTML 内容。必须是有效的 HTML 语法。所有主流浏览器都支持 srcdoc 属性，除了 Internet Explorer。该属性与 sandbox 和 seamless 属性一同使用。如果浏览器支持 srcdoc 属性，则将覆盖在 src 属性,如果浏览器不支持 srcdoc 属性，则相应地会显示在 src 属性（若已设置）中规定的文件。

注意:

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中，不支持 iframe 元素。
您可以把需要的文本放置在 <iframe> 和 </iframe> 之间，这样就可以应对无法理解 iframe 的浏览器。
frame 和 iframe 的区别

62.图片

<img src="planets.gif" alt="Planets" />

属性:

height="300 ; 20%"
width="300 ; 20%"
ismap="ismap"当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端。特殊的服务器端软件（在本例中是 demo_form.asp 程序）可以根据这些坐标来做出响应。当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许 ismap 属性。
usemap="#planetmap"usemap 属性与元素的 name 或 id 属性相关联，以建立与之间的关系。

注意:

63.无序列表

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

属性:

注意:

64.表格

<table border="1" rules="all">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

属性:

border="1"border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。
cellpadding="10"cellpadding 属性规定单元边沿与其内容之间的空白,请勿将该属性与 cellspacing 属性相混淆，cellspacing 属性规定的是单元之间的空间。
cellspacing="10"cellspacing 属性规定单元格之间的空间。
frame="box"frame 属性规定外侧边框的哪个部分是可见的。除了 Internet Explorer，其他浏览器都支持 frame 属性。
rules="all"rules 属性规定内侧边框的哪个部分是可见的。rules 属性在 Firefox 和 Opera 中可以正确地显示。
summary="Monthly savings for the Flintstones family"summary 属性规定表格内容的摘要。屏幕阅读器可以利用该属性。
width=20px ; 20%

注意:
2. 从实用角度出发，最好不要规定样式，而是使用 CSS 来添加边框样式和颜色。

65.表头

<table border="1" rules="all">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

属性:

注意:

如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签。
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。
<thead> 内部必须拥有 <tr> 标签！
<thead>、<tbody> 以及 <tfoot> 很少被使用，这是因为糟糕的浏览器支持。我们期望在 XHTML 的未来版本中这种情况会发生变化。假如您使用 Internet Explorer 5.0 或更新的浏览器，可以在我们的 XML 教程中查看一个例子。

66.表身

<table border="1" rules="all">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

属性:

注意:

同上

67.表脚

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>

  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>

  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
 </table>

属性:

注意:

同上

68.表行

属性:

注意:

69.表行头

<table border="1">
  <tr>
    <th colspan="2" scope="col">Company in USA</th>
  </tr>
  <tr>
    <td scope="row">Apple, Inc.</td>
    <td>1 Infinite Loop Cupertino, CA 95014</td>
  </tr>
  <tr>
    <td scope="row">Google, Inc.</td>
    <td>1600 Amphitheatre Parkway Mountain View, CA 94043</td>
  </tr>
</table>

属性:

colspan="2"colspan 属性规定表头单元格可横跨的列数。
rowspan="2"rowspan 属性规定表头单元格可横跨的行数。
headers="idrefs,idrefs2"规定与表格单元相关联的一个或多个表头单元的 id。规定表头与单元格相关联,屏幕阅读器可以利用该属性。headers 属性对非可视化的浏览器，也就是那些在显示出相关数据单元格内容之前就显示表头单元格内容的浏览器非常有用。
scope="row ; col ; colgroup ; rowgroup"规定与表格单元相关联的一个或多个表头单元的 id。通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。使用 rowgroup 和 colgroup 会将单元格的行组（由 <thead>、<tbody> 或 <tfoot> 标签定义）或列组中的所有单元格和表头单元格绑定起来（由 <col> 或 <colgroup> 标签定义）。屏幕阅读器可以利用该属性。

注意:

70.单元格

<table border="1">
  <tr>
    <th id="name">Name</th>
    <th id="email">Email</th>
    <th id="phone">Phone</th>
    <th id="addr">Address</th>
  </tr>
  <tr>
    <td headers="name">Bill Gates</td>
    <td headers="email">aaa@qq.com</td>
    <td headers="phone">+78900789</td>
    <td headers="addr">Microsoft Corporation One Microsoft Way USA</td>
  </tr>
</table>

属性:

colspan="2"
rowspan="2"
headers="idrefs,idrefs2"

注意:

<thead> 元素中不允许使用 <td>元素。

71.网页标题

<html>
<head>
<title>HTML 5 标签参考手册</title>
</head>

<body>
文档的内容 ......
</body>

</html>

属性:

lang="language_code"规定元素中内容的语言代码。
xml:lang="language_code"规定 XHTML 文档中元素内容的语言代码。
dir="rtl ; ltr"

注意:

一个文档中不能有一个以上的 <title> 元素。

72.上标

这段文本包含 <sup>上标</sup>

属性:

注意:

这个标签在向文档添加脚注以及表示方程式中的指数值时非常有用。如果和 <a> 标签结合起来使用，就可以创建出很好的超链接脚注。

73.下标

这段文本包含 <sub>下标</sub>

属性:

注意:

74.样式表

<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>

属性:

media=”screen,projection”

注意:

type 属性是必需的，定义 style 元素的内容。唯一可能的值是 “text/css”。
style 元素位于 head 部分中。

75.行内样式

<span>提示：</span>

属性:

注意:

76.下拉菜单

<select autofocus="autofocus">
  <option value ="volvo">Volvo</option>
  <option value ="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

属性:

disabled="disabled"
autofocus="autofocus"当设置该属性后，它规定在页面加载后下拉列表应该自动获得焦点。Internet Explorer 9 以及更早的版本不支持 <select> 标签的 autofocus 属性。
form="formID" form 属性规定下拉列表所属的一个或多个表单,ie不支持
name="form1"
multiple="multiple"multiple 属性规定可同时选择多个选项。对于 windows：按住 Ctrl 按钮来选择多个选项,对于 Mac：按住 command 按钮来选择多个选项,由于上述差异的存在，同时由于需要告知用户可以使用多项选择，对用户更友好的方式是使用复选框。可以把 multiple 属性与 size 属性配合使用，来定义可见选项的数目。
size="2"size 属性规定下拉列表中可见选项的数目。如果 size 属性的值大于 1，但是小于列表中选项的总数目，浏览器会显示出滚动条，表示可以查看更多选项。

注意:

select 元素是一种表单控件，可用于在表单中接受用户输入。

77.节

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<section>
  <h1>PRC</h1>
  <p>The People's * was born in 1949...</p>
</section>

属性:

cite="www.baidu.com"

注意:

select 元素是一种表单控件，可用于在表单中接受用户输入。

78.脚本

<script type="text/javascript">
document.write("Hello World!")
</script>

属性:

type="text/javascript ; application/javascript ; text/ecmascript ; application/ecmascript ; text/vbscript"
async="async"async 属性仅适用于外部脚本（只有在使用 src 属性时）。有多种执行外部脚本的方法：如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）,如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行,如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本
charset="UTF-8"charset 属性规定在外部脚本文件中使用的字符编码。
defer="defer"defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。只有 Internet Explorer 支持 defer 属性。
src="url"

注意:

假如此元素内部的代码没有位于某个函数中，那么这些代码会在页面被加载时被立即执行。<script> 标签之后的脚本会被忽略。
请参阅 noscript 元素；对于那些在浏览器中禁用脚本或者其浏览器不支持客户端脚本的用户来说，该元素非常有用。
引入的脚本不能有内容

79.无脚本

noscript 元素用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>

  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

属性:

注意:

无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。

80.注释

<ruby> 标签定义 ruby 注释（中文注音或字符）。

<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <ruby> 标签。
与 <rp> 以及 <rt> 标签一同使用：ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 “ruby” 元素时显示的内容。

81.注释

<q> 标签定义短的引用。浏览器经常在引用的内容周围添加引号。

<p>WWF's goal is to:
<q cite="http://www.wwf.org">
build a future where people live in harmony with nature
</q> we hope they succeed.</p>

属性:

cite="http://www.wwf.org"cite 属性规定引用的来源。主流浏览器均不支持 cite 属性。不过，搜索引擎可能会使用该属性获得更多有关引用的信息。

注意:

82.进度

<progress> 标签标示任务的进度（进程）。

<progress value="22" max="100"></progress>

属性:

cite="http://www.wwf.org"cite 属性规定引用的来源。主流浏览器均不支持 cite 属性。不过，搜索引擎可能会使用该属性获得更多有关引用的信息。

注意:

Internet Explorer 9 以及更早的版本不支持 <progress> 标签。
<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter> 标签代替。

83.对象

此标签可为包含它的 <object>标签提供参数。

<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" 
width="100" height="50">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

属性:

name="BorderStyle"定义参数的名称（用在脚本中）。
value="1"规定参数的值。
type规定参数的值。
valuetype规定值的 MIME 类型。

注意:

84.段落

<p>This is some text in a very short paragraph</p>

属性:

注意:

85.输出

<output> 标签定义不同类型的输出，比如脚本的输出。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
   <input type="range" id="a" value="50">100
   +<input type="number" id="b" value="50">
   =<output name="x" for="a b"></output>
</form>

属性:

for="element_id"for 属性规定了计算中使用的元素与计算结果之间的关系。
name="name"

注意:

Internet Explorer 8 以及更早的版本不支持 <output> 标签。

86.选项

option 元素定义下拉列表中的一个选项（一个条目）。

<select>
  <option value ="volvo" label="Volvo">Volvo</option>
  <option value ="saab" selected="selected">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

属性:

disabled="disabled"Safari 2.0 或更早的版本不支持该属性。IE 8 或更新的版本以及其他浏览器支持该属性。
label="Volvo"label 属性规定更短版本的选项。下拉列表中会显示出所规定的更短版本。只有 IE 7+ 支持 label 属性。
selected="selected"
value="volvo"

注意:

<option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值。如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。

87.选项组

option 元素定义下拉列表中的一个选项（一个条目）。

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

属性:

disabled="disabled"Safari 2.0 或更早的版本不支持该属性。IE 8 或更新的版本以及其他浏览器支持该属性。
label="German Cars"label 属性为选项组规定描述。

注意:

88.有序列表

option 元素定义下拉列表中的一个选项（一个条目）。

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

属性:

start="5"不赞成使用,但是目前，仍然没有 start 属性的 CSS 替代方案。
type="1 ; a ; A ; i ; I"不赞成使用
reversed="reversed" 降序,目前只有 Chrome 和 Safari 6 支持 reversed 属性。

注意:

89.对象

定义一个嵌入的对象。请使用此元素向您的 XHTML 页面添加多媒体。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。

<object data="helloworld.swf" name="obj1" width="100" height="50" type="application/x-shockwave-flash">
  <param name="BorderStyle" value="1" />
  <param name="MousePointer" value="0" />
  <param name="Enabled" value="1" />
  <param name="Min" value="0" />
  <param name="Max" value="10" />
</object>

属性:

data 属性用于指定供对象处理的数据文件的 URL。该属性的值是文件的 URL，该 URL 可能是相对于文件基本 URL 的绝对 URL 或相对 URL，或者是相对于用 codebase 属性提供的 URL 的绝对或相对 URL。浏览器通过插入到文档中的对象类型来决定数据的类型。该属性类似于 <img> 标签中的 src 属性，因为它下载的是要由包含对象进行处理的数据。当然，它们之间的差别在于，data 属性允许包含几乎任何文件类型，而不仅仅是图像文件。
height="px"
width="px"
name="obj1"
type="application/x-shockwave-flash"

注意:
1. <object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
2. 浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

90.导航

<nav> 标签定义导航链接的部分。

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <nav> 标签。
如果文档中有“前后”按钮，则应该把它放到 <nav> 元素中。

91.尺度

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例如：磁盘用量、查询结果的相关性，等等。

<meter value="3" min="0" max="10" low="2" high="8">十分之三</meter>

<meter value="0.6">60%</meter>

属性:

high="9" Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签的 high 属性。high 属性必须小于 max 属性值，且必须大于 low 和 min 属性值。
low="2" Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签的 low 属性。low 属性必须大于 min 属性值，且必须小于 max 和 high 属性值。
max="10"定义最大值。默认值是 1。
min="0"定义最小值。默认值是 0。
optimum="5"定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。
value="5"定义度量的值。

注意:

Firefox, Chrome, Opera 以及 Safari 6 支持 <meter> 标签。
<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

92.元信息

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
<meta name="description" content="免费的 web 技术教程。" />
<meta name="revised" content="David, 2008/8/8/" />
<meta http-equiv="refresh" content="5" />
<meta charset="UTF-8">

属性:

name="keywords"
1. author:作者
2. description:简介
3. keywords:关键词
4. generator:生成工具
5. revised:版本
6. others:其他
charset="UTF-8"
http-equiv="refresh"
1. http-equiv=”Content-Type” Content=”text/html;Charset=gb2312”显示字符集的设定
2. http-equiv=”refresh” content=”5”刷新
3. http-equiv=”Expires” Content=”0”期限
4. Pragma cach模式,禁止浏览器从本地机的缓存中调阅页面内容。
5. Set-Cookie （cookie设定）
  1. <Meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。必须使用GMT的时间格式。
6. http-equiv=”Widow-target” Content=”_top”（显示窗口的设定）强制页面在当前窗口以独立页面显示。这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent.
7. Pics-label （网页RSAC等级评定）
  说明：在IE的Internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过该参数来设置的。
  用法：<META http-equiv="Pics-label" Contect="(PICS－1.1'http://www.rsac.org/ratingsv01.html'I gen comment 'RSACi North America Sever' by 'aaa@qq.com'for 'http://www.microsoft.com' on '1997.06.30T14:21－0500' r(n0 s0 v0 l0))">
  注意：不要将级别设置的太高。RSAC的评估系统提供了一种用来评价Web站点内容的标准。用户可以设置Microsoft Internet Explorer（IE3.0以上）来排除包含有色情和暴力内容的站点。上面这个例子中的HTML取自Microsoft的主页。代码中的（n 0 s 0 v 0 l 0）表示该站点不包含不健康内容。级别的评定是由RSAC，即美国娱乐委员会的评级机构评定的，如果你想进一步了解RSAC评估系统的等级内容，或者你需要评价自己的网站，可以访问RSAC的站点：http://www.rsac.org/.
8. http-equiv=”Page-Enter” Content=”blendTrans(Duration=0.5)” ; http-equiv=”Page-Exit” Content=”blendTrans(Duration=0.5)”这个是页面被载入和调出时的一些特效。（进入与退出
content="5"

注意:

<meta> 标签永远位于 head 元素内部。
元数据总是以名称/值的形式被成对传递的。
如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

93.标记

<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。

<p>Do not forget to buy <mark>milk</mark> today.</p>

属性:

注意:

Internet Explorer 8 以及更早的版本不支持 <mark> 标签。

94.列表项

<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

<ul>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

属性:

注意:

95.标注

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

属性:

form="formID"如需引用一个以上的表单，请使用空格分隔的列表。
for="inputID"

注意:

<label> 标签为 input 元素定义标注（标记）。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

96.主体

<main> 标签规定文档的主要内容。

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
  </article>

  <article>
    <h1>Mozilla Firefox</h1>
    <p>Firefox 是一款来自 Mozilla 的免费开源 web 浏览器，发布于 2004 年。</p>
  </article>
</main>

属性:

注意:

IE不支持
<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
在一个文档中，不能出现一个以上的 <main> 元素。<main>元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

97文本输入框

定义多行的文本输入控件。

<textarea rows="3" cols="20" autofocus>
在w3school，你可以找到你所需要的所有的网站建设教程。
</textarea>

属性:

autofocus="autofocus"Internet Explorer 9 以及更早的版本不支持 <textarea> 标签的 autofocus 属性。
cols="20"cols 属性规定 textarea 的可见宽度。
rows="20"rows 属性规定 textarea 的可见高度。
form="form_id"所有主流浏览器都支持 form 属性，除了 Internet Explorer。
disabled="disabled"
name="W3School_text"
readonly="readonly"readonly 属性规定文本区为只读。在只读的文本区中，无法对内容进行修改，但用户可以通过 tab 键切换到该控件，选取或复制其中的内容。
maxlength="number"最大字符长度,Internet Explorer 9 以及更早的版本或 Opera 不支持 maxlength 属性
placeholder="请介绍自己..."placeholder 属性规定描述文本区域预期值的简短提示。该提示会在文本区域为空时显示，当字段获得焦点时消失。Internet Explorer 9 以及更早的版本不支持 placeholder 属性。
required如果设置该属性，则规定文本区域（textarea）是必填的（以便顺利提交表单）。所有主流浏览器都支持 required 属性，除了 Internet Explorer 和 Safari。
wrap="virtual ; physical ; off ; wrap ; soft ; hard"wrap 属性规定当在表单中提交时，文本区域（text area）中的文本如何换行。当使用 “hard” 时，必须规定 cols 属性。

注意:

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。
可以通过 wrap 属性设置文本输入区内的换行模式。

98链接

<link> 标签定义文档与外部资源的关系。

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>

属性:

rel="stylesheet"只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持。
type="text/css"
sizes="16x16 ; any"sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel=”icon”)，才能使用该属性。该属性可接受多个值。值由空格分隔。any规定图标是可伸缩的（比如 SVG 图像）。
href="theme.css"
hreflang="zh-Hans"
media="print"

注意:

此元素只能存在于 head 部分，不过它可出现任何次数。

99输入框

<form action="form_action.asp" method="get">
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
<input type="number" name="points" min="0" max="10" />
//必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
<input type="image" src="submit.jpg" alt="Submit" align="right" />
//button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="Click me" onclick="msg()" />
</form>
//技能输入数值,又能选择下拉选项的输入框
<form action="demo_form.asp">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>

属性:

accept="image/*,image/gif"accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。
alt="value"alt 属性只能与 <input type="image"> 配合使用。它为图像输入规定替代文本。除了 Safari，所有主流的浏览器都支持 “alt” 属性。
autocomplete="off ; on"自动完成,自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
autofocus="autofocus"
checked="checked"checked 属性与或配合使用。
disabled="disabled"
form="formID"如需引用一个以上的表单，请使用空格分隔的列表。
formaction="demo_admin.asp"formaction 属性覆盖 form 元素的 action 属性。该属性适用于 type=”submit” 以及 type=”image”。
formenctype="multipart/form-data"formenctype 属性覆盖 form 元素的 enctype 属性。该属性与 type=”submit” 和 type=”image” 配合使用。
formmethod="post"formmethod 属性覆盖 form 元素的 method 属性。该属性与 type=”submit” 以及 type=”image” 配合使用。
formtarget="_blank"formtarget 属性覆盖 form 元素的 target 属性。该属性与 type=”submit” 以及 type=”image” 配合使用。HTML5 不支持框架和框架集。现在，parent, top 和 framename 值大多用于 iframe。
formnovalidate="formnovalidate"该属性适用于 <form> 以及以下类型的 <input>：text, search, url, telephone, email, password, date pickers, range 以及 color。
height="128px ; 20%"height 属性只适用于 <input type="image">，它规定 image input 的高度。为图片指定高度和宽度是一个好习惯。如果设置了这些属性，当页面加载时会为图片预留需要的空间。而如果没有这些属性，则浏览器就无法了解图像的尺寸，也就无法为其预留合适的空间。情况是当页面和图片加载时，页面布局会发生变化。
list="listID"list 属性引用数据列表，其中包含输入字段的预定义选项。
max="10 ; date值"max 属性规定输入字段所允许的最大值。max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
min="10 ; date值"min 属性规定输入字段所允许的最小值。max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
maxlength="85"maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。
multiple="multiple"multiple 属性规定输入字段可选择多个值。如果使用该属性，则字段可接受多个值，用于email 和 file。
name="fullname"
pattern="[A-z]{3}pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式。pattern 属性适用于以下类型：text, search, url, telephone, email 以及 password 。
placeholder="Search W3School"placeholder 属性适用于以下类型：text, search, url, telephone, email 以及 password。
readonly="readonly"readonly 属性规定输入字段为只读。经常用于text和password。
size="35"对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入框宽度。
src="submit.jpg" 属性只能与 <input type="image"> 配合使用。它规定作为提交按钮显示的图像的 URL。
step="3"step 属性规定输入字段的合法数字间隔（假如 step=”3”，则合法数字应该是 -3、0、3、6，以此类推）。step、max 以及 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。
value="Bush"value 属性为 input 元素设定值。<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。value 属性无法与 <input type="file"> 一同使用。对于不同的输入类型，value 属性的用法也不同：
1. type=”button”, “reset”, “submit” - 定义按钮上的显示的文本
2. type=”text”, “password”, “hidden” - 定义输入字段的初始值
3. type=”checkbox”, “radio”, “image” - 定义与输入相关联的值
width=”128px ; 20%”width属性只适用于 <input type="image">，它规定 image input 的宽度。
type="submit"type 属性规定 input 元素的类型。

注意:

XHTML和HTML兼容

请使用 W3C 的验证器来检查您是否编写了有效的 HTML / XHTML 文档！

文档声明
HTML 4.01 Strict
该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
必须以格式正确的 XML 来编写标记。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型（例如提供对东亚语系的 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML 4 和 XHTML 在处理脚本中的内容方面有所不同：
在 HTML 4 中，内容类型声明为 CDATA，就是说不会对实体进行解析。

在 XHTML 中，内容类型声明为 (#PCDATA)，也就是说会对实体进行解析。

这意味着，在 XHTML 中，应该编码所有特殊的字符，或者把所有内容嵌套在 CDATA 部分中。

为了确保在 XHTML 文档中脚本正确进行解析，请使用如下语法：

<script type="text/javascript"><![CDATA[
  document.write("Hello World!")
//]]></script>

HTML5/HTML 4.01/XHTML 元素和有效的 DTD
‘GBK’ ; GB2312 ; UTF-8`
HTML 教程延伸阅读：改变文本的外观和含义