HTML语义标签的介绍和常用的语义标签

2019-07-09 本文已影响67人 coder_girl

语义化标签目的
主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。
与默认样式的区别
默认样式是浏览器设定的一些常用tag的表现形式
语义化是一种纯文字的补充,让大家直观的认识标签和属性的用途和作用
语义化标签的使用意义

代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构,有利于页面布局,特别是在移动应用上(弹性盒子方面)
2.有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
3.提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。
4.便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。
5.方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

使用的场景

作为自然语言和纯文字的补充,用来表达一定的结构表达
必要的存在,一旦没有时文字会产生歧义
适合机器阅读的整体结构

<语义标签大全>

大约有[100多个HTML语义元素](%3Ca href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element"%3Ehttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element%3C/a%3E)可供选择的语义元素,常用的语义化标签如下:

2019-07-09_144941.jpg

HTML5提供了新的语义元素来定义网页的不同部分，它们被称为“切片元素”，如图所示

20180626164405788.jpg

<title>：
HTML <title> 元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释。

<title>常用的语义化标签</title>

<hn>:
h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。

<body>

            <h1>一级标题</h1>

            <h2>二级标题</h2>

            <h3>三级标题</h3>

            <h4>四级标题</h4>

            <h5>五级标题</h5>

            <h6>六级标题</h6>

      </body>

2019-07-08_215005.jpg

<ul>：

HTML <ul> 元素（或称 HTML 无序列表元素）表示一个内可含多个元素的无序列表或项目符号列表。(一般搭配<li>来用)

<ul>

            <li>.....</li>

            <li>....</li>

            <li>...</li>

      </ul>

<ol>:
HTML <ol> 元素表示多个有序列表项，通常渲染为有带编号的列表(一般搭配<li>来用)。

<ol>

            <li>*****</li>

            <li>****</li>

            <li>***</li>

      </ol>

因为是无序和有序列表所以我展示的是效果比对图:

2019-07-08_220126.jpg

<header>：
HTML <header> 元素用于展示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<header >

                  <h1>Cute Puppies Express!</h1>

            </header>



            <main>

                  <p>I love beagles <em>so</em> much! Like, really, a 
lot. They’re adorable and their ears are so, so snuggly soft!</p>

            </main>

2019-07-09_144142.jpg

<nav>：
HTML导航栏 (<nav>) 描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表.

<nav class="crumbs">
    <ol>
        <li ><a href="bikes">Bikes</a></li>
        <li ><a href="bikes/bmx">BMX</a></li>
        <li >Jump Bike 3000</li>
    </ol>
</nav>

2019-07-09_144417.jpg

<main>：
HTML <main> 元素呈现了文档的 <body> 或应用的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

<header><h2>Gecko facts</h2></header>
<main role="main">

    <p>Geckos are a group of usually small, usually nocturnal lizards. 
They are found on every continent except Australia.</p>
    <p>Many species of gecko have adhesive toe pads which enable them to 
climb walls and even windows.</p>

</main>

2019-07-09_144751.jpg

<article>：
表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

<article class="forecast">

    <h1>Weather forecast for Seattle</h1>

    <article class="day-forecast">

        <h2>03 March 2018</h2>

        <p>Rain.</p>

    </article>

    <article class="day-forecast">

        <h2>04 March 2018</h2>

        <p>Periods of rain.</p>

    </article>

    <article class="day-forecast">

        <h2>05 March 2018</h2>

        <p>Heavy rain.</p>

    </article>

</article>

2019-07-09_145753.jpg

<section>：
HTML Section 元素 (<section>) 表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>,或者是定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

<section>
    <h1>Introduction</h1>
    <p>People have been catching fish for food since before recorded history…</p>
</section>

<section>
    <h1>Equipment</h1>
    <p>The first thing you’ll need is a fishing rod or pole that you find comfortable and is strong enough for the kind of fish you’re expecting to land…</p>
</section>

2019-07-09_150022.jpg

<aside>：
元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<p>Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.</p>

<aside>
    <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.</p>

2019-07-09_150517.jpg

<footer>：
表示最近一个章节内容或者根节点（sectioning root ）元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。只有当父级是body时，才是整个页面的页脚。

 <footer>
        <p>© 2018 Gandalf</p>
    </footer>

2019-07-09_152631.jpg

<small>：
將使文本的字体变小一号。(例如从大变成中等，从中等变成小，从小变成超小)。在HTML5中，除了它的样式含义，这个元素被重新定义为表示边注释和附属细则，包括版权和法律文本。即呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。

<p>MDN Web Docs is a learning platform for Web technologies and the software that powers the Web.</p>

<hr>

<p><small>The content is licensed under a Creative Commons Attribution-ShareAlike 2.5 Generic License.</small></p>

2019-07-09_152833.jpg

<strong>：
Strong 元素 (<strong>)表示文本十分重要，一般用粗体显示和 em 标签一样，用于强调文本，但它强调的程度更强一些。

<p>The content is <strong>good</strong> </p>

2019-07-09_153224.jpg

<em>：
HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容， <em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。将其中的文本表示为强调的内容，表现为斜体。

<p>

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

</p>

2019-07-09_153513.jpg

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

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

2019-07-09_153710.jpg

<figure>：

<figure> 元素代表一段独立的内容, 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元。当它属于主内容流（main flow）时，它的位置独立于主体。这个标签经常是在主文中引用的图片，插图，表格，代码段等等，当这部分转移到附录中或者其他页面时不会影响到主体。（默认有40px左右margin）。
例如以下的诗歌:

<figure>

  <p>

Bid me discourse, I will enchant thine ear,

  Or like a fairy trip upon the green,

Or, like a nymph, with long dishevell'd hair,

  Dance on the sands, and yet no footing seen:

Love is a spirit all compact of fire,

  Not gross to sink, but light, and will aspire.</p>

  <figcaption><cite>Venus and Adonis</cite>,

    by William Shakespeare</figcaption>

</figure>

2019-07-09_154700.jpg

<figcaption>：
HTML <figcaption> 元素是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。这意味着 <figcaption> 在<figure> 块里是第一个或最后一个。同时 HTML Figcaption 元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

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

2019-07-09_154951.jpg

<cite>：
HTML引用（ Citation）标签 (<cite>) 表示一个作品的引用。它必须包含引用作品的符合简写格式的标题或者URL，它可能是一个根据添加引用元数据的约定的简写形式。

<blockquote>

    <p>It was a blog about computer technology.</p>

    <footer>

        the <cite><a 
href="https://qaqsarah.github.io/"><i>blog</i></a></cite> by qian.

    </footer>

</blockquote>

2019-07-09_160519.jpg

<blockquote>：
HTML <blockquote> 元素（或者 HTML 块级引用元素），代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进（注中说明了如何更改）。若引文来源于网络，则可以将原内容的出处 URL 地址设置到 cite 特性上，若要以文本的形式告知读者引文的出处时，可以通过 <cite> 元素。

<blockquote cite="https://qaqsarah.github.io/">

    <p>Words can be like X-rays, if you use them properly—they’ll go 
through anything. You read and you’re pierced.</p>

    <footer>—Aldous Huxley, <cite>Brave New World</cite></footer>

</blockquote>

2019-07-09_161130.jpg

<q>：
HTML引用标签 (<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>

2019-07-09_161338.jpg

<time>：
用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。

<p>The concert took place on <time datetime="2019-07-09 16:00">July 
09</time>.</p>

2019-07-09_161753.jpg

<abbr>：
缩写元素（<abbr>）用于展示缩写，并且可以通过可选的 title 属性提供完整的描述。

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

2019-07-09_162529.jpg

<dfn>：
HTML 定义元素 (<dfn>) 表示术语的一个定义(定义术语元素)，与定义必须紧挨着，可以在描述列表dl元素中使用。
术语定义应当在 <p>, <section>或定义列表 (通常是<dt>, <dd> 对)中给出。被定义术语的值由下列规则确定：
如果 <dfn> 元素有一个 title 属性，那么该术语的值就是该属性的值。否则，如果它仅包含一个 <abbr> 元素，该元素拥有 title 属性，那么该术语的值就是该属性的值。否则，<dfn> 元素的文本内容就是该术语的值。

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

2019-07-09_182203.jpg

<address>：
表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息。

<p>Contact the author of this page:</p>

<address>
  <a href="mailto:jim@rock.com">jim@rock.com</a><br>
  <a href="tel:+13115552368">(311) 555-2368</a>
</address>

2019-07-09_182728.jpg

<del>：
表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins>标签的作用恰恰于此相反：表示文档中添加的内容。

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

2019-07-09_182957.jpg

<ins>：
HTML <ins> 元素定义已经被插入文档中的文本。

      <p>“You're late!”</p>

<del>

    <p>“I apologize for the delay.”</p>

</del>

<ins cite="../howtobeawizard.html" datetime="2018-05">

    <p>“A wizard is never late …”</p>

</ins>

2019-07-09_183145.jpg

<code>：
元素呈现一段计算机代码. 默认情况下, 它以浏览器的默认等宽字体显示.

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

2019-07-09_183318.jpg

<meter>：
HTML <meter>元素用来显示已知范围的标量值或者分数值。。（Internet Explorer 不支持 meter 标签）

<p>Heat the oven to <meter min="200" max="500"
  value="350">350 degrees</meter>.</p>

2019-07-09_183503.jpg

<progress>：
HTML中的progress (<progress>) 元素用来显示一项任务的完成进度.虽然规范中没有规定该元素具体如何显示,浏览器开发商可以自己决定,但通常情况下,该元素都显示为一个进度条形式.

<progress value="70" max="100">70 %</progress>

2019-07-09_183652.jpg

<pre>:
表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来。(紧跟在 <pre> 开始标签后的换行符也会被省略)

<p>Using CSS to change the font color is easy.</p>
<pre>
body {
  color: red;
}
</pre>

2019-07-09_183848.jpg

<samp>:
<samp> 元素用于标识计算机程序输出，通常使用浏览器缺省的 monotype 字体（例如 Lucida Console）。

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

2019-07-09_184045.jpg

<hr >:
表示段落级元素之间的主题转换（例如，一个故事中的场景的改变，或一个章节的主题的改变）。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上。

<p>
  This is the first paragraph of text.
  This is the first paragraph of text.
  This is the first paragraph of text.
  This is the first paragraph of text.
</p>

<hr>

<p>
  This is the second paragraph of text.
  This is the second paragraph of text.
  This is the second paragraph of text.
  This is the second paragraph of text.
</p>

2019-07-09_184240.jpg

<p>:
HTML <p>元素（或者说 HTML 段落元素）表示文本的一个段落。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<p> 是块级元素。只要涉及文字段落几乎都用到,这是最常见的一个语义标签.

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

2019-07-09_184534.jpg

<hgroup>:
HTML <hgroup> Element (HTML Headings Group Element) 代表一个段的标题。它规定了在文档轮廓里（the outline of the document ）的单一标题是它所属的隐式或显式部分的标题。

<hgroup>
  <h1>Main title</h1>
  <h2>Secondary title</h2></hgroup>

2019-07-09_184946.jpg

接下来再补充以下Witter大神给的补充标签:

9684130e423b6734b23652f4f0b6359e.jpg

平时使用HTML标签时应该注意以下几点:

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

特别注明:以上的内容是本人在学习了winter大神的《重学前端》的语义化标签和一些相关博文后结合自身实际开发使用的情况下,总结得到这篇文章,若有哪里不对或者不好之处,可评论留言告知,小女子在此谢过!

HTML语义标签的介绍和常用的语义标签

接下来再补充以下Witter大神给的补充标签:

猜你喜欢

热点阅读