HTML 5中的標記方法

內容類型 (ContentType)

首先, HTML 5的文件擴展符與內容類型保持不變。也就是說,擴展符仍然爲" .html" 或 ".htm" ,內容類型 (ContentType)仍然爲 "text刷html"

DOCTYPE聲明

DOCTYPE聲明是HTML文件中必不可少的,它位於文件第一行。在HTML5中,刻意不使用版本聲明,一份文檔將會適用於所有版本的HTML. HTML 5中DOCTYPE聲明方式是不區分大小寫,引號不區分是單引 號還是雙引號

指定字符編碼

HTML4中:;HTML 5中,可以使用對元素直接追加charset屬性的方式來指定字符編碼,如: 兩種方居都有效,不能同時使用。從HTML5開始,對於文件的字符編碼推薦使用UTF-8

新增的元素和廢除的元素

新增的結構元素

section:表示頁面中的一個內容區塊

article:表示頁面中的一塊與上下文不相關的強立內容

aside:表示article元素的內容之外的

header:表示頁面中一個內容區塊或整個頁面的標題

bgroup:用於對整個頁面或頁面中一個內容區塊的標題進行組合

footer:表示整個頁面或頁面中一個內容區塊的腳註;一般會包含創作者的姓名、創作日期以及創作者聯繫信息

nav:表示頁面中導航鏈接的部分

figure:表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素爲figure元素組添加標題

新增的真他元素

video:定義視頻

audio:定義音頻

embed:用來插入各種多媒體,格式可以是Midi、Wav、AIFF、AU、MP3等

mark:主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字

progress:表示運行中的進程,可以用progress元素顯示JS中耗費時間的函數的進程

time:表示日期或時間,也可以同時表示兩者

ruby:表示ruby註釋(中文註音或字符)

rt:表示字符(中文註音或字符)的解釋或發音

rp:在ruby註釋中使用,以定義不支持ruby元素的瀏覽器所顯示的內容

wbr:表示轉換行。 wbr元素與br元素的區別是. br元素表示此處必須換行,而wbr的意思是瀏覽器窗口或父級元素的寬度足夠寬時(沒必要換行時),不進行換行,而當寬度不夠時主動在此處進行換行。 wbr對字符型的作用挺大,但對中文貌似沒多大用處

canvas:表示圖形,比如圖表和其他圖像。這個元素本身沒有行爲,僅提供一塊麪布,但它把一個繪圖API展現給客戶端JavaScript

command:表示命令按鈕, 比如單選按鈕、複選框或按鈕

details:表示用戶要求得到且可以得到的細節信息,它可以與summary元素配合使用。summary元素應該是details元素的第一個子元素

datalist:表示可選數據的列表,與input元素配合使用,可以製作出輸入值的下拉列表

datagrid:表示可選數據的列表,它以樹形列表的形式來顯示

keygen:表示生成密鑰

output:表示不同類型的輸出.比如腳本的輸出

source:爲媒介元素(比如

menu:表示菜單列表,當希望列出表單控件時使用核標籤

新增的input元素的類型

email:表示必須輸入E-maíl地址的文本輸入框

url:表示必須輸入URL地址的文本輸入框

number:表示必須輸入數值的文本輸入框

range:表示必須輸入一定範圍內數字值的文本輸入框

HTML5擁有多個可供選取日期和時間的新型輸入文本框:

date一一選取日、月、年

month一一選取月、年

week一一選取周和年

time一一選取時間(小時和分鐘)

datetime-一一選取時間、日、月、年 (UTC時間)

datetime-local一一選取時間、日、月、年(本地時間)

新增的屬性

表單相關的屬性

autofocus:以指定屬性的方式讓元素在畫面打開時自動獲得焦點

placeholder:提示用戶可以輸入的內容

form:聲明屬於哪個表單,然後將其放置在頁面上任何位置而不是表單之內

required:表示在用戶提交的時候進行檢查,檢查該元素內一定要有輸入內容爲input元素增加了幾個新的屬性:autocomplete、min、max、multiple、pattern、step。multiple屬性允許在上傳文件時一次上傳多個文件

formaction、formenctype、formmethod、formnovalidate與formtarget:可以重載form元素的action、enctype、method、novalidate與target屬性

novalidate:可以取消提交時進行的有關檢查,表單可以被無條件地提交

鏈接相關屬性

media:規定目標URL是什麼類型的媒介/設備進行優化的,只能在href屬性存在時使用

hreflang與rel:保持與a元素、link元素的一致

sizes:可以與icon元素結合使用(通過rel屬性),該屬性指定關聯圖標(icon元素)的大小

其他屬性

reversed:指定列表倒序顯示

charset:爲文擋的字符編碼的指定提供了一種比較良好的方式

type與label:label屬性爲菜單定義一個可見的標註,type屬性讓菜單以上下文菜單、工具條與列表菜單的三種形式出現

scoped:規定樣式的作用範圍,譬如只對頁面上某個樹起作用

async:定義腳本是否異步執行

manifest:開發離線Web應用程序時它與API結合使用定義一個URL,在這個URL上描述文擋的緩存信息

sandbox、seamless與srcdoc:用來提高頁面安全性,防止不信任的Web頁面執行某些操作

全局屬性

contentEditable屬性

contentEditable屬性:允許用戶編輯元素中的內容,是一個布爾值屬性,可以被指定爲true或false

該屬性還有個隱藏的inherit(繼承)狀態,屬性爲true時元素被指定爲允許編輯,屬性爲false時元素被指定爲不允許編輯;未指定true或false則由inherit狀態根據父元素來決定。
元素還具有一個isContentEditable屬性,當元素可編輯時該屬性爲true,當元素不可編輯時該屬性爲false

designMode屬性

designMode屬性:用來指定整個頁面是否可編輯

designMode屬性只能在JS腳本里被編輯修改;該屬性有兩個值"on"與"off"。屬性被指定爲 "on" 時頁面可編輯,被指定爲 "off" 時頁面不可編輯

hidden屬性

H5中所有的元素都允許使用hidden屬性,該屬性功能是通知瀏覽器不渲染該元素,使該元素處於不可見狀態。但是頁面裝載後允許使用JS腳本將該屬性取消,取消後 該元素變爲可見狀態,同時元素中的內容也即時顯示出來。Hidden屬性是一個布爾值的屬性,當設爲true時元素不可見,當設爲false肘元素可見

spellcheck屬性

spellcheck屬性是爲對用戶輸入的文本內容進行拼寫和語法檢查,具有true或false兩種值;但是它在書寫時必須明確聲明屬性值爲true或false。需要注意的是:如果元素的readOn]y或disabled設爲true,則不執行拼寫檢查

tabindex屬性

對窗口或頁面中所有控件進行遍歷時,每一個控件的tabindex表示該控件是第幾個被訪問到的。tabindex還有另外一個作用,把元素的tabindex值設爲負數. (通常爲-1)後,仍可以通過編程方式讓元素獲得焦點,但按下Tab鍵時該元素就不能獲得焦點了,這在複雜的頁面中或複雜的Web應用程序中是十分有用的

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章