HTML5 标签简介（一）

最新推荐文章于 2023-04-20 07:34:24 发布

hoo_chsodene

最新推荐文章于 2023-04-20 07:34:24 发布

阅读量2k

点赞数

分类专栏： HTML5 文章标签： HTML5 标签

本文链接：https://blog.csdn.net/hoo_chsodene/article/details/8944961

版权

HTML5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文的主要内容参考于 w3shool 网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。

1 2<!DOCTYPE> 3<a> 4<abbr> 5<br> 6<address> 7<img> 8<map><area> 9<article> 10<aside> 11<audio> 12<b> 13<base> 14<bdi> 15<bdo> 16<blockquote> 17<q> 18<body> 19<button>

标签是注释标签，用在源 HTML 文档中添加注释。注释会被浏览器忽略。例：
```

```
使用注释对代码进行解释，这样做有助于以后对代码的编辑和理解。注释在处理不支持脚本的浏览器时也将发挥作用，这在 <noscript> 标签中会提到。注释是没有属性的。
<!DOCTYPE> 严格的说它是一个声明不是标签。该声明必须位于 HTML5 文档中的第一行，也就是位于 <html> 标签之前。它告知浏览器文档所使用的 HTML 规范。在 HTML5 中只有一个文档类型 HTML，故只需要在 <html> 标签前使用如下代码：
```
<!DOCTYPE HTML>
```
更完整的例子（在下面的例子中还使用了标签：<html>、<head> 、<title>和 <body>，这在后面将会讲解）：
```
<!DOCTYPE HTML>
<html>

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

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

</html>
```
注意 <!DOCTYPE> 对大小写不敏感，它也是没有属性的。

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

<!DOCTYPE HTML>
<html>
<body>

<a href="http://www.w3school.com.cn" hreflang="zh">Visit W3School.com.cn!</a>

</body>
</html>

它的属性：

href	URL	目标网页的 URL 链接地址（可以是绝对地址指向另一个站点（比如 href="http://www.example.com/index.htm"），也可以是相对地址通常用于指向站点内的文件（比如 href="index.htm"））。如果未使用 href 属性，则 <a> 标签不是链接，而是链接的占位符。在 HTML5 中怎么进行锚链接呢？首先在一个标签中用 id 属性进行锚标记，如以段落标签 <p>为例： `<p id="maobiaoji">此处抛锚，即锚将要链接的位置</p>` 接下来就是用 <a> 进行锚链接： `<a href="#maobiaoji">点击此处链接到对应 id 属性值为“maobiaoji”的锚</a>` 注意不一定是在 <p> 标签下用 id 属性进行锚标记，也可以在其他有 id 属性的标签中使用。注意 id 属性是全局属性。若是链接到其他页面中的锚，则为： `<a href="http://example.com/example#maobiaoji">链接到其他页面中对应 id 属性值为“maobiaoji”的锚</a>`
hreflang	language_code	规定目标 URL链接文档的基准语言。仅在 href 属性存在时使用。和 lang 属性类似，hreflang 属性的值也是 ISO 标准的双字符语言代码。和 lang 属性不同的是，hreflang 属性不会指定标签中的内容所使用的语言，而是指定被 href 属性调用的文档所使用的语言。如需查看所有可用的语言代码，请访问语言代码集参考手册。
media	media query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的。该属性可接受多个值。关于有哪些设备和有哪些值的设置请访问media 属性。
rel	alternate archives author bookmark contact external first help icon index last license next nofollow noreferrer pingback prefetch prev search stylesheet sidebar tag up	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。对于每个属性值的详细描述请访问rel 属性。
target	_blank _parent _self _top	在何处打开目标 URL。仅在 href 属性存在时使用。每个属性值的详细介绍请访问 target 属性。
type	mime_type	规定目标 URL 的 MIME (Multipurpose Internet Mail Extensions) 类型。仅在 href 属性存在时使用。请参阅 MIME types，或IANA MIME Types 其中列出了标准的 MIME 类型。

其中最重要的属性是 href 属性，指定链接的目标。如果没有使用 href 属性，则不能使用 hreflang, media, rel, target 以及 type 属性。在所有浏览器中，链接的默认外观是：

未被访问的链接带有下划线而且是蓝色的
已被访问的链接带有下划线而且是紫色的
活动链接带有下划线而且是红色的

它支持 HTML5 的全局属性和事件属性。

<abbr> 标签表示它所包含的文本是一个更长的单词或短语的缩写形式。如下例所示：
```
<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>
```
在某些浏览器中，当您把鼠标移至缩略词语上时，会显示全局属性 title 中的完整文本。它支持 HTML5 的全局属性和事件属性。
<br> 标签插入简单的换行符，简而言之，就是换行。它的使用例子：
```
<!DOCTYPE HTML>
<html>
<body>

This text contains<br />a line break.

</body>
</html>
```
注意它没有结束标签，这样使用：<br></br> 是错误的。该标签支持 HTML5 的全局属性和事件属性。
<address> 标签定义文档作者或拥有者的联系信息。如果 address 元素位于 article 元素内部，则它表示该文章作者或拥有者的联系信息。通常的做法是将 address 元素添加到网页的头部或底部。该元素包括起来的内容通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。例如：
```
<!DOCTYPE HTML>
<html>
<body>

<address>
Author: Hoo_Binary<br />
Mail: <a href="mailto:666666666@qq.com">666666666@qq.com</a><br />
Address: Road 666<br />
Phone: +86 123 4567 8900
</address>

</body>
</html>
```
该标签也支持 HTML5 的全局属性和事件属性。

<img> 标签定义 HTML 页面中的图像。从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。<img> 标签有两个必需的属性：src 和 alt。例：

<!DOCTYPE html>
<html>
<body>

<img src="https://img-my.csdn.net/uploads/201311/26/1385450804_4693.jpg-thumb.jpg"  alt="上海鲜花港 - 郁金香" width="400" height="266" />

</body>
</html>

这样就可以看到如下结果：

该元素的属性：

alt	text	规定图像的替代文本。有时候无法正常显示图片时就会使用这个替代文本。关于 alt 文本的指导原则：如果图像中包含信息，则 alt 文本应该对图像进行描述如果图像位于 <a> 标签中，则 alt 文本应该解释链接指向哪里如果图像是纯装饰性的，请使用 alt=""
src	URL	规定图像的 URL 链接。同 href 的值一样，有绝对链接和相对链接两种。
height	pixels %	规定图像的高度。以像素为单位的高度，（比如 "100px" 或仅仅是 "100"）；以包含元素的百分比计的高度，（比如 "50%"）。
ismap	ismap	把图像设置为服务器端图像映射。图像映射指的是带有可点击区域的图像。可以参照ismap 属性。
usemap	#mapname	把图像设置为客户端图像映射。图像映射指的是带有可点击区域的图像。usemap 属性与 map 元素的 name 或 id 属性相关联，建立了图像与映射之间的关系。可参照usemap 属性。
width	pixels %	规定图像的宽度。同 height 一样。规定图像的高度和宽度是一个好的习惯。当然不要通过它们来压缩图像大小，这里设定的值即为图像实际高度和宽度。如果想压缩图像，建议用软件压缩好了图片再链接进来。

它没有结束标签。该标签也支持 HTML5 的全局属性和事件属性。

<map> 和 <area> 标签用于定义客户端图像映射。这时你应该联想到 img 元素的属性 usemap 。的确通过 map 元素的属性 name 或全局属性 id 与 img 元素的属性 usemap 创建关联，即让 usemap 属性的值等于 name 或 id 的值，这是必须的。而 map 元素包含若干 area 元素（area 元素永远嵌套在 map 元素内部），定义图像映射中的可点击区域（也就是定义怎么映射）。具体参看下例：

<!DOCTYPE HTML>
<html>
<body>

<img src="https://img-my.csdn.net/uploads/201311/26/1385450805_3821.jpg" usemap="#planetmap" alt="Planets" />

<map name="planetmap">
<area shape="rect" coords="0,0,110,260" href ="https://img-my.csdn.net/uploads/201311/26/1385450806_9833.gif" alt="Sun" />
<area shape="circle" coords="129,161,10" href ="https://img-my.csdn.net/uploads/201311/26/1385450806_3157.gif" alt="Mercury" />
<area shape="circle" coords="180,139,14" href ="https://img-my.csdn.net/uploads/201311/26/1385450806_1632.gif" alt="Venus" />
</map>

</body>
</html>

结果显示为下图（你可以试着点击图片上的可点击区域）：
Planets

在 HTML5 中，如果同时规定了 <map> 标签的 id 属性，则必须为 name 属性规定相同的值。map 元素的特殊属性只有 name 属性，规定了图像映射的名称。<area> 标签的属性：

alt	text	规定区域的替代文本。如果使用 href 属性，则该属性是必需的。
coords	coordinates	规定区域的坐标。
href	URL	规定区域的目标 URL。
hreflang	language_code	规定目标 URL 的语言。
media	media query	规定目标 URL 是为何种媒介/设备优化的。默认：all。
rel	alternate author bookmark external help license next nofollow noreferrer prefetch prev search sidebar tag	规定当前文档与目标 URL 之间的关系。
shape	rect rectangle circ circle poly polygon	规定区域的形状。
target	_blank _parent _self _top framename	规定在何处打开目标 URL。
type	mime_type	规定目标 URL 的 MIME 类型。

相信现在大家对上面的一些属性不会感到很陌生了。area 元素没有结束标签。当然，它们都支持 HTML5 的全局属性和事件属性。

<article> 标签定义独立的内容，独立于文档的其余部分。可能的 article 实例：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
还是来看看实例：
```
<!DOCTYPE HTML>
<html>
<body>

<article>
<a href="http://www.apple.com">Safari 5 released</a><br />
7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC, 
Apple announced the release of Safari 5 for Windows and Mac......
</article>

</body>
</html>
```
从例子可以看出这个元素似乎没有什么特别之处，希望在以后的使用中能有所发现。该标签支持 HTML5 的全局属性和事件属性。
<aside> 标签定义其所处内容之外的内容。它的内容应该与附近的内容相关，例如 <aside> 的内容可用作文章的侧栏。
```
<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>
```
现在大家是否清楚 <aside> 的作用呢？该标签支持 HTML5 的全局属性和事件属性。

<audio> 标签定义声音，比如音乐或其他音频流。可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。

<!DOCTYPE HTML>
<html>
<body>

<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>

</body>
</html>

关于该元素的一些属性：

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。可查看 autoplay 属性。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。可查看 controls 属性。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。可查看 loop 属性。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。可查看 preload 属性。
src	url	要播放的音频的 URL。

该标签支持 HTML5 的全局属性和事件属性。

<b> 标签定义粗体的文本，用于强调某些文本。后面讲到的 <strong> 标签，则用于把文本标记为相比其他文本更为重要。
```
<!DOCTYPE HTML>
<html>
<body>

<p>It was a <b>red</b> house with a <b>blue</b> door.</p>

</body>
</html>
```
该标签支持 HTML5 的全局属性和事件属性。
<base> 标签为页面上的所有链接规定默认地址或默认目标。通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。值得注意，<base> 标签必须位于 head 元素内部。大家可以通过比较下面两个例子就明白该标签的用途了：
```
<!DOCTYPE HTML>
<html>
<body>

<a href="http://www.w3school.com.cn/css/index.asp" target="_blank">W3School's CSS Tutorial</a>

</body>
</html>
```
```
<!DOCTYPE HTML>
<html>
<head>
<base href="http://www.w3school.com.cn/css/" target="_blank" />
</head>

<body>

<a href="index.asp">W3School's CSS Tutorial</a>

</body>
</html>
```
现在明白了吗？提示：请把 <base> 标签排在 head 元素中第一个元素的位置，这样 head 中其他元素就可以利用 <base> 元素中的信息了。值得注意，在一个文档中，最多能使用一个 base 元素。<base> 没有结束标签。它的属性有：
href URL 规定作为基准 URL 在页面中使用的 URL。
target
_blank
_parent
_self
_top
在何处打开页面上的链接。该属性会被每个链接中的 target 属性覆盖。
该标签没有全局属性和没有事件属性。
<bdi> 标签允许您设置一段文本，使其脱离其父元素的文本方向设置。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。目前我还没有发现它的价值？下面给一个例子：
```
<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>
```
它的属性：
dir
ltr
rtl
auto
可选。规定 <bdi> 元素内的文本的文本方向。默认值：auto。
该标签支持 HTML5 的全局属性和事件属性。
<bdo> 标签覆盖默认的文本方向。例子：
```
<!DOCTYPE HTML>
<html>
<body>

<bdo dir="rtl">
Here is some Hebrew text that should be written from right-to-left.
</bdo>

</body>
</html>
```
它的属性：
dir
ltr
rtl
必需定义文本方向。
该标签支持 HTML5 的全局属性和事件属性。
<blockquote> 标签定义摘自另一个源的块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。例子：
```
<!DOCTYPE HTML>
<html>
<body>

<p>Here is a quote from WWF's website:
<blockquote cite="http://www.wwf.org">
WWF's ultimate goal is to build a future where people live in harmony with nature.
</blockquote>
We hope that they succeed.
</p>

</body>
</html>
```
它的属性：
cite URL 引用的 URL，如果引用来自网络的话。与 href 一样。
提示：如果标记是不需要段落分隔的短引用，请使用 <q> 标签（参看下一个标签）。该标签支持 HTML5 的全局属性和事件属性。
<q> 标签定义一个短的引用。浏览器经常会在这种引用的周围插入引号。例子：
```
<!DOCTYPE HTML>
<html>
<body>

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

</body>
</html>
```
它的属性与 <blockquote> 一样。该标签支持 HTML5 的全局属性和事件属性。
<body> 标签定义文档的主体。<body> 标签包含文档的所有内容，比如文本、超链接、图像、表格、列表等等。例子：
```
<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>

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

</html>
```
在 HTML 5 中，删除了所有 <body> 的特殊属性。该标签支持 HTML5 的全局属性和事件属性。

href	URL	规定作为基准 URL 在页面中使用的 URL。
target	_blank _parent _self _top	在何处打开页面上的链接。该属性会被每个链接中的 target 属性覆盖。

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

dir	ltr rtl	必需定义文本方向。

cite	URL	引用的 URL，如果引用来自网络的话。与 href 一样。

<button> 标签定义按钮。您可以在 <button> 标签内放置内容，比如文本或图像。这是该标签与通过 <input> 标签创建的按钮的不同之处。请始终为按钮规定 type 属性。不同的浏览器根据 type 属性使用不同的默认值。例子：

<!DOCTYPE HTML>
<html>
<body>

<button type="button">点击这里</button>
 
</body>
</html>

提示：如果在 HTML 表单中使用 <button> 标签，不同的浏览器会提交不同的按钮值。请使用 <input> 标签在 HTML 表单中创建按钮。该标签的特殊属性比较多：

autofocus	autofocus	规定当页面加载时按钮应当自动地获得焦点。
disabled	disabled	规定应该禁用该按钮。被禁用的按钮是无法使用和无法点击的。可以对 disabled 属性进行设置，使用户在满足某些条件时（比如选中复选框，等等）才能点击按钮。然后，可使用 JavaScript 来删除 disabled 属性，使该按钮变为可用的状态。
form	form_name	规定按钮属于一个或多个表单。可参照 form 属性。
formaction	url	覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。可参照 formaction 属性。
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	覆盖 form 元素的 enctype 属性。该属性与 type="submit" 配合使用。可参照 formenctype 属性。
formmethod	get post	覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。可参照 formmethod 属性。
formnovalidate	formnovalidate	覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。可参照 formnovalidate 属性。
formtarget	_blank _self _parent _top framename	覆盖 form 元素的 target 属性。该属性与 type="submit" 配合使用。可参照 formtarget 属性。
name	button_name	规定按钮的名称。
type	button reset submit	规定按钮的类型。可参照 type 属性。
value	text	规定按钮的初始值，也即发送的值。可由脚本进行修改。可参照 value 属性。

该标签支持 HTML5 的全局属性和事件属性。

hoo_chsodene

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 标签简介（一）

本文的主要内容参考于 w3shool 网站。本文是自己对 HTML5 标签学习的一个简单梳理。如果你发现了文中的错误，请通过评论及时告诉我，避免对别人产生误导；如果你发现有不明白的地方，也可以通过评论告诉我，大家可以相互交流；如果你想转载我的博文，请在你的博文开头或末尾处注明，并附上该博文的链接地址，也请通过评论及时告诉我你转载后的链接地址，以便我能看到其他人在你转载处的评论。
复制链接

扫一扫