前端基礎(chǔ)-HTML5新特性

2020-3-10    seo達(dá)人

html5的新特點(diǎn)

1.語(yǔ)法更簡(jiǎn)單

a) 頭部聲明


<!doctype html>


b) 簡(jiǎn)化了字符集聲明


<meta charset="utf-8">


2.語(yǔ)法更寬松

a) 可以省略結(jié)束符的標(biāo)簽


li、dt、dd、p、optgroup、option、tr、td、th


b) 可以完全省略的標(biāo)簽


html、head、body


3.標(biāo)簽語(yǔ)義化

增加了很多標(biāo)簽,在作頁(yè)面的時(shí)候更加具有語(yǔ)義(定義了一些原本沒(méi)有語(yǔ)義的div模塊為有鮮明結(jié)構(gòu)的語(yǔ)義模塊)


a) <header>標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部


b) <nav>標(biāo)記定義導(dǎo)航鏈接


c) <article>標(biāo)記定義一篇文章內(nèi)容


d) <section>標(biāo)記定義網(wǎng)頁(yè)中一塊區(qū)域


e) <aside>標(biāo)記定義頁(yè)面內(nèi)容部分的側(cè)邊欄


f) <footer>標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的底部


語(yǔ)義化標(biāo)簽圖示


4.表單新增常用屬性------要求掌握

required:必填


placeholder:輸入內(nèi)容提示


autofocus:自動(dòng)獲取焦點(diǎn)-----自動(dòng)幫我們將光標(biāo)點(diǎn)進(jìn)去


<form method="post" action="http://www.baidu.com">

<!-- required 必填,必須的 -->

<!-- 自動(dòng)獲取焦點(diǎn)----自動(dòng)將光標(biāo)定位到表單中 -->

<input type="text" placeholder="請(qǐng)輸入用戶名" autofocus="autofocus" required="required" />

   <input type="submit" />

</form>



5.input新增type屬性值

a) type=“email”,文本框中只能輸入email地址




b) type=“date”,日期控件




c) type=“time”




d) type=“month”




e) type=“week”




f) type=“number”,喚醒數(shù)字鍵盤




g) type=“range”,滑塊




h) type=“color”



分享本文至:

日歷

鏈接

個(gè)人資料

存檔