HTML5元素介紹

這篇文章給大家分享的是HTML5新增元素的詳細(xì)介紹，相信剛?cè)腴T的小伙伴都還不了解，為了讓大家更加了解，給大家總結(jié)了以下內(nèi)容，話不多說(shuō)，一起往下看吧。

一、HTML5增加元素:

<canvas> </canvas>    用于圖形繪制，通過(guò)腳本（常用JS）來(lái)完成；具體請(qǐng)參考JavaScript;
<svg> </svg>       　 矢量圖，支持內(nèi)聯(lián)；
<math> </math>        用于書寫數(shù)學(xué)字符；
<video> </video>      顯示視頻；（支持MP4,WebM,Ogg）;內(nèi)容里邊需要有sorce標(biāo)簽給定的源文件；具體請(qǐng)參考JavaScript;
<audio> </audio>      顯示視頻；（支持MP3,wav,Ogg）;內(nèi)容里邊需要有sorce標(biāo)簽給定的源文件；具體請(qǐng)參考JavaScript;
<source>              定義media元素 (<video> 和 <audio>)的媒體資源
<bdi> </bdi>          設(shè)置一段文本的方向，可與父元素方向不同；
<mark> </mark>        帶有記號(hào)的文本；
<time> </time>        時(shí)間；屬性有datetime
<embed>               一個(gè)容器，可用來(lái)嵌入部應(yīng)用或插件，屬性有width,height,src,type;

二、新的元素和屬性

（一）新的<input>標(biāo)簽中新增屬性：

type屬性新增值：
    color       　　 顏色選擇框；
    date            日期選擇器(部分瀏覽器不支持)；
    datetime-local  日期和時(shí)間選擇器；
    time            時(shí)間選擇器；
    week       　　　周選擇器；
    email           郵件地址驗(yàn)證；
    url             url驗(yàn)證；
    month       　　月份選擇；
    number      　　數(shù)值輸入，可用以下屬性進(jìn)行更多限定，    disabled,max,min,maxlengh,pattern(正則表達(dá)式),readonly,requried,size,step,value;
    range          數(shù)值選擇，顯示為一個(gè)滑塊，需用更多屬性進(jìn)行限定：max,min,step,value;
autofocus          不需要值，如果給定此屬性，則在加載頁(yè)面時(shí)輸入域自動(dòng)獲得焦點(diǎn)；
form               設(shè)置輸入域?qū)儆谀骋粋€(gè)或多個(gè)表單，多個(gè)表單之間用空格分隔；
formaction         值會(huì)覆蓋<form>元素中的action屬性；
formenctype        值會(huì)覆蓋<form>元素中的enctype屬性；
formmethod         值會(huì)覆蓋<form>元素中的method屬性；
formnovalidate     值會(huì)覆蓋<form>元素中的novalidate屬性；
formtarget         值會(huì)覆蓋<form>元素中的target屬性；
height             設(shè)置image類型<input>標(biāo)簽高度；
width              設(shè)置image類型<imput>標(biāo)簽寬度；
multiple           不需要值，如果給定此屬性，則在輸入元素中可選擇多個(gè)值；
pattern            值為正則表達(dá)式，用來(lái)驗(yàn)證輸入值；
placeholder        值為用來(lái)顯示在輸入域中來(lái)提示用戶；
requried           不需要值，如給定此屬性，則輸入不能為空；

（二）新的表單元素：

<datalist> </datalist>        與<input>一起使用，來(lái)設(shè)定預(yù)定義值，每個(gè)值用<option value="value">來(lái)設(shè)定；
<keygen>                      提交表單時(shí)會(huì)生成私鑰和公鑰兩個(gè)鍵，私鑰存于客戶端，公鑰發(fā)送給服務(wù)器；
<output>                      元素用于不同類型的輸出，比如計(jì)算或腳本輸出.
<form>/<input>的autocomplete屬性，如果值為on則會(huì)保留最后一次輸入的值作為下次輸入的默認(rèn)值，如果為off則不會(huì)記錄保留；
<form>的novalidate屬性，不需要值，如果給定了此屬性則在提交表單時(shí)不應(yīng)該驗(yàn)證 form 或 input 域。

（三）新的語(yǔ)義元素；

語(yǔ)義元素用來(lái)明確一個(gè)Web頁(yè)面的不同部分；

<header> </header>
<nav> </nav>                定義導(dǎo)航鏈接的部分;
<section> </section>        定義文檔中的節(jié);
<article> </article>        標(biāo)簽定義獨(dú)立的內(nèi)容;
<aside> </aside>            定義頁(yè)面主區(qū)域內(nèi)容之外的內(nèi)容;
<figcaption> </figcaption>  <figure> 元素的標(biāo)題,應(yīng)該被置于 "figure" 元素的第一個(gè)或最后一個(gè)子元素的位置;
<figure> </figure>          標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）,元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對(duì)文檔流產(chǎn)生影響。
<footer> </footer>          描述了文檔的底部區(qū)域;

（四）新的全局屬性：

contenteditable                元素是否可編輯，值有true,false;
contextmenu                    指定一個(gè)元素的上下文菜單。當(dāng)用戶右擊該元素，出現(xiàn)上下文菜單,值為要打開<menu>元素的id;
data-*                         存儲(chǔ)頁(yè)面的自定義數(shù)據(jù)；
draggable                      元素是否可拖動(dòng)，值有true,false,auto;5 hidden

（五）新的存儲(chǔ)方式：

localStorage                 本地存儲(chǔ)，永久性的；
sessionStrorage           針對(duì)一個(gè) session 進(jìn)行數(shù)據(jù)存儲(chǔ)。當(dāng)用戶關(guān)閉瀏覽器窗口后，數(shù)據(jù)會(huì)被刪除；

但這兩種方式的都是通過(guò)腳本來(lái)實(shí)現(xiàn)的；

三、全局事件屬性(html4后支持,主要用于瀏覽器觸發(fā)事件后運(yùn)行的腳本，值都是script)：

1.窗口事件屬性

onafterprint         打印文檔后運(yùn)行腳本；
    onbeforeprint        打印文檔前；
    onbeforeonload       文檔加載前；
    onload               文檔加載時(shí)；
    onoffline            文檔離線時(shí)；
    ononline             文檔上線時(shí)；
    onhaschange          文檔改變時(shí)；
    onredo               文檔再次執(zhí)行時(shí)；
    onundo               文檔執(zhí)行撤銷時(shí)；
    onerror              出現(xiàn)錯(cuò)誤時(shí)；
    onmessage            觸發(fā)消息時(shí)；
    onunload             用戶離開文檔時(shí)；
    onblur               窗口失去焦點(diǎn)時(shí)；
    onfocus              窗口獲得焦點(diǎn)時(shí)；
    onpagehide           窗口隱藏時(shí)；
    onpageshow           窗口可見(jiàn)時(shí)；
    onpopstate           窗口歷史記錄改變時(shí)；
    onresize             窗口大小改變時(shí)；
    onstorage            web storage區(qū)域更新時(shí)；

以上就是HTML5新增元素的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊！