HTML标签汇总

这里我记录下HTML所有标签，按照参考手册总结记录下：

定义注释

<!DOCTYPE> 定义文档类型

按照字母排序

a：

<a> 定义链接（锚）

<abbr> 定义简称或缩写，可以在 <abbr> 标签中使用全局的 title 属性，这样就能够在鼠标指针移动到该元素上时显示出简称/缩写的完整版本，语法：

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949

<acronym> 定义一个首字母缩写，效果与<abbr>类似。但H5 中不支持 <acronym> 标签，一般使用<abbr>标签代替，语法：

<acronym title="World Wide Web">WWW</acronym>

<address> 定义文档或文章的作者/拥有者的联系信息，元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。语法：

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.</br> 
Visit us at:</br>
Example.com</br>
Box 564, Disneyland</br>
USA
</address>

<area> 定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像）,且area 元素总是嵌套在 <map> 标签中

注释：<img> 标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系

HTML 与 XHTML 之间的差异：

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

<article> 规定独立的自包含内容（H5的新标签）。<article>元素的潜在来源：论坛帖子，报纸文章，博客条目，用户评论

<aside> 定义其所处内容之外的内容，aside 的内容应该与附近的内容相关。<aside> 的内容可用作文章的侧栏。

<audio> 定义声音，比如音乐或其他音频流（H5的新标签）

b：

<b> 定义粗体字，<tt> <i> <b> <big> <small> 均是字体样式元素。并不被反对使用这些标签。但是如果只是希望通过这些标签单纯地改变文本的样式，建议使用样式表来取得更加丰富的效果

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

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

【注释：<base> 标签必须位于 head 元素内部】

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <base href="http://www.w3school.com.cn/i/" />
    <base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，
浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素
的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>

【拓展】

可选的属性：

target	_blank（在新窗口中打开被链接文档） _parent（在父框架集中打开被链接文档） _self（默认。在相同的框架中打开被链接文档） _top（在整个窗口中打开被链接文档） framename（在指定的框架中打开被链接文档）	在何处打开页面中所有的链接。

target

_blank（在新窗口中打开被链接文档）
_parent（在父框架集中打开被链接文档）
_self（默认。在相同的框架中打开被链接文档）
_top（在整个窗口中打开被链接文档）
framename（在指定的框架中打开被链接文档）

在何处打开页面中所有的链接。

<bdo> 可覆盖默认的文本方向，一般常用来改变文本方向语法：

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

可选属性：dir="rtl"为反向文本，dir="ltr"为正向正向文本

<big> 定义大号文本

<body> 定义文档的主体

<br> 定义简单的折行。空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。我们一般写成</br>

<button> 定义一个按钮【重要事项】 ①如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本，而其他浏览器将提交 value 属性的内容。 ②请在 HTML 表单中使用 input 元素来创建按钮请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"

c：

<canvas> 定义图形，比如图表和其他图像（H5的新标签）。只是图形容器，必须使用脚本来绘制图形

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

<cite> 定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题

<code> 定义计算机代码文本

<col> <col> 标签规定了 <colgroup> 元素内部的每一列的列属性。通过使用 <col> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式

<colgroup> 定义表格中供格式化的列组，语法：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>(runoob.com)</title> 
</head>
<body>
<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color: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>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>
</body>
</html>

<datalist> 定义选项列表（HTML 5 中的新标签）【IE和Sarafi不支持<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>

<dl> 定义定义列表

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

<dt> 定义了定义列表中的项目（即术语部分）

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

<del>标签定义文档中已被删除的文本，注释：请与 <ins> 标签配合使用，来描述文档中的更新和修正。

【适用场景：原价格的横划线】

<html>
<body>
<p>一打有 <del>3222200</del><ins>是</ins> 件 。</p>
<p>大多数浏览器会改写为删除文本和下划线文本。</p>
<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>
</body>
</html>

<details> 规定了用户可见的或者隐藏的需求的补充细节（H5 新标签），内容对用户是不可见的，除非设置了 open 属性。【目前只有 Chrome 和 Safari 6 支持 <details> 标签】

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

<dir> 不赞成使用。定义目录列表。

<div> 定义文档中的节。

<dfn> 定义定义项目。

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

e:

<embed src="http://www.w3school.com.cn/i/helloworld.swf" />

<em> 定义强调文本

f：

<fieldset> 定义围绕表单中元素的边框，将表单内容的一部分打包，生成一组相关表单的字段

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。<fieldset> 标签没有必需的或唯一的属性。<legend> 标签为 fieldset 元素定义标题。

<!DOCTYPE HTML>
<html>
<body>
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高：<input type="text" />
    体重：<input type="text" />
  </fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>

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

【注释：Internet Explorer 8 以及更早的版本不支持 <figure> 标签】

<figcaption> 定义 figure 元素的标题

<font> 不赞成使用。规定文本的字体、字体尺寸、字体颜色。在 HTML 4.01 中，font 元素不被赞成使用。

<footer> 定义文档或节的页脚，定义 section 或 page 的页脚。（H5新标签）页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个 <footer> 元素。

【提示：<footer> 元素内的联系信息应该位于 <address> 标签中】

<form> 定义供用户输入的 HTML 表单（块级元素）

能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。用于向服务器传输数据。

<frameset> 定义框架集，frameset 中的每个框架都可以设置不同的属性，比如 border、scrolling、noresize 等等。

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

简单的三框架页面：

<frameset cols="60%,40%">
  <frame src="http://570109268.iteye.com/admin/blogs/2401518">
  <frame src="http://www.runoob.com/tags/tag-details.html">
</frameset>

h：

<h1> to <h6> 定义 HTML 标题

【注意：<h1>到<h6>封顶】

<head> 定义关于文档的信息

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

【拓展】：

①<meta> 标签，用来告诉浏览器关于文档的附加信息。在将来，创作者可能会利用预先定义好的标准文档的元数据配置文件（metadata profile），以便更好地描述它们的文档。profile 属性提供了与当前文档相关联的配置文件的 URL。1.描述 HTML 文档；2.描述文档的关键词；3.重定向在网址已经变更的情况下，将用户重定向到另外一个地址

②<base>标签规定页面链接默认地址

③<style>内联样式表，<link>引入外部样式表

<header> 定义文档的页眉（介绍信息，H5新标签）

<hr> 定义水平线，语法

<p>这是段落。</p>
<hr />
<p>这是段落。</p>

<html> 定义 HTML 文档，注释：即使 html 元素是文档的根元素，它也不包含 doctype 元素。doctype 元素必须位于 html 元素之前。

i：

<i> 定义斜体字

<img> 定义图像

【从技术上讲，<img> 标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。】

①图片的排列（在文字中排列图像）与浮动（使图片浮动至段落的左边或右边），语法：

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <base href="http://www.w3school.com.cn">
</head>
<body>
//排列
<h2>未设置对齐方式的图像：</h2>
<p>图像 <img src ="/i/eg_cute.gif"> 在文本中</p>
<h2>已设置对齐方式的图像：</h2>
<p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="middle"> 在文本中</p>
<p>图像 <img src ="/i/eg_cute.gif" align="top"> 在文本中</p>
<p>请注意，bottom 对齐方式是默认的对齐方式。</p>

//浮动
<p>
<img src ="/i/eg_cute.gif" align ="left"> 
带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。
</p>
<p>
<img src ="/i/eg_cute.gif" align ="right"> 
带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。
</p>
</body>
</html>

【注意】：这里我设置了base默认地址，所以可以正常读取到图片

②创建图像地图：本例显示如何创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <base href="http://www.w3school.com.cn">
</head>
<body>
<p>请点击图像上的星球，把它们放大。</p>

<img
        src="/i/eg_planets.jpg"
        border="0" usemap="#planetmap"
        alt="Planets" />

<map name="planetmap" id="planetmap">

    <area
            shape="circle"
            coords="180,139,14"
            href ="/example/html/venus.html"
            target ="_blank"
            alt="Venus" />

    <area
            shape="circle"
            coords="129,161,10"
            href ="/example/html/mercur.html"
            target ="_blank"
            alt="Mercury" />

    <area
            shape="rect"
            coords="0,0,110,260"
            href ="/example/html/sun.html"
            target ="_blank"
            alt="Sun" />

</map>

<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>

【注意】：这里我用到了map和area标签

<input> 定义输入控件，根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

例如：button，radio，checkbox，color（系统颜色选择器--换肤），file，hidden（元素不可见），image，password，reset（重置按钮），submit，text

拓展：

①Color 对象是 HTML5 中的新对象，不支持IE和safari，1.可以通过使用 getElementById() 来访问 <color> 元素；2.可以通过使用 document.createElement() 方法来创建 <color> 元素

<p>点击按钮来创建颜色选择器。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "color");
    document.body.appendChild(x);
}
</script>

适用场景：HTML5的input color系统颜色选择器，例如网页换肤，这个我在后面总结了一下http://570109268.iteye.com/blog/2405609

②checkbox与radio单双选，这个已经在文章中总结

③Input Date 对象是 HTML5 中的新对象。Input Date 对象表示 HTML <input type="datetime"> 元素。

④Datetime 对象是 HTML5 中的新对象。Datetime 对象表示 HTML <input type="datetime"> 元素。

【Internet Explorer 或 Firefox 不支持 <input type="date"> <input type="datetime">和元素，这个我在后面文章讲到】

拓展：HTML DOM Time 对象

Time 对象是 HTML5 中新增的，表示一个 HTML <time> 元素。html中time元素表示时间，HTML5除了提出很炫的新效果以外还加强了语义化结构，其中这个time就是其中之一

用<time>来表示时间，并不是想要达到什么可见的效果，而是让网页的代码有条理，让机器——尤其是百度和谷歌的蜘蛛——能够理解你这个网页的意思。

HTML5新增的还有article、nav、header、footer.....等等等，其实现实效果都是和div一样没有效果，但是合理使用却能让页面结构更加清晰有逻辑

不要被“DIV+CSS”这句哄人的话误导了。当年我也被误导了好几年，以前我做网站从头到尾就只有div，直到后来被一位老人家数落了一顿才觉悟，div是不能滥用的，只能用来做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级选择器来写样式，减少了class和id的命名，可以精简网页的结构；而且语义化结构有条理才能让搜索引擎更加友好。

⑤Email 对象表示 HTML <email> 元素，（H5新标签）

IE9及safari不支持，创建email字段：

<h3>演示如何创建 Email 字段</h3>
<p>点击按钮来创建 Email 字段。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "email");
    x.setAttribute("value", "w3c@example.com");
    document.body.appendChild(x);
}
</script>

⑥在 HTML 文档中 <input type="file"> 标签每出现一次，一个 FileUpload 对象就会被创建

⑦<input type="hidden">，Hidden 对象代表一个 HTML 表单中的某个隐藏输入域。

这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素（比如接受到的验证码）。

在 HTML 表单中 <input type="hidden"> 标签每出现一次，一个 Hidden 对象就会被创建。

⑧<input type="image">，Input Image 对象表示 HTML <image> 元素（H5新对象）

创建 Input Image 对象，可以通过使用 document.createElement() 方法来创建 <image> 元素：

var x = document.createElement("INPUT");
x.setAttribute("type", "image");

⑨<input type="number">，Number 对象表示 HTML <input type="number"> 元素（H5新对象）

创建方法与image相同

⑩<input type="password ">，Password 对象代表 HTML 表单中的密码字段

该文本输入字段供用户输入某些敏感的数据，比如密码等。当用户输入的时候，他的输入是被掩盖的（例如使用星号*），以防止旁边的人从他背后看到输入的内容。不过需要注意的是，当表单提交时，输入是用明文发送的。

与类型为 "text" 的元素类似，当用户改变显示值时，它会触发 onchange 事件句柄。

⑪<input type="range">，Input Range 对象表示 HTML <input type="range"> 元素（H5新对象）。

Range是HTML5中新出现的滑块控件，也是常见的控件的之一，这个我在后面文章http://570109268.iteye.com/blog/2405849中做了总结

⑫ <input type="reset">，Reset 对象代表 HTML 表单中的一个重置按钮。

当重置按钮被点击，包含它的表单中所有输入元素的值都重置为它们的默认值。默认值由 HTML value 属性或 JavaScript 的 defaultValue 属性指定。

重置按钮在重置表单之前触发 onclick 句柄，并且这个句柄可以通过返回 fasle 来取消。

<p>在下面的文本框中输入一些文本，然后点击重置按钮就可以重置表单。</p>
<form id="myForm">
姓名：<input type="text" size="20" value="name"><br />
年龄：<input type="text" size="20" value="age"><br />
<br />
<input type="button" onclick="formReset()" value="重置">
</form>
<script type="text/javascript">
function formReset(){
    document.getElementById("myForm").reset()
}
</script>

⑬<input type="search"> ，Input Search 对象表示 HTML <input type="search"> 元素（H5新标签）

创建 Input Search 对象：

可以通过使用 document.createElement() 方法来创建 <search> 元素：

<h3>演示如何创建 Search 字段</h3>
<p>点击按钮来创建 Search 字段。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "search");
    document.body.appendChild(x);
}
</script>

这个我在后面文章http://570109268.iteye.com/admin/blogs/2405863中做了详细总结

⑭<input type="submit">，在 HTML 表单中 <input type="submit"> 标签每出现一次，一个 Submit 对象就会被创建。

在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。

⑮<input type="text">，该元素可创建一个单行的文本输入字段。当用户编辑显示的文本并随后把输入焦点转移到其他元素的时候，会触发 onchange 事件句柄。对于掩码文本输入，把 <input type="text"> 中的 type 设置为 "password"。

【密码的显示隐藏原理即是切换type】

⑯<input type="url">，定义包含URL地址的输入域（H5新对象）。用于表示语义上的url地址的输入域，会自动验证url域的值，外观上与type="text"的input输入类型没有差异.。详细我在后面文章http://570109268.iteye.com/admin/blogs/2406050中做了总结。

K：

<keygen>，表示一个密钥对生成控件。【一个可能是被废弃使用的标签，Chrome 中无法使用了】

<keygen> 会生成公钥和密钥，我们会得到一串串字符串。

当控件所在的表单提交时，私钥将储存在本地密匙库中，公钥将被打包并发送至服务器。

l：

<label>，简单理解就是点击标签中的文本，可使多选框聚焦（而这前提是label的for属性的属性值与想要关联的表单控件的id一样）。一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。

例子：

<label for="email">E-mail:</label>  
<input type="text" id="email">

显示效果如下：

表单控件都是内联元素所以他俩会在一行显示。在网页中当我们点击E-mai字样或文本框时都会在文本框中出现光标，这个就是label标签的功能了。说白了label标签就是他所关联的表单控件的延伸，即鼠标点击了他，就会出现和点击他所关联的表单控件一样的效果。

<legend>（译为说明）为 fieldset 元素定义标题

参考W3C上的解释：

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

<fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段。

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D 效果，或者甚至可创建一个子表单来处理这些元素。

<fieldset> 标签没有必需的或唯一的属性。<legend> 标签为 fieldset 元素定义标题。

<from>
<fieldset>
<legend>登录</legend>
username:<input type="text" name="username" id="username" /><br/>
passowrd:<input type="password" name="password" id="password" /><br/>
<input type="submit" value="logo in" /><br/>
</fieldset>
</form>

<li> 列表标签,可用在有序列表 (<ol>) 和无序列表 (<ul>) 中

无序列表 (<ul>) 使用粗体圆点（典型的小黑圆圈）进行标记；有序列表 (<ol>) 使用数字进行标记

常用于链接外部css文件、链接收藏夹图标（favicon.ico）

（1）链接外部样式表

<link href="img/divcss5.css" rel="stylesheet" type="text/css" />

① href 值为外部资源地址，这里是css的地址

②rel 定义当前文档与被链接文档之间的关系,这里是外部css样式表即stylesheet

③type 规定被链接文档的 MIME 类,这里是值为text/css

（2）使用link引用网页收藏夹图标

<link rel="icon" href="favicon.ico" type="image/x-icon" />

①href 值为外部资源地址这里是收藏夹图标地址

②rel 定义当前文档与被链接文档之间的关系,这里是外部icon图标属性

③type 规定被链接文档的 MIME 类,这里是值为image/x-icon

【特别说明】：<link>标签不一定必须放置在<head></head>标签内,可以适当放置在<body>下</body>以上部分，效果相同，但是推荐标准的放置在head标签内。

m：

<map>标签，主要用于在图片上面创建热点，所谓图片热点就是给你一张图片然后你可以设置点击图片不同的位置进入不同的链接！这个我在后面文章http://570109268.iteye.com/admin/blogs/2406181里做了总结

<mark>标签，代表突出显示的文字,例如可以为了标记特定上下文中的文本而使用这个标签. 举个例子，它可以用来显示搜索引擎搜索后关键词

【用法说明:】

①在一个引用或者块级元素中，突出显示的文本通常是外部引用的文本，或者标记成特殊审查其他的作者很重要.

②在主要的文本中，突出显示的文本通常可能和用户当前活动具有某种关联性，比如搜索的结果.

③不要为了语法高亮而用 <mark> 元素; 你应该用 <strong> 元素来实现这个目的（语法高亮）。

④不要把 <mark> 元素和 <strong> 元素搞混淆. <strong> 元素用来表示文本在上下文的重要型的，而 <mark> 元素是用来表示上下文的关联性的

<menu> 翻译为菜单元素，呈现了一组用户可执行或激活的命令。这既包含了可能出现在屏幕顶端的列表菜单，也包含了那些隐藏在按钮之下、当点击按钮后显示出来的文本菜单。

【注释：所有主流浏览器均不支持 menu 元素】

【使用说明】: <menu> 和 <ul> 元素都呈现了无序列表元素。最主要的区别是 <ul> 主要是为了展示选项，而 <menu> 则是为了交互。

【注意】:这个元素在HTML4中被弃用，但再HTML5.1（正在起草中）中被重新推荐使用。

区别于<meta>元标签

<menuitem> 翻译为菜单项元素，

标签作用：弹出菜单调用的项目

标签用法：定义用户可以从弹出菜单调用的命令/菜单项目

应用实例：包含不同 <menuitem> 元素的上下文菜单：

<menu type="context" id="mymenu">
  <menuitem label="Refresh" onclick="window.location.reload();" icon="ico_reload.png">
  </menuitem>
  <menu label="Share on...">
    <menuitem label="Twitter" icon="ico_twitter.png"
    onclick="window.open('//twitter.com/intent/tweet?text='+window.location.href);">
    </menuitem>
    <menuitem label="Facebook" icon="ico_facebook.png"
    onclick="window.open('//facebook.com/sharer/sharer.php?u='+window.location.href);">
    </menuitem>
  </menu>
  <menuitem label="Email This Page"
  onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

兼容：目前只有Firefox8.0以及更高的版本支持<menuitem>标签

<meter> 定义度量（单位）。仅用于已知最大和最小值的度量。

【适用场景】：进度条，HTML5 的meter和progress控件虽然都可以实现进度显示，但综合考虑下来progress兼容性比较好些。meter控件在IOS ipad/iphone似乎都显示不正确。

关于两者对比，我在后面文章http://570109268.iteye.com/admin/blogs/2408312里会再总结

【注释】：必须定义度量的范围，既可以在 text 中，也可以在 min/max 属性中定义。

HTML5新增的标签，定义度量衡。仅用于已知最大和最小值的度量。也就是必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

high    number    定义度量的值位于哪个点，被界定为高的值。   

low    number    定义度量的值位于哪个点，被界定为低的值。   

max    number    定义最大值。默认值是 1。   

min    number    定义最小值。默认值是 0。   

optimum    number    定义什么样的度量值是最佳的值。如果该值高于 "high" 属性，则意味着值越高越好。如果该值低于 "low" 属性的值，则意味着值越低越好。   

value    number    定义度量的值。

可以用CSS的伪元素对默认的显示方式处理下（因为很可能各个浏览器的显示方式不一）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meter</title>
    <style>
        .deal meter { -webkit-appearance: none; }
        .deal ::-webkit-meter-bar {
            height: 1em;
            background: white;
            border: 1px solid black;
        }
        .deal ::-webkit-meter-optimum-value { background: green; } /* 好 */
        .deal ::-webkit-meter-suboptimum-value { background: orange; } /* 凑合 */
        .deal ::-webkit-meter-even-less-good-value { background: blue; }   /* 糟糕 */

        .deal ::-moz-meter-bar {
            background: rgba(0,96,0,.6);
        }

    </style>
</head>
<body>
<p>
    默认的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
<p class="deal">
    处理后的：<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
    <meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
    <meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
</p>
</body>
</html>

实际显示效果：

n：

<nav> 用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确，同时对于屏幕阅读器等设备的支持也更好。一个页面中可以拥有多个<nav>元素，作为页面整体或不同部分的导航。可以看到<nav>不仅可以用来作为页面全局导航，也可以放在<article>标签内，作为单篇文章内容的相关导航链接到当前页面的其他位置。

【H5新标签，用于增强语义，语义化有利于网页的SEO】

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

②【重要事项：如果您希望 frameset 添加 <noframes> 标签，就必须把其中的文本包装在 <body></body> 标签中！】

注释：如果浏览器有能力处理框架，就不会显示出 frameset 元素中的文本。

<frameset cols="25%,50%,25%">
  <frame src="http://www.w3school.com.cn/example/html/frame_a.html">
  <frame src="http://www.w3school.com.cn/example/html/frame_b.html">
  <frame src="http://www.w3school.com.cn/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>

</frameset>

此标签可被用于可识别 <script> 标签但无法支持其中的脚本的浏览器。

【注释】：如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本。

【注释】：无法识别 <script> 标签的浏览器会把标签的内容显示到页面上。为了避免浏览器这样做，您应当在注释标签中隐藏脚本。老式的（无法识别 <script> 标签的）浏览器会忽略注释，这样就不会把标签的内容写到页面上，而新式的浏览器则懂得执行这些脚本，即使它们被包围在注释标签中！

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

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

object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现。

浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。

而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。

关于【HTML中的object、param标记】，我在后面文章http://570109268.iteye.com/admin/blogs/2407477里做过总结。

<ol> 有序列表

值描述

1	默认值。数字有序列表。（1、2、3、4）
a	按字母顺序排列的有序列表，小写。（a、b、c、d）
A	按字母顺序排列的有序列表，大写。（A、B、C、D）
i	罗马字母，小写。（i, ii, iii, iv）
I	罗马字母，大写。（I, II, III, IV）

【H5新属性】

①reversed---规定列表顺序为降序。(9,8,7...)

兼容：目前只有 Chrome 和 Safari 6 支持 reversed 属性。

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

②start---规定有序列表的起始值

兼容：尽管不赞成使用 start 属性，不过所有浏览器都支持 start 属性。注释：目前，仍然没有 start 属性的 CSS 替代方案。

<ol start="5" reversed>
    <li>HTML</li>
    <li>XHTML</li>
    <li>CSS</li>
</ol>

③type----规定有序列表的项目符号的类型，包括1，A，a，I，i

注意：尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性

<ol type="I">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ol>

兼容性CSS语法：

<ol style="list-style-type:upper-roman">

<ul style="list-style-type:upper-roman">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ul>
<ul style="list-style-type:lower-alpha">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ul>

兼容性解决案例CSS list-style-type 属性，在后面文章http://570109268.iteye.com/blog/2406554中有详细总结

<optgroup> 把相关的选项组合在一起

兼容：所有主流浏览器都支持 <optgroup> 标签

作用：用于组合选项。当使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

<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>

在网页表单中，<optgroup>元素用于在<select>元素中创建一组选项<option>。这个可以更好的区分每一个组选项之间的区别。

这个元素包含两个属性：disabled和label

①disabled：表示选项组无法被选择

②label：表示选项组的名字

<select>
    <optgroup label="Group 1">
        <option>Option 1.1</option>
    </optgroup>
    <optgroup label="Group 2">
        <option>Option 2.1</option>
        <option>Option 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
        <option>Option 3.1</option>
        <option>Option 3.2</option>
        <option>Option 3.3</option>
    </optgroup>
</select>

<option> 定义下拉列表中的一个选项（一个条目），标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示

兼容：所有浏览器都支持 value 属性

【拓展】：

①value------发送到服务器的值 <option> 与 <option/> 之间的值是浏览器显示在下拉列表中的内容，而 value 属性中的值是表单被提交时被发送到服务器的值

注释：如果没有指定 value 属性，选项的值将设置为 <option> 标签中的内容。

<form action="http://www.w3school.com.cn//example/html/form_action.asp" method="get" target="_blank">
<select name="cars">
  <option value="volvo">Volvo XC90</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi TT</option>
</select>
<input type="submit" value="Submit" />
</form>
<p>请点击“确认”按钮，把输入发送到服务器。</p>

【注释】input是标准输入设备（文件），output是标准输出设备（文件）

可以定义不同类型的输出，标记是用来输出计算结果或用户动作的结果

例子：执行计算然后在 <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>

兼容：H5新标签，IE不支持

p：

<p> 定义段落

<param> param标签为包含它的<object>标签提供参数，关于HTML中的object、param标记，我在后面文章http://570109268.iteye.com/admin/blogs/2407477里做了总结

<pre> 定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，即段落的定义与源码相同，下面举个例子可以看出。而文本也会呈现为等宽字体。

【常见应用】---用来表示计算机的源代码

【注意】：

①可以导致段落断开的标签（例如标题、<p> 和 <address> 标签）绝不能包含在 <pre> 所定义的块里。尽管有些浏览器会把段落结束标签解释为简单地换行，但是这种行为在所有浏览器上并不都是一样的

②pre 元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。当把其他标签（比如 <a> 标签）放到 <pre> 块中时，就像放在 HTML/XHTML 文档的其他部分中一样即可

例子：

①未使用pre标签时，网页中的文本段落样式与源码中的不符（这里源码我写了两段，但网页只显示一段）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><pre>标签作用检测</title>
</head>
<body>
&lt;!DOCTYPE html&gt;
&nbsp;&nbsp;&lt;html lang=&quot;en&quot;&gt;
</body>
</html>

②使用<pre>标签之后，网页的段落情况与源码相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><pre>标签作用检测</title>
</head>
<body>
<pre>
    &lt;!DOCTYPE html&gt;
    &nbsp;&nbsp;&lt;html lang=&quot;en&quot;&gt;  
</pre>
</body>
</html>

经过对比即可发现区别。

<code>只显示单行编程代码；<pre>则是显示一大段编程代码，而且会保留原文本中的空格和换行。

【注意】：在文章中一般如果要插入多行代码时不能使用<code>标签了。<code>作为代码标签来使用，可以定义该标签显示时候的格式，但毕竟只对单行有效。

如果是多行代码，可以使用<pre>标签。<pre>特点在于使用场景不仅仅是代码，最主要是能够保存标签之间原有的换行空格等符号，这在写大段内容时，比较方便。

<progress> 标示任务的进度（进程），即进度条，

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

在后面文章http://570109268.iteye.com/admin/blogs/2408312里做了详解

q：

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

<q>Here is a short quotation here is a short quotation</q>

【注意】<blockquote>标签和<q>标签都表示“引用”

区别：

一、格式不同

1、<q>：q标签是行内元素，在内容的开始和结尾处会包有【“”】；

2、<blockquote>：blockquote是块级元素，默认带有左右40px的外间距，不带【“”】。

二、语义不同

1、<q>：引用的是小段文字；2、<blockquote>：引用的是大段的内容块。

r：

<ruby>,<rp>,<rt>标签定义 ruby 注释（中文注音或字符），常用来展示东亚文字注音或字符注释。不允许标签省略

【用法】：将 <ruby> 标签与 <rt> 和 <rp> 标签一起使用：

<ruby> 元素由一个或多个需要解释/发音的字符和一个提供该信息的 <rt> 元素组成，还包括可选的 <rp> 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

【提示】：支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容

s：

<s> 标记删除线文本

【注意】：H4开始已经不赞成使用，以后可能消失。推荐使用<del>标签代替

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

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

上面的 HTML 代码会显示为：字符序列 ae 可能会被转换为 æ 连字字符

【注释】：在 HTML 中，用于 "ae" 连字的特殊实体是 "æ"，大多数浏览器都会将它转换成相应的 "æ" 连字字符。

script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件；必需的 type 属性规定脚本的 MIME 类型；JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

<script type="text/javascript">
    document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p>

执行脚本，若不支持则显示<noscript>中的内容

<section> 简单理解就是语义化标签，section 尽量平坦化(控制在一层)，类似p 标签的使用规则。有章节(正好是section的中文翻译)和区域的概念。

section的例子包括书的章节回目、多tab对话框的每个tab页、论文以数字编号的小节。网站的主页可能分成介绍、最新内容、联系信息等section。

<select> 创建单选或多选菜单,元素中的 <option> 标签用于定义列表中的可用选项

H5新属性：

属性值描述

autofocus	autofocus	规定在页面加载后文本区域自动获得焦点。
disabled	disabled	规定禁用该下拉列表。
form	form_id	规定文本区域所属的一个或多个表单。
multiple	multiple	规定可选择多个选项。
name	name	规定下拉列表的名称。
required	required	规定文本区域是必填的。
size	number	规定下拉列表中可见选项的数目。

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

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

<source> 为媒介元素（比如 <video> 和 <audio>）定义媒介资源。允许规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<video width="320" height="240" controls>
<source src="http://www.w3school.com.cn//i/movie.mp4" type="video/mp4" media="screen and (min-width:320px)">
<source src="http://www.w3school.com.cn//i/movie.ogg" type="video/ogg" media="screen and (min-width:320px)">
Your browser does not support the video tag.
</video>
<p><b>注释：</b>目前几乎没有浏览器支持 media 属性。</p>

<span> 行内标签，与div一样都是无语意标签

<strike> 可定义加删除线文本定义（就是<s>标签的全写），H4开始已经不推荐使用，

以后可能会消失。推荐使用<del>代替

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

浏览器通常会以不同于 <em> 标签的方式来显示 <strong> 标签中的内容，通常是用加粗的字体（相对于斜体）

来显示其中的内容，这样用户就可以把这两个标签区分开来了。

style 元素位于 head 部分中。【提示】：如需链接外部样式表，请使用 <link> 标签

<sup>，<sub> 上标与下标

<p>
This text contains <sup>superscript上标</sup>
</p>
<p>
This text contains <sub>subscript下标</sub>
</p>

包含在标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。

【提示】：无论是 <sub> 标签还是和它对应的 <sup> 标签，在数学等式、科学符号和化学公式中都非常有用。

<summary> 与 <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。

包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息，定义有关文档的详细信息

<details>
<summary>HTML 5</summary>
This document teaches you everything you have to learn about HTML 5.
</details>

【兼容】：只有 Chrome 以及 Safari 6 支持 <summary> 标签

t：

<table> 表格标签

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption（表格标题）、col（为表格中一个或多个列定义属性值）、

colgroup（对表格中的列进行组合，以便对其进行格式化）、thead（表头）、tfoot 以及 tbody 元素

【拓展：】

cellpadding----规定单元边沿与其内容之间的空白

cellspacing----规定单元格之间的空白

rowspan-----规定单元格可横跨的行数（合并单元格效果）

colspan----规定单元格可横跨的列数（合并单元格效果）

valign----规定垂直对齐方式（顶部，顶部，基线，默认）

值描述

top	对内容进行上对齐。
middle	对内容进行居中对齐（默认值）。
bottom	对内容进行下对齐。
baseline	与基线对齐。

<textarea> 定义一个文本输入域

autofocus------规定在页面加载后文本区域自动获得焦点

cols------规定文本区内的可见宽度

rows------规定文本区内的可见行数

<time> 定义日期和时间，但是不会在任何浏览器中呈现任何特殊效果

【兼容：】目前所有主流浏览器都不支持 <time> 标签

<title> 定义文档的标题

通常把它放置在浏览器窗口的标题栏或状态栏上。

同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

<title> 标签支持以下标准属性：

属性值描述

dir	rtl ltr	规定元素中内容的文本方向。
lang	language_code	规定元素中内容的语言代码。
xml:lang	language_code	规定 XHTML 文档中元素内容的语言代码。

<th> 定义表格内的表头单元格。

HTML 表单中有两种类型的单元格：

表头单元格 - 包含表头信息（由 th 元素创建）
标准单元格 - 包含数据（由 td 元素创建）

th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。

<track> 带有字幕的视频，为诸如 video 元素之类的媒介规定外部文本轨道

用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的

【兼容：】目前所有主流浏览器都不支持 <track> 标签

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

以下的元素均是字体样式元素。我们并不被反对使用这些标签。

但是如果您只是希望通过这些标签单纯地改变文本的样式，建议您使用样式表来取得更加丰富的效果。

<tt>	呈现类似打字机或者等宽的文本效果。
<i>	显示斜体文本效果。
<b>	呈现粗体文本效果。
<big>	呈现大号字体效果。
<small>	呈现小号字体效果。

<tt> 标签与 <code>（定义源代码）和 <kbd>（定义键盘文本）标签一样，<tt> 标签和必需的 </tt> 结束标签

告诉浏览器，要把其中包含的文本显示为等宽字体。对于那些已经使用了等宽字体的浏览器来说，

这个标签在文本的显示上就没有什么特殊效果了。

u：

<u> 为文本添加下划线

【注意：】H4里不推荐使用，而且要尽量避免为文本加下划线 - 用户会把它混淆为一个超链接！

<ul> 定义无序列表

v：

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

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式

但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，

我们建议您使用样式表，那么做会达到更加丰富的效果。

<em>	把文本定义为强调的内容。
<strong>	把文本定义为语气更强的强调的内容。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

<video> 定义视频，比如电影片段或其他视频流（H5新标签）

【提示】：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息

<video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls">
    your browser does not support the video tag（您的浏览器不支持视频标签）
</video>

H5新属性：

属性值描述

autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

w：

<wbr> 软换行，在英语单词过长且顶到边缘时可以自动换行，中文几乎没效果

HTML中<br/>表示换行，<br/>表示必须换行。

而<wbr>意思是在浏览器窗口或父级窗口宽度足够的情况下，不换行；

在宽度不足的情况下，在加了<wbr>处主动换行。例子：

<p>To learn AJAX, you must be caj shaskh sagshga vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
    familiar with the ssssssssssssssssssssss<wbr>sssssssssssssssssssssssssssssssssss ffffffffffffff hhhhhhhhhhhhh
    XMLHttpRequest Object.To learn AJAX, you must be familiar with the XMLHttp<wbr>Request Object.</p>

当正常情况下英文宽度过小，不足以在行末书写完一个词时，就将行末整个词放到下一行，实现换行.

但是加入上面位置的<wbr>时，软换行就能收主动拆分单词，可以在支持HTML5的浏览器中测试

（IE系列除了9都不支持，可以用Chrome）。这个<wbr>好像对字符型的语言用处挺大，但是对于想中文这种字

，貌似没多大用处。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr> 元素

来添加 Word Break Opportunity（单词换行时机）。

【兼容：】除了IE外，所有浏览器都支持 <wbr> 标签

好了，总结到这里终于把标签理了一遍，时间上比预算时间多出数倍，以后会继续努力的

.

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论