<html></html> 內又有以下幾類:
1. head<head>標籤用於定義文檔的頭部,它是所有頭部元素的容器。<head>描述了文檔的各種屬性和信息,包括文檔的標題、在 Web 中的位置以及和其他文檔的關係等。head內可存放標籤有:
<base>:為頁面上的所有連結規定默認地址或默認目標。
<link>:主要用於style文件引入
<style>:樣式表區域
<title>:可定義文檔的標題。 <title> 標籤是 <head> 標籤中唯一要求包含的東西。
<meta>:提供了有關當前HTML元素的元信息 (meta-information)
2. body<body>標籤內存放文檔的內容。<body>內標籤分類有以下11類:
內容分區
文本內容
內聯文本語義
圖片和多媒體
內嵌內容
腳本
編輯標識
表格內容
表單
交互元素
Web組件
HTML 標籤語義化語義化到底重不重要?
我們知道,在HTML中,每個標題是通過標題標籤來定義的,標題標籤一共有6個,分別是:h1~6。例子如下:
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
如果是連續的標題,則可以用 <hgroup> 來連接:
<hgroup>
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
</hgroup>
如果是段落內容,則用 <p>:
<p>我是段落內容</p>
如果我們要列一個列表則可以用 <ol></ol> 或 <li></li> 。如果只是要標記項目,我們可以用 <li></li>,例子如下:
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>奧特曼</li>
<li>橙子</li>
</ul>
若是標記順序,則用 <ol></ol> ,例子如下:
<ol>
<li>向前走300米</li>
<li>右轉</li>
<li>向前走300米</li>
<li>右轉</li>
<li>向前走300米</li>
</ol>
當然我們也可以按需嵌套。
<ol>
<li>先用蛋白一個、鹽半茶匙及澱粉兩大匙攪拌均勻,調成「醃料」,雞胸肉切成約一釐米見方的碎丁並用「醃料」攪拌均勻,醃漬半小時。</li>
<li>用醬油一大匙、澱粉水一大匙、糖半茶匙、鹽四分之一茶匙、白醋一茶匙、蒜末半茶匙調拌均勻,調成「綜合調味料」。</li>
<li>雞丁醃好以後,色拉油下鍋燒熱,先將雞丁倒入鍋內,用大火快炸半分鐘,炸到變色之後,撈出來瀝乾油汁備用。</li>
<li>在鍋裡留下約兩大匙油,燒熱後將切好的幹辣椒下鍋,用小火炒香後,再放入花椒粒和蔥段一起爆香。隨後雞丁重新下鍋,用大火快炒片刻後,再倒入「綜合調味料」繼續快炒。</li>
<ul>
<li>如果你採用正宗川菜做法,最後只需加入花生米,炒拌幾下就可以起鍋了。</li>
<li>如果你在北方,可加入黃瓜丁、胡蘿蔔丁和花生米,翻炒後起鍋。</li>
</ul>
</ol>
在我們平常說話的時候,為了突出重點,我們往往會強調某些詞,就如如下的例子:
<p>我<em>非常</em>喜歡加班</p>
如果是重音強調,則:
<p>魚頭,明天<strong>別遲到</strong>了</p>
如果你在項目的一開始就使用HTML語義化,不僅不會花更多的時間,而且又有以下的可訪問性優點:
1.更便於開發 — 如上所述,你可以使HTML更易於理解,並且可以毫不費力的獲得一些功能。
2.更適配移動端 — 語義化的HTML文件比非語義化的HTML文件更加輕便,並且更易於響應式開發。
3.更便於SEO優化 — 比起使用非語義化的
標籤,搜尋引擎更加重視在「標題、連結等」裡面的關鍵字,使用語義化可使網頁更容易被用戶搜索到。
無障礙設計在Web開發無障礙性意味著使儘可能多的人能夠使用Web站點,即使這些人的能力是有限的。這裡我們提供關於開發易訪問的內容的信息。
「無障礙性是最常用於描述設施或設施,幫助殘疾人,如「輪椅」。這可以擴展到盲文標識、輪椅坡道,音頻信號在人行橫道,輪廓人行道,網站設計,等等。"
WAI-ARIAWAI-ARIA 是一項技術,它可以通過瀏覽器和一些輔助技術來幫助我們進一步地識別以及實現語義化,這樣一來能幫助我們解決問題,也讓用戶可以了解發生了什麼。
WAI-ARIA 是W3C編寫的規範,定義了一組可用於其他元素的HTML 特性,用於提供額外的語義化以及改善缺乏的可訪問性。以下是規範中三個主要的特性:
1.角色(role):這定義了元素是幹什麼的;
2.屬性:通過定義一些屬性給元素,讓他們具備更多的語義;
3.狀態:用於表達元素當前的條件的特殊屬性。
後記HTML語義化非常地重要,雖然在組件化開發的今天,利益沒那麼明顯,但是對於後期維護,用戶訪問以及用戶友好度來說都是非常重要的,在某些國家,語義化跟無障礙標準化甚至是衡量一個線上產品能否上線的標準。