(2) html 语义化

HTML语义化标签

1 什么是语义化标签？

通过标签判断内容语义，例如根据h1标签判断出内容是标题，根据 p 判断内容是段落、input 标签是输入框等。

2 为什么要标签语义化？

1.搜素引擎友好

2.更容易让屏幕阅读器读出网页内容

3.去掉或者丢失样式的时候能让页面呈现出清晰地结构

4.便于团队开发和维护

3 常用语义化的标签有哪些？

3.1 title

title 元素可定义文档的标题。

浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

<html>

  <head>

    <title>XHTML Tag Reference</title>

  </head>

  <body>

    The content of the document......

  </body>

</html>

3.2 header

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

<header>

<h1>Welcome to my homepage</h1>

<p>My name is Donald Duck</p>

</header>

<p>The rest of my home page...</p>

3.3 nav

nav 标签定义导航链接的部分。

<nav>

<a href="index.asp">Home</a>

<a href="html5_meter.asp">Previous</a>

<a href="html5_noscript.asp">Next</a>

</nav>

3.4 main

main 标签规定文档的主要内容。

main 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。

注释：在一个文档中，不能出现一个以上的 main 元素。main 元素不能是以下元素的后代：article、aside、footer、header 或 nav。

<main>

  <h1>Web Browsers</h1>

  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

</main>

3.5 progress

progress标签标示任务的进度（进程）。

<progress value="22" max="100"></progress>

3.6 pre

可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。pre 标签的一个常见应用就是用来表示计算机的源代码。

<pre>

&lt;html&gt;

&lt;head&gt;

  &lt;script type=&quot;text/javascript&quot; src=&quot;loadxmldoc.js&quot;&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

  &lt;script type=&quot;text/javascript&quot;&gt;

    xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>(&quot;books.xml&quot;);

    document.write(&quot;xmlDoc is loaded, ready for use&quot;);

  &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</pre>

3.7 footer

footer 标签定义文档或节的页脚。

footer 元素应当含有其包含元素的信息。

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

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

<footer>

  <p>Posted by: W3School</p>

  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>

</footer>

3.8 aside

aside 标签定义其所处内容之外的内容。

aside 的内容应该与附近的内容相关。

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

3.9 section

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

<section>

  <h1>PRC</h1>

  <p>The People's Republic of China was born in 1949...</p>

</section>

3.10 article

article 标签规定独立的自包含内容。

一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。

<article>

  <h1>Internet Explorer 9</h1>

  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>

</article>

本文部分内容摘自w3school

巴特西

(2) html 语义化

HTML语义化标签

1 什么是语义化标签？

2 为什么要标签语义化？

3 常用语义化的标签有哪些？

3.1 title

3.2 header

3.3 nav

3.4 main

3.5 progress

3.6 pre

3.7 footer

3.8 aside

3.9 section

3.10 article

最新文章

热门文章