第02章__HTML5--全新的HTML

1、第2章 HTML5-全新的HTML 2.1 語法結(jié)構(gòu) 2.3 元素的改變 2.4 屬性的改變 2.2 頁面架構(gòu) 2.1 語法結(jié)構(gòu)與HTML4相比，HTML5的語法結(jié)構(gòu)省去了一些不必要的配置信息，因此更加簡練。一個簡單的HTML5頁面，代碼如下： HTML5 這是一個HTML頁面2.2 頁面架構(gòu)HTML5提供了用于定義頁面結(jié)構(gòu)的元素，主要包括如下幾個元素： 1. section元素，用于定義一個內(nèi)容區(qū)域。 2. header元素，用于定義頁面標(biāo)題區(qū)域。 3. nav元素，用于定義頁面中導(dǎo)航欄區(qū)域。 4. article元素，用于定義定義頁面上下相對獨立的信息區(qū)域。 5. aside元素，用于定義

2、article信息相關(guān)聯(lián)信息。 6. footer元素，用于定義頁面中腳注區(qū)域。 使用HTML5提供的頁面結(jié)構(gòu)元素可以根據(jù)不同功能模塊，快速構(gòu)建頁面。例如：網(wǎng)頁開發(fā)技術(shù)網(wǎng) Java/JSPC#/ASP.NETJava的發(fā)展前景 .NET開發(fā)入門 版權(quán)所有，侵權(quán)必究2.3 元素的改變HTML5與之前版本比較，在頁面元素方面做出較大調(diào)整，不僅新增了一些元素，還對之前不經(jīng)常使用或使用不便的元素進行了調(diào)整。1. 新增元素主要包括如下幾個：（1）video元素，用于在頁面中添加視頻信息。（2）audio元素，用于在頁面中添加音頻信息。（3）embed元素，用于在頁面中添加多媒體插件。（4）mark元素，

3、用于在頁面中高亮顯示信息。（5）command元素，用于在頁面中添加命令按鈕。（6）progress元素，用于在頁面中添加進度條。（7）details元素，用于描述頁面中文檔火文檔的某部分細節(jié)信息。（8）detalist元素，用于定義數(shù)據(jù)集合，通常與input元素結(jié)合使用。（9）output元素，用于在頁面中輸出信息。2. 停止使用的元素主要包括如下幾個：（1）frame元素，該元素曾經(jīng)是構(gòu)建頁面框架結(jié)構(gòu)不可或缺的元素，但由于頁面重用性低，HTML5中不再使用該元素。（2）其他停止使用的元素，分別由HTML5新元素進行取替。包括，applet，bgsound，acronym，dir，isind

4、ex，listing，nextid，plaintext，rb，xmp。2.4 屬性的改變HTML5不僅對頁面元素進行修改，還對元素的屬性進行了調(diào)整。1. 新增的表單屬性：屬性名稱適用元素說明autofocusinput,select,textarea,button用于頁面加載時，使設(shè)置該屬性的元素控件獲得焦點forminput,output,select,textarea,button,fieldset用于聲明設(shè)置該屬性的元素屬于哪個表單placeholderinput(text),textarea 用于對設(shè)置該屬性的元素進行輸入提示requiredinput(text),textarea用于

5、對設(shè)置該屬性的元素，進行必填校驗autocompleteform,input用于對設(shè)置該屬性的元素，進行自動補全填寫min/max/stepinput用于對設(shè)置該屬性的，包含數(shù)字或日期的元素規(guī)定限定約束條件multipleinput(email,file)用于規(guī)定設(shè)置該屬性的元素輸入域中可選擇多個值patterninput用于設(shè)置元素輸入域校驗?zāi)Ｊ?2. 新增的鏈接屬性：屬性名稱適用元素說明mediaa,area用于規(guī)定設(shè)置該屬性元素的媒體類型sizeslink用于設(shè)置元素關(guān)聯(lián)圖標(biāo)大小，通常與icon結(jié)合使用3. 新增的其他屬性：屬性名稱適用元素說明reversedol用于指定列表顯示順序為倒

6、序charsetmeta用于設(shè)置文檔字符編碼方式typemenu用于設(shè)置menu元素顯示形式labelmenu用于設(shè)置menu元素標(biāo)注信息scopedstyle用于設(shè)置樣式作用域asyncscript用于設(shè)置腳本執(zhí)行方式為同步或異步manifesthtml用于設(shè)置離線應(yīng)用文檔緩存信息sandbox,seamless,srcdociframe用于設(shè)置提高頁面安全4. 停止使用的屬性：HTML4屬性HTML5處理方法align,autosubmit,background,bgcolor,border,clear,compact,char,charoff,cellpadding,cellspacin

7、g,frameborder,height,hspace,link,marginheight,marginwidth,noshade,nowrap,rules,size,text,valign,vspace,width,使用CSS樣式表替代原屬性target,nohref,profile,version停止使用charset,scope使用HTTP Content-type頭元素revrel替代shape,coords使用area替代a5. 全局屬性：全局屬性是HTML5中的一個新的概念，它的作用是適用于所有的頁面元素。HTML5中的全局屬性主要包含如下幾個：（1）contentEditable。當(dāng)contentEditable屬性值設(shè)置為true時，設(shè)置該屬性的元素處于可編輯狀態(tài)，用戶可任意編輯元素內(nèi)部信息；當(dāng)contentEditable屬性值設(shè)置為false時，設(shè)置該屬性的元素處于不可編輯狀態(tài)。（2）draggable。當(dāng)draggable屬性設(shè)置為true時，對應(yīng)元素處于可拖拽狀態(tài)；當(dāng)draggable屬性設(shè)置為false時，對應(yīng)元素處于不可拖拽狀態(tài)。（3）hidden。在HTML5中絕大多數(shù)的元素都支持該屬性設(shè)置。設(shè)置hidden屬性為true時，設(shè)置該屬性的元素在頁面中處于不顯示狀態(tài)；設(shè)