第02章__HTML5--全新的HTML

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

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

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

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

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

6、序charsetmeta用于設置文檔字符編碼方式typemenu用于設置menu元素顯示形式labelmenu用于設置menu元素標注信息scopedstyle用于設置樣式作用域asyncscript用于設置腳本執(zhí)行方式為同步或異步manifesthtml用于設置離線應用文檔緩存信息sandbox,seamless,srcdociframe用于設置提高頁面安全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。當contentEditable屬性值設置為true時，設置該屬性的元素處于可編輯狀態(tài)，用戶可任意編輯元素內部信息；當contentEditable屬性值設置為false時，設置該屬性的元素處于不可編輯狀態(tài)。（2）draggable。當draggable屬性設置為true時，對應元素處于可拖拽狀態(tài)；當draggable屬性設置為false時，對應元素處于不可拖拽狀態(tài)。（3）hidden。在HTML5中絕大多數的元素都支持該屬性設置。設置hidden屬性為true時，設置該屬性的元素在頁面中處于不顯示狀態(tài)；設