HTML5中的新增元素

時間 2019-12-11

標籤 html5 html 新增元素欄目 HTML5 简体版

原文原文鏈接

HTML5中新增了大量的元素與屬性，這些新增的元素和屬性使HTML5的功能變得更強大，使網頁設計效果有了更多的實現可能。javascript

新增的主體結構元素
section元素
<section>標籤訂義文檔中的節，好比章節，頁眉，頁腳或文檔中的其餘部分。它能夠與h1,h2,h3,h4,h5,h6等元素結合起來使用，顯示文檔結構。
<section>
<h1>...</h1>
<p>...</p>
</section>html

article元素
<article>標籤訂義外部的內容。外部內容能夠是來自外部的新聞提供者的一篇新文章，來自Blog的文本，來自論壇的文本，或者是來自其餘外部源的內容。
<article>
...
</article>java

section元素與article元素的區別
article元素表明文檔，頁面或應用程序中獨立的，完整的，能夠獨自被外部引用的內容。
section元素用於對網站或應用程序中頁面上的內容進行分塊。瀏覽器

aside元素
aside元素通常用來表示網站當前頁面或文章的附屬信息部分，它能夠包含與當前頁面或主要內容相關的廣告，導航條，引用，側邊欄評論部分，以及其餘區別於主要內容的部分。
aside元素主要有如下兩種使用方法：
第一種：被包含在article元素中做爲主要內容的附屬信息部分，其中的內容能夠是與當前文章有關的相關資料，名詞解釋等。
<article>
<h1>...<h1>
<p>...</p>
<aside>...</aside>
</artcile>ruby

第二種：在article元素以外使用做爲頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容能夠是友情連接，博客中的其餘文章列表，廣告單元等。
<aside>
<h2>...<h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
<h2>...</h2>
<ul>
<li>...</li>
<li>...</li>
</ul>
</aside>ide

nav元素
<nav>用來將具備導航性質的連接劃分在一塊兒，使代碼結構在語義化方面更加準確，同時對於屏幕閱讀器等設備的支持也更好。
<nav>
<a href="">home</a>
<a href="">previous</a>
<a href="">next</a>
</nav>函數

time元素
<time>是HTML5新增長的一個標記，用於定義時間和日期。該元素能夠表明24小時中的某一時刻，在表示時刻時，容許有時間差。在設置時間或日期時，只需將該元素的屬性datetime設爲相應的時間或日期便可。
<p>
<time>
...
</time>
</p>
<p>
<time datetime="2014-3-17" pubdate="true">
...
</time>
</p>優化

pubdate屬性表示時間是否爲發佈日期網站

新增的非主體結構元素
在HTML5中新增了一些非主體的結構元素，如:header,hgroup,footer等ui

header元素
header元素是一種具備引導和導航做用的結構元素，一般用來放置整個頁面或頁面內的內容區塊的標題，但也能夠包含其餘內容，例如數據表格，搜索表單或相關的logo圖片。
<header>
<h1>...</h1>
<p>...</p>
</header>

hgroup元素
<hgroup>標籤用於對網頁或區段(section)的標題進行組合。hgroup元素一般會將h1~h6元素進行分組，譬如將一個內容區塊的標題及其子標題分爲一組。
<hgroup>
<h1>...<h1>
<h2>...<h2>
</hgroup>

footer元素
footer元素能夠做爲其上層父級內容區塊或是一個根區塊的腳註。footer一般包括其相關區塊的腳註信息，如做者，相關閱讀連接及版權信息等。
<footer>...</footer>

figure元素
figure元素是一種元素的組合，可帶有標題。figure元素用來表示網頁上一塊獨立的內容，將其從網頁上移除後不會對網頁上的其餘內容產生影響。figure所表示的內容能夠是圖片，統計圖或代碼示例。
<figure>
<h1>...<h1>
<p>...</p>
</figure>
用figcaption元素爲其添加標題

address元素
address元素用來在文檔中呈現聯繫信息，包括文檔做者或文檔維護者姓名，網站連接地址，電子郵箱，真是地址和電話號碼等。
<address>
<a href="">...</a>
...
</address>

新增其它經常使用元素
除告終構元素外，在HTML5中，還新增了其它元素，如progress元素，command元素，embed元素，mark元素和details元素等。
mark元素
mark元素主要用來呈現須要突出顯示或高亮顯示的文字。
<mark>...</mark>

rp,rt與ruby元素
ruby元素由一個或多個字符和一個提供該信息的rt元素組成，還包括可選的rp元素，定義當瀏覽器不支持ruby元素時顯示的內容。

progress元素
progress元素表示運行中的進程，可使用progress元素來顯示javascript中耗費時間的函數進程。

command元素
command元素表示用戶可以調用的命令，能夠定義命令按鈕，好比單選按鈕，複選框或按鈕。
<command type="command">...</command>
使用command元素標記標記一個按鈕
<html>
<body>
<menu>
<command onclick="alert('hello world')">click me!</command>
<menu>
</body>
</html>
注意：只有當command元素位於menu元素內時，該元素纔是可見的，不然不會顯示這個元素，可是能夠用它規定鍵盤快捷鍵。

embed元素
embed元素用來插入各類多媒體，格式能夠是midi，WAV，au，MP3等。
<embed src=""/>

details與summary元素
details元素表示用戶要求獲得而且能夠獲得的細節信息，與summary元素配合使用。summary元素提供標題或圖例。標題是可見的，會顯示出細節信息。summary元素應該是details元素的第一個子元素。
<details>
<summary>...</summary>
...
</details>

datalist元素
datalist用來輔助文本框的輸入功能，它自己是隱藏的，與表單文本框中的list屬性綁定，便可將list屬性值設置爲datalist的ID號，相似suggest組件。目前只支持opera瀏覽器

新增全局屬性
HTML5中新增了許多全局屬性

contenteditable屬性
contenteditable屬性是HTML5中新增的標準屬性，其主要功能是指定是否容許用戶編輯內容。該屬性有兩個值：TRUE和FALSE

spellcheck屬性
spellcheck屬性是HTML5中的新屬性，規定是否對元素內容進行拼寫檢查。可對如下文本進行拼寫檢查：類型爲text的input元素中的值（非密碼），textarea元素中的值，可編輯元素中的值。

tabindex屬性
tabindex屬性克設置或返回按鈕的Tab鍵控制次序。打開頁面，連續按下Tab鍵，會在按鈕之間切換，tabindex屬性則能夠記錄顯示切換的順序。

新增的其餘屬性
新增屬性主要分爲三大類：表單相關的屬性，連接相關的屬性和其餘新增屬性

表單相關的屬性

autocomplete
autocomplete屬性規定form或input域應該擁有自動完成功能。autocomplete適用於<form>標籤，以及如下類型的<input>標籤：text，search，URL，telephone，Email，password，datepickers，range以及color。
使用autocomplete屬性的實例
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp"method="get"autocomplete="on">
姓名:<input type="text" name="姓名"/><br/>
性別:<input type="text" name="性別"/><br/>
郵箱:<input type="text" name="email" autocomplete="off"/><br/>
<input type="submit"/>
</form>
</body>
</html>

autofocus屬性
autofocus屬性規定在頁面加載時，域自動的加載焦點。autofocus屬性適用於全部<input>標籤的類型
<input type="text" name="user_name" autofocus="autofocus"/>

form屬性
form屬性規定輸入域所屬的一個或多個表單。form屬性適用於全部<input>標籤的類型，必須引用所屬表單的id。

form overrides attributes
表單重寫屬性容許重寫form元素的某些屬性設定

height和width
height和width屬性用於規定image類型的input標籤的圖像高度和寬度。
<input type="image" src="" width="99" height="99"/>

list屬性
list屬性規定輸入域的datalist。datalist是輸入域的選項列表，list屬性適用於如下類型的<input>標籤：text，search，URL，telephone，Email，datepickers，number，range以及color。
<!DOCTYPE HTML>
<html>
<body>
<form action="demo_form.asp"method="get">
主頁:<inpout type="url" list="url_list"name="link"/>
<datalist id="url_list">
<option label="baidu" value="www.baidu.com"/>
<option label="qq" balue="www.qq.com"/>
</datalist>
<input type="submit"/>
</form>
</body>
</html>

max,min,step屬性
max，min,step屬性用於爲包含數字或日期的input類型規定限定（約束）。max屬性規定輸入域所容許的最大值；min屬性規定輸入域所容許的最小值；step屬性爲輸入域規定合法的數字間隔（若是step=「3」，則合法的數是-3,0,3,6等）
max，min，step屬性適用於如下類型的<input>標籤：data pickers,number以及range。
<input type="number" name="points" min="0"max="10"step="3"/>

multiple屬性
multiple屬性規定輸入域中可選擇多個值。multiple屬性適用於如下類型的<input>標籤：Email，file。
<input type="file" name="img" multiple="multiple"/>

pattern屬性
pattern屬性規定用於驗證input域的模式（pattern）。pattern屬性適用於如下類型的<input>標籤：text，search，URL，telephone，Email以及password。

placeholder屬性
placeholder屬性提供一種提示（hint），描述輸入域所期待的值。該屬性適用於如下類型的<input>標籤：text，search，URL，telephone，Email以及password。
<input type="search" name="user_search" placeholder="baidu"/>

required屬性
required屬性規定必須在提交以前填寫輸入域(不能爲空).required屬性適用於如下類型的<input>標籤：text,search,url,telephone,email,password,date pickers,number以及checkbox,radio,file.
<input type="text" name="usr_name"required="required"/>

連接相關屬性
media屬性
media屬性規定目標URL是爲哪一種類型的媒介/設備進行優化的，只能在href屬性存在時使用。

type屬性
在HTML5中，爲area元素增長了type屬性，規定目標URL的MIME類型，僅在href屬性存在時使用
<input type="value">

sizes屬性
爲link元素增長了新屬性sizes。該屬性能夠與icon元素結合使用（經過rel屬性），該屬性指定關聯圖標（icon元素）的大小。

target屬性
爲base元素增長了target屬性，主要目的是保持與a元素的一致性。
<a href="" target="_blank">新鏈接</a>

------------------------------------------------------------