(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>
<html>
<head>
<script type="text/javascript" src="loadxmldoc.js">
</script>
</head>
<body>
<script type="text/javascript">
xmlDoc=<a href="dom_loadxmldoc.asp">loadXMLDoc</a>("books.xml");
document.write("xmlDoc is loaded, ready for use");
</script>
</body>
</html>
</pre>
3.7 footer
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 語義化