當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5新增属性

發(fā)布時間：2024/1/23 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5新增属性小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

typora-root-url: ./

HTML5新增元素及屬性

1、HTML5階段內(nèi)容

HTML5新增元素、屬性
表單元素
CSS3高級特效以及CSS3動畫

video、audio
canvas
本地存儲、離線緩存

課程導(dǎo)學(xué)

課程特點：
少邏輯多語義
簡單易學(xué)高效
學(xué)習方法
固定標簽、屬性、語法需要記憶
勤加練習，善于總結(jié)，歸納易錯點

本章目標

了解什么是HTML5及其應(yīng)用場景
掌握HTML5新增的元素及屬性
會使用CSS3高級選擇器美化網(wǎng)頁
掌握HTML5新增的表單元素及屬性

2、HTML5應(yīng)用場景

酷炫網(wǎng)站制作
游戲開發(fā)
移動開發(fā)
應(yīng)用開發(fā)

3、什么是HTML5

HTML5是用于取代HTML和XHTML的標準版本
新特性
新的語義化標簽，比如 header、footer、nav
新的表單控件，比如 email、url、search
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素

4、HTML5新增結(jié)構(gòu)元素

做網(wǎng)頁布局使用：

標簽說明

header	頁面或頁面中某一個區(qū)塊的頁眉，通常是一些引導(dǎo)和導(dǎo)航信息
nav	可以作為頁面導(dǎo)航的鏈接組
section	頁面中的一個內(nèi)容區(qū)塊，通常由內(nèi)容及其標題組成
article	代表一個獨立的、完整的相關(guān)內(nèi)容塊，可獨立于頁面其它內(nèi)容使用
aside	非正文的內(nèi)容，與頁面的主要內(nèi)容是分開的，被刪除而不會影響到網(wǎng)頁的內(nèi)容【側(cè)邊欄】
footer	頁面或頁面中某一個區(qū)塊的腳注【版權(quán)信息】

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-x2Gv7duX-1629718533816)(/assetis/image-20210323211328426.png)]

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>h5結(jié)構(gòu)元素</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導(dǎo)航欄</header><nav>nav導(dǎo)航主題連接部</nav><div class="main"><aside>aisde邊側(cè)欄</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框架，網(wǎng)頁嵌套:

6、HTML5新增全局屬性

屬性說明

contentEditable	規(guī)定是否允許用戶編輯內(nèi)容
designMode	規(guī)定整個頁面是否可編輯【js中，document.designMode=‘on’；off代表不可編輯】
hidden	規(guī)定對元素進行隱藏
time	標簽定義日期或時間所有的瀏覽器都不支持，作用就是用來標識時間，方便爬蟲獲取
tabindex	規(guī)定元素的tab鍵迭制次序

body><p tabindex="5">哈哈哈哈</p> <h1 tabindex="3">h1h1h1h1h1h1h1</h1><ul><li tabindex="1">li_11111</li><li tabindex="4">li_22222</li><li tabindex="2">li_33333</li></ul> </body>

7、HTML5廢除的屬性

table部分屬性：bgcolor、border、cellpadding、width等

html的version屬性

a元素或者link元素的charset屬性

br的clear屬性、img的align屬性

摒棄的原因，可以用css樣式實現(xiàn)的方法，h5在結(jié)構(gòu)中摒棄掉。

即：樣式和結(jié)構(gòu)分離

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在每個元素的內(nèi)容之前插入內(nèi)容
:after	p:after在每個元素的內(nèi)容之后插入內(nèi)容

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css3高級選擇器</title><style>/* p:last-child{color: red;} */p:last-of-type{color: red;}/* p:first-of-type{color: green;} *//* 找到第一個子元素，同時第一個子元素需要時p */p:first-child{color: red;}.four:only-of-type{color: red;}p:nth-of-type(3){color: green;}/* 元素的內(nèi)容前插入 */h1::before{/* content: '￥'; */content:url(./fang.png);}/* 元素的內(nèi)容后插入 */h1::after{content: '元';}</style> </head> <body> </body><div><a href="">第一個a</a><p>我是第1個p</p><p>我是第2個p</p><p>我是第3個p</p><p class="four">我是第4個p</p><a href="">最后的a</a><h1>999999</h1></div> </html>

9、優(yōu)先級算法

優(yōu)先級就近原則，同權(quán)重情況下樣式定義最近者為準
載入樣式以最后載入的定位為準
!important > 內(nèi)聯(lián)>id > class > tag
!important 比內(nèi)聯(lián)優(yōu)先級高，但內(nèi)聯(lián)比 id 要高

加了!important 的屬性優(yōu)先級最高

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style>/* 加了!important 的屬性優(yōu)先級最高 */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	電子郵件地址文本框，提交表單時會自動驗證email的值
url	網(wǎng)頁的URL，提交表單時會自動驗證url的值
color	主要用于選取顏色
search	用于搜索引擎（搜索框）
number	只包含數(shù)值的字段，能夠設(shè)定對所接受的數(shù)字的限定
range	滑動條，特定值范圍內(nèi)的數(shù)值選擇器
Date pickers	擁有多個可供選取日期的新輸入類型

email:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Bi5gb5SE-1629718533819)(/assetis/image-20210323222805609.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Bf9ahomc-1629718533823)(/assetis/image-20210323223116305.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dB6vbIlo-1629718533826)(/assetis/image-20210323223334098.png)]

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kGmEw1yl-1629718533828)(/assetis/image-20210323223511081.png)]

新增input類型—number

<input type="number" name= "num" min="3" max="20" step="3" value="3"/> 屬性值說明

max	number	規(guī)定允許的最大值
min	number	規(guī)定允許的最小值
step	number	規(guī)定合法的數(shù)字間隔
value	number	規(guī)定的默認值

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bszu4q7L-1629718533831)(/assetis/image-20210323224019865.png)]

新增input類型—range

<input type="range" name= "point" min="2" max="15" step="1" value="3"/> 屬性值說明

max	number	規(guī)定允許的最大值
min	number	規(guī)定允許的最小值
step	number	規(guī)定合法的數(shù)字間隔
value	number	規(guī)定的默認值

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-whDgSLAf-1629718533833)(/assetis/image-20210323224530526.png)]

新增input類型—Date pickers

類型說明

date	選擇日、月、年
month	選擇月、年
week	選擇周和年
time	選擇時間（小時和分鐘）
datetime-local	選擇時間、日、月、年（本地時間）

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(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屬性