本文详细介绍了HTML中常用的标签及其用途，包括音频、文章、边栏、数据列表、细节、对话框、嵌入内容、图集、页脚、页眉、表单安全、标记、进度条、注释、部分、节、源、时间、视频、单词换行、输入聚焦、表单属性等。
1.<audio> 标签定义声音，比如音乐或其他音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。属性[autoplay,controls,loop,muted,preload,src],
muted规定视频输出应该被静音；preload规定音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性。
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
<article>
<h1>...</h1>
<p>...</p>
</article>
3.<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
4.<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
5.<details> 标签用于描述文档或文档某个部分的细节。与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<summary>为 <details> 元素定义可见的标题。
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
6.<dialog> 标签定义对话框或窗口。规定 dialog 元素是活动的，用户可与之交互。
<dialog open>这是打开的对话窗口</dialog>
7.<embed> 标签定义嵌入的内容，比如插件。属性[width,height,src,type],type 属性规定被嵌入内容的 MIME 类型
<embed src="helloworld.swf" type="application/x-shockwave-flash" />
8.<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
9.<footer> 标签定义文档或节(section)的页脚。<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。<footer> 元素内的联系信息应该位于 <address> 标签中。
10.<header> 标签定义文档的页眉（介绍信息）。
11.<keygen> 是 Key Generation 的缩写。用来强化表单数据的安全性。当含有 <keygen> 的表单被提交的时候，客户端会生成密钥和公钥。密钥保存在浏览器端，公钥被发送到服务器端。
<FORM>
<keygen name="key" challenge="123456789">
</FORM>
12.<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用。
<p>Do not forget to buy <mark>milk</mark> today.</p>
13.<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性等。属性[low,high,min,max,optimum,value,form]
<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
<meter value="95" min="0" low="40" high="90" max="100">
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
14.<nav> 标签定义导航链接的部分。
15.<output> 标签定义不同类型的输出，比如脚本的输出。属性[for,form,name],for定义输出域相关的一个或多个元素。
<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>
16.<progress> 标签标示任务的进度（进程）。请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。属性[max,value]
<progress value="22" max="100"></progress>
17.<ruby> 标签定义 ruby 注释（中文注音或字符）。rp定义若浏览器不支持 ruby 元素显示的内容。
<ruby>
漢 <rt><rp>(</rp>han<rp>)</rp></rt>
</ruby>
18.<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
19.<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
20.<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。属性[datetime,pubdate],
datetime规定日期 / 时间。否则，由元素的内容给定日期 / 时间。pubdate指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
21.<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
22.<video> 标签定义视频，比如电影片段或其他视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性[width,height,autoplay,controls,loop,muted,poster,preload,src],poster规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
23.<wbr>(Word Break Opportunity)规定在文本中的何处适合添加换行符。如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素
来添加 Word Break Opportunity（单词换行时机）。
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
1.可以对input(text),select,textarea与button元素指定autofocus属性；
2.可以对input,output,select,textarea,button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内；
muted规定视频输出应该被静音；preload规定音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性。
<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>
<article>
<h1>...</h1>
<p>...</p>
</article>
3.<aside> 标签定义其所处内容之外的内容。aside 的内容应该与附近的内容相关。
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
4.<datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
5.<details> 标签用于描述文档或文档某个部分的细节。与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<summary>为 <details> 元素定义可见的标题。
<details>
<summary>Copyright 2011.</summary>
<p>All pages and graphics on this web site are the property of W3School.</p>
</details>
6.<dialog> 标签定义对话框或窗口。规定 dialog 元素是活动的，用户可与之交互。
<dialog open>这是打开的对话窗口</dialog>
7.<embed> 标签定义嵌入的内容，比如插件。属性[width,height,src,type],type 属性规定被嵌入内容的 MIME 类型
<embed src="helloworld.swf" type="application/x-shockwave-flash" />
8.<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
<figcaption> 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
9.<footer> 标签定义文档或节(section)的页脚。<footer> 元素应当含有其包含元素的信息。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
您可以在一个文档中使用多个 <footer> 元素。<footer> 元素内的联系信息应该位于 <address> 标签中。
10.<header> 标签定义文档的页眉（介绍信息）。
11.<keygen> 是 Key Generation 的缩写。用来强化表单数据的安全性。当含有 <keygen> 的表单被提交的时候，客户端会生成密钥和公钥。密钥保存在浏览器端，公钥被发送到服务器端。
<FORM>
<keygen name="key" challenge="123456789">
</FORM>
12.<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用。
<p>Do not forget to buy <mark>milk</mark> today.</p>
13.<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性等。属性[low,high,min,max,optimum,value,form]
<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。
<meter value="95" min="0" low="40" high="90" max="100">
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
14.<nav> 标签定义导航链接的部分。
15.<output> 标签定义不同类型的输出，比如脚本的输出。属性[for,form,name],for定义输出域相关的一个或多个元素。
<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>
16.<progress> 标签标示任务的进度（进程）。请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。属性[max,value]
<progress value="22" max="100"></progress>
17.<ruby> 标签定义 ruby 注释（中文注音或字符）。rp定义若浏览器不支持 ruby 元素显示的内容。
<ruby>
漢 <rt><rp>(</rp>han<rp>)</rp></rt>
</ruby>
18.<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
19.<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
20.<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。属性[datetime,pubdate],
datetime规定日期 / 时间。否则，由元素的内容给定日期 / 时间。pubdate指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
21.<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
22.<video> 标签定义视频，比如电影片段或其他视频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性[width,height,autoplay,controls,loop,muted,poster,preload,src],poster规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>
23.<wbr>(Word Break Opportunity)规定在文本中的何处适合添加换行符。如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素
来添加 Word Break Opportunity（单词换行时机）。
<p>
如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。
</p>
1.可以对input(text),select,textarea与button元素指定autofocus属性；
2.可以对input,output,select,textarea,button与fieldset指定form属性，声明它属于哪个表单，然后将其放置在页面上任何位置，而不是表单之内；
扫一扫
9354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
