HTML 的全稱為 HyperText Markup Language，即超文本標記語言，最初是用于描述文檔而設計。從定義可以看出 HTML 的一些組成部分
元素是 HTML 的基本要素，元素有兩種寫法，一種是帶內(nèi)容的，一種是不帶內(nèi)容的
web前端全棧資料粉絲福利（面試題、視頻、資料筆記、進階路線）
屬性則為元素提供了更多的相關信息
元素可分為塊級元素和行內(nèi)元素。
塊級元素 div 示例
內(nèi)聯(lián)元素 span 示例
語義
HTML 的每個元素或者屬性都有特定的含義，我們稱之為語義。例如，ol 元素代表有序列表，lang 屬性則代表內(nèi)容的語言。
這些定義好的元素，可以讓文檔在不同的上下文中（比如瀏覽器和搜索引擎處理文檔時）呈現(xiàn)出一致性。同時，也為文檔處理器提供一些額外的信息，這對于一些輔助設備而言 (比如電子閱讀器）是非常有用的。
具有良好語義的文檔
<header>
? <img src="logo.png" alt="Favorite books logo">
</header>
<main>
? <h1>Favorite books</h1>
? <p>These are a few of my favorite books.</p>
? <h2>The Belgariad</h2>
? <p>Five books by David and Leigh Eddings.</p>
? <h2>The Hitchhiker’s Guide to the Galaxy</h2>
? <p>A trilogy of five books by Douglas Adams.</p>
</main>
使用類可以實現(xiàn)同樣的展示效果，但是對于文檔處理器而言，將捕獲不到任何有關語義的信息。
<div class="header">
? <img src="logo.png" alt="Favorite books logo">
</div>
<div class="main">
? <span class="largeHeading">Favorite books</span>
? <p>These are a few of my favorite books.</p>
? <span class="smallHeading">The Belgariad</span>
? <p>Five books by David and Leigh Eddings.</p>
? <span class="smallHeading">The Hitchhiker’s Guide to the Galaxy</span>
? <p>A trilogy of five books by Douglas Adams.</p>
</div>
擴展機制
此外，HTML 還存在大量的擴展機制，可以安全的添加語義
使用 class 屬性來擴展元素
使用 data-*= 屬性來包含數(shù)據(jù)，這些數(shù)據(jù)不會被瀏覽器處理，同時可被腳本處理
使用 meta 標簽來擴展頁面的元數(shù)據(jù)
使用 rel='' 指定當前文檔與被鏈接文檔的關系
使用 <script type=""> 來嵌入原始的數(shù)據(jù)，以便被服務端腳本進一步處理
使用 JavaScript 原型來擴展 Api
文檔對象
每個 HTML 文檔都可以對應一個 Document 對象。
可以通過 document 來訪問該對象
console.log(window.document);
console.log(document);
console.log(document.head)
console.log(document.body)
訪問文檔的一些元數(shù)據(jù)
document.referrer // 返回載入當前文檔的文檔的 URL
document.referrer // 設置或返回與當前文檔有關的所有 cookie
document.domain // 返回當前文檔的域
ducument.lastModified // 返回文檔被最后修改的日期和時間
document.title // 返回當前文檔的標題
document.url // 返回當前文檔的 URL
無障礙網(wǎng)頁應用技術
HTML 5 的可訪問性還沒有達到殘疾人士可以進行無障礙閱讀的地步。因此，WAI-ARIA，Web Accessibility Initiative-Accessible Rich Internet Applications，致力于解決殘疾用戶的可訪問性功能。
根據(jù) ARIA 的規(guī)范描述，可在 HTML 元素中使用 ARIA role 屬性以及 aria-* 屬性。
例如，視覺上不顯示用戶名三個字，但是讀屏軟件會在焦點落到該輸入框時讀出
<input type="text" aria-label="用戶名"/>
