HTML5 标签简介（一）

时间：2021-07-08 14:38:56

本文的主要内容参考于 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>

  1. <!--...--> 标签是注释标签，用在源 HTML 文档中添加注释。注释会被浏览器忽略。例：
    <!--这是注释文字，将被浏览器所忽略。-->
    使用注释对代码进行解释，这样做有助于以后对代码的编辑和理解。注释在处理不支持脚本的浏览器时也将发挥作用，这在 <noscript> 标签中会提到。注释是没有属性的。
  2. <!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> 对大小写不敏感，它也是没有属性的。
  3. <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 的全局属性和事件属性。
  4. <abbr> 标签表示它所包含的文本是一个更长的单词或短语的缩写形式。如下例所示：
    <!DOCTYPE HTML><html>
    <body>

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

    </body>
    </html>
    在某些浏览器中，当您把鼠标移至缩略词语上时，会显示全局属性 title 中的完整文本。它支持 HTML5 的全局属性和事件属性。
  5. <br>  标签插入简单的换行符，简而言之，就是换行。它的使用例子：
    <!DOCTYPE HTML><html><body>This text contains<br />a line break.</body></html>
    注意它没有结束标签，这样使用：<br></br> 是错误的。该标签支持 HTML5 的全局属性和事件属性。
  6. <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 的全局属性和事件属性。
  7. <img> 标签定义 HTML 页面中的图像。从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。<img> 标签有两个必需的属性：src 和 alt。例：
    <!DOCTYPE html><html><body><img src="http://www.itdaan.com/imgs/2/3/4/0/39/b853c6a5dae1b82e360fccd266e29c21.jpe"  alt="上海鲜花港 - 郁金香" width="400" height="266" /></body></html>
    这样就可以看到如下结果：
    HTML5 标签简介（一）
    该元素的属性：
    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 的全局属性和事件属性。
  8. <map> 和 <area> 标签用于定义客户端图像映射。这时你应该联想到 img 元素的属性 usemap 。的确通过 map 元素的属性 name 或 全局属性 id 与 img 元素的属性 usemap 创建关联，即让 usemap 属性的值等于 name 或 id 的值，这是必须的。而 map 元素包含若干 area 元素（area 元素永远嵌套在 map 元素内部），定义图像映射中的可点击区域（也就是定义怎么映射）。具体参看下例：
    <!DOCTYPE HTML><html>
    <body>

    <img src="http://www.itdaan.com/imgs/7/1/9/4/19/067e46d532cff93548879aa38a62d5bf.jpe" usemap="#planetmap" alt="Planets" />

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

    </body>
    </html>
    结果显示为下图（你可以试着点击图片上的可点击区域）：
    HTML5 标签简介（一）
    在 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 的全局属性和事件属性。
  9. <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 的全局属性和事件属性。
  10. <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 的全局属性和事件属性。
  11. <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 的全局属性和事件属性。
  12. <b> 标签定义粗体的文本，用于强调某些文本。后面讲到的 <strong> 标签，则用于把文本标记为相比其他文本更为重要。
    <!DOCTYPE HTML><html>
    <body>

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

    </body>
    </html>
    该标签支持 HTML5 的全局属性和事件属性。
  13. <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 属性覆盖。
    该标签没有全局属性和没有事件属性。
  14. <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 的全局属性和事件属性。
  15. <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 的全局属性和事件属性。
  16. <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 的全局属性和事件属性。
  17. <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 的全局属性和事件属性。
  18. <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 的全局属性和事件属性。
  19. <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 的全局属性和事件属性。
标签：

相关文章