您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關html5和html4有什么區別,小編覺得挺實用的,因此分享給大家學習,希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
1 HTML5中的標記方法
HTML5的文件擴展符與內容類型保持不變。即擴展符仍然為".html"或".htm",內容類型仍然為“text/html”。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<!DOCTYPE html>(不區分大小寫)
在H5中,刻意不使用版本聲明,一份文檔將會適用所有版本的HTML。
另外,當使用工具時,也可以在DOCTYPE聲明方式中加入SYSTEM識別符,聲明方法如下:
<!DOCTYPE HTML SYSTEM "about:legacy-compat">(不區分大小寫,引號不區分是單引號還是雙引號)
使用meta元素的形式指定文件中的字符編碼(通過 content元素的屬性來指定),如下所示:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
使用對<meta>元素直接追加charset屬性的方式來指定字符編碼。
<meta charset="UTF-8">
注意:兩種方法都有效,但是不能同時混合使用兩種方式,從H5開始,對于文件的字符編碼推薦使用UTF-8。
2 HTML5確保的兼容性
(1)不允許寫結束標記的元素(即不允許使用開始標記與結束標記將元素括起來的形式,只允許使用“<元素/>”的形式 )
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
(2)可以省略結束標記的元素
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
(3)可以省略全部標記的元素(指該元素可以完全被省略)
html、head、body、colgroup、tbody
注意:即使標記被省略了,該元素還是以隱式的方式存在。例如省略不寫body元素時,再文檔結構中它還是存在的,可以使用document.body訪問。
<!--只寫屬性不寫屬性值代表屬性為true-->
<input type="checkbox" checked>
<!--不寫屬性代表屬性為false-->
<input type="checkbox">
<!--,屬性值=屬性名,代表屬性為true-->
<input type="checkbox" checked="checked">
<!--,屬性值=空字符串,代表屬性為true-->
<input type="checkbox" checked=" ">
(1)在指定屬性值的時候,屬性值兩邊加引號時,既可以用雙引號也可以用單引號。
(2)H5在此基礎上做了一些改進,當屬性值不包括空字符串、”<“、”>“、”=“、單引號、雙引號等字符時,屬性值兩邊的引號可以省略。 如下所示
<input type="text"> <input type='text'> <input type=text>
3.HTML5新增的元素和廢除的元素
section元素、article元素、aside元素、header元素、footer元素、 nav元素、figure元素、main元素
video元素、audio元素、embed元素、mark元素、progress元素、meter元素、time元素、ruby元素、rt元素、rp元素、wbr元素、canvas元素、commmand元素、details元素、datalist元素、datagrid元素、keygen元素、output元素、source元素、menu元素、dialog元素
(1)email:表示必須輸入e-mail地址的文本輸入框
(2)url:表示必須輸入URL地址的文本輸入框
(3)number:表示必須輸入數值的文本輸入框
(4)range:表示必須輸入一定范圍內數字值的文本輸入框
(5)Date Pickers:H5擁有多個可供選擇日期和時間的新型輸入文本框
1. date:選取日、月、年
2 .month:選取月、年
3. week:選取周和年
4. time:選取時間(小時和分鐘)
5. datetime:選取時間、日、月、年(UTC時間)
6. datetime-local:選取時間、日、月、年(本地時間)
(6)search:用于搜索
(7)tel:專用于電話
(8)color:顏色選擇文本框。選擇的值為”#000000“格式的文字。
(1)能使用CSS替代的元素
如:basefont、big、center、font、s、strike、tt、u 等元素
其中s、strike元素可以由del元素替代,tt元素由CSS的font-famliy屬性進行代替。
(2)不再使用frame框架
如:frameset、frame、noframes。
由于frame框架對網頁可用性存在負面影響,在H5中已不支持frame框架,只支持iframe框架或者由服務器方創建的由多個頁面組成的復合頁面的形式,同時將這三個元素廢除。
(3)只有部分瀏覽器支持的元素
如:applet、bgsound、blink、marquee等元素。
其中applet元素可由embed元素或object元素代替,bsground元素可由audio元素代替,marquee可以由javascript編程方式代替。
(4)其他被廢除的元素
1. rb元素,由ruby元素代替
2. acronym元素,由abbr元素代替
3. dir元素,由ul元素代替
4. isindex元素,由form元素與input元素相結合的方式代替
5 .listing.元素,由pre元素代替
6. xmp元素,由code元素代替
7. nextid元素,由GUIDS元素代替
8. plaintext元素,使用“text/plain”MIMEL類型代替
》
4.全局屬性
所謂全局屬性,是指可以對任何元素都使用的屬性。
(1)主要功能
允許用戶編輯元素中的內容,所以該元素必須是可以獲得鼠標焦點的元素,而且在點擊鼠標后要向用戶提供一個插入符號,提示用戶該元素中的內容循序編輯
(2)值
該屬性為一個布爾值屬性,可以被指定被true或false。
(3)隱藏的inhert狀態
當該屬性未被指定時,則由inherit狀態來決定,如果元素的父元素是可編輯的,則該元素就是可編輯的。
(4)isContentEditable屬性
當元素可編輯時,該屬性值為true,否則為false。
(1)功能
用來指定整個頁面是否可編輯,當頁面可編輯時,頁面中任何支持contentEditable屬性的元素都變成了可編輯狀態。
(2)值
該屬性有兩個值,“ on ”(頁面可編輯)和“ off ”(頁面不可編輯)。
(3)該屬性只能在Javascript腳本中被編輯修改
document.designMode = " on ";
(4)瀏覽器支持
1.IE8:出于安全考慮,不允許使用該屬性讓頁面進入編輯狀態。
2.IE9:允許使用該屬性讓頁面進入編輯狀態。
3.Chorme3 和 Safari:使用 。內嵌frame的方式,該內嵌frame是可編輯的。
4.Firefox 和 Opera:允許使用該屬性讓頁面進入編輯狀態。
(1)功能
通知瀏覽器不渲染該元素,使該元素處于不可見狀態。
(2)值
布爾值屬性,為 true 或 false。
spellcheck屬性是H5針對input元素(type=text)與textarea這兩個文本輸入框提供的一個新的屬性。
(1)功能
對用戶輸入的文本內容進行拼寫和語法檢查.
(2)值
布爾值,true 或 false。
(3)注意
1.必須聲明屬性值為true或false。
2.如果元素的 readOnly 屬性或 disabled 屬性設為 true,則不執行拼寫檢查。
(4)瀏覽器支持情況
目前除了IE之外,Firefox、Chorme、Safari、Opera等瀏覽器都對該屬性提供了支持。
每一個控件的tabindex表示該控件是第幾個被訪問到的。(敲擊Tab鍵)
(1)如今控件的遍歷順序是由元素在頁面上所處位置決定的,所以就不再需要了。
(2)另一個作用
在默認情況下,只有鏈接元素與表單元素可以通過按鍵獲取焦點。如果對其他元素使用該屬性后,也能讓該元素獲得焦點。把元素的tabindex值設為負值(通常為-1)后,可以通過編程的方式讓元素獲得焦點,并且在按下Tab鍵時該元素不會獲得焦點。
以上就是html5和html4有什么區別,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。