歡迎您訪問八維職業學校-創新教育 引領未來
隨著互聯網的普及和技術的不斷發展，web前端開發工程師在當今互聯網行業中的重要地位，Web前端開發工程師作為一個專業技術崗位，需要掌握多種技術來構建現代化的網頁和應用程序，今天八維職業學校和大家一起來看看web前端開發工程師如何理解Web語義化？希望對想要學習和了解web前端開發工程師這個行業的同學有所幫助。
web語義化是什么?
Web語義化是指使用恰當語義的html標簽、class類名等內容，讓頁面具有良好的結構與含義，從而讓人和機器都能快速理解網頁內容。語義化的web頁面一方面可以讓機器在更少的人類干預情況下收集并研究網頁的信息，從而可以讀懂網頁的內容，然后將收集匯總的信息進行分析，結果為人類所用;另一方面它可以讓開發人員讀懂結構和用戶以及屏幕閱讀器(如果訪客有視障)能夠讀懂內容。
為什么要語義化?
有利于 SEO 。
SEO也就是Search Engine Optimization，搜索引擎優化。指通過站內優化比如網站結構調整、網站內容建設、網站代碼優化等以及站外優化，比如網站站外推廣、網站品牌建設等，使網站滿足搜索引擎收錄排名需求，在搜索引擎中提高關鍵詞排名，從而吸引精準用戶進入網站，獲得免費流量，產生直接銷售或品牌推廣。
人可以通過視覺的劃分判斷內容的語義，而搜索引擎只能通過爬取網頁標簽等代碼來判斷內容的語義。得到搜索引擎的有效爬取，是提高網站流量的有效方法之一。要使頁面盡可能地對搜索引擎友好，所以就要盡可能地使標簽和內容語義化。
在頁面去掉或樣式丟失的時候，能讓頁面呈現清晰的結構。html的一些標簽，例如h1(粗體)、 strong(加粗)、em(斜體)，通過一些默認的樣式，可以使頁面即使在缺失CSS樣式修飾時也能呈現清晰的結構。
屏幕閱讀器(如果訪客有視障)會完全根據你的標記來"讀"你的網頁，便于無障礙閱讀。
團隊開發中，良好的語義化標簽，可以減少很多差異化，減少成員間溝通成本，方便開發和后期維護，利于實現模塊化開發。
web語義化的分類
web語義化應該是樣式與結構分離的結果，重構中的語義化包含HTML標簽語義化和CSS命名語義化，HTTP的語義化是針對HTTP協議來說。
HTML標簽語義化
HTML為網頁文檔內容提供上下文結構和含義。對于HTML體系而言，Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，讓頁面元素有含義，便于被瀏覽器、搜索引擎解析。通常我們所說的HTML應該是完全脫離表現信息的，其中的標簽應該都是語義化地定義了文檔的結構。
根據應用場景，一些常用的標簽元素有：
本身無實在意義，組合其他HTML元素，常用于頁面布局:div
設置文本，填充段落:h1~h6, p, span, strong, em…
表現列表：ul, li, ol, dl, dt, dd
表單相關：form,input,select,button
表格相關：table,thead,tbody,tfoot,th,tr,td
用于圖像顯示：img, canvas
打開鏈接，發送郵件，段落跳轉：a
此外，meta Description/meta keywords等針對搜索引擎和更新頻度的描述和關鍵詞的meta標簽也會用來實現網頁的SEO。
HTML 規范其實一直在往語義化的方向上努力，許多元素、屬性在設計的時候，就已經考慮了如何讓各種用戶代理甚至網絡爬蟲更好地理解 HTML 文檔。
HTML5 更是在之前規范的基礎上，將所有表現層的語義描述都進行了修改或者刪除，增加了不少可以表達更豐富語義的元素，也出現很多可以替代div元素的更具象的標簽。
一個經典的頁面結構如圖：
1.header區：
包含標簽p h1~h6 hgroup等可以表示標題和副標題。
2.Navigation區
nav標簽專門為頁面導航功能定義一塊區域
3.Article 和 Section 區
Article包含頁面的實際內容，包含 Web 內容的相關的組件區。
4.figure標記
包含圖像、圖表和照片。figure標記可以包含figcaption，figcaption表示圖像對應的描述文字，與圖片產生對應關系。
5.媒體元素
一些常用的媒體元素包含：audio/video/source/embed
6.aside
包含一些補充性內容，可以被移除而不會影響文章或文章所在的區段或頁面所傳達的信息。
7.footer等
總之，HTML語義化是反對大篇幅使用無語義化的div+span+class，而鼓勵使用HTML定義好的語義化標簽。
當然，如果需要兼容低版本的IE瀏覽器，比如說IE8以及以下，那就需要考慮一些HTML5標簽兼容性解決方案了。
ARIA無障礙Web規范
ARIA即Accessible Rich Internet Application，中文譯為無障礙富互聯網應用。可以為一些有功能障礙(如聽力，視力)的人群通過屏幕閱讀器例如voiceover等，提供無障礙訪問動態、可交互Web內容。
而應用于HTML的ARIA有兩部分組成：role 和aria-* 。
其中，role標識了一個元素的作用，aria-描述了與之有關的事物特征及其狀態。
ARIA的具體使用規則可見ARIA in HTML
W3C對ARIA無障礙Web規范這樣解釋：
Web developers may use the ARIA role and aria-* attributes on HTML elements, in accordance with the requirements described in [wai-aria-1.1], except where these conflict with the strong native semantics or are equal to the implicit ARIA semantics of a given HTML element.
Setting an ARIA role and/or aria-* attribute that matches the implicit ARIA semantics is unnecessary and is not recommended as these properties are already set by the browser.
所以，如果使用的元素(HTML5)本身具有語義化，應該使用這些元素，而不用再重新定義一個添加ARIA的角色、狀態或屬性的元素。
例如：
nav已經隱含ARIA的role="navigation"聲明，就不用在標簽上在定義role或者aria就能被讀屏軟件識別。而沒有語義化的元素如
則推薦使用 role="navigation"。
CSS命名語義化
CSS語義就是class和ID命名的語義。class屬性作為HTML與CSS銜接的紐帶，其本意是用來描述元素內容的。指用易于理解的名稱對html標簽附加的class或id命名。如果說HTML語義化標簽是給機器看的，那么CSS命名的語義化就是給人看的。良好的CSS命名方式減少溝通調試成本，易于理解。
CSS命名首先要滿足W3C的命名規范和團隊的命名規范。其次是高效和可重用性。
就好像.main/.sidebar會比.left_content/.right_content的class命名靈活性更好。
URL語義化
url語義化，可以使得搜索引擎或者爬蟲更好地理解當前url所在目錄所需要表達的內容;而對于用戶來說，通過url也可以判斷上一級目錄或者下一級目錄想要表示的內容，可以提高用戶體驗。
這兩個url指向的是同一個資源，但是顯然第二個url對于用戶和搜索引擎更加友好。
url語義化可以從以下標準來衡量：
url簡化，規范化：url里的名詞如果包含兩個單詞，那么就用下劃線_ 連接。
結構化，語義化：此處的品類搜索我們用語義化單詞category表示
采用技術無關的url：第一個鏈接中的index.php這種就不應該出現在用戶側的url里。
學制學費
學習時間
近期活動
開班信息
課程內容
就業情況
津公網安備12011302141430
如何成為IT行業中有競爭力的人工智能工程師？
在當今數字化浪潮洶涌澎湃的時代，人工智能作為 IT 行業最具爆發力的領域之一，正重塑著世界的方方面面，從醫療保健到金融服務，從智能交通到娛樂產業，其影響力無處不在。若想成為這一充滿魅力與挑戰領域中的佼佼者 —— 極具競爭力的人工智能工程師，需要在多個維度精心打磨自己。