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

HTML

HTML5新增属性

發布時間：2024/1/23 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 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框架，網頁嵌套:

6、HTML5新增全局屬性

屬性說明

contentEditable	規定是否允許用戶編輯內容
designMode	規定整個頁面是否可編輯【js中，document.designMode=‘on’；off代表不可編輯】
hidden	規定對元素進行隱藏
time	標簽定義日期或時間所有的瀏覽器都不支持，作用就是用來標識時間，方便爬蟲獲取
tabindex	規定元素的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樣式實現的方法，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在每個元素的內容之后插入內容

<!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;}/* 元素的內容前插入 */h1::before{/* content: '￥'; */content:url(./fang.png);}/* 元素的內容后插入 */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、優先級算法

優先級就近原則，同權重情況下樣式定義最近者為準
載入樣式以最后載入的定位為準
!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	電子郵件地址文本框，提交表單時會自動驗證email的值
url	網頁的URL，提交表單時會自動驗證url的值
color	主要用于選取顏色
search	用于搜索引擎（搜索框）
number	只包含數值的字段，能夠設定對所接受的數字的限定
range	滑動條，特定值范圍內的數值選擇器
Date pickers	擁有多個可供選取日期的新輸入類型

email:

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

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

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

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

規定不能為空 required：

[外鏈圖片轉存中…(img-ehTPquwk-1629718533837)]

規定輸入的內容：pattern="[0-9]+"

[外鏈圖片轉存中…(img-yrfqK0iM-1629718533839)]

總結

以上是生活随笔為你收集整理的HTML5新增属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

属性