這篇文章主要介紹HTML5中新增標(biāo)簽和屬性的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)營(yíng)銷推廣、網(wǎng)站重做改版、岳塘網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、html5、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為岳塘等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
收集總結(jié)的HTML5的新特性,基本除了IE9以下都可以使用。
HTML5語(yǔ)法
大部分延續(xù)了html的語(yǔ)法不同之處:開頭的
字符編碼變得簡(jiǎn)潔,
不區(qū)分大小寫,
添加了布爾值,類似checked,selected
引號(hào)可以省略,但是編碼規(guī)范來(lái)說(shuō),不建議,
有可以省略結(jié)束符的標(biāo)簽,和完全省略的標(biāo)簽應(yīng)用。
增加標(biāo)簽:
1、結(jié)構(gòu)標(biāo)簽
(1)section:獨(dú)立內(nèi)容區(qū)塊,可以用h2~h7組成大綱,表示文檔結(jié)構(gòu),也可以有章節(jié)、頁(yè)眉、頁(yè)腳或頁(yè)眉的其他部分;(2)article:特殊獨(dú)立區(qū)塊,表示這篇頁(yè)眉中的核心內(nèi)容;(3)aside:標(biāo)簽內(nèi)容之外與標(biāo)簽內(nèi)容相關(guān)的輔助信息;(4)header:某個(gè)區(qū)塊的頭部信息/標(biāo)題;(5)hgroup:頭部信息/標(biāo)題的補(bǔ)充內(nèi)容;(6)footer:底部信息;(7)nav:導(dǎo)航條部分信息(8)figure:獨(dú)立的單元,例如某個(gè)有圖片與內(nèi)容的新聞塊。
2、表單標(biāo)簽
(1)email:必須輸入郵件;(2)url:必須輸入url地址;(3)number:必須輸入數(shù)值;(4)range:必須輸入一定范圍內(nèi)的數(shù)值;(5)Date Pickers:日期選擇器;
a.date:選取日、月、年 b.month:選取月、年 c.week:選取周和年 d.time:選取時(shí)間(小時(shí)和分鐘) e.datetime:選取時(shí)間、日、月、年(UTC時(shí)間) f.datetime-local:選取時(shí)間、日、月、年(本地時(shí)間)
(6)search:搜索常規(guī)的文本域;
(7)color:顏色
3、媒體標(biāo)簽
(1)video:視頻(2)audio:音頻(3)embed:嵌入內(nèi)容(包括各種媒體),Midi、Wav、AU、MP3、Flash、AIFF等。
4、其他功能標(biāo)簽
(1)mark:標(biāo)注(像熒光筆做筆記)(2)progress:進(jìn)度條;
新增的屬性:
對(duì)于js進(jìn)行添加的屬性。
如果沒(méi)有以上兩個(gè)屬性的話,執(zhí)行順序?yàn)橄燃虞d(下載)第一個(gè)src,然后在執(zhí)行其onload,然后在向下依次同步執(zhí)行defer屬性在h6之前就已經(jīng)有了,輸入延遲加載(推遲執(zhí)行),它會(huì)先加載(下載)src中文件內(nèi)容,然后等頁(yè)面全部加載完成后,再加載onload中js.async屬性屬于異步加載,它會(huì)在加載src后,立即執(zhí)行onload,同時(shí)還會(huì)繼續(xù)加載頁(yè)面以上執(zhí)行順序,alert顯示會(huì)先顯示b然后再顯示a
網(wǎng)頁(yè)中標(biāo)簽中加入小圖標(biāo)的樣式代碼
有序列表ol:新增start(列表起始值),reversed(是否倒置)menu菜單type屬性(3個(gè)菜單類型)內(nèi)嵌css樣式:在標(biāo)簽內(nèi)部來(lái)定義一個(gè)樣式區(qū)塊(scoped),只對(duì)樣式標(biāo)簽內(nèi)部才有效內(nèi)嵌框架:iframe元素,新增了seamless無(wú)邊距無(wú)邊框,srcdoc定義了內(nèi)嵌框架的內(nèi)容
manifest屬性:
定義頁(yè)面需要用到的離線應(yīng)用文件,一般放在標(biāo)簽里
charset屬性:
meta屬性之一,定義頁(yè)面的字符集
sizes屬性:
新增屬性,當(dāng)link的rel="icon"時(shí),用以設(shè)置圖標(biāo)大小
base屬性:
defer屬性:
script標(biāo)簽屬性,表示腳本加載完畢后,只有當(dāng)頁(yè)面也加載完畢才執(zhí)行(推遲執(zhí)行)
async屬性:
script標(biāo)簽屬性,腳本加載完畢后馬上執(zhí)行(運(yùn)行過(guò)程中瀏覽器會(huì)解析下面的內(nèi)容),即使頁(yè)面還沒(méi)有加載完畢(異步執(zhí)行)
media屬性:
元素屬性:表示對(duì)何種設(shè)備進(jìn)行優(yōu)化
hreflang屬性:
ref屬性:
reversed屬性:
start屬性:
scoped屬性:
內(nèi)嵌CSS樣式的屬性,定義該樣式只局限于擁有該內(nèi)嵌樣式的元素,適用于單頁(yè)開發(fā)
HTML5全局屬性:對(duì)任意標(biāo)簽都可以使用的,以下6個(gè)
data-yourvalue 、hidden、Spenllecheck、tabindex、contenteditable、desginMode;
全局屬性:
1.可直接在標(biāo)簽里插入的:data-自定義屬性名字; hidden(直接放上去就是隱藏); spellcheck="true"(語(yǔ)法糾錯(cuò)); tabindex="1"(Tab跳轉(zhuǎn)順序); contenteditable="true"(可編輯狀態(tài),單擊內(nèi)容,可修改); 2.在JavaScript里插入的window.document.designMode = 'on'(JavaScript的全局屬性,整個(gè)頁(yè)面的文本都可以編輯了);
以上是“HTML5中新增標(biāo)簽和屬性的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!