HTML5基礎(chǔ)

H5在2014年正式推出,相較于H4性能得到進一步提升。

H5的瀏覽器兼容問題:支持Html5的瀏覽器包括Firefox(火狐瀏覽器),IE9及其更高版本,Chrome(谷歌瀏覽器),Safari,Opera等;國內(nèi)的 遨游瀏覽器(Maxthon),以及基于IE或Chromium(Chrome的工程版或稱實驗版)所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹 瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。

總結(jié)來說就是IE9以下的版本是不兼容H5的樣式的。

H5語法:

1、學習H4的時候文件后綴名總是寫.html,在H5中后綴名也可以寫成.htm了。

2、DOCTYPE聲明? <!DOCTYPE html>

3、指定字符集編碼? <meta charset="UTF-8">

4、不允許寫結(jié)束標記的元素:br、col、embed、hr、img、input、link、meta

5、可以省略結(jié)束標記的元素:li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th

6、可以省略全部標記的元素:html、head、body、colgroup、tbody

7、省略引號。屬性值可以使用雙引號,也可以使用單引號


H5新增語義化標簽

section元素 表示頁面中的一個內(nèi)容區(qū)塊 div

header元素 表示頁面中一個內(nèi)容區(qū)塊或整個頁面的標題

nav元素 表示頁面中導航鏈接部分

article元素 表示一塊與上下文無關(guān)的獨立的內(nèi)容

aside元素 在article之外的,與article內(nèi)容相關(guān)的輔助信息

footer元素 表示頁面中一個內(nèi)容區(qū)塊或整個頁面的腳注

figure元素 表示一段獨立的流內(nèi)容,使用figcaption元素為其添加標題(第一個或最后一個子元素的位置)

main元素 表示頁面中的主要的內(nèi)容

hgroup:標題組

Mark? 高亮

兼容低版本瀏覽器: <script src=“html5.js”></script>



視頻標簽video、音頻標簽audio

src屬性,后跟音頻或者視頻的路徑。

poster屬性,只有視頻標簽可以用,表示視頻未加載的時候顯示的圖片。


智能表單

Type=“email” 限制用戶必須輸入email類型

Type=“number” 限制用戶必須輸入數(shù)字類型

Type=“url” 限制用戶必須輸入url類型

Type=“range” 產(chǎn)生一個滑動條表單

Type=“search” 產(chǎn)生一個搜索意義的表單

Type=“color” 生成一個顏色選擇的表單

Type=“time” 限制用戶必須輸入時間類型

Type=“date” 限制用戶必須輸入時間類型

Type=“month” 限制用戶必須輸入月類型

Type=“week” 限制用戶必須輸入周類型

Type=“datetime-local” 選取本地時間

email類型:專門用來輸入email地址的文本框,如果該文本框中內(nèi)容不是email地址格式的,則不允許提交。但它不檢查email地址是否存在。提交時可以為空,除非加上了required屬性。

url類型:專門用來輸入URL地址的文本框。如果該文本框中內(nèi)容不是URL地址格式的,則不允許提交。

Number類型:專門用來輸入數(shù)字的文本框。在提交時會檢查其中的內(nèi)容是否為數(shù)字,具有min、max、step的屬性。

例:<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />——間隔是5,最小數(shù)值是10,最大數(shù)值是100。5.10.15.20.25

range類型:是用來只允許輸入一段范圍內(nèi)數(shù)值的文本框,它具有min屬性與max屬性,及step屬性,可以指定每次拖動的步幅。

例: <input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />


H5新增屬性

placeholder屬性:文本框處于未輸入狀態(tài)時文本框中顯示的輸入提示。

autofocus屬性:給文本框、選擇框、或者按鈕控件加上該屬性,當打開頁面時,該控件自動獲得焦點,一個頁面只能有一個。

autocomplete屬性:輸入富足和所用的自動完成功能,是一個節(jié)省輸入時間,同時也十分方便的功能。屬性值:on/off。on可是顯示指定候補輸入的數(shù)據(jù)列表,使用datalist元素與list屬性提供候補輸入的數(shù)據(jù)列表,自動完成時,可以將該datalist元素中的數(shù)據(jù)作為候補輸入的數(shù)據(jù)在文本框中顯示:

<input type="text"? autocomplete="on"? list ="greeting">

novalidate屬性:取消驗證 可以對form表單添加novalidate屬性,即使form表單中的input添加了required,也將不進行驗證partten

Multiple屬性:可以輸入一個或多個值,每個值之間用逗號分開

pattern屬性:用于驗證表單輸入的內(nèi)容,通常HTML5的type屬性,比如email、tel、number、data類、url等,已經(jīng)自帶了簡單的數(shù)據(jù)格式驗證功能了,加上pattern后,前端部分的驗證更加簡單高效了。

iframe屬性:引入外部的資源。不建議使用,因為會造成瀏覽器的阻塞。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容