這次給大家帶來h5的語義化標籤，使用h5語義化標籤的注意事項有哪些，下面就是實戰案例，一起來看一下。
html5新特性
簡潔的doctype：
html5 只有乙個簡單的文件型別：，表示瀏覽器會按照標準模式解析。
簡單易記的編碼型別
你現在可以在meta 標籤中使用」charset」：
指令碼和鏈結無需type
更加語義化的新增標籤
比如說：、、、、 ,、、、、
和 等
表單增強
新的input型別：color, email, date, month, week, time, datetime, datetime-local, number,range,search, tel, 和url
新屬性：required, autofocus, pattern, list, autocomplete 和placeholder
新元素：, , , 和
canvas標籤繪製2d圖形。var canvas = document.getelementbyid('canvas');var context = canvas.getcontext('2d');context.beginpath();context.moveto(100,100);context.lineto(300,300);context.lineto(100,500);context.linewidth = 5;context.strokestyle = "red";context.stroke();
地理位置獲取
html語義化
1.什麼是html語義化？
通過標籤判斷內容語義，例如根據h1標籤判斷出內容是標題，根據
判斷內容是段落、標籤是輸入框等。
2.為什麼要語義化？
1).去掉或樣式丟失的時候能讓頁面呈現清晰的結構
2).方便其他裝置解析(如螢幕閱讀器、盲人閱讀器、移動裝置)以意義的方式來渲染網頁
3).有利於seo
4).便於團隊開發和維護，遵循w3c標準，可以減少差異化
3.如何確定你的標籤是否語義良好？
去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。
4.常見的語義化標籤模組
表單 登入表單
賬號：密碼：表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。
5.語義化標籤應注意的一些問題
盡可能少的使用無語義的標籤p和span；
在語義不明顯時，既可以使用p或者p時，盡量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設定。
需要強調的文字，可以包含在strong或者em標籤中，strong預設樣式是加粗(不要用b)，em是斜體(不用i)
推薦閱讀：
html5怎麼實現轉圈的動畫效果
H5語義化標籤
語義化 看到標籤名就知道實現那塊區域 標籤 定義頁面頭部 標籤定義頁面腳部 標籤定義導航鏈結 標籤定義頁面中的區段 標籤定義頁面中的文章標籤 srcset timg1.jpg 2x 設定大小 音訊 ogg controls controls onmouseout this.pause 當滑鼠離開的時...
元件化h5活動模板的實現
需求 實現一套靈活的活動元件模板，編輯人員只需要開啟後台，拖拽相應元件，填入相應內容，最終就生成乙個活動頁面。幾種狀態 登入，未登入，遊客狀態等 狀態具體內容不做解釋 兩個專案支援 那麼實現這一套，需要兩個專案，乙個專案是活動模板編輯器，乙個是前端展示h5頁面。活動模板編輯器 1 元件 每個元件對應...
元件化h5活動模板的實現
需求 實現一套靈活的活動元件模板，編輯人員只需要開啟後台，拖拽相應元件，填入相應內容，最終就生成乙個活動頁面。幾種狀態 登入，未登入，遊客狀態等 狀態具體內容不做解釋 兩個專案支援 那麼實現這一套，需要兩個專案，乙個專案是活動模板編輯器，乙個是前端展示h5頁面。活動模板編輯器 活動模板編輯器主要實現...