HTML5新增属性
typora-root-url: ./
HTML5新增元素及屬性
1、HTML5階段內容
HTML5新增元素、屬性
表單元素
CSS3高級特效以及CSS3動畫
video、audio
canvas
本地存儲、離線緩存
課程導學
課程特點：
少邏輯多語義
簡單易學高效
學習方法
固定標簽、屬性、語法需要記憶
勤加練習，善于總結，歸納易錯點
本章目標
了解什么是HTML5及其應用場景
掌握HTML5新增的元素及屬性
會使用CSS3高級選擇器美化網頁
掌握HTML5新增的表單元素及屬性
2、HTML5應用場景
酷炫網站制作
游戲開發
移動開發
應用開發
3、什么是HTML5
HTML5是用于取代HTML和XHTML的標準版本
新特性
新的語義化標簽，比如 header、footer、nav
新的表單控件，比如 email、url、search
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
4、HTML5新增結構元素
做網頁布局使用：
| header | 頁面或頁面中某一個區塊的頁眉，通常是一些引導和導航信息 |
| nav | 可以作為頁面導航的鏈接組 |
| section | 頁面中的一個內容區塊，通常由內容及其標題組成 |
| article | 代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用 |
| aside | 非正文的內容，與頁面的主要內容是分開的，被刪除而不會影響到網頁的內容【側邊欄】 |
| footer | 頁面或頁面中某一個區塊的腳注 【版權信息】 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-x2Gv7duX-1629718533816)(/assetis/image-20210323211328426.png)]
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>h5結構元素</title><style>.box{width: 800px;margin: 0 auto;}header{height: 40px;background-color: rgb(252, 111, 111);}nav{height: 40px;background-color: aquamarine;}.main{width: 800px;height: 500px;overflow: hidden;}aside{width: 300px;height: 100%;background-color: rgb(190, 218, 35);float: left;}article{width: 500px;height: 100%;background-color: rgba(23, 179, 106, 0.747);float: left;}footer{height: 40px;background-color: rgb(236, 165, 165);}</style> </head> <body><div class="box"><header>header導航欄</header><nav>nav導航主題連接部</nav><div class="main"><aside>aisde邊側欄</aside><article>article主題部分</article></div><footer>footer底部</footer></div> </body> </html>5、HTML5廢除的元素
能用css替代的元素：big、center、font、strike等
不再使用frame框架
只有部分瀏覽器支持的元素：applet、bgsound、marquee等
其他被廢除的元素：rb、dir、isindex、listing、nextid等
iframe框架，網頁嵌套:
<iframe src="http://www.baidu.com" frameborder="0" width="100%" height="800px"></iframe>6、HTML5新增全局屬性
| contentEditable | 規定是否允許用戶編輯內容 |
| designMode | 規定整個頁面是否可編輯 【js中，document.designMode=‘on’；off代表不可編輯】 |
| hidden | 規定對元素進行隱藏 |
| time | 標簽定義日期或時間 所有的瀏覽器都不支持，作用就是用來標識時間，方便爬蟲獲取 |
| tabindex | 規定元素的tab鍵迭制次序 |
7、HTML5廢除的屬性
table部分屬性：bgcolor、border、cellpadding、width等
html的version屬性
a元素或者link元素的charset屬性
br的clear屬性、img的align屬性
摒棄的原因，可以用css樣式實現的方法，h5在結構中摒棄掉。
即：樣式和結構分離
8、CSS3高級選擇器
| first-of-type | p:first-of-type選擇屬于其父元素的首個 元素 |
| last-of-type | p:last-of-type選擇屬于其父元素的最后 元素 |
| only-of-type | p:only-of-type 選擇屬于其父元素唯一的 元素 |
| first-child | p:first-child選擇屬于其父元素第一個子元素 |
| last-child | p:last-child選擇屬于其父元素最后一個子元素 ，如果最后一個子元素不是p,則不生效 |
| nth-child(n) | p:nth-child(n)選擇屬于其父元素的第n個子元素 ，n從1開始 |
| nth-of-type(n) | p:nth-of-type(n)選擇屬于其父元素的第n個p元素 |
| :before | p:before在每個 元素的內容之前插入內容 |
| :after | p:after在每個 元素的內容之后插入內容 |
9、優先級算法
- 優先級就近原則，同權重情況下樣式定義最近者為準
- 載入樣式以最后載入的定位為準
- !important > 內聯>id > class > tag
- !important 比內聯優先級高，但內聯比 id 要高
加了!important 的屬性優先級最高
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* 加了!important 的屬性優先級最高 */ul{color: yellow !important;}#a{color: tomato;}</style> </head> <body><ul style="color:green" id="a"><li>第1個li</li><li>第2個li</li><li>第3個li</li></ul> </body> </html>10、HTML5新增input類型
| 電子郵件地址文本框，提交表單時會自動驗證email的值 | |
| url | 網頁的URL，提交表單時會自動驗證url的值 |
| color | 主要用于選取顏色 |
| search | 用于搜索引擎（搜索框） |
| number | 只包含數值的字段，能夠設定對所接受的數字的限定 |
| range | 滑動條，特定值范圍內的數值選擇器 |
| Date pickers | 擁有多個可供選取日期的新輸入類型 |
email:
<form action=""><input type="email"><button>提交</button></form>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Bi5gb5SE-1629718533819)(/assetis/image-20210323222805609.png)]
<form action=""><!-- 網址必須輸入http://**** .com/cn -->網址：<input type="url"><button>提交</button></form>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Bf9ahomc-1629718533823)(/assetis/image-20210323223116305.png)]
<form action="">顏色：<input type="color"><button>提交</button></form>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dB6vbIlo-1629718533826)(/assetis/image-20210323223334098.png)]
<form action="">搜索：<input type="search"><button>提交</button></form>[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kGmEw1yl-1629718533828)(/assetis/image-20210323223511081.png)]
新增input類型—number
<input type="number" name= "num" min="3" max="20" step="3" value="3"/>| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔 |
| value | number | 規定的默認值 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bszu4q7L-1629718533831)(/assetis/image-20210323224019865.png)]
新增input類型—range
<input type="range" name= "point" min="2" max="15" step="1" value="3"/>| max | number | 規定允許的最大值 |
| min | number | 規定允許的最小值 |
| step | number | 規定合法的數字間隔 |
| value | number | 規定的默認值 |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-whDgSLAf-1629718533833)(/assetis/image-20210323224530526.png)]
新增input類型—Date pickers
| date | 選擇日、月、年 |
| month | 選擇月、年 |
| week | 選擇周和年 |
| time | 選擇時間（小時和分鐘） |
| datetime-local | 選擇時間、日、月、年（本地時間） |
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LfqulG73-1629718533835)(/assetis/image-20210323224950047.png)]
<form action=""><div>年月日：<input type="date"></div> <div>年月：<input type="month"></div> <div>年周：<input type="week"></div> <div>小時和分鐘：<input type="time"></div> <div>本地時間：<input type="datetime-local"></div> </form>新增input屬性
| autofocus | 頁面加載時自動獲得焦點 |
| required | 規定輸入域不能為空 |
| placeholder | 提供一種提示，描述輸入域所期待的值 |
| pattern | 規定驗證input域的模式（正則表達式）如：pattern="[0-9]+" |
| height、width | 僅適用于image類型的input標簽的圖像高度和寬度 |
規定不能為空 required：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ehTPquwk-1629718533837)(/assetis/image-20210323225529313.png)]
規定輸入的內容：pattern="[0-9]+"
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-yrfqK0iM-1629718533839)(/assetis/image-20210323225735552.png)]
<form action=""><div>用戶名：<input type="text" required></div><div>密 碼:<input type="password" autofocus></div><div>輸入0-9:<input type="text" pattern="[0-9]+"></div><button>提交</button></form>| 規定驗證input域的模式（正則表達式）如：pattern="[0-9]+" |
| height、width | 僅適用于image類型的input標簽的圖像高度和寬度 |
規定不能為空 required：
[外鏈圖片轉存中…(img-ehTPquwk-1629718533837)]
規定輸入的內容：pattern="[0-9]+"
[外鏈圖片轉存中…(img-yrfqK0iM-1629718533839)]
<form action=""><div>用戶名：<input type="text" required></div><div>密 碼:<input type="password" autofocus></div><div>輸入0-9:<input type="text" pattern="[0-9]+"></div><button>提交</button></form>總結
- 上一篇： 零基础学前端之定位
- 下一篇： 零基础跟我学前端之css3基础