`WWW`

www其实是World Wide Web 的缩写，它是一个由许多互相链接的超文本组成的系统，通过互联网访问，在汉语中，www 被翻译成（web 万维网全球广域网）。

`<HTML>`元素

<HTML> 是为了发布全球分销信息，人们需要一种普遍了解的语言，一种出版的母语，所有计算机可能会理解，是万维网的发布语言，叫超文本标记语言(英语：Hypertext Markup Language，简称：<HTML> 是一种用来结构化Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表，可以用来发布文档 (文本, 表格, 列表），通过超链接获取信息，建立用来访问远程服务的表单，发布 Web 应用，万维网的“粘合剂”，<HTML>最终由机器读取解析，或进行渲染，或挖掘出有用的信息为其他应用提供支持,<HTML> 语义:元素 + 属性 + 属性值 (+ 文档结构)。

`全局属性`

全局属性 指的是在所有<html>元素上都能使用的属性，是所有 <html> 元素共有的属性; 它们可以用于所有元素，即使属性可能对某些元素不起作用，常见的如 id 和 class，有些<html>属性只能用在特定的元素上，比方说 <href> 属性，多出现在 <a> 元素、 <link> 元素上，普通元素设置 <href> 属性是没有任何效果的。

`<id>`全局属性

<id>（全局属性） 在<HTML>元素中唯一的的<id>,比如：<p id="小明">，就是说整个文档中有标签的名字叫（小明）了，便不允许再有叫（小明）的人了，必须是唯一的，在 HTML5 中, <id> 属性可用于任何的 <HTML> 元素，命名规则：必须以字母 A-Z 或 a-z 开头，其后的字符：字母(A-Z，a-z)、数字(0-9)、连字符(“-”)、下划线(“_”)、冒号(“:”) 以及点号(“.”)，推荐小写属性名。<id> 的值不得包含空白字符(包括空格和制表符等)，浏览器会将不符合规范的<id>中的空白字符视为<id>的一部分，为兼容性考虑<id>应该以字母开头。

`<class>`全局属性

<class> （全局属性） 属性规定元素的类名（classname），并不是元素中的唯一，可以使用相同的属性值来批量设置样式和管理，尽量使用描述内容性质的值，尽管对 <class> 的命名没有要求，但 web 开发者最好使用可以表达元素语义目的的名称，而不是描述元素展现的名称（即使一个元素是斜体，但是 <class> 的命名也不应该是 italics），语义化命名即使在页面展现发生改变时仍能合乎逻辑。在 HTML5 中, <class> 属性可用于任何的 <HTML> 元素，如需为一个元素规定多个类，用空格分隔类名，比如： <span class="left important">，HTML 元素允许使用多个类，命名规则与<id>相同。

`<title>`全局属性

<title>（全局属性） 属性规定关于元素的额外信息，这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text），在 HTML5 中, <title> 属性可用于任何的 <HTML> 元素，这个属性通常存在，但绝不必要，<title> 属性常与 <form> 以及 <a> 元素一同使用，以提供关于输入格式和链接目标的信息，如果一个节点没有 <title> 属性（attribute），默认继承其父节点的相应属性，父节点可能是从父节点的父节点继承，依此类推。

`<lang>`全局属性

<lang> 全局属性 属性规定元素内容的语言，可用于任何的 <HTML> 元素，比如：<html lang="zh-CN">小写zh代表语言为中文，大写CN代表国家为中国。

`标签与元素`

标签简单理解就是由<开始></结束>组成( 大部分如此），比如：<p></p>是一个标签，<br>也是一个标签（空标签，没有结束标签）。
元素简单理解就是<开始>内容</结束>（大部分如此），比如：<p>你好</p>是一个元素，<p class="greeting">你好</p>也是元素，标签名就是元素名。

<head> <meta> <body> <title>元素第一篇有整理，链接如下：
html文档结构拆分、解释

`<link>`外部资源链接元素

<link>外部资源链接元素，定义文档与外部资源的关系，<link> 元素是空元素，它仅包含属性，此元素只能存在于 <head> 部分，不过它可出现任何次数，在<html> 中<link> 标签没有结束标签，最常见的用途是链接样式表与图标的链接，比如：

<link href="main.css" rel="stylesheet">

<link rel="icon" href="favicon.ico">

上面例子中，使用了 href 属性设置外部资源的路径（样式表/图标），并设置 rel 属性的值为 “stylesheet”(样式表)，rel 表示 “关系 (relationship) ”，定义当前文档与被链接文档之间的关系，rel 是 relationship的英文缩写。

`<a>`内联元素

<a>元素（或称锚元素），定义超链接，用于从一张页面链接到另一张页面，最重要的属性是 href 属性，它指示链接的目标，可以通过它的herf属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接，被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性），开始标签和结束标签都不能省略，可以使用 href="#top" 或者 href="#" 链接返回到页面顶部,这是html5的特性，但是如果未设置 href 属性，则只是超链接的占位符，最常见的用途是链接外部地址/链接到本页某个部分/创建一个可点击的图片/比如：

<a href="https://www.w3school.com.cn/tags/tag_a.asp">外部网页链接</a>

<a href="#属性">网页内的某个部分</a>

<a href="https://developer.mozilla.org/en-US/"><img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
</a>

`<artice>`块级元素

article元素规定独立的自包含内容，定义的内容本身必须是有意义的且必须是独立于文档的其余部分，表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目，当<article>元素嵌套使用时，则该元素代表与外层元素有关的文章，一个<article>元素通常有它自己的标题（一般放在一个<header>元素里面），有时还有自己的脚注，文档中可以包含多篇文章，例如，阅读器在博客上滚动时一个接一个地显示每篇文章的文本，每个帖子将包含在<article>元素中，可能包含一个或多个<section>，比如：

<article class="film_review"><header><h2>Jurassic Park</h2></header><section class="main_review"><p>Dinos were great!</p></section><section class="user_reviews"><article class="user_review"><p>Way too scary for me.</p><footer><p>Posted on<time datetime="2015-05-16 19:00">May 16</time>by Lisa.</p></footer></article><article class="user_review"><p>I agree, dinos are my favorite.</p><footer><p>Posted on<time datetime="2015-05-17 19:00">May 17</time>by Tom.</p></footer></article></section><footer><p>Posted on<time datetime="2015-05-15 19:00">May 15</time>by Staff.</p></footer>
</article>

这个示例中的内容分为几个部分，文章的电影标题放在<header>元素中的<h1>，主要内容放在<section>元素中的<p>，所有用户的的评论内容与发表时间放在<section>中做一个大的分块处理，每一个内容与时间又是独立且完整的，所以放在<article>中的<p>和<footer>中，最后的页脚在放个<footer>，<section>的用法也可参考此例。

`<section>`块级元素

<section>元素定义了文档的某个区域，比如章节、头部、底部或者文档的其他区域，如果元素的内容作为一个独立的有意义的集合，<article>元素可能是更好的选择，不要把<section>元素作为一个普通的容器来使用，这是本应该是<div>的用法（特别是当片段（the sectioning ）仅仅是为了美化样式的时候）, 一般来说，一个<section>应该出现在文档大纲中,一个<section>元素通常由内容及其标题组成，通常不推荐为那些没有标题的内容使用<section>元素,<article>元素可以看成是一种特殊类型的<section>元素，它比<section>元素更强调独立性，即<section>元素强调分段或分块，而<article>强调独立性，具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用<article>元素，但是如果你想将一块内容分成几段的时候，应该使用<section>元素， <article>和<section>都看起来像是语义化后的<div>，但并非。

`<nav>`块级元素

<nav>元素定义导航链接的部分，表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接，导航部分的常见示例是菜单，目录和索引，并不是所有的链接都必须使用<nav>元素，它只用来将一些热门的链接放入导航栏，例如<footer>元素就常用来在页面底部包含一个不常用到，没必要加入<nav>的链接列表，一个网页也可能含有多个<nav>元素，例如一个是网站内的导航列表，另一个是本页面内的导航列表，<nav>并不是为了表示所谓导航栏，而是表示“导航性质的内容”，准确的说：元素表示一个包含多个链接的区域，这些链接指向其他页面或本页面的其他部分，如果内容本身所引述的的是其它文章的链接，那么就不宜放在导航里面，不一定要包含 ul，也可用自然文本进行导航。比如：

<nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul>
</nav>

<nav>
<h1>Navigation</h1>
<p>Welcome to my website. To see latest blog posts, please go to
<a href="/blog">my blog</a>.
You can find my books and papers in the
<a href="/publications">publication</a> section.
If you are interested in my work, please contact me by fill in the contact form
<a href="/contact">here</a>.
</p>
</nav>

`<aside>`块级元素

<aside>元素定义其所处内容之外的内容，表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响，其通常表现为侧边栏或者标注框或引述内容，广告、nav元素组以及与页面主要内容分开的其他内容，示例图片：

`<h1~h6>`块级元素

<h1>~<h6>标题元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低，不要为了减小标题的字体而使用低级别的标题，而是使用CSS的font-size属性，避免跳过某级标题，要从 <h1> 开始，接下来依次使用 <h2>，使用<section>元素时，为了方便起见，你应该考虑避免在同一个页面上重复使用 <h1>，<h1> 应被用于表示页面的标题，其他的标题当从 <h2> 开始在使用，在使用 <section> 时，应当为每个 <section> 都使用一个 <h2>最好，以下两个示例在语义上是等价的：

<body><h1>Let's call it a draw(ing surface)</h1><h2>Diving in</h2><h2>Simple shapes</h2>
</body>

<body><h1>Let's call it a draw(ing surface)</h1><section><h1>Diving in</h1></section><section><h1>Simple shapes</h1></section>
</body>

`<header>`块级元素

<header>元素定义文档或者文档的一部分区域的页眉，应该作为介绍内容或者导航链接栏的容器，在一个文档中，您可以定义多个 <header> 元素，<header> 元素不能被放在 <footer>、<address> 或者另一个 <header> 元素内部,一般会包含一些标题元素，但不是必需的，也可能包含其他元素，比如 Logo、搜索框、作者名称等等，以下示例为整个页面的<header>与文章的<header>如下：

<header><h1>主页标题</h1><img src="mdn-logo-sm.png" alt="MDN logo">
</header>

<article><header><h2>The Planet Earth</h2><p>Posted on Wednesday, 4 October 2017 by Jane Smith</p></header><p>We live on a planet that's blue and green, with so many things still unseen.</p><p><a href="https://janesmith.com/the-planet-earth/">Continue reading....</a></p>
</article>

`<footer>`块级元素

<footer>元素表示最近一个章节内容或根节点元素的页脚，<footer>元素应该包含它所包含的元素的信息，页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等，在一个文档中，您可以定义多个 <footer> 元素，<footer> 元素内的联系作者信息应该位于<adddress>中，<footer>不能是<address>,<header>或者另一个<footer>的后代元素，<footer>元素不是章节内容，因此在大纲中不能包含新的章节，页脚不一定必须出现在页面的末尾，尽管它们通常会出现，如以下示例页脚的页面，一个在顶部，一个在底部，内容相同：

<body>
<footer><a href="../">Back to index...</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ni
si ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate ve
lit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proide
nt, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<footer><a href="../">Back to index...</a></footer>
</body>

`<address>`块级元素

<address>元素定义文档或文章的作者/拥有者的联系信息，如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息，如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息，<address> 元素中的文本通常呈现为斜体，大多数浏览器会在 <address> 元素前后添加折行，元素不应该用于描述通讯地址，除非它是联系信息的一部分，<address> 元素通常连同其他信息被包含在 <footer> 元素中，可以使用在多种语境中，例如在文章开头提供商务的联系方式，或者放在<article>元素内，指明该文章的作者，当表示一个和联系信息无关的任意的地址时，请改用<p>元素而不是 <address> 元素，元素不能包含除联系信息之外的任何信息，比如出版日期（这应当被包含在<time>元素中），以下示例演示了如何使用 <address> 表示一篇文章的作者的联系信息：

<address>You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br>If you see any bugs, please <a href="mailto:webmaster@somedomain.com">contact webmaster</a>.<br>You may also want to visit us:<br>Mozilla Foundation<br>331 E Evelyn Ave<br>Mountain View, CA 94041<br>USA
</address>

<footer>
<address>
For more details, contact
<a href="mailto:js@example.com">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>

`<p>`块级元素

<p>元素定义文本的一个段落，是块级元素，元素会自动在其前后创建一些空白，浏览器会自动添加这些空间，您也可以在样式表中规定，示例：

<p>这是第一个段落。这是第一个段落。这是第一个段落。这是第一个段落。</p>
<p>这是第二个段落。这是第二个段落。这是第二个段落。这是第二个段落。</p>

`<hr>`块级元素

<hr>原意为(horizontal rule 水平分隔线)，元素表示段落级元素之间的主题转换，并显示为一条水平线，是一个空元素，必须有开始标签，不能有结束标签，在 HTML 的早期版本中，它是一个水平线，现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上，所以如果想画一条横线，请使用适当的 css 样式来修饰，<he>元素不影响文档的大纲。

`<pre>`块级元素

<pre>元素可定义预格式化的文本，被包围在 <pre>元素中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体，<pre> 元素的一个常见应用就是用来表示计算机的源代码，<pre>元素是块级元素，但是只能包含文本或行内元素。也就是说，任何块级元素（常见为可以导致段落断开的标签）都不能位于<pre>元素中,<pre>元素中允许的文本可以包含物理样式和基于内容的样式变化，还有链接、图像和水平分隔线，当把其他元素，比如<a>元素放到<pre>块中时，就像放在HTML/XHTML文档的其他部分中一样即可，制表符tab在<pre>元素定义的块当中可以起到应有的作用，每个制表符占据8个字符的位置，但并不推荐使用tab，因为在不同的浏览器中，tab的表现形式各不相同，在用<pre>元素格式化的文档段中使用空格，可以确保文本正确的水平位置，如果希望使用<pre>元素来定义计算机源代码，比如HTML源代码，请使用符号实体来表示特殊字符，一般将<pre>元素与<code>元素结合起来使用，以获得更加精确的语义，用于标记页面中需要呈现的源代码，如果想要把某一段规定好的文本格式放在HTML中，那么就要利用<pre>元素的特性。

`<blockquote>`块级元素

<blockquote>块级引用元素定义摘自另一个源的块引用，<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进(40px)的文本（增加外边距），而且有时会使用斜体，也就是说，块引用拥有它们自己的空间，如果标记是不需要段落分隔的短引用（行间引用），请使用<q>，<blockquote>元素中一般嵌套<p>元素，用于标记被引用的文本，这些引用文本并不是直接位于<blockquote>元素中，如果引文来自在线资源（包括自己网站中的其他地方），那么可以在<blockquote>元素的cite（引用）属性中指明原始来源的URL，署名必须放在 <blockquote> 外，示例：

<blockquote cite="https://tools.ietf.org/html/rfc1149"><p>Avian carriers can provide high delay, lowthroughput, and low altitude service.  Theconnection topology is limited to a singlepoint-to-point path for each carrier, used withstandard carriers, but many carriers can be usedwithout significant interference with each other,outside of early spring.  This is because of the 3Dether space available to the carriers, in contrastto the 1D ether used by IEEE802.3.  The carriershave an intrinsic collision avoidance system, whichincreases availability.</p>
</blockquote>

`<ol>`块级元素

<ol> 元素定义了一个有序列表，列表排序以数字来显示，使用<li>元素来定义列表选项，使用 CSS 为列表定义样式，通常，有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母，<ol> 和<ul>元素两者可以无限嵌套，既可以同类嵌套，也可以互相嵌套，<ol> 和<ul>元素都表示列表，区别在于，<ol> 元素的有序列表的顺序是有意义的，至于如何确定该选择哪一个列表元素，可以尝试更改列表项的顺序，如果其含义会发生改变，那么就应当使用<ol>,否则使用<ul>,如下：

简单示例

<ol><li>Fee</li><li>Fi</li><li>Fo</li><li>Fum</li>
</ol>

嵌套列表

<ol><li>first item</li><li>second item  <!-- closing </li> tag not here! --><ol><li>second item first subitem</li><li>second item second subitem</li><li>second item third subitem</li></ol></li>            <!-- Here's the closing </li> tag --><li>third item</li>
</ol>

嵌套有序列表和无序列表

<ol><li>first item</li><li>second item  <!-- closing </li> tag not here! --><ul><li>second item first subitem</li><li>second item second subitem</li><li>second item third subitem</li></ul></li>            <!-- Here's the closing </li> tag --><li>third item</li>
</ol>

`<ul>`块级元素

<ul>元素定义无序列表，将 <ul> 元素与<li>元素一起使用，创建无序列表，使用 CSS 为列表定义样式，<ul> 元素用来将没有数字顺序的一组数据进行分组，并且它们的数字顺序是没有意义的，举个例子，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形．虽然这个字符没有直接在页面上定义，但是可以用与之相关的 CSS 对其进行操作，在<ol>和<ul>元素中，嵌套列表没有深度和嵌套顺序的限制，如下：

简单例子

<ul><li>first item</li><li>second item</li><li>third item</li>
</ul>

嵌套列表

<ul><li>first item</li><li>second item      <!-- Look, the closing </li> tag is not placed here! --><ul><li>second item first subitem</li><li>second item second subitem      <!-- Same for the second nested unordered list! --><ul><li>second item second subitem first sub-subitem</li><li>second item second subitem second sub-subitem</li><li>second item second subitem third sub-subitem</li></ul></li>           <!-- Closing </li> tag for the li that contains the third unordered list --><li>second item third subitem</li></ul></li>               <!-- Here is the closing </li> tag --><li>third item</li>
</ul>

嵌套有序和无序

<ul><li>first item</li><li>second item      <!-- Look, the closing </li> tag is not placed here! --><ol><li>second item first subitem</li><li>second item second subitem</li><li>second item third subitem</li></ol></li>                <!-- Here is the closing </li> tag --><li>third item</li>
</ul>

`<li>`块级元素

<li>元素定义列表项目，它必须包含在一个父元素里：有序列表，无序列表，和菜单列表(<menu>)中，示例同上。

`<dl>`块级元素

<dl>元素是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据 (键 - 值对列表)，<dl>元素与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用，请不要将该元素（也不要用<ul>元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰，如下：

单条术语与描述

<dl><dt>Firefox</dt><dd>A free, open source, cross-platform, graphical web browserdeveloped by the Mozilla Corporation and hundreds of volunteers.</dd><!-- other terms and definitions -->
</dl>

多条术语，单条描述

<dl><dt>Firefox</dt><dt>Mozilla Firefox</dt><dt>Fx</dt><dd>A free, open source, cross-platform, graphical web browserdeveloped by the Mozilla Corporation and hundreds of volunteers.</dd><!-- other terms and definitions -->
</dl>

单条术语，多条描述

<dl><dt>Firefox</dt><dd>A free, open source, cross-platform, graphical web browserdeveloped by the Mozilla Corporation and hundreds of volunteers.</dd><dd>The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox,is a mostly herbivorous mammal, slightly larger than a domestic cat(60 cm long).</dd><!-- other terms and definitions -->
</dl>

`<dt>`块级元素

<dt>元素用于在一个定义列表中声明一个术语，该元素仅能作为<dl>的子元素出现，通常在该元素后面会跟着<dd>元素，然而，多个连续出现的<dt>元素都将由出现在它们后面的第一个<dd>元素定义，示例同上。

`<dd>`块级元素

<dd>元素用来指明一个描述列表(<dl>)元素中一个术语的描述，这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个(<dt>)元素，在 <dd> 元素内，您能放置段落、换行、图片、链接、列表等等，示例同上。

`<figure>`块级元素

<figure>元素规定独立的流内容（图像、图表、照片、代码等等），经常与说明（caption）<figcaption>配合使用，元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的，如果被删除，则不应对文档流产生影响，<figcaption>元素被用来为 <figure> 元素定义标题，比如：

图像

<!-- Just an image -->
<figure><imgsrc="https://developer.mozilla.org/static/img/favicon144.png"alt="A robotic monster over the letters MDN.">
</figure><!-- Image with a caption -->
<figure><imgsrc="https://developer.mozilla.org/static/img/favicon144.png"alt="A robotic monster over the letters MDN."><figcaption>MDN Logo</figcaption>
</figure>

代码段

<figure><figcaption>Get browser details using <code>navigator</code>.</figcaption><pre>
function NavigatorExample() {var txt;txt = "Browser CodeName: " + navigator.appCodeName;txt+= "Browser Name: " + navigator.appName;txt+= "Browser Version: " + navigator.appVersion ;txt+= "Cookies Enabled: " + navigator.cookieEnabled;txt+= "Platform: " + navigator.platform;txt+= "User-agent header: " + navigator.userAgent;
}</pre>
</figure>

引用内容

<figure><figcaption><cite>Edsger Dijkstra:</cite></figcaption><blockquote>If debugging is the process of removing software bugs,then programming must be the process of putting them in.</blockquote>
</figure>

`<figcaption>`块级元素

<figcaption> 元素为<figure>定义标题，应该被置于 <figure> 元素的第一个或最后一个子元素的位置，同时<figcaption>元素是可选的，如果没有该元素，这个父节点的图片只是会没有说明/标题，示例同上。

`<div>`块级元素

<div> 元素定义 HTML 文档中的一个分隔区块或者一个区域部分，可以把文档分割为独立的、不同的部分，它可以用作严格的组织工具，并且不使用任何格式与其关联，如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效，常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化，用来布局网页，默认情况下，浏览器通常会在 <div> 元素前后放置一个换行符，然而，您可以通过使用 CSS 改变这种情况，是一个块级元素，这意味着它的内容自动地开始一个新行，实际上，换行是 <div> 固有的唯一格式表现，不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处，可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种，这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素，作为一个 “纯粹的” 容器，<div> 元素在语义上不表示任何特定类型的内容，也可以在一段文档中划分标记出使用另一种语言书写的内容（使用lang属性）等等，<div> 元素应当仅在没有任何其它语义元素可用时使用，- 本身无语义，最后考虑的选择。示例：

<body><h1>NEWS WEBSITE</h1><p>some text. some text. some text...</p>...<div class="news"><h2>News headline 1</h2><p>some text. some text. some text...</p>...
</div><div class="news"><h2>News headline 2</h2><p>some text. some text. some text...</p>...</div>...
</body>

`<main>`块级元素

<main>元素用于指定文档的主体内容，元素的内容在文档中是唯一的，它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单，<main> 元素是唯一的，所以不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>，<main> 对文档的大纲（outline）没有贡献，也就是说，它与诸如<body>之类的元素，诸如<h2>之类的标题等不同，<main> 不会影响DOM的页面结构概念，它仅有提供信息的作用，通常使用 <main> 元素，而不是定义 role="main"，除非是考虑对于旧浏览器的兼容性，<main> 标签受广泛支持，对于 IE 浏览器 11 版本和低于 11 的版本，推荐向 <main> 元素添加 role="main" 这一”ARIA“（ Accessible Rich lnternet Applications 是向HTML中添加语义和其他元数据的W3C规范，以满足用户的辅助技术的需要)角色，以保证其可访问性，屏幕阅读器，如 JAWS，当与较旧版本的 Internet Explorer 一起使用时，需包括此 role 属性才能理解 <main> 元素的语义含义。示例：

<!-- 其他内容 --><main><h1>Apples</h1><p>The apple is the pomaceous fruit of the apple tree.</p><article><h2>Red Delicious</h2><p>These bright red apples are the most common found in manysupermarkets.</p><p>... </p><p>... </p></article><article><h2>Granny Smith</h2><p>These juicy, green apples make a great filling forapple pies.</p><p>... </p><p>... </p></article></main><!-- 其他内容 -->

`<em>`内联元素

<em>元素是一个短语标签，用来呈现为被强调的文本，元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读，对于所有浏览器来说，这意味着要把这段文字用斜体来显示，如果你只想使用斜体字来显示文本的话，请使用 <i> 标签，新的开发人员看到多个元素产生相似的效果，经常被混淆，<em> 和 <i> 就是一对常见的例子，因为它们都对文字斜体化，它们的区别是什么？应该使用哪一个？在默认情况下，它们的视觉效果是一样的，但语义是不同的，<em> 标签表示其内容的着重强调，而 <i> 标签表示从正常散文中区分出的文本，例如外来词，虚构人物的思想，或者当文本指的是一个词语的定义，而不是其语义含义，（作品的标题，例如书籍或电影的名字，应该使用 <cite>）这意味着，正确使用哪一个取决于具体的场景，两者都不是纯粹为了装饰的目的，那是 CSS 样式所做的，我们并不反对使用这个元素，但是如果您只是为了达到某种视觉效果而使用这个标签的话，我们建议您使用 CSS ，这样可能会取得更丰富的效果。一个<em>的例子可能是：“Just do it already!”，或：“We had to do something about it”，人或软件在阅读文本时，会对斜体字的发音使用重读强调。一个<i>的例子可能是：“The Queen Mary sailed last night”。在这里，没有对 “Queen Mary” 这个词添加强调或重要性。它只是表明，谈论的对象不是一个名叫玛丽的女王，而是一艘名字叫玛丽的船。另一个 <i> 的例子可能是：“The word the is an article”。<em> 元素通常被用于指示一个隐式或显式的对比，em 的位置不同，文本本身含义不同。示例：

<p>In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>

`<strong>`内联元素

<strong>元素与<em>一样，用于强调文本，但它强调的程度更强一些，浏览器通常会以不同于 <em> 元素的方式来显示 <strong> 元素中的内容，通常是用加粗的字体（相对于斜体）来显示其中的内容，这样用户就可以把这两个元素区分开来了，如果常识告诉我们应该较少使用<em> 元素的话，那么 <strong> 元素出现的次数应该更少，如果说用 <em> 元素修饰的文本好像是在大声呼喊，那么用<strong>元素修饰的文本就无异于尖叫了，沉默寡言的人说出的话总是一诺千金，与此相同，限制<strong>的使用可以令应该更加引人注意，而且更加有效。新的开发者经常感到疑惑，为什么在一个渲染的网站上会有这么多方式来表达同样的东西。Bold 和 Strong 可能就是这其中的一种。为什么使用<strong>而不是<b>? 使用 strong 的话你不得不打更多的字母，却产生出和 b 同样的效果，对吧？也许并不是， strong 是一个逻辑状态，而 bold 是一个物理状态。逻辑状态分离内容和表现形式，使用逻辑状态允许你用各种不同的方式来表达。比如你想把文字渲染成红色，使用其它大小的字体、带有下划线或其他样式，而不是加粗的样式。必须要理解使用 strong 呈现出的表现形式不同于单纯的加粗，因为 bold 是一个物理状态，他没有区分表现形式和内容。如果让 bold 做了加粗文本外的其它任何事情，都将会令人困惑而且也不符合逻辑，<em>与<strong>的区别：在 HTML4 时， Strong 简单地表示一个更强的强调 (emphasis)，而在 HTML5 中，这个元素被描述为表征“内容强烈的重要性 (strong importance for its contents) ”。这是一个重要的区别。em 标签 (Emphasis) 用于改变一个句子的意思 (比如"我<em>喜欢</em> 胡萝卜" 和"我喜欢<em>胡萝卜</em> "，分别强调喜欢和胡萝卜), Strong 用来对一个句子的部分增加重要性 (比如 “警告！ 这非常危险。”) Strong 和 Emphasis 都可以分别通过嵌套来增加相对重要性或强调重点，strong 的位置不同，文本本身含义不变，示例：

<p>When doing x it is <strong>imperative</strong> to do y before proceeding.</p>

`<i>`内联元素

<i> 元素定义与文本中其余部分不同的部分，并把这部分文本呈现为斜体文本，(不再只是斜体)，被用来表示科技术语、技术术语、外文短语或是小说中人物的思想活动，其他语种的成语俗语、想法、宇宙飞船的名字等等，在没有其他适当语义的元素可以使用时，请使用 <i> 元素，使用class属性用来识别为何使用该元素是一个很好的办法，这样的话，如果该表示以后需要改变，就可以有选择性地改变样式表，示例：

<p>The Latin phrase <i class="latin">Veni, vidi, vici</i> is often
mentioned in music, art, and literature</p>

`<b>`内联元素

<b> 元素表示某种需要引起注意却又没有其他额外语义的内容，（不再只是粗体）应用场合如：摘要中的关键字、评论中的产品名称，或其他典型的应该加粗显示的文字（除此之外无其它特别强调），不要将<b>与<strong> <em> <mark>元素混肴，<strong>元素表示某些重要性的文本，<em>强调文本，<mark>元素表示某些相关性的文本，<b>元素不传达这样的特殊语义信息，仅在没有其他合适的元素时使用它，通过在 <b> 元素上添加class 属性来表示额外的语义信息是一个很好的方式（例如 <b class="lead"> 来表示段落中的第一句）。这可以在样式需要变动的情况下更轻松地处理不同应用场合的 <b> 元素，无须改动 HTML，如果不是出于语义目的而使用 <b> 元素，那么让文本显示粗体更好的方式是使用将 CSS 的font weight属性设置为 "bold"，示例：

<p>This article describes several <b>text-level</b> elements.It explains their usage in an <b>HTML</b> document.
</p>
Keywords are displayed with the default style of the <b> element, likely in bold.

`<small>`内联元素

<small> 元素呈现小号字体效果，使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在 HTML5 中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本，（不再只是小字）<small> 元素也可以嵌套，从而连续地把文字缩小。每个 <small> 元素都把文本的字体变小一号，直到达到下限的一号字，尽管 <small> 元素，<b> 元素和 <i> 元素被认为违反了结构和样式分离的原则，但是在 HTML5 中是允许使用这三个元素的。读者应该自行判断使用 <small> 还是CSS样式，示例：

<p>This is the first sentence.  <small>This whole sentence is in small letters.</small></p>

`<s>`内联元素

<s> 元素使用删除线来渲染文本，使用 <s> 元素来表示不再相关，或者不再准确的事情，不应该用来定义替换的或者删除的文本，（不再只是带删除线的文字）如果要定义替换的或者删除的文本，请使用<del>元素，<strike>元素，另一儿<s>元素，已经废除并且不应再用于 Web 站点，示例：

<s>Today's Special: Salmon</s> SOLD OUT<br>
<span style="text-decoration:line-through;">Today's Special:Salmon</span> SOLD OUT

`<u>`内联元素

<u>元素表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，可以用 CSS 替换，定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词，就像所有排版元素那样，(不再只是带下划线的文字)，<u>在 HTML 4 中废弃，但是在 HTML 5 中恢复了一个新的语义，意思是：将文本标记为应用了某种形式的非文本注释，在可能和超链接混淆的地方，避免使用 <u>，要应用带下划线的外观而没有任何语义含义，请使用CSS样式，以下此示例使用<u>元素和一些 CSS 来显示包含拼写错误的段落，其中错误以红色波浪下划线样式表示，这种情况通常用于此目的：

<p>This paragraph includes a <u class="spelling">wrnogly</u>
spelled word.</p>

在 HTML 中，我们看到 <u> 使用了一个类 spelling，用于表示 “wrongly” 一词的拼写错误。

u.spelling {text-decoration: red wavy underline;
}

这个 CSS 表示当 <u> 元素使用类 spelling 进行样式化时，它的文本下面应该有一个红色的波浪下划线。这是拼写错误的常见样式。也可以使用另一种常见样式 red dashed underline。

`<cite>`内联元素

<cite> 元素通常表示它所包含的文本对某个参考文献的引用，适用场合可能包括一本书，一张纸，一篇散文，一首诗，一个分数，一首歌，一部电影，一个电视节目，一个游戏，一个雕塑，一幅画，戏剧制作，一个剧本，一个歌剧，一种音乐，一个展览，一个法律案件报告，一个计算机程序，一个网站，一个网页，博客或评论，论坛帖子或评论，鸣叫，或者书面或口头陈述等等。人名不属于作品的标题，按照惯例，引用的文本将以斜体显示，可以使用 css 的 font-style 属性重新进行设置，用 <cite> 元素把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a>元素中，从而把一个超链接指向该联机版本，在blockquote元素或者q元素上使用 cite 或者 blockquote 属性来标明参考的在线资源，值得注意的是，W3C 标准允许在 <cite> 元素中包含引用内容的作者信息，然而 WHATWG 规范不允许在 <cite> 元素中出现人名，至于听谁的，大家在了解完这两个组织后可以自行判断，示例：

More information can be found in <cite>[ISO-0000]</cite>.

`<q>`内联元素

<q>元素表示一个封闭的并且是短的行内引用的文本。这个元素是用来引用短的文本，所以请不要引入换行符，浏览器经常在引用的内容周围添加引号，<q> 标签在本质上与<blockquote>是一样的，不同之处在于它们的显示和应用。<q> 元素用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进的块），请使用 <blockquote> 元素，示例：

<p>Everytime Kenny is killed, Stan will announce<q cite="http://en.wikipedia.org/wiki/Kenny_McCormick#Cultural_impact">Oh my God, you/they killed Kenny!</q>.
</p>

`<abbr>`内联元素

<abbr> 元素用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"，通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息，可以在 <abbr> 元素中使用全局的 title 属性，这样就能够在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本，你使用的每一个 <abbr> 元素与其它同类元素都是相互独立的，为其中一个提供 title 不会自动把相同的附加文字依附到其它内容文字相同的元素上，在一些场景很有帮助：当你想为缩写在文档流外提供一段扩展或定义的时候，为 <abbr> 设置一个合适的title,在定义一个读者可能不太熟悉的缩写时，使用 <abbr> 和title属性或内联的文本来表现这个术语,当文本中出现需要进行语义上的标注的缩写词时，<abbr>元素可用于依次将其作用样式和脚本,所有的浏览器都默认把这个元素显示为行内元素，但是默认样式在不同浏览器中存在差别：一些浏览器，比如 IE，对它的添加的样式和<span>元素的样式完全相同，Opera、Firefox 和其他一些浏览器给这个元素的内容添加一条点状下划线，一些浏览器不仅添加点状下划线，而且还把元素的内容添加小写大写字母的样式。若要避免这种样式，在 CSS 中添加font-variant:none示例：

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big
time.</p>

`<dfn>`内联元素

<dfn>元素是一个短语标签，用来定义一个定义项目，表示术语的一个定义，现在流行的浏览器通常用斜体来显示 <dfn> 中的文本，术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出，被定义术语的值由下列规则确定：如果 <dfn> 元素有一个 title 属性，那么该术语的值就是该属性的值，否则，如果它仅包含一个 <abbr> 元素，该元素拥有 title 属性，那么该术语的值就是该属性的值，否则，<dfn> 元素的文本内容就是该术语的值，最接近的父级段落、定义列表组或区块内容必须包含 dfn 元素指定术语的定义，示例：

<!-- Define "The Internet" -->
<p><dfn id="def-internet">The Internet</dfn> is a global system of interconnected networks
that use the Internet Protocol Suite (TCP/IP) to serve billions of users worldwide.
</p>

<dl><!-- Define "World-Wide Web" and reference definition for "the Internet" --><dt><dfn><abbr title="World-Wide Web">WWW</abbr></dfn></dt><dd>The World-Wide Web (WWW) is a system of interlinked hypertext documents accessed on <a href="#def-internet">the Internet</a>.</dd>
</dl>

`<time>`内联元素

<time>元素定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的，该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果，像所有其他元素一样，此元素拥有可以使用通用属性，如果给定的日期不是正常日期或者在公历中最早的日期之前，请不要使用此元素，datetime 属性值必须是预定义的几种时间格式之一，如果不含 datetime 属性，则会解析其文本内容值，该元素仍在设计和讨论中，示例：

<p>The concert starts at <time>20:00</time>.</p>

<div class="vevent">
<a class="url" href="http://www.web2con.com/">http://www.web2con.com/</a>
<span class="summary">Web 2.0 Conference</span>:
<time class="dtstart" datetime="2005-10-05">October 5</time>-
<time class="dtend" datetime="2005-10-07">7</time>, at the
<span class="location">Argent Hotel, San Francisco, CA</span>
</div>

`<code>`内联元素

<code>元素用于表示计算机源代码或者其他机器可以阅读的文本内容，它以浏览器的默认等宽字体显示，CSS 规则可以覆盖浏览器默认的 code 标签字体样式，但用户设置的浏览器字体选项可能会超过 CSS 的优先级，使之无效，只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 元素。虽然 <code> 元素通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码，示例：

<p>Regular text. <code>This is code.</code> Regular text.</p>

`<samp>`内联元素

<samp>元素是一个短语标签，用来定义计算机程序的样本文本，标识计算机程序引用输出，可以把文档中要显示的程序或脚本语句用samp元素标注，浏览器一般会以等宽字体显示，示例：

<p>Regular text. <samp>This is sample text.</samp> Regular text.</p>

`<kbd>`内联元素

<kbd>元素用于表示用户输入，它将产生一个行内元素，定义键盘文本，说到技术概念上的特殊样式时，就要提到 <kbd>元素，正如你已经猜到的，它用来表示文本是从键盘上键入的，浏览器通常用等宽字体来显示该标签中包含的文本，通过定义 CSS 规则可以改变 kbd 的默认字体。用户首选项设置可能会比该 CSS 规则具有更高优先级，当<kbd>元素处于<samp>元素之中时，它代表着被系统回显的输入，当<kbd>元素中包含<samp>元素时，该输入是基于系统输出的，比如调用某个菜单项，当<kbd>元素处于另一个<kbd>元素之中时，它代表了一个实际的按键，或是该输入机制下的某个单位输入，示例：

<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p><p>Save the document by pressing <kbd>Ctrl</kbd> + <kbd>S</kbd></p>

`<mark>`内联元素

<mark>元素表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的，代表突出显示的文字，例如可以为了标记特定上下文中的文本而使用这个标签，在引用的文字中使用，表示在当前文档中需要引起注意但原文中并没有强调的含义，举个例子，它可以用来显示搜索引擎搜索后关键词，当用在引用（<q> <blockquote>)中时，通常用来显示有特殊意义的文本，但不在原材料中标记出来；或者是用来显示特殊审查的材料，即使原作者不认为它特别重要，另外<mark>元素还用来显示与用户当前活动相关的一部分文档内容，例如，它可能被用于显示匹配搜索结果中的单词，不要为了语法高亮而用<mark>元素，你应该用<strong>元素结合适当的 CSS 来实现这个目的，不要把<mark>元素和<strong>元素搞混淆，<strong> 元素用来表示文本在上下文的重要性的，而<mark>元素是用来表示上下文的关联性的，示例：

<p>&lt;mark&gt; 元素用于 <mark>高亮</mark> 文本</p>

`<ruby>`内联元素

<ruby>元素被用来展示东亚文字注音或字符注释，在东亚使用，显示的是东亚字符的发音，与 <ruby> 以及 <rt> 元素一同使用，ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 ruby 元素时显示的内容，支持 ruby 元素的浏览器不会显示 rp 元素的内容，示例：

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

<ruby>明 日 <rp>(</rp><rt>ming ri</rt><rp>)</rp>
</ruby>

`<rt>`内联元素

<rt>元素定义字符（中文注音或字符）的解释或发音，与 <ruby> 以及 <rt> 元素一同使用，示例：

<ruby>汉 <rt>Hàn</rt>字 <rt>Zì</rt>
</ruby>

`<rp>`内联元素

<rp>元素在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容，<rp> 的内容提供了应该展示的东西，通常是圆括号，以便表示 ruby 注解的存在，示例：

<ruby>漢 <rp>(</rp><rt>han</rt><rp>)</rp>字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

`<span>`内联元素

<span>元素被用来组合文档中的行内元素，请使用 <span> 来组合行内元素，以便通过样式来格式化它们，span 没有固定的格式表现，本身无语义。当对它应用样式时，它才会产生视觉上的变化，如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异，可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式，可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id用于标识单独的唯一的元素，<span> 元素提供了一种将文本的一部分或者文档的一部分独立出来的方式，示例：

<p><span>一些文字</span></p>

<li><span><a href="portfolio.html" target="_blank">See my portfolio</a>
</span></li>

`<ins>`内联元素

<ins>元素定义已经被插入文档中的文本，<del> 和 <ins> 一起使用，描述文档中的更新和修正，浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线，示例：

<ins>这一段文本是新插入至文档的。</ins>

`<del>`内联元素

<del>元素定义文档中已删除的文本，这个标签通常（但不一定要）在文字上显示删除线，示例：

<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del ><p >This paragraph has been deleted.</p ></del >

`<img>`内联元素

<img>元素向网页中嵌入一幅图像，从技术上讲，<img> 元素并不会在网页中插入图像，而是从网页上链接图像，<img> 元素创建的是被引用图像的占位空间，src属性是必须的，它包含了你想嵌入的图片的文件路径，alt 属性包含一条对图像的文本描述，这不是强制性的，但对可访问性而言，它是很有用的，通过在 <a> 元素中嵌套 <img>元素，给图像添加到另一个文档的链接，在 HTML 中，<img> 没有结束标签，使用有实际意义的备用描述，alt 属性的值应该清晰、简洁地描述图像的内容，它不应该描述 “图像的存在”，或仅仅包含图像的文件名，如果因为图像没有等价的文本描述， alt 属性只得不写或留白，那么可以考虑使用其他方法来呈现图像试图传递的内容。示例：

备用文字

<img src="favicon144.png"alt="MDN logo">

图像链接

<a href="https://developer.mozilla.org"><img src="favicon144.png"alt="Visit the MDN site">
</a>

错误

<img alt="图片" src="penguin.jpg">

正确

<img alt="一只站在沙滩上的跳岩企鹅。" src="penguin.jpg">

`<iframe>`内联块元素

<iframe> 元素规定一个内联框架，它能够将另一个 HTML 页面嵌入到当前页面中，您可以把需要的文本放置在 <iframe>和</iframe>之间，这样就可以应对不支持<iframe>的浏览器，页面上的每个<iframe>都需要增加内存和其它计算资源，这是因为每个浏览上下文都拥有完整的文档环境。虽然理论上来说你能够在代码中写出来无限多的<iframe>，但是你最好还是先看看这么做会不会导致某些性能问题，使用 CSS 为 <iframe> （包括滚动条）定义样式，示例：

<html>
<body>
<iframe src="/i/eg_landscape.jpg"></iframe>
<p>一些老的浏览器不支持 iframe。</p>
<p>如果得不到支持，iframe 是不可见的。</p>
</body>
</html>

使用 iframe 的title属性来标识框架的主要内容，这样可以极大方便使用辅助技术（例如屏幕阅读器）浏览网页的人。框架的标题应该清楚地描述框架的内容，如果没有标题，他们就只能浏览每一个框架来获取需要的内容。这非常耗时间，也很容易让人迷惑，尤其是当页面中包含很多框架或者互动内容如音视频等的时候，示例：

<iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe>

`<embed>`内联元素

<embed>元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供，大多数现代浏览器已经弃用并取消了对浏览器插件的支持，所以如果您希望您的网站可以在普通用户的浏览器上运行，那么依靠 <embed> 通常是不明智的，现在已经不建议使用 <embed> 元素了，可以使用 <img>、<iframe>、<video>、<audio> 等标代替，

示例：

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

`<object>`嵌入对象元素

<object>元素表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源，用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash，object 的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持，这一点并未实现，浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型，而幸运的是，object 对象提供了解决方案，如果未显示 object 元素，就会执行位于<object>和</object>之间的代码。通过这种方式，我们能够嵌套多个object 元素（每个对应一个浏览器），示例：

<!-- Embed a flash movie -->
<object data="move.swf" type="application/x-shockwave-flash"></object><!-- Embed a flash movie with parameters -->
<object data="move.swf" type="application/x-shockwave-flash"><param name="foo" value="bar">
</object>

`<param>`空元素

<param>元素为包含它的<object>和<applet>提供参数，在 HTML 中，<param>没有结束标签，是一个空元素，<param>元素支持大部分主流浏览器。但是 <object> 定义的文件格式不是所有的浏览器都支持，示例同上。

`<video>`块级元素

<video>元素定义视频，比如电影片段或其他视频流，目前，<video> 元素支持三种视频格式：MP4、WebM、Ogg（MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器，WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器，Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis音频编解码器），可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息，你也可以将 <video> 标签用于音频内容，但<audio>元素可能在用户体验上更合适，浏览器并不是都支持相同的视频格式，所以你可以在<source>元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源，如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，示例：

<video controls><source src="myVideo.mp4" type="video/mp4"><source src="myVideo.webm" type="video/webm"><p>Your browser doesn't support HTML5 video. Here isa <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>

`<audio>`块级元素

<audio>元素定义声音，比如音乐或其他音频流，目前，<audio> 元素支持的3种文件格式：MP3、Wav、Ogg，可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息，可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者<source>元素来进行描述，浏览器将会选择最合适的一个来使用，浏览器对文件类型和音频编码的支持各有不同，你可以使用内嵌的<source>元素提供不同的播放源。浏览器会使用第一个它支持的播放源，<audio> 元素没有自带的固有视觉样式，如果你没有声明 controls 属性，音频播放器不会包含浏览器的默认控件，示例：

<audio controls><source src="myAudio.mp3" type="audio/mpeg"><source src="myAudio.ogg" type="audio/ogg"><p>Your browser doesn't support HTML5 audio. Here isa <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

`<source>`块级元素

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

<video controls><source src="foo.webm" type="video/webm"><source src="foo.ogg" type="video/ogg"><source src="foo.mov" type="video/quicktime">I'm sorry; your browser doesn't support HTML5 video.
</video>

`<track>`块级元素

<track>元素为媒体元素（比如 <audio>, <video>）规定外部文本轨道，也就是字幕，字幕格式有 WebVTT 格式（.vtt 格式文件），这个元素用于规定字幕文件或其他包含文本的文件，当媒体播放时，这些文件是可见的，track 给媒体元素添加的数据的类型在 kind 属性中设置，属性值可以是subtitles captions descriptions chapters或 metadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件，一个media 元素的任意两个 track 子元素不能有相同的 kind srclang 和 label属性，示例：

<video controls poster="/images/sample.gif"><source src="sample.mp4" type="video/mp4"><source src="sample.ogv" type="video/ogv"><track kind="captions" src="sampleCaptions.vtt" srclang="en"><track kind="descriptions"src="sampleDescriptions.vtt" srclang="en"><track kind="chapters" src="sampleChapters.vtt" srclang="en"><track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de"><track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en"><track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja"><track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz"><track kind="metadata" src="keyStage1.vtt" srclang="en"label="Key Stage 1"><track kind="metadata" src="keyStage2.vtt" srclang="en"label="Key Stage 2"><track kind="metadata" src="keyStage3.vtt" srclang="en"label="Key Stage 3"><!-- Fallback -->...
</video>

`<table>`块级元素

<tabel>元素定义 HTML 表格，简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成，tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元，更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead tfoot 以及 tbody 元素，请使用CSS样式来设置属性，示例：

<table><tr><td>John</td><td>Doe</td></tr><tr><td>Jane</td><td>Doe</td></tr>
</table>

<p>Simple table with header</p>
<table><tr><th>First name</th><th>Last name</th></tr><tr><td>John</td><td>Doe</td></tr><tr><td>Jane</td><td>Doe</td></tr>
</table><p>Table with thead, tfoot, and tbody</p>
<table><thead><tr><th>Header content 1</th><th>Header content 2</th></tr></thead><tfoot><tr><td>Footer content 1</td><td>Footer content 2</td></tr></tfoot><tbody><tr><td>Body content 1</td><td>Body content 2</td></tr></tbody>
</table><p>Table with colgroup</p>
<table><colgroup span="4" class="columns"></colgroup><tr><th>Countries</th><th>Capitals</th><th>Population</th><th>Language</th></tr><tr><td>USA</td><td>Washington D.C.</td><td>309 million</td><td>English</td></tr><tr><td>Sweden</td><td>Stockholm</td><td>9 million</td><td>Swedish</td></tr>
</table><p>Table with colgroup and col</p>
<table><colgroup><col class="column1"><col class="columns2plus3" span="2"></colgroup><tr><th>Lime</th><th>Lemon</th><th>Orange</th></tr><tr><td>Green</td><td>Yellow</td><td>Orange</td></tr>
</table><p>Simple table with caption</p>
<table><caption>Awesome caption</caption><tr><td>Awesome data</td></tr>
</table>

`<caption>`块级元素

<caption>元素定义表格标题，caption 元素必须紧随 table 元素之后，您只能对每个表格定义一个标题，通常这个标题会被居中于表格之上，同样可以被 CSS 样式化，所以，它同样可以出现在任何一个一个相对于表格的任意位置，当所处的 table 是外部 figure 元素的唯一子元素，应首选 figcaption，示例同上。

`<tbody>`块级元素

<tbody>元素表格主体（正文），该元素用于组合 HTML 表格的主体内容，tbody 元素应该与thead和tfoot元素结合起来使用，用来规定表格的各个部分（主体、表头、页脚），thead 元素用于对 HTML 表格中的表头内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组，如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现次序是：thead、tfoot、tbody，这样浏览器就可以在收到所有数据前呈现页脚了。您必须在 table 元素内部使用这些标签，在默认情况下这些元素不会影响到表格的布局。不过，您可以使用 CSS 使这些元素改变表格的外观，<tbody> 元素内部必须包含一个或者多个 <tr> 标签，示例：

<table><thead><tr><th>Student ID</th><th>Name</th><th>Major</th></tr></thead><tbody><tr><td>3741255</td><td>Jones, Martha</td><td>Computer Science</td></tr><tr><td>3971244</td><td>Nim, Victor</td><td>Russian Literature</td></tr><tr><td>4100332</td><td>Petrov, Alexandra</td><td>Astrophysics</td></tr></tbody>
</table>

<table><thead><tr><th>Student ID</th><th>Name</th></tr></thead><tbody><tr><th colspan="2">Computer Science</th></tr><tr><td>3741255</td><td>Jones, Martha</td></tr><tr><td>4077830</td><td>Pierce, Benjamin</td></tr><tr><td>5151701</td><td>Kirk, James</td></tr></tbody><tbody><tr><th colspan="2">Russian Literature</th></tr><tr><td>3971244</td><td>Nim, Victor</td></tr></tbody><tbody><tr><th colspan="2">Astrophysics</th></tr><tr><td>4100332</td><td>Petrov, Alexandra</td></tr><tr><td>8892377</td><td>Toyota, Hiroko</td></tr></tbody>
</table>

`<thead>`块级元素

<thead>元素定义表格的表头，该元素用于组合 HTML 表格的表头内容，<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前，<thead> 元素内部必须包含一个或者多个 <tr> 标签，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观，示例同上。

`<tfoot>`块级元素

<tfoot>元素定义表格的页脚（脚注或表注），该标签用于组合 HTML 表格中的表注内容，<tfoot> 元素内部必须包含一个或者多个 <tr> 标签，可以使用 CSS 来为这些元素定义样式，从而改变表格的外观，示例同上。

`<col>`块级元素

<col>元素为表格中一个或多个列定义属性值，如需对全部列应用样式，<col> 标签很有用，这样就不需要对各个单元和各行重复应用样式了，<col> 标签没有结束标签，您只能在 table 或 colgroup 元素中使用 <col> 标签，此元素允许使用 CSS 进行样式列，但只有少数属性将对该列产生影响，示例同<table>。

`<colgroup>`块级元素

<colgroup>元素用于对表格中的列进行组合，以便对其进行格式化，如需对全部列应用样式，<colgroup> 标签很有用，这样就不需要对各个单元和各行重复应用样式了，<colgroup> 标签只能在 table 元素中使用，请为 <colgroup> 标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等，如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用<col>，示例同<table>。

`<tr>`块级元素

<tr>元素定义 HTML 表格中的行，tr 元素包含一个或多个th或td元素，示例同<table>。

`<td>`块级元素

<td>元素定义 HTML 表格中的标准单元格，HTML 表格有两种单元格类型，表头单元格：包含头部信息（由<th> 元素创建）标准单元格：包含数据（由 <td> 元素创建），<th> 元素中的文本通常呈现为粗体并且居中，<td> 元素中的文本通常是普通的左对齐文本，如果需要将内容横跨多个行或列，请使用 colspan 和 rowspan 属性，示例同<table>。

`<th>`块级元素

<th>元素定义 HTML 表格中的表头单元格，th 的 scope 属性表示标题对应的数据范围，示例同<table>。
<sub>元素定义下标文本，下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，但是与当前文本流中文字的字体和字号都是一样的。下标文本能用来表示化学公式，比如 H2O。
<sup>元素定义上标文本。上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，但是与当前文本流中文字的字体和字号都是一样的。上标文本能用来添加脚注，比如 WWW[1]。

参考资料：

Semantic HTML
HTML5 Editor’s Draft
W3school
runoob.com
MDN

ps：不全面，所以配合链接食用比较好，如果有错误或者不严谨的地方，请务必给予指正，十分感谢。

html常用语义化元素和全局属性整理相关推荐

H5网页元素和全局属性
目录一.语义元素二.分组元素三.页面交互元素四.文本层次语义元素五.全局属性一.语义元素使用语义话标签的意义: 同时作为结构元素,它不具有任何样式,只是使页面元素的的语义更加明确. 语义 ...
html5语义化标签和属性实例,跟永哥学HTML5（6）H5语义化标记使用示例
跟永哥学HTML5(3):HTML5新增语义化元素的使用对新增语义化元素已经做过讲解,本节将巩固H5语义化标记的使用 article - 解释 article标签装载显示一个独立的文章内容.例如 ...
html5语义化兼容,HTML5语义化标签，兼容性问题
HTML5不仅仅作为HTML标记语言的一个最新版本,更重要的是它制定了web应用开发的一系列标准,成为第一个将web做为应用开发平台的HTML语言. HTML5定义了一系列的新元素,如新语义化标签,智 ...
简述html的3种列表uloldl,语义化HTML：ul、ol和dl
一.语义化元素 1. ul标签 W3C草案: The ul element represents an unordered list of items; that is, a list in whic ...
html全局事件,HTML5全局属性和事件
摘要: 全局属性和事件能够应用到所有标签元素上,在HTML4中有许多全局属性,比如id,class等.HTML5中又新增了一些特殊功能的全局属性和事件. 属性: HTML5属性能够赋给标签元素含义和语 ...
HTML5语义化标签
1.HTML5简化的标签 (1)DOCTYPE文档声明 <!DOCTYPE html> 相较于之前的版本,HTML5没有指定具体版本,这就表示了最新的HTML版本. (2)<meta ...
html5指南--1.html5全局属性（html5 global attributes）
今天开始一个全新的关于html5系列课程,是我读<The Definitive Guide to HTML5 >的学习笔记.我会把自己觉得里面不错的章节,或者有意义的内容进行整理,以供大家 ...
html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...
常见的html行级元素及语义,HTML入门之——结构，常用标签及其属性，再加上语义化...
一,HTML简介(来源HTML百度百科) HTML:超文本标记语言,是指能够包含链接,图片,程序,视频等非文字元素的页面二,HTML,XML,XHTML之间有什么区别 HTML:超文本标记语言,语法 ...

html常用语义化元素和全局属性整理

WWW

<HTML>元素

全局属性

<id>全局属性

<class>全局属性

<title>全局属性

<lang>全局属性

标签与元素

<link>外部资源链接元素

<a>内联元素

<artice>块级元素

<section>块级元素

<nav>块级元素

<aside>块级元素

<h1~h6>块级元素

<header>块级元素

<footer>块级元素

<address>块级元素

<p>块级元素

<hr>块级元素

<pre>块级元素

<blockquote>块级元素

<ol>块级元素

<ul>块级元素

<li>块级元素

<dl>块级元素

<dt>块级元素

<dd>块级元素

<figure>块级元素

<figcaption>块级元素

<div>块级元素

<main>块级元素

<em>内联元素

<strong>内联元素

<i>内联元素

<b>内联元素

<small>内联元素

<s>内联元素

<u>内联元素

<cite>内联元素

<q>内联元素

<abbr>内联元素

<dfn>内联元素

<time>内联元素

<code>内联元素

<samp>内联元素

<kbd>内联元素

<mark>内联元素

<ruby>内联元素

<rt>内联元素

<rp>内联元素

<span>内联元素

<ins>内联元素

<del>内联元素

<img>内联元素

<iframe>内联块元素

<embed>内联元素

<object>嵌入对象元素

<param>空元素

<video>块级元素

<audio>块级元素

<source>块级元素

<track>块级元素

<table>块级元素

<caption>块级元素

<tbody>块级元素

<thead>块级元素

<tfoot>块级元素

<col>块级元素

<colgroup>块级元素

<tr>块级元素

<td>块级元素

<th>块级元素