html5解決了:web瀏覽器之間的兼容性很低、文檔結構不明確等功能。
一、Html5和Html4的區別
(1)語法的改變:
? ? ? ? ? ? ?內容類型:文件名還是 .html或 .htm;文件類型還是 texttype
? ? ? ? ? ? DOCTYPE聲明:變化較大(在html4中要指定版本),指定字符編碼:html4:<meta http-equiv ="content-type" content="text/html" charset ="UTF-8"> ;?html5 :<meta charset="UTF-8">
(2)可以省略標記的元素:具有boolean值得屬性
值為true的情況:
<input type="checkbox" ?checked>
<input type="checkbox" checked="checked">
<input type="checkbox" ?checked=" ">
值為false的情況:
<input type="checkbox">
(3)新增元素:
結構元素:section(內容塊)? article(博客中的一篇文章)? aside(輔助信息)? ? header(標題)? ? ? ? hgroup(標題的結合)? footer(作者姓名)? ? nav (導航)? figure(文檔主體中的一個單元)
其他元素:video? ? audio ? canves ? embed? mark progress meter? time ruby? rt? rp? wbr
command ?details ?datalist ?datagrid ? keygen ? output ? source ?menu
input元素的類型: email(地址)、? url、? number、? range、? Date Pickers(日歷)
二、祥講
article元素:article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨立被外部引用的內容。它可以是一篇博客或者報刊中的文章,一片論壇帖子、一段用戶評論、或獨立的插件,或其他任何獨立的內容。article元素是可以嵌套使用的;article元素可以用來表示插件。
section元素:用于對網站或應用程序中頁面上的內容進行分塊。一個section元素通常由內容及其標題組成。但 section元素并非一個普通的容器元素; 當一個容器需要被直接定義成樣式或通過腳本定義行為時,推薦使用div而非section元素。
通常不推薦沒有標題內容使用section元素,對頁面中的內容進行分段,對文章進行分塊。
不要與article元素混淆
特別注意:
1、不要將section元素作為設置樣式的頁面容器
2、如果 article元素、aside元素、nav元素更符合使用條件,那就不要使用section元素
3、沒有標題內容 ?不要使用section元素
nav元素:是一個可以用作頁面導航的連接組,其中的導航元素連接到其他頁面或當前頁面的其他部分。并不是所有的連接組都要被放進nav元素,只需要將主要的、基本的連接組放進nav元素即可。
應用場景:
傳統導航條、側邊欄導航、頁內導航、翻頁操作
特別注意:
不能用menu元素替代nav元素
aside元素:用來表示當前頁面或文章的附屬信息部分,它可以包含于當前頁面或主要內容相關的引用、側邊欄、廣告、導航條,以及其他類似的有區別與主要主要內容的部分。
aside元素在article元素內,作為主要信息的一個附屬信息;aside元素在article元素外。
header元素:是一種具有引導和導航作用的結構元素,通常用來放置整個頁面或頁面內的一個內容區塊的標題,也可以是其他內容,例如:數據表格,搜索表單,或者相關的logo圖片。可以出現多次。
footer元素:可以作為其上層父級內容塊或是一個根區塊的腳注。footer通常包括其相關區塊的腳注信息,如:作者、相關閱讀鏈接及版權信息等。
hgroup 元素:是將標題及其子標題進行分組的元素。hgroup元素通常會將h1~h6元素進行分組,譬如:一個內容區塊的標題及其子元素算一組。
address元素:用來在文檔中呈現聯系信息,包括文檔作者或文檔維護者的名字、他們的網站鏈接、電子信箱、真實地址、電話號碼等。address應該不只用來呈現電子信箱或真實地址,還用來展示跟文檔相關的聯系人的所有信息。
2.1廢除元素
能使用css替代的元素:basefont ?big ?center ?font ? s ? tt ?u;不再使用frame框架;只有部分瀏覽器支持的元素;其他被廢除的元素
2.2新增屬性
表單相關的屬性:
form屬性:在HTML4中,表單內的從屬元素必須寫在表單內部。而在HTML5中,可以把他們寫在頁面上任何地方,然后為該元素指定一個form屬性,屬性值為該表單的id,這樣就可以聲明該元素從屬于指定表單了。
formmethod屬性:在HTML4中,一個表單內只能有一個action屬性用來對表單內所有元素統一指定提交頁面,所以每個表單內也只有一個method屬性來統一指定提交方法。在HTML5中,可以使用formmethod屬性來對每一個表單元素分別指定不同的提交方法(提交方法:get和post)。
formenctype屬性:在HTML4中,表單元素具有一個enctyp屬性,該屬性用于指定在表單發送到服務器之前應該如何對表單內的數據進行編碼。
在HTML5中,可以使用formenctype屬性對表單元素分別指定不同的編碼方式。
三種形式:
<input type="text" formenctype="text/plain">
<!-- formenctype = "text/plain":表單中的空格被轉化為+號,但不對表單中的特殊符號進行編碼 。 -->
<input type="text" formenctype="multipart/form-data">
<!-- formenctype="multipart/form-data": 不對字符進行編碼,在使用文件上傳時需要使用該編碼 -->
<input type="text" ?formenctype="application/x-www-form-urlencoded">
<!--formenctype="application/x-www-form-urlencoded"? : 提交方式為get時,瀏覽器將此編碼方式將表單數據轉換成字符-->
formtarget屬性:在HTML4中,表單元素具有一個target屬性,該屬性用于指定在何處打開表單提交后所需要加載的頁面。在HTML5中,可以對多個提交按鈕分別使用formtarget屬性來指定提交后在何處打開所需加載的頁面。
autofocus屬性:為文本框、選擇框或按鈕控件加上autofocus屬性,當畫面打開時,該控件自動獲得光標焦點。
required屬性:HTML5中新增的required屬性可以應用在大多數輸入元素上,在提交時,如果元素中內容為空白,則不允許提交,同時在瀏覽中顯示信息提示文字。
labels屬性:在HTML5中,為所有可使用標簽的表單元素、button、select 元素等,定義一個labels屬性,屬性值為一個NodeList對象,代表該元素所綁定的標簽元素所構成的集合。
2.3新增的全局屬性 (Html5)
contentEditable屬性:主要功能是,允許用戶編輯元素中的內容,是boolean類型值,未說明類型時,則由繼承的狀態來指定(如:父元素是可編輯的,其子元素也是)。
designMode屬性:值有兩個 : On,可編輯;Off,不可編輯。
hidden屬性:也是boolean類型值。
spellcheck屬性:用于輸入框中拼寫檢查。
tabindex屬性:
<body>
<a href=""><tabindex="1"></a>
</body>
tabindex="-1":是無法獲取焦點的,但是在程序中是可以獲取tabindex的。