HTML5學習之語義

時間 2020-07-06

標籤 html5 html 學習語義欄目 HTML5 简体版

原文原文鏈接

介紹 HTML 語義化前，先回顧下 HTML 知識吧！html

標準結構

如今絕大多數前端開發都是使用下面的結構。前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>

</body>
</html>
複製代碼

DOCTYPE 是文檔類型(document type)的簡寫，告知瀏覽器使用什麼文檔標準(這裏是使用 HTML 文檔標準)解析該文檔。 瀏覽器會根據 DOCTYPE 定義的 DTD(文檔類型定義)解釋頁面代碼並顯示。因此要創建符合標準的網頁，DOCTYPE 的聲明是必不可少的關鍵組成部分。若 DOCTYPE 不存在或格式不正確，文檔將以兼容模式呈現，即頁面以寬鬆向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法工做。而使用標準模式，其排版和 JS 運做模式以該瀏覽器支持的最高標準運行。canvas

註釋

以爲後綴，便可對包裹內容進行註釋。瀏覽器

提問：CSS、JS 的註釋又是怎樣的？咱們常見的註釋有/ /、/* */這兩種，CSS 只支持第一種，JS 二者均支持。ruby

全局屬性

怎麼理解全局？

一是對全部元素都適用，包括無效的元素。好比下面的 my 元素是一個無效元素，但 hidden 屬性仍對其適用生效。網絡

<my hidden>我</my>
複製代碼

二是全局屬性可能對一些元素不起做用。好比下面的 class 屬性不能對 head 元素起任何做用。數據結構

<head class="red"></head>
複製代碼

常見全局屬性有哪些呢？

xml:langapp

從 XHTML 規範繼承，爲了兼容而被保留。框架
idide

定義惟一標識符。

class

一個以空格分隔的元素的類名列表。
style

應用於元素的 CSS 樣式聲明。

dir

一個指示元素中文本方向的枚舉屬性。取值有 ltr、rtl、auto。ltr 表示文字從左到右書寫，rtl 表示文字從右到左書寫，auto 表示由用戶代理決定文字方向。
title

表示與其所屬元素相關信息的文本。
lang

定義元素的語言。它的優先級比 xml:lang 小。
accessKey

提供了爲當前元素生成鍵盤快捷鍵的提示。這個屬性由空格分隔的字符列表組成。瀏覽器應該使用在計算機鍵盤佈局上存在的第一個。
tabindex

整數屬性，表示元素是否能夠可聚焦，是否應該參與順序鍵盤導航，若是是，則表示哪一個位置。它可能須要幾個值：

負值表示該元素是可聚焦的，但不該經過順序鍵盤導航到達;

0 表示元素能夠經過順序鍵盤導航進行聚焦和訪問，但其相對順序由平臺約定定義;

正值表示元素能夠經過順序鍵盤導航進行聚焦和訪問。元素聚焦的順序是 tabindex 的增長值，若是多個元素共享相同的 tabindex，則它們的相對順序遵循它們在文檔中的相對位置。

HTML5 出現後，咱們經常使用到的全局屬性有以下，

contenteditable

表示元素是否可被用戶編輯。
data-*

自定義數據屬性，它賦予咱們在全部 HTML 元素上嵌入自定義數據屬性的能力，在 JS 腳本中能夠經過 HTMLElement.dataset 訪問。
hidden

表示是否隱藏元素，等同於 display:none。
draggable

表示是否可使用拖拽 API 去拖動元素。

主流元素分類

根元素

html
元數據元素

head、base、meta、title、link、style
分區元素

body、header、footer、aside、main、nav、section、article、h1~h六、hgroup、address
塊文本元素

div、p、ol、ul、li、dd、dl、dt、hr、blockquote、figcaption、figure
內聯文本元素

a、span、br、abbr、cite、code、small、time、bdi、bdo、data、dfn、kbd、mark、q、rb、rp、rt、rtc、ruby、samp、u、var、wbr
媒體元素

audio、img、video、map、track、area
內嵌元素

embed、iframe、object、param、picture、source
腳本元素

canvas、script、noscript
編輯標識元素

del、ins
表格元素

table、caption、thead、tbody、tfoot、tr、th、td、colgroup、col
表單元素

form、label、input、button、select、datalist、optgroup、option、textarea、fieldset、legend、meter、output、progress
交互元素

details、dialog、menu、summary
Web 組件

template、slot

語義化

HTML是面向文檔的，非面向文檔中的數據，因此文檔中的數據是沒法被搜索引擎直接訪問。而網頁標註，剛好能讓搜索引擎抓取到數據，利於SEO，讓用戶更容易準確搜索到想要的信息。以上即是語義化的由來和做用。

語義化技術較知名的有RDFa(資源描述框架屬性)、微格式(Microformats)和微數據(Microdata)。

簡單認識下三個技術。

阮一峯老師博文上提到，根據RDF的定義，資源自己是主語，屬性名稱是謂語，屬性值是賓語。對網絡資源的描述就採用主-謂-賓的形式。好比，

<rdf:Description dc:title="這是個人標題" />
複製代碼

rdf:Description是主語，表示資源，屬性dc:title是謂語，屬性值表示賓語

微格式是經過類名進行語義化的，若某個元素帶有以h-爲前綴的類名，說明建立了一個微格式對象，其子元素有以p-、u-、dt-或e-爲前綴的類名，則該對象有哪些屬性。這裏摘抄MDN的一個示例，

<div class="h-card">
  <a class="p-name u-url" href="http://blog.lizardwrangler.com/" >Mitchell Baker</a> 
  (<a class="p-org h-card" href="http://mozilla.org/" >Mozilla Foundation</a>)
</div>
複製代碼

語義解析出來的JSON內容以下，

{
  "items": [{ 
  "type": ["h-card"],
  "properties": {
    "name": ["Mitchell Baker"],
    "url": ["http://blog.lizardwrangler.com/"],
    "org": [{
    "value": "Mozilla Foundation",
    "type": ["h-card"],
    "properties": {
      "name": ["Mozilla Foundation"],
      "url": ["http://mozilla.org/"]
    }
    }]
  }
  }]
}
複製代碼

能夠發現，使用微格式，全部瀏覽器都是支持的，可是容易與咱們定義的CSS類名起衝突。

微數據使用支持的詞彙表描述項目和鍵值對，以便爲其屬性賦值。與使用RDFa和微格式相比，微數據試圖提供一種機器可讀標籤去註釋HTML元素的簡單方法。微數據藉助了HTML5.2新定義的幾個全局屬性，分別以下，

itemid

項的惟一全局標識符
itemscope

指定塊中包含的關於特定項目的HTML
itemtype

指定將用於在數據結構中定義itemprop的詞彙表的URL
itemprop

項的屬性

示例以下，

<div itemscope itemtype="http://schema.org/SoftwareApplication">

  <span itemprop="name">Angry Birds</span> -REQUIRES <span itemprop="operatingSystem">ANDROID</span>
  <br>

  <link itemprop="applicationCategory" href="http://schema.org/GameApplication"/>

  <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
    RATING:
    <span itemprop="ratingValue">4.6</span> (
    <span itemprop="ratingCount">8864</span> ratings )
  </div>

  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    Price: $<span itemprop="price">1.00</span>
    <meta itemprop="priceCurrency" content="USD" />
  </div>
</div>
複製代碼

語義解析結果：

Angry Birds - REQUIRES ANDROID
RATING: 4.6 ( 8864 ratings )
Price: $1.00
複製代碼

最後，介紹了這幾個語義化技術，意在說明HTML5在語義方面上是下了功夫的，即提供了許多語義化標籤，這些標籤是對搜索引擎檢索出來的結果進行統計而定製出來的的經常使用詞。

語義話標籤做用不止於語義化，在用戶可訪問性、代碼可讀性和可維護性方面也提供了必定的幫助。

參考

1. HTML5學習之語義化標籤（一）
2. HTML5之語義化標籤
3. HTML5之語義標籤
4. HTML5 之語義標籤
5. Html5學習 day1_1 Html5語義化標籤的兼容問題
6. html5語義化
7. Html5語義化
8. HTML5語義化
9. html5---語義化
10. HTML5-語義化
更多相關文章...
• Web 語義化 - 網站建設指南
• 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
• Kotlin學習（一）基本語法
• Tomcat學習筆記（史上最全tomcat學習筆記）

相關標籤/搜索

每日一句

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