HTML5元素介紹

這篇文章給大家分享的是HTML5新增元素的詳細介紹，相信剛入門的小伙伴都還不了解，為了讓大家更加了解，給大家總結了以下內容，話不多說，一起往下看吧。

一、HTML5增加元素:

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

二、新的元素和屬性

（一）新的<input>標簽中新增屬性：

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

（二）新的表單元素：

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

（三）新的語義元素；

語義元素用來明確一個Web頁面的不同部分；

<header> </header>
<nav> </nav>                定義導航鏈接的部分;
<section> </section>        定義文檔中的節;
<article> </article>        標簽定義獨立的內容;
<aside> </aside>            定義頁面主區域內容之外的內容;
<figcaption> </figcaption>  <figure> 元素的標題,應該被置于 "figure" 元素的第一個或最后一個子元素的位置;
<figure> </figure>          標簽規定獨立的流內容（圖像、圖表、照片、代碼等等）,元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響。
<footer> </footer>          描述了文檔的底部區域;

（四）新的全局屬性：

contenteditable                元素是否可編輯，值有true,false;
contextmenu                    指定一個元素的上下文菜單。當用戶右擊該元素，出現上下文菜單,值為要打開<menu>元素的id;
data-*                         存儲頁面的自定義數據；
draggable                      元素是否可拖動，值有true,false,auto;5 hidden

（五）新的存儲方式：

localStorage                 本地存儲，永久性的；
sessionStrorage           針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除；

但這兩種方式的都是通過腳本來實現的；

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

1.窗口事件屬性

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

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