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