HTML語義化

時間 2019-12-05

標籤 html 語義欄目 HTML 简体版

原文原文鏈接

HTML語義化

`HTML`

引入語義化標籤的好處主要有下列三點：

比div標籤有更加豐富的含義，方便開發與維護
搜索引擎能更方便的識別頁面的每一個部分
方便其餘設備解析（如移動設備、盲人閱讀器等）

div元素被替換成新的元素：header 頁眉, nav 導航, section 區塊, article 文章, aside 側邊欄, footer 頁腳

HTML5結構代碼

<body>
    <header>...</header>
    <nav>...</nav>
    <article>
        <section>
        ...
        </section>
    </article>
    <aside>...</aside>
    <footer>...</footer>
</body>

語義化標籤

標籤	語義	用法
header	標籤訂義文檔的頁眉（介紹信息）。	一般被放置在頁面或者頁面中某個區塊元素的頂部，包含整個頁面或者區塊的標題、簡介等信息，起到引導與導航的做用。
nav	表示頁面的導航，能夠經過導航鏈接到網站的其餘頁面，或者當前頁面的其它部分。	nav 標籤通常只用於頁面的主要導航部分
aside	所包含的內容不是頁面的主要內容、具備獨立性，是對頁面的補充。	通常使用在頁面、文章的側邊欄、廣告、友情連接等區域。
footer	定義文檔或節的頁腳。	通常被放置在頁面或者頁面中某個區塊的底部，包含版權信息、聯繫方式等信息。
article	表示包含於一個文檔、頁面、應用程序或網站中的一段獨立的內容，能夠被獨立的發佈或者從新使用文章標記標籤。	article 標籤應該使用在相對比較獨立、完整的的內容區塊，因此咱們能夠在一篇博客、一個論壇帖子、一篇新聞報道或者一個用戶評論中使用它。一般狀況下，一個 article 元素包括標題、正文和腳註。和 nav 標籤同樣，該標籤一樣不能用在 address 標籤中。
section	是一個主題性的內容分組，一般用於對頁面進行分塊或者對文章等進行分段。	section標籤所包裹的是有一組類似的主題的內容，能夠用這個標籤來實現文章的章節、標籤式對話框中的各類標籤頁等相似的功能。section 一般包含一個頭部header、可能還會包含一個尾部 footer。
figure	規定獨立的流內容（圖像、圖表、照片、代碼等等）。	元素表明一段獨立的內容.用於對元素進行組合。多用於圖片與圖片描述組合。
hgroup	用來對標題元素進行分組	用於對網頁或區段（section）的標題進行組合。使用新的 HTML5 元素 hgroup，能夠爲 header 元素添加更多的信息。（頭部主標題/副標題）

舉例

<header>
    <img src="images/logo.png" alt="**科技" />
    <h1>**信息科技有限公司</h1>
    <nav>
        <li><a href="#">首頁</a></li>
        <li><a href="example.html">客戶案例</a></li>
        <li><a href="service_one.html">技術服務</a></li>          
        <li><a href="aboutus_one.html">關於咱們</a></li>
        <li><a href="connection.html">聯繫咱們</a></li>
    </nav>
</header>

<hgroup>
<h1>Welcome to my WWF</h1>
<h2>For a living planet</h2>
</hgroup>
<p>The rest of the content...</p>

<article>
    <h1>HTML5學習之語義化標籤</h1>
    <p>....正文.....</p>
    <aside>
        <h2>什麼是語義化標籤</h2>
        <p>語義化標籤就是......</p>
    </aside>
</article>

<article>
    <h1>HTML5學習之語義化標籤</h1>
    <p>....正文.....</p>
    <footer>版權全部*僞版必究</footer>
</article>

<article>
    <h1>JavaScript框架</h1>
    <p>Javascript框架是指以Javascript語言爲基礎搭建的編程框架。</p>
    <section>
        <h2>angular.Js<h2>
        <p>angular.Js是一款優秀的前端JS框架</p>
    </section>
    <section>
        <h2>Vue.js<h2>
        <p>Vue.js是用於構建交互式的Web界面的庫</p>
    </section>
    <section>
        <h2>jQuery<h2>
        <p>jQuery是一個快速、簡潔的JavaScript框架。</p>
    </section>
</article>

<footer>
    <small>
    版權全部 © 2016-2017 **信息科技有限公司
    </small>
</footer>

文檔級別語義

1. ruby、rt、rphtml

ruby 是一種排版註釋系統，是位於橫排基礎文本上方的簡短文字，主要針對東亞語言做出簡單的讀音註釋。例如能夠爲中文或日文顯示讀音。
ruby 涉及的元素包括 ruby 、rt 以及 rp 。首先使用 ruby 指定一個具體的表達式，而後使用rt提供說明。rt部分將顯示在表達式上方。前端

下面這個例子中，拼音將顯示在文字的上方。編程

<ruby>
    北<rt>bei</rt>
    京<rt>jing</rt>
</ruby>

可是在不支持 ruby 的瀏覽器中須要使用 rp 對這兩個區塊進行視覺上的隔離。瀏覽器

<ruby>
    北
    <rp>
        <rt>bei</rt>
    </rp>
    京
    <rp>
        <rt>jing</rt>
    </rp>
</ruby>

2. timeruby

爲了將如今的經常使用的日期和時間語句用規範的、利於機器識別的格式進行表述，time 元素提供了一個可選的時間和時區組件。

<p>
    咱們在天天早上 <time>9:00</time> 開始營業。
</p>

<p>
    我在 <time datetime="2008-02-14">情人節</time> 有個約會。
</p>

爲了確保機器可以正確識別，咱們可使用 datetime 屬性，其屬性值能夠被定義爲時間、日期或者這二者的複合體。框架

<time datetime="2017-07-03">

還可使用 pubdate 爲一個網頁指定發佈時間。ide

<time datetime="2017-07-03" pubdate>
<!--如下兩種形式也能夠行-->
<time datetime="2017-07-03" pubdate="">
<time datetime="2017-07-03" pubdate="pubdate">

注意：在 HTML5 中，true 或 false 並不是有效的屬性值，當解釋器發現存在布爾屬性時，它將直接解釋爲 true 。若是須要將屬性設爲 false ，將這個屬性去掉便可。學習

3. mark字體

mark 元素用於高亮標記一段文字。可使用 mark 元素來標記出網頁裏被搜索的關鍵詞或是用於高亮顯示一段解釋性的代碼。

4. wbr網站

wbr 元素用於讓瀏覽器爲長單詞增長可選擇的破折號，以便自動拆行。
在至關長的單詞中插入一對 wbr 元素，可讓瀏覽器根據排版的須要決定是否將單詞換行。破折號是否出現，以及出現的位置徹底由排版決定。 wbr 只是容許自動拆行，但非強制拆行。

<p>
    若是想學習 AJAX，那麼您必須熟悉 XML<wbr>Http<wbr>Request 對象。
</p>

5. 略微改變的元素

在HTML4版本中的標籤元素在HTML5中有了新的定義。

使用 b 表示文檔渲染爲粗體，而 i 表示文檔渲染爲斜體。使用 strong 和 em 來強調一段重要的文本。 cite 用來爲對參考文獻的引用進行定義，好比書籍或雜誌的標題。 small 不只僅指的是小字體，它還一樣爲法律聲明增添不具備重要性的旁註或小字。 hr 如今表達的是主體性的間斷，再也不僅僅是分割版面的一條水平線。

6. 補充
main 標籤：呈現了文檔<body>或應用的主體部分；通常頁面最多隻有一個。

License

能夠拷貝、轉發，可是必須提供原做者信息，同時也不能將本項目用於商業用途。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。