1. 程式人生 > >(2) html 語義化

(2) html 語義化

type 判斷 輸入框 3.4 side doc 什麽 name inter

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>

header 標簽定義文檔的頁眉(介紹信息)。

<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>

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

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>

footer 標簽定義文檔或節的頁腳。
footer 元素應當含有其包含元素的信息。
頁腳通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等。
您可以在一個文檔中使用多個 footer 元素。

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:[email protected]">[email protected]</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 語義化