<header></header> 頁(yè)眉
主要用于頁(yè)面的頭部的信息介紹,也可用于板塊頭部 <hgroup></hgroup> 頁(yè)面上的一個(gè)標(biāo)題組合 一個(gè)標(biāo)題和一個(gè)子標(biāo)題,或者標(biāo)語(yǔ)的組合
<hgroup>
<h1>妙味課堂</h1>
<h2>帶您進(jìn)入富有人情味的IT培訓(xùn)</h2>
</hgroup>
<nav></nav> 導(dǎo)航 (包含鏈接的的一個(gè)列表)
<nav>
<a href=“#”>鏈接</a><a href=“#”>鏈接</a>
</nav>
<nav>
<p><a href=“#”>妙味課堂</a></p>
<p><a href=“#”>妙味課堂</a></p>
</nav>
<nav>
<h2>妙味精品課程</h2>
<ul>
<li><a href=“#”>javascript</a></li>
<li><a href=“#”>html+css</a></li>
</ul>
<footer></footer>頁(yè)腳 頁(yè)面的底部 或者 版塊底部
<section> <section> 頁(yè)面上的版塊 用于劃分頁(yè)面上的不同區(qū)域,或者劃分文章里不同的節(jié)
<article></ article > 用來(lái)在頁(yè)面中表示一套結(jié)構(gòu)完整且獨(dú)立的內(nèi)容部分 可以用來(lái)呈現(xiàn)論壇的一個(gè)帖子,雜志或報(bào)紙中的一篇文章,一篇博客,用戶提交的評(píng)論內(nèi)容,可互動(dòng)的頁(yè)面模塊掛件等。
<aside></ aside> 元素標(biāo)簽可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組,以及其他類似的有別與主要內(nèi)容的部分 aside 的內(nèi)容應(yīng)該與 article 的內(nèi)容相關(guān)。 被包含在<article>中作為主要內(nèi)容的附屬信息部分,其中的內(nèi)容 以是與當(dāng)前文章有關(guān)的引用、詞匯列表等 在<article>之外使用,作為頁(yè)面或站點(diǎn)全局的附屬信息部分;最典型的形式是側(cè)邊欄(sidebar),其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。
<figure> < figure > 用于對(duì)元素進(jìn)行組合。一般用于圖片或視頻
<figcaption> <figcaption> figure的子元素 用于對(duì)figure的內(nèi)容 進(jìn)行說(shuō)明
<figure>
<img src=“miaov.png”/>(注意沒(méi)有alt)
<figcaption> 妙味課堂 photo © 妙味趣學(xué)</figcaption>
</figure>
<time></time>用來(lái)表現(xiàn)時(shí)間或日期
<p> 我們?cè)诿刻煸缟?<time>9:00</time> 開(kāi)始營(yíng)業(yè)。 </p>參數(shù)
<p> 我在 <time datetime="2008-02-14">情人節(jié)</time> 有個(gè)約會(huì)。 </p>
<datalist></datalist>選項(xiàng)列表。
與 input 元素配合使用,來(lái)定義 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>用于描述文檔或文檔某個(gè)部分的細(xì)節(jié) 該元素用于摘錄引用等 應(yīng)該與頁(yè)面的主要內(nèi)容區(qū)分開(kāi)的其他內(nèi)容
Open 屬性默認(rèn)展開(kāi)
< summary></summary> details 元素的標(biāo)題
<details>
<summary>妙味課堂</summary>
<p>國(guó)內(nèi)將知名的IT培訓(xùn)機(jī)構(gòu)</p>
</details>
<dialog></dialog>定義一段對(duì)話
<dialog>
<dt>老師</dt>
<dd>2+2 等于?</dd>
<dt>學(xué)生</dt>
<dd>4</dd>
<dt>老師</dt>
<dd>答對(duì)了!</dd>
</dialog>
<address></address> 定義文章 或頁(yè)面作者的詳細(xì)聯(lián)系信息
<mark></mark> 需要標(biāo)記的詞或句子
<keygen>給表單添加一個(gè)公鑰
<form action="http://www.baidu.com" method="get">
用戶: <input type="text" name="usr_name" />
公鑰: <keygen name="security" />
<input type="submit" />
</form>
<progress><progress>定義進(jìn)度條
<progress max="100" value="76">
<span>76</span>%
</progress>
標(biāo)簽
針對(duì)IE6-8這些不支持HTML5語(yǔ)義化標(biāo)簽的瀏覽器我們可以使用javascript來(lái)解決他們 方法如下:
在頁(yè)面的頭部加下:
<script>
document.createElement(“header”);
document.createElement(“nav”);
document.createElement(“footer”);
……
</script>
樣式
HTML5語(yǔ)義化標(biāo)簽在IE6-8下,我們用js創(chuàng)建出來(lái)之后,他是不會(huì)有任何默認(rèn)樣式的甚至是 display,所以在樣式表里 要對(duì)這些標(biāo)簽定義一下 它默認(rèn)的display
新的輸入型控件
email : 電子郵箱文本框,跟普通的沒(méi)什么區(qū)別 當(dāng)輸入不是郵箱的時(shí)候,驗(yàn)證通不過(guò) 移動(dòng)端的鍵盤(pán)會(huì)有變化
tel : 電話號(hào)碼
url : 網(wǎng)頁(yè)的URL
search : 搜索引擎 chrome下輸入文字后,會(huì)多出一個(gè)關(guān)閉的X
range : 特定范圍內(nèi)的數(shù)值選擇器 min、max、step( 步數(shù) ) 例子 : 用JS來(lái)顯示當(dāng)前數(shù)值
新的輸入型控件_2
number : 只能包含數(shù)字的輸入框
color : 顏色選擇器
datetime : 顯示完整日期
datetime-local : 顯示完整日期,不含時(shí)區(qū)
time : 顯示時(shí)間,不含時(shí)區(qū)
date : 顯示日期
week : 顯示周
month : 顯示月
新的表單特性和函數(shù)
placeholder : 輸入框提示信息 例子 : 微博的密碼框提示
autocomplete : 是否保存用戶輸入值 默認(rèn)為on,關(guān)閉提示選擇off
autofocus : 指定表單獲取輸入焦點(diǎn)
list和datalist : 為輸入框構(gòu)造一個(gè)選擇列表 list值為datalist標(biāo)簽的id
required : 此項(xiàng)必填,不能為空
Pattern : 正則驗(yàn)證 pattern="d{1,5}“
表單驗(yàn)證
validity對(duì)象,通過(guò)下面的valid可以查看驗(yàn)證是否通過(guò),如果八種驗(yàn)證都通過(guò)返回true,一種驗(yàn)證失敗返回false
oText.addEventListener("invalid",fn1,false);
ev.preventDefault()
valueMissing : 輸入值為空時(shí)
typeMismatch : 控件值與預(yù)期類型不匹配
patternMismatch : 輸入值不滿足pattern正則
tooLong : 超過(guò)maxLength最大限制
rangeUnderflow : 驗(yàn)證的range最小值
rangeOverflow:驗(yàn)證的range最大值
stepMismatch: 驗(yàn)證range 的當(dāng)前值 是否符合min、max及step的規(guī)則
customError 不符合自定義驗(yàn)證
setCustomValidity(); 自定義驗(yàn)證
Invalid事件 : 驗(yàn)證反饋
input.addEventListener('invalid',fn,false)
阻止默認(rèn)驗(yàn)證:ev.preventDefault()
formnovalidate屬性 : 關(guān)閉驗(yàn)證
Formaction 在submit里定義提交地址