資訊專欄INFORMATION COLUMN
摘要：例如盲人借助屏幕閱讀器，也可以上網購物。如果網站的購物車按鈕是用寫的，那么屏幕閱讀器識別起來會非常的困難。有時候可以被其他標簽替代，我們可以表示語氣的不同，用包裹那些外來或者特殊意義的名詞。
什么是HTML
HTML全稱是HyperText Markup Language，翻譯過來就是超文本標記語言。它定義了網頁的內容和結構。
為什么要使用語義化標簽可讀性、可維護性
html有很多標簽，每個標簽都有它的語義，比如 h1～h6 表示不同重要程度的標題。雖然平時很多同學用無語義的標簽 div 、span 等也能實現相同的效果，但是可讀性就差了很多。也許有同學覺得可讀性沒有變差啊，那是因為我們當中很多人平時就沒有使用語義標簽的習慣，全都是 div。
由于 html 是標記語言，是聲明式寫法，不具有可編程性，邏輯表達能力不強。html 標簽就像其他可編程語言例如：Java 、C 、Javascript 等的變量，如果一位程序員隨意給變量命名，代碼的可讀性會非常差，后期維護成本也會非常高。
SEO
由于絕大多數網站的域名難以記住，很多人上網都是通過門戶網站上網。但是，搜索引擎出來以后，使用搜索引擎上網越來越成為一種趨勢。搜索引擎可以根據你輸入的關鍵字，直接搜出相關網站和內容，免去人工一個一個去查找。
可是搜索引擎是如何知道網站是我們要找的內容呢，搜索引擎派出爬蟲會時時刻刻的去訪問網絡上的各種網站，當它獲取到一個個網站的 html 文檔，會根據文檔頭部內容里面的 meta 數據判斷出網站類型以及內容，并保存到數據庫。（惡意誘導爬蟲另當別論）
seo 重要嗎？當然非常的重要。seo 能給網站帶來流量，流量就像網站的血液一般，沒有訪問量，網站就等于不存在。seo 現在已經成為了互聯網的一個垂直行業。做得好的，年入百萬不是夢。但是，seo運營并僅僅包含這些。
可訪問性
一個好的網站應該盡可能讓更多的人無障礙瀏覽。例如盲人借助屏幕閱讀器，也可以上網購物。如果網站的購物車按鈕是用 div 寫的，那么屏幕閱讀器識別起來會非常的困難。我們為什么要讓盲人也可以上網呢，這是一個非常有意思的問題。因為我們每天要花許多的時間用手機或其他設備瀏覽網頁，萬一以后眼瞎了，我們以后還可以沖浪啊。（不僅如此，這個世界上還有盲人游戲、盲人程序員）
常見HTML標簽語義關于 html 標簽語義的討論和文章，已經數不勝數，也有很多網站開發人員想竭盡全力去遵守，可是一旦到了開發的時候，就想不起該用什么標簽了。于是，就開始撓頭皮，時間久了，就禿了。
下面列舉一些標簽的用法：
article: 翻譯過來就是文章的意思，其內容應當是一篇獨立完整的文章。可以是雜志、報紙、技術或學術文章、論文或報告、博客或其他社交媒體文章。article 可以嵌套，但是其內容必須是相關的。每個 article 都應該有一個標題（h1～h6）。
section: 段落。比如一篇文章（article）的片段。每個段落應該有一個標題（h1～h6），當section 作為 arcticle 的子元素時，標題字號不要大于文章的標題（否則看起來很怪異）。也不建議對 section 使用樣式或者作為腳本切入點（大致意思，就是不要用js操作它），應該使用 div 來替代它干這些事。它和 p 標簽有區別。我們平時寫文章換行、起頭空兩個字，這個表示一個段落，可以用p 表示。而 section 可以是一個或多個 p 段落。這幾個段落表達的意思相近或者構成一個完整的意思。類似于中小學語文課，老師讓學生分段一樣。
nav: 導航塊。比如包含跳轉到其他頁面或者本頁面的鏈接。nav 的內容可以是列表也可以不是。例如：
不過，在網站的底部一般都有很多鏈接，例如地址、聯系方式等。這個時候一般沒必要用 nav。
aside: 與當前位置段落相關的獨立內容。例如相關文字、段落、廣告、導航
h1 ～ h6: 重要程度不一的標題。
header、footer: body、article、 aside、 nav、 section都可以有一個頭部或者腳部。header 通常用來包裹頂部的搜索框、目錄、logo等，也可以包裹標題 h1 ～ h6，但不是必須的。
figure、figure-caption: 兩個結合使用，可用于注釋插圖、圖表、照片、代碼列表等。例如：
Listing 4. The primary core interface API declaration. interface PrimaryCore { boolean verifyDataLine(); void sendData(in sequencedata); void initSelfDestruct(); }
div: 沒有任何語義。可以用來包裹一系列相關的子節點，以及將相關內容定位布局。
ol、ul、dl: 前面兩個使用更為平常，分別是有序列表和無序列表。dl 有點像二維的無序列表。例如：
blockquote、q: 都是引用的意思。一篇文章里面引用了另一篇的內容。如果需要展示引用的地址或者相關信息，可以配合使用 cite 標簽。不同的地方是，blockquote 將包含 cite 標簽在底部；q 引用內容更短小一些，像短語或者詞語，且 cite 會作為其兄弟節點出現在它前面。雖然 q 的表現與雙引號一樣。但是，卻有不同的使用場景。例如：說過的話，可以用引號包裹強調，可能不適合 q。
s、del: 兩者默認外觀差不多，都有中貫線。但是， s 表示沒那么重要了，而 del 意味著已經廢除。
strong、em: 兩者都有加強的意思。strong 著重強調相關內容，而 em 強調的是語氣，像英語口語中的重音。
i: 外來或者專有名詞，或交替出現的心情或者聲音等情景。前半句比較好理解，后半句比較難理解。先看一個例子：
雷曼開始睡覺了.
這艘船周二離港的, 他夢見. 船上有許多人, 其中有一個叫凱莉的公主. 他看著凱莉，日復一日，希望她能夠注意到他，可是，她從來都沒有.
終于，有一天晚上，雷曼鼓足了勇氣對她說——
這時，一段火警發出的報警聲把雷曼吵醒了.
上面的例子，雷曼睡覺和醒來是現實的描寫，而夢境是虛擬的，是另一種場景，都用 i 擴起來了。有時候 i 可以被其他標簽替代，我們可以 em 表示語氣的不同，用 dfn 包裹那些外來或者特殊意義的名詞。
b: 強調，引起注意，但不一定是重要的，對此，無須做出任何解釋。比如，搜索高亮、一段文字的開頭。下面是一個反例：
注意! 不要在巴比納吐口水!
這里更適合用 strong。
u: 很難辨認（發音）、拼寫錯誤或者中國名字。
time: 與時間相關的內容，例如時間、時區等。
code: 代碼片段。
var: 數學或者編程及其他地方用到的變量。例如：
x的值是5
samp: 表示一個例子或者對計算結果輸出的引用。
span: 與 div 一樣，也是沒有任何的語義的。可以用來包裹行內元素或者文本，進行樣式改造。
未完......
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53823.html
摘要：可能一些有心的開發者會把的寫的語義明白些，比如導航欄的用，邊欄的用。 0. HTML5中最看重的理念語義化相比HTML有什么區別？ 在之前翻譯的《如何寫出高效率的HTML》一文中提到了一些關于語義化標簽的相關內容，這里搜集整理了一些語義化標簽方面的問題和解答，以供大家參考。 語義化這個概念應該說是伴著HTML5應運而生，那么什么是HTML5中所謂的語義化？ 簡單來說就是：描述...
摘要：代碼示例語義化語義化語義化語義化語義化年月日小維語義化標簽包括還有等。而沒有語義化的元素如則推薦使用。語義化包含了標簽語義化和命名語義化。 什么是Web語義化 Web語義化是指使用恰當語義的html標簽、class類名等內容，讓頁面具有良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內...
摘要：語義化的頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內容。 我眼中的Web 語義化 web語義化是什么？ Web語義化，使用語義恰當的標簽，可以讓頁面具有良好的結構，頁面元素具有良好的含義，從而讓人和機器都能快速理解。語義化的...
摘要：語義化的頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器如果訪客有視障能夠讀懂內容。 我眼中的Web 語義化 web語義化是什么？ Web語義化，使用語義恰當的標簽，可以讓頁面具有良好的結構，頁面元素具有良好的含義，從而讓人和機器都能快速理解。語義化的...
閱讀 2954·2021-11-17 09:33
閱讀 3118·2021-11-16 11:52
閱讀 482·2021-09-26 09:55
閱讀 2975·2019-08-30 15:52
閱讀 1312·2019-08-30 15:44
閱讀 1257·2019-08-30 13:59
閱讀 796·2019-08-30 13:08
閱讀 1157·2019-08-30 10:50
