HTML标签常用标签

最新推荐文章于 2024-08-04 14:23:51 发布

梦想家-mxj

最新推荐文章于 2024-08-04 14:23:51 发布

阅读量1.1w

点赞数 35

分类专栏： web前段文章标签： html标签

本文链接：https://blog.csdn.net/iOSbird/article/details/56667766

版权

web前段专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、注释标签

注释标签用于在源代码中插入注释。注释不会显示在浏览器中。

2、<!DOCTYPE> 声明标签

<!DOCTYPE> 声明必须是 HTML文档的第一行，位于 <html>标签之前。<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML版本进行编写的指令。在 HTML 4.01中有三种 <!DOCTYPE>声明：1）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">

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

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

3）HTML 4.01 Frameset

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

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

在 HTML5 中只有一种：<!DOCTYPE html>

3、 <a>标签定义和用法

<a>标签定义超链接，用于从一张页面链接到另一张页面。

<a>元素最重要的属性是 href属性，它指示链接的目标。

下面是指向w3school的超链接

<a href="http://www.w3school.com.cn">W3School</a>

提示和注释

提示：如果不使用 href属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。

提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target属性）。

提示：请使用 CSS 来设置链接的样式。

HTML 4.01 与 HTML5之间的差异：在 HTML 4.01中，<a> 标签可以是超链接或锚。在 HTML5 中，<a> 标签始终是超链接，但是如果未设置 href属性，则只是超链接的占位符。HTML5提供了一些新属性，同时不再支持一些 HTML 4.01属性。详见：http://www.w3school.com.cn/tags/tag_a.asp

4、<abbr>标签

定义和用法

<abbr> 标签指示简称或缩写，比如 "WWW"或 "NATO"。

通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。

<abbr> 标签最初是在 HTML 4.0中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。

标记一个缩写：The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

HTML 4.01 与 HTML5之间的差异：无。

详见：http://www.w3school.com.cn/tags/tag_abbr.asp

5、<acronym>标签

所有主流的浏览器均支持 <acronym>标签。HTML5 中不支持 <acronym> 标签。

实例：<acronym title="World Wide Web">WWW</acronym>

提示：title 属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本。

详见：http://www.w3school.com.cn/tags/tag_acronym.asp

6、<address>标签——定义文档或文章的作者/拥有者的联系信息。

定义和用法

如果 <address>元素位于 <body>元素内，则它表示文档联系信息。

如果 <address>元素位于 <article>元素内，则它表示文章的联系信息。

<address>元素中的文本通常呈现为斜体。大多数浏览器会在 address元素前后添加折行。

提示：<address> 标签不应该用于描述通讯地址，除非它是联系信息的一部分。

提示：<address> 元素通常连同其他信息被包含在 <footer> 元素中。

7、<applet>标签

定义和用法

HTML5 中不支持 <applet>标签。请使用 object 元素标签代替。

HTML 4.01 中不赞成使用 <applet>元素。

<applet> 标签定义嵌入的 applet。

详见：http://www.w3school.com.cn/tags/tag_applet.asp

8、<area>标签

定义和用法

<area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像），area元素总是嵌套在 <map>标签中。注释：<img>标签中的 usemap属性与 map 元素 name属性相关联，创建图像与映射之间的联系。

实例：

</map>

注释：<img>中的 usemap 属性可引用 <map>中的 id 或name 属性（由浏览器决定），所以我们需要同时向 <map>添加 id 和 name 两个属性。

属性：alt（必需） — 定义此区域的替换文本

可选的属性：

coords（坐标值）—-定义可点击区域（对鼠标敏感的区域）的坐标

href（URL）-—定义此区域的目标URL

onhref —— 从图像映射排除某个区域

shape （default、rect、circ、poly）——定义区域的形状

target （_blank、_parent、_self、_top）——规定何处打开href属性指定的目标URL

详见：http://www.w3school.com.cn/tags/tag_area.asp

9、 <aside>标签

是 HTML 5 的新标签，定义其所处内容之外的内容。aside的内容应该与附近的内容相关。

HTML5提供的aside元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。

根据目前的规范，aside元素有两种使用方法：

被包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
在article之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

实例代码：

<body>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor

incididunt ut labore et dolore magna aliqua.</p>

<aside>

<!-- Since this aside is contained within an article, a parser

should understand that the content of this aside is directly related

to the article itself. -->

<h1>Glossary</h1>

<dl>

<dt>Lorem</dt>

<dd>ipsum dolor sit amet</dd>

</dl>

</aside>

</article>

<aside>

<!-- This aside is outside of the article. Its content is related

to the page, but not as closely related to the above article -->

<h2>Blogroll</h2>

<ul>

<li><a href="#">My Friend</a></li>

<li><a href="#">My Other Friend</a></li>

<li><a href="#">My Best Friend</a></li>

</ul>

</aside>

</body>

提示：<aside> 的内容可用作文章的侧栏。

详见：http://www.w3school.com.cn/tags/tag_aside.asp

10、<audio>标签

是 HTML 5 的新标签。

Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <audio> 标签。<audio>标签定义声音，比如音乐或其他音频流。

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

您的浏览器不支持 audio 标签。

</audio>

audio常用属性

那么首先来看一下audio标签中的一些常用属性：

audio音乐格式的支持

audio可通过new来创建。也可以通过用document来获取。

//通过new关键字来创建Audio对象

var Music = new Audio("test.mp3");

//通过document来获取已经存在的Audio对象

var Music = document.getElementById("audio");

//当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。

然后我们来看下api所提供的对audio标签操作的一些属性和方法

详见：http://www.cnblogs.com/zhangwei595806165/p/5507774.html、http://www.w3school.com.cn/tags/tag_audio.asp

11、<b>标签

<b> 标签规定粗体文本。

注释：根据 HTML5 规范，在没有其他合适标签更合适时，才应该把 <b>标签作为最后的选项。HTML5规范声明：应该使用 <h1> - <h6> 来表示标题，使用<em> 标签来表示强调的文本，应该使用<strong> 标签来表示重要文本，应该使用 <mark>标签来表示标注的/突出显示的文本。另外能够使用 CSS "font-weight"属性来设置粗体文本。

详见：http://www.w3school.com.cn/tags/tag_b.asp

12、 <base>标签

定义和用法

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

通常情况下，浏览器会从当前文档的 URL中提取相应的元素来填写相对 URL中的空白。

使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form>标签中的 URL。

实例：

<head>

</head>

<body>

<a href="http://www.w3school.com.cn">W3School</a>

</body>

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

必需的属性

href（URL）——规定页面中所有相对应连接的基准URL

可选属性

target （_blank、_parent、_self、_top、framename）——何处打开页面中所有的链接。

在 HTML 文档中 <base> 每出现一次，Base对象就会被创建。

详见：http://www.w3school.com.cn/tags/tag_base.asp

13、<bdo>标签

bdo 元素可覆盖默认的文本方向。

可选属性 dir （ltr、rtl）定义文字的方向 ltr —左到右；rtl — 右到左

详见：http://www.w3school.com.cn/tags/tag_bdo.asp

14、<big>标签

<big> 标签呈现大号字体效果。

使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在 <big>标签和其相应的 </big>标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big>标签将不起任何作用。

更妙的是，可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号，直到上限 7号文本，正如字体模型所定义的那样。

但是使用 <big> 标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持 <big>标签的浏览器来说，它经常将其认为是粗体字标签。

详见：http://www.w3school.com.cn/tags/tag_big.asp

15、<blockquote>标签

<blockquote>标签定义块引用，所有主流的浏览器均支持 <blockquote>标签，但是没有浏览器能够正确地显示 cite属性。<blockquote>与 </blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

可选属性 cite（URL）——规定引用的来源

提示：请使用 q 元素来标记短的引用。

<q> 和 <blockquote>都表示“引用”。不同的是，q标签是行内元素，在内容的开始和结尾处会包有“”，而 blockquote是块级元素，默认带有左右40px的外间距，不带“”。从语义上讲，前者引用的是小段文字，后者引用的是大段的内容块。从兼容性上讲，在IE6、7下q标签不会带有“”。FF下的引号是漂亮的全角字符：“”。而chrome下则为半角字符：""。至于IE8、9，应该也是全角字符，但在不指定字体的情况下真的丑爆了，在为其指定宋体或者微软雅黑后呈现与FF一致。

16、<br>标签

<br> 可插入一个简单的换行符。<br>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML中，把结束标签放在开始标签中，也就是 <br />。请注意，<br>标签只是简单地开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。

clear 属性

如果您希望文本流在内联表格或图像的下一行继续输出，请使用 clear属性，该属性有三个可选的值：left、right或者 all，每个值都代表一个边界或两边的边界。

提示：一般情况下，文本流中的其他行会在内联图像的底部显示，除非图形的 <img>标签被设置为左对齐或右对齐（对于 <table>标签也一样）。因此，<br>标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。

注释：请使用 <br> 来输入空行，而不是分割段落。

详情：http://www.w3school.com.cn/tags/tag_br.asp

17、<button>标签

定义一个按钮，所有主流浏览器都支持 <button>标签。

用法：

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input元素创建的按钮之间的不同之处。

<button> 控件与 <input type="button">相比，提供了更为强大的功能和更丰富的内容。<button>与 </button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type属性。Internet Explorer的默认类型是 "button"，而其他浏览器中（包括 W3C规范）的默认值是 "submit"。

属性：autofocus（autofocus）——规定当页面加载时按钮应当自动地获得焦点

disabled （disabled）—规定应该禁用该按钮

form （form_name）——规定按钮属于一个或多个表单

formaction （url）——覆盖form元素的action属性（该属性与type=“submit”配合使用）

formenctype （application/x-www-form-urlencoded、multipart/form-data、text/plain）——覆盖form元素的enctype属性（该属性与type=“submit”配合使用）

formmethod （get、post）——覆盖form元素的method属性（该属性与type=“submit”配合使用）

formmovalidate（formmovalidate） —— 覆盖form的novalidate属性（该属性与type=“submit”配合使用）

formtarget（_blank、_parent、_self、top、framename）覆盖form的target属性（该属性与type=“submit”配合使用

name — 按钮的名称

type（button、reset、submit） —— 按钮的类型

value （text）——规定按钮的初始值

placeholder —— 按钮的占位符

<html>

<body>

E-mail: <input type="email" name="userid" /><br />

<button type="submit" formnovalidate="formnovalidate">进行没有验证的提交</button>

</form>

</body>

</html>

formnovalidate 属性覆盖表单的novalidate 属性。

如果使用该属性，则提交表单时按钮不会执行验证过程。

该属性与 type="submit"配合使用。

一开始的页面是

输入qw，点击提交会验证输入的正确性

如果点击第二个按钮就不会验证输入的内容是否符合要求

详见：http://www.w3school.com.cn/tags/tag_button.asp

18、<canvas>标签

（Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari支持 <canvas> 标签。）

定义和用法

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。是html5中新标签。

HTML5 的 canvas元素使用 JavaScript在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

属性

height — 设置canvas的高度

width — 设置canvas的宽度

详见：http://www.w3school.com.cn/tags/tag_canvas.asp

19、<caption>标签

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

可选属性

align （left、right、top、bottom）—规定标题的对齐方式（w3c不推荐使用，一般使用样式取而代之）

在 HTML 4.01中，caption 元素的 align 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD中，caption 元素的 align 属性是不被支持的。

<html>

<body>

<h4>这个表格有一个标题，以及粗边框：</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

效果图：

20、 <cite>标签

<cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。

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

用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a>标签中，从而把一个超链接指向该联机版本。

<cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

21、<em> <strong> <dfn> <code> <samp> <kbd><var> <cite>标签

都是短语元素，虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

详见：http://www.w3school.com.cn/tags/tag_phrase_elements.asp

22、<col>标签

为表格中一个或多个列定义属性值。如需对全部列应用样式，<col>标签很有用，这样就不需要对各个单元和各行重复应用样式了。只能在 table或 colgroup 元素中使用 <col> 标签。

提示：请为 <col> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。如果您希望在 colgroup内部为每个列规定不同的属性值时，请使用此元素。如果没有 col元素，列会从 colgroup那里继承所有的属性值。col元素是仅包含属性的空元素。如需创建列，您就必须在 tr元素内部规定 td 元素。

详见：http://www.w3school.com.cn/tags/tag_col.asp

23、<datalist>标签

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

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

<html>

<body>

</datalist>

</html>

选择第三个

注意：所有主流浏览器都支持 <datalist>标签，除了 Internet Explorer和 Safari。

详见：http://www.w3school.com.cn/tags/tag_datalist.asp

24、<dl>、<dd>、<dt>标签

<dl>

<dd>用来计算的仪器 ... ...</dd>

<dd>以视觉方式显示信息的装置 ... ...</dd>

</dl>

<dl> 标签定义了定义列表（definition list）。

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

25、<del>标签

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

<html>

<body>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>

</body>

</html>

详见：http://www.w3school.com.cn/tags/att_del_cite.asp

26、<div>标签

<div> 可定义文档中的分区或节（division/section）。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class来标记 <div>，那么该标签的作用会变得更加有效。

用法

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div>固有的唯一格式表现。可以通过 <div>的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而 id用于标识单独的唯一的元素。

W3C 在其最新的 XHTML2草案的 XHTML 结构模型中这样定义 div：

div 元素，通过与 id、class及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使 XHTML适应他们自身的需求和口味。

div 是 division的简写。division意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。

http://www.w3school.com.cn/tags/att_div.asp

27、<embed>标签

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

属性

详见：http://www.w3school.com.cn/tags/tag_embed.asp

28、<fieldset>标签

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

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

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

<fieldset> 标签没有必需的或唯一的属性。

<legend>标签为 fieldset元素定义标题。

属性

<html>

<body>

<form>

<legend>health information</legend>

height: <input type="text" />

weight: <input type="text" />

age:<input type="text" />

</fieldset>

</form>

</body>

</html>

页面效果

29、 <figure>标签和<figcaption>标签

Internet Explorer 9, Firefox, Opera, Chrome以及 Safari 支持

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

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签，Internet Explorer 9, Firefox, Opera, Chrome以及 Safari 支持 <figcaption> 标签。

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

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figcaption>黄浦江上的的卢浦大桥</figcaption>

</figure>

30、<header>和<footer>标签

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

<footer> 标签，Internet Explorer 9, Firefox, Opera, Chrome, and Safari支持 <footer> 标签。用来定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。

页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

您可以在一个文档中使用多个 <footer>元素。

<footer> 标签是 HTML 5中的新标签。

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

31、<form>标签

用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含menus、textarea、fieldset、legend和label元素。

表单用于向服务器传输数据。

注释：form元素是块级元素，其前后会产生折行。

<html>

<body>

<p>First name: <input type="text" name="fname" /></p>

</form>

</body>

</html>

属性

详见：http://www.w3school.com.cn/tags/tag_form.asp

32、<h1>到 <h6>标签

由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

33、<head>标签

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head部分：<base>,<link>,<meta>,<script>,<style>,以及<title>。

<title> 定义文档的标题，它是 head部分中唯一必需的元素。

提示：应该把 <head>标签放在文档的开始处，紧跟在 <html>后面，并处于 <body>标签或 <frameset>标签之前。

提示：请记住始终为文档规定标题！

框架

34、<hr>标签

<hr> 标签在 HTML页面中创建一条水平线。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

HTML 与 XHTML之间的差异

在 HTML 中，<hr>标签没有结束标签。

在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。

在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。

在 XHTML 1.0 Strict DTD中，hr 元素的所有呈现属性均不被支持。

属性

35、<i>标签

<i> 标签显示斜体文本效果。

<i> 标签和基于内容的样式标签<em>类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。

提示：<i> 标签一定要和结束标签 </i>结合起来使用。

<html>

<body>

<i> 我是i标签 </i>

</body>

</html>

36、 <img>标签

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

<img> 标签有两个必需的属性：src属性和 alt 属性。

详见：http://www.w3school.com.cn/tags/tag_img.asp

37、 <input>标签

用于搜集用户信息。根据不同的 type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

提示：请使用 label 元素为某个表单控件定义标签。

<form>

<br />

<label for="female">Female</label>

</form>

具体属性和实例详见：http://www.w3school.com.cn/tags/tag_input.asp

38、<keygen>标签

Firefox, Chrome, Opera以及 Safari 6 支持 <keygen> 标签。

<keygen> 标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。

属性

详见：http://www.w3school.com.cn/tags/tag_keygen.asp

39、<label>标签

为 input 元素定义标注（标记）

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for属性应当与相关元素的 id属性相同。

属性

<html>

<body>

<form>

<br />

<label for="female">Female</label>

</form>

</body>

</html>

也就是说我们点击Male文本时也会触发 male的 input的点击事件

详见：http://www.w3school.com.cn/tags/tag_label.asp

40、<li>标签、<ol>标签、<ul>标签

<li>标签

<li> 标签定义列表项目。

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

提示：请使用 CSS 来定义列表和列表项目的类型。

<ol> 标签定义有序列表。

提示：请使用 CSS 来定义列表的类型。

<ul> 标签定义无序列表。

Pasted Graphic 31.tiff

HTML 与 XHTML之间的差异

在 HTML 4.01 中，ul 元素的 "compact"和 "type" 属性是不被赞成使用的。

在 XHTML 1.0 Strict DTD中，ul 元素的 "compact" 和 "type" 属性是不被支持的。

提示：请使用样式来定义列表的类型。

例子（复杂的嵌套列表）：

<h4>一个嵌套列表：</h4>

<ul>

<li>茶

<ul>

<li>绿茶

<ul>

</ul>

</li>

</ul>

</li>

</ul>

例子(不同类型的无序列表)：

<h4>Disc 项目符号列表：</h4>

</ul>

<h4>Circle 项目符号列表：</h4>

</ul>

<h4>Square 项目符号列表：</h4>

</ul>

41、<link>标签

注释：link 元素是空元素，它仅包含属性。

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

给页面的头部加头像

注意：必须加在head部分

详见：http://www.w3school.com.cn/tags/tag_link.asp

42、<map>标签

所有主流浏览器都支持 <map> 标签。它定义了一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。

注释：area 元素永远嵌套在 map元素内部。area 元素可定义图像映射中的区域。

注释：<img>中的 usemap属性可引用 <map> 中的 id 或 name属性（取决于浏览器），所以我们应同时向 <map>添加 id 和 name 属性。

例子：

<p>请点击图像上的星球，把它们放大。</p>

<img

src="/i/eg_planets.jpg"

border="0" usemap="#planetmap"

alt="Planets" />

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

注意：shape="circle" coords="180,139,14”是一个圆（中心坐标180，139半径14）

矩形：shape="rectangle"，coords="x1,y1,x2,y2"第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标

多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。

详见：http://www.w3school.com.cn/tags/tag_map.asp

43、<mark>标签、<meter>标签、<nav>标签

Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <mark> 标签。

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

Firefox, Chrome, Opera以及 Safari 6 支持 <meter> 标签。

<meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。

注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress>标签。

<nav> 标签 Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari支持 <nav> 标签，<nav> 标签定义导航链接的部分。

提示：如果文档中有“前后”按钮，则应该把它放到 <nav>元素中。

<!DOCTYPE html>

<html>

<body>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

</body>

</html>

详见：http://www.w3school.com.cn/tags/tag_nav.asp

44、<meta>标签

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

Meta 元素中的信息可以描述 HTML文档，Meta元素中的信息可以描述文档的关键词

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

在网址已经变更的情况下，将用户重定向到另外一个地址。

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

content="5表示5秒后自动跳转到重定向的地址

详见：http://www.w3school.com.cn/tags/tag_meta.asp

45、<object>标签

定义一个嵌入的对象，<object>标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF以及 Flash。object的初衷是取代 img 和 applet 元素。

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

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

注释：<param>标签定义用于对象的 run-time 设置。

注释：不要对图像使用 <object>标签，请使用 <img> 标签代替。

详见：http://www.w3school.com.cn/tags/tag_object.asp

46、<optgroup>标签、<option>标签、<select>标签

所有主流浏览器都支持 <optgroup>标签。<optgroup>标签定义选项组。

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

例子：

<option value ="volvo">Volvo</option>

</optgroup>

<option value ="mercedes">Mercedes</option>

</optgroup>

</select>

详见：http://www.w3school.com.cn/tags/tag_optgroup.asp

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

option 元素位于 select元素内部。

注释：<option>标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value属性，此属性会指示出被送往服务器的内容。

提示：如果列表选项很多，可以使用 <optgroup>标签对相关选项进行组合。

详见：http://www.w3school.com.cn/tags/tag_option.asp

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

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

详见：http://www.w3school.com.cn/tags/tag_select.asp

47、<output>标签、<param>标签、<pre>标签

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

详见：http://www.w3school.com.cn/tags/tag_output.asp

param 元素允许您为插入 XHTML文档的对象规定 run-time设置，也就是说，此标签可为包含它的<object>或者 <applet> 标签提供参数。

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

详见：http://www.w3school.com.cn/tags/tag_pre.asp

48、 <progress>标签

Internet Explorer 10, Firefox, Opera, Chrome以及 Safari 6 支持 <progress> 标签。<progress> 标签标示任务的进度（进程）。

提示：请结合 <progress> 标签与 JavaScript 一同使用，来显示任务的进度。<progress>标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter>标签代替。

49、<ruby>标签

Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <ruby> 标签。<ruby>标签定义 ruby 注释（中文注音或字符）。与 <ruby> 以及 <rt> 标签一同使用：

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

详见：http://www.w3school.com.cn/tags/tag_rt.asp

50、<s>标签

<s> 标签可定义加删除线文本定义。

<s> 标签是 <strike> 标签的缩写版本，Netscape和 Internet Explorer都支持它。但在 HTML 4和 XHTML 中已经不再赞成使用它了，意思就是不再使用了；它早晚有一天将会消失。

注释：请使用 <del> 替代它！

为文本标记添加删除线

<p>在 HTML 5 中，<s>仍然支持</s>已经不支持这个标签了。</p>

51、<section>标签、<small>标签、<source>标签

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

<small> 标签呈现小号字体效果。<small>标签和它所对应的 <big>标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small>标签将不起任何作用。

与 <big> 标签类似，<small>标签也可以嵌套，从而连续地把文字缩小。每个 <small>标签都把文本的字体变小一号，直到达到下限的一号字。

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

52、<span>标签

<span> 标签被用来组合文档中的行内元素。

提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

<p><span>some text.</span>some other text.</p>

如果不对 span 应用样式，那么 span元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span元素仍然为 p 元素增加了额外的结构。

可以为 span 应用 id或 class 属性，这样既可以增加适当的语义，又便于对 span应用样式。

可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而 id用于标识单独的唯一的元素。

详见：http://www.w3school.com.cn/tags/tag_span.asp

53、<sub>标签、<sup>标签

<sub> 标签可定义下标文本。

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

<sup> 标签可定义上标文本。

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

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

<html>

<body>

<p>

This text contains <sub>subscript</sub>

</p>

<p>

This text contains <sup>superscript</sup>

</p>

</body>

</html>

54、 <summary>标签

只有 Chrome 以及 Safari 6 支持 <summary>标签。

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

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

注释："summary" 元素应该是 "details" 元素的第一个子元素。

<!DOCTYPE HTML>

<html>

<body>

This document teaches you everything you have to learn about HTML 5.

</details>

</body>

</html>

55、<table>标签

<table> 标签定义 HTML表格。

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

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

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot以及 tbody 元素。

详见：http://www.w3school.com.cn/tags/tag_table.asp

56、<textarea>标签

<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea的尺寸，不过更好的办法是使用 CSS的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA"（回车/换行）进行分隔。

详见：http://www.w3school.com.cn/tags/tag_textarea.asp

57、<track>标签、<u>标签、<video>标签、<wbr>标签

nternet Explorer 10, Chrome以及 Opera 支持 <track> 标签。

<track> 标签为诸如 video元素之类的媒介规定外部文本轨道。

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

<track> 标签是 HTML 5中的新标签。

<u> 标签可定义下划线文本。

注释：请尽量避免为文本加下划线 - 用户会把它混淆为一个超链接！

Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <video> 标签。<video>标签定义视频，比如电影片段或其他视频流。

<video> 标签是 HTML 5的新标签。

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

详见：http://www.w3school.com.cn/tags/tag_video.asp、http://www.w3school.com.cn/jsref/dom_obj_video.asp

Word Break Opportunity (<wbr>)规定在文本中的何处适合添加换行符。

提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr>元素来添加 Word Break Opportunity（单词换行时机）。

如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request对象。

详见：http://www.w3school.com.cn/tags/tag_wbr.asp

梦想家-mxj

关注

35
点赞
踩
178

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录