Html5語義化標簽及兼容性處理詳細介紹

這篇文章運用簡單易懂的例子給大家介紹Html5語義化標簽及兼容性處理詳細介紹，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

<header></header> 頁眉

主要用于頁面的頭部的信息介紹，也可用于板塊頭部 <hgroup></hgroup> 頁面上的一個標題組合 一個標題和一個子標題，或者標語的組合

<hgroup>

<h2>妙味課堂</h2>

<h3>帶您進入富有人情味的IT培訓</h3>

</hgroup>

<nav></nav> 導航 （包含鏈接的的一個列表）

<nav>

<a href=“#”>鏈接</a><a href=“#”>鏈接</a>

</nav>

<nav>

<p><a href=“#”>妙味課堂</a></p>

<p><a href=“#”>妙味課堂</a></p>

</nav>

<nav>

<h3>妙味精品課程</h3>

<ul>

<li><a href=“#”>javascript</a></li>

<li><a href=“#”>html+css</a></li>

</ul>

<footer></footer>頁腳 頁面的底部 或者 版塊底部

<section> <section> 頁面上的版塊 用于劃分頁面上的不同區域,或者劃分文章里不同的節

<article></ article > 用來在頁面中表示一套結構完整且獨立的內容部分 可以用來呈現論壇的一個帖子，雜志或報紙中的一篇文章，一篇博客，用戶提交的評論內容，可互動的頁面模塊掛件等。

<aside></ aside> 元素標簽可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分 aside 的內容應該與 article 的內容相關。 被包含在<article>中作為主要內容的附屬信息部分，其中的內容 以是與當前文章有關的引用、詞匯列表等 在<article>之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。

<figure> < figure > 用于對元素進行組合。一般用于圖片或視頻

<figcaption> <figcaption> figure的子元素 用于對figure的內容 進行說明

<figure>

<img src=“miaov.png”/>(注意沒有alt)

<figcaption> 妙味課堂 photo &copy 妙味趣學</figcaption>

</figure>

<time></time>用來表現時間或日期

<p> 我們在每天早上 <time>9:00</time> 開始營業。 </p>參數

<p> 我在 <time datetime="2008-02-14">情人節</time> 有個約會。 </p>

<datalist></datalist>選項列表。

與 input 元素配合使用，來定義 input 可能的值。

<input type="text" list="valList" />

<datalist id="valList">

<option value="javascript">javascript</option>

<option value="html">html</option>

<option value="css">css</option>

</datalist>

<details></details>用于描述文檔或文檔某個部分的細節 該元素用于摘錄引用等 應該與頁面的主要內容區分開的其他內容

Open 屬性默認展開

< summary></summary> details 元素的標題

<details>

<summary>妙味課堂</summary>

<p>國內將知名的IT培訓機構</p>

</details>

<dialog></dialog>定義一段對話

<dialog>

<dt>老師</dt>

<dd>2+2 等于？</dd>

<dt>學生</dt>

<dd>4</dd>

<dt>老師</dt>

<dd>答對了！</dd>

</dialog>

<address></address> 定義文章 或頁面作者的詳細聯系信息

<mark></mark> 需要標記的詞或句子

<keygen>給表單添加一個公鑰

<form action="http://www.baidu.com" method="get">

用戶: <input type="text" name="usr_name" />

公鑰: <keygen name="security" />

<input type="submit" />

</form>

<progress><progress>定義進度條

<progress max="100" value="76">

<span>76</span>%

</progress>

標簽

針對IE6-8這些不支持HTML5語義化標簽的瀏覽器我們可以使用javascript來解決他們 方法如下：

在頁面的頭部加下：

<script>

document.createElement(“header”);

document.createElement(“nav”);

document.createElement(“footer”);

……

</script>

樣式

HTML5語義化標簽在IE6-8下，我們用js創建出來之后，他是不會有任何默認樣式的甚至是 display，所以在樣式表里 要對這些標簽定義一下 它默認的display

新的輸入型控件

email : 電子郵箱文本框，跟普通的沒什么區別 當輸入不是郵箱的時候，驗證通不過 移動端的鍵盤會有變化

tel : 電話號碼

url : 網頁的URL

search : 搜索引擎 chrome下輸入文字后，會多出一個關閉的X

range : 特定范圍內的數值選擇器 min、max、step( 步數 ) 例子 : 用JS來顯示當前數值

新的輸入型控件_2

number : 只能包含數字的輸入框

color : 顏色選擇器

datetime : 顯示完整日期

datetime-local : 顯示完整日期，不含時區

time : 顯示時間，不含時區

date : 顯示日期

week : 顯示周

month : 顯示月

新的表單特性和函數

placeholder : 輸入框提示信息 例子 : 微博的密碼框提示

autocomplete : 是否保存用戶輸入值 默認為on，關閉提示選擇off

autofocus : 指定表單獲取輸入焦點

list和datalist : 為輸入框構造一個選擇列表 list值為datalist標簽的id

required : 此項必填，不能為空

Pattern : 正則驗證 pattern="\d{1,5}“

表單驗證

validity對象，通過下面的valid可以查看驗證是否通過，如果八種驗證都通過返回true，一種驗證失敗返回false

oText.addEventListener("invalid",fn1,false);

ev.preventDefault()

valueMissing : 輸入值為空時

typeMismatch : 控件值與預期類型不匹配

patternMismatch : 輸入值不滿足pattern正則

tooLong : 超過maxLength最大限制

rangeUnderflow : 驗證的range最小值

rangeOverflow：驗證的range最大值

stepMismatch: 驗證range 的當前值 是否符合min、max及step的規則

customError 不符合自定義驗證

setCustomValidity(); 自定義驗證

Invalid事件 : 驗證反饋

input.addEventListener('invalid',fn,false)

阻止默認驗證：ev.preventDefault()

formnovalidate屬性 : 關閉驗證

Formaction 在submit里定義提交地址

關于Html5語義化標簽及兼容性處理詳細介紹就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。