HTML5新特性總結(jié)

2021-05-31 分類：網(wǎng)站建設(shè)

HTML5屬于上一代HTML的新迭代語(yǔ)言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體?。。?

例如： video 標(biāo)簽和 audio 及 canvas 標(biāo)記

新特性：

1. 取消了過(guò)時(shí)的顯示效果標(biāo)記 <font></font> 和 <center></center>等...

2. 新語(yǔ)義標(biāo)簽的引入

3. 新表單元素引入

4. canvas標(biāo)簽（圖形設(shè)計(jì)）

5. 本地?cái)?shù)據(jù)庫(kù)（本地存儲(chǔ)）

6. 一些API

好處：跨平臺(tái)

例如：比如你開(kāi)發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開(kāi)放平臺(tái)、Opera的游戲中心、Facebook應(yīng)用平臺(tái)，甚至可以通過(guò)封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺(tái)性非常強(qiáng)大，這也是大多數(shù)人對(duì)HTML5有興趣的主要原因。

缺點(diǎn)：

pc端瀏覽器支持不是特別友好，造成用戶體驗(yàn)不佳(隨著移動(dòng)端的發(fā)展不斷擴(kuò)大和win10（ie10）的大量推廣，這一缺點(diǎn)將被無(wú)限縮小)

HTML5新語(yǔ)義標(biāo)簽

HTML5新標(biāo)簽的數(shù)量在25個(gè)左右具體也沒(méi)有找到詳細(xì)的資料來(lái)查看（每個(gè)網(wǎng)站顯示的數(shù)量都不一樣）

雖然新增的標(biāo)簽很多但是實(shí)際上用到的應(yīng)該只有十個(gè)左右MDN上有一句話“HTML 使用“標(biāo)記”來(lái)注明文本、圖片和其他內(nèi)容，以便于在 Web 瀏覽器中顯示。HTML 標(biāo)記包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等?！?這其中大部分有HTML5以前的標(biāo)簽也有HTML5的而這些剛好就是我們常用的標(biāo)簽，不常用的也許不必太過(guò)了解布局DIV也可以不是么？

另外推薦大家在使用新語(yǔ)義標(biāo)簽的時(shí)候盡量每個(gè)獨(dú)立的頁(yè)面只使用一個(gè)標(biāo)簽作為包裹，語(yǔ)義化的作用就是seo（具體可百度），就是讓搜索引擎知道網(wǎng)上到底有些什么，如header 、main、footer標(biāo)簽等等，當(dāng)然你也可以寫(xiě)100個(gè)！

以下總結(jié)出HTML5常用的標(biāo)簽：

“header” “nav” “main”“article” “address”“section”“aside” “footer”

如果忘記了這些標(biāo)簽的意思可以訪問(wèn) MDN、W3C、或者CSND,當(dāng)然博客園上搜搜可能會(huì)更快

以下為菜鳥(niǎo)教程對(duì)html5新標(biāo)簽的注解 http://www.runoob.com/html/html5-new-element.html

HTML5的重點(diǎn)標(biāo)簽之video和audio

<video></video> 視頻

屬性：controls 顯示控制欄

屬性：autoplay 自動(dòng)播放

屬性：loop 設(shè)置循環(huán)播放

<audio></audio> 音頻

屬性：controls 顯示控制欄

屬性：autoplay 自動(dòng)播放

屬性：loop 設(shè)置循環(huán)播放

video標(biāo)簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp

多媒體標(biāo)簽在網(wǎng)頁(yè)中的兼容效果方式（每個(gè)瀏覽器支持的情況不同所以需要做兼容性處理）（以下source屬性只會(huì)生效一個(gè) 即 if = true 之后就不執(zhí)行了）

<video>

</video>

HTML5中的智能表單控件

type值 ={

email: 輸入合法的郵箱地址

url：輸入合法的網(wǎng)址

number：只能輸入數(shù)字

range：滑塊

color：拾色器

date：顯示日期

month：顯示月份

week ：顯示第幾周

time：顯示時(shí)間

}

（智能表單，會(huì)自動(dòng)對(duì)輸入的內(nèi)容做基本校驗(yàn)，內(nèi)容不符合基本校驗(yàn)則拒絕提交請(qǐng)求

表單屬性

◆form屬性：

autocomplete=on | off 自動(dòng)完成

novalidate=true | false 是否關(guān)閉校驗(yàn)

◆ input屬性：

autofocus ：自動(dòng)獲取焦點(diǎn)

</datalist>

multiple：實(shí)現(xiàn)多選效果

placeholder ：占位符（提示信息）

required：必填項(xiàng)

HTML5中新的一些API

以前獲取節(jié)點(diǎn)通過(guò)

document.getElementById("ID名稱")這些還有className，name，tagname等等方式獲取返回當(dāng)前節(jié)點(diǎn)

H5新增的節(jié)點(diǎn)獲取方法只有兩個(gè)

document.querySelector("選擇器")；返回節(jié)點(diǎn)

document.querySelectorAll("選擇器"); 返回?cái)?shù)組

可以好的代替以前或者節(jié)點(diǎn)的方式，如果無(wú)需兼容ie10以下的話

H5中對(duì)class的操作

classList.add("類名")

添加class類名不返回任何值如果你把它賦值給一個(gè)變量得到結(jié)果是undefined

classList.remove("類名"); 刪除

classList.contains("類名");

檢查has className 是否存在返回布爾值即true and false

classList.toggle("active");

查詢active 是否存在，存在就刪除，不存在就添加，省去了if判斷！返回布爾值如果執(zhí)行多條即 true false true false.

自定義屬性（小案例分析體驗(yàn)自定義屬性） data-自定義屬性名

獲取自定義屬性 Dom.dataset 返回的是一個(gè)對(duì)象

Dom.dataset.屬性名或者 Dom.dataset[屬性名]

注：屬性名無(wú)需加data如自定義屬性名 = data-canvas 那么獲取的時(shí)候直接dataset.canvas即可設(shè)置同理

設(shè)置自定義屬性

Dom.dataset.自定義屬性名=值或者 Dom.dataset[自定義屬性名]=值；

文件讀取 FileReader

FileReader 接口有3個(gè)用來(lái)讀取文件方法返回結(jié)果在result中

readAsBinaryString ---將文件讀取為二進(jìn)制編碼

readAsText ---將文件讀取為文本

readAsDataURL ---將文件讀取為DataURL

FileReader 提供的事件模型

onabort 中斷時(shí)觸發(fā)

onerror 出錯(cuò)時(shí)觸發(fā)

onload 文件讀取成功完成時(shí)觸發(fā)

onloadend 讀取完成觸發(fā)，無(wú)論成功或失敗

onloadstart 讀取開(kāi)始時(shí)觸發(fā)

onprogress 讀取中

獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)

window.navigator.onLine 返回一個(gè)布爾值網(wǎng)沒(méi)問(wèn)題返回true否則返回false

網(wǎng)絡(luò)狀態(tài)事件（大部分為不支持和廢棄狀態(tài)也許移動(dòng)端用的比較多）

window.ononline

window.onoffline

獲取地理定位

獲取一次當(dāng)前位置

window.navigator.geolocation.getCurrentPosition(success,error);

success成功之后獲取位置信息否則拋出錯(cuò)誤，比如獲取位置信息被拒絕

coords.latitude 維度

coords.longitude 經(jīng)度

實(shí)時(shí)獲取當(dāng)前位置

window.navigator.geolocation.watchPosition(success,error);

本地存儲(chǔ) 隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁(yè)的應(yīng)用越來(lái)越普遍，同時(shí)也變的越來(lái)越復(fù)雜，為了滿足各種各樣的需求，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來(lái)進(jìn)行存儲(chǔ)的，但是由于其存儲(chǔ)大小只有4k左右，并且解析也相當(dāng)?shù)膹?fù)雜，給開(kāi)發(fā)帶來(lái)諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲(chǔ)數(shù)據(jù)。

localStorage：

永久生效

多窗口共享

容量大約為20M

◆window.localStorage.setItem(key,value) 設(shè)置存儲(chǔ)內(nèi)容

◆window.localStorage.getItem(key) 獲取內(nèi)容

◆window.localStorage.removeItem(key) 刪除內(nèi)容

◆window.localStorage.clear() 清空內(nèi)容

sessionStorage：

生命周期為關(guān)閉當(dāng)前瀏覽器窗口

可以在同一個(gè)窗口下訪問(wèn)

數(shù)據(jù)大小為5M左右

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

required如何修改默認(rèn)提示選項(xiàng)

需要兩個(gè)幾個(gè)參數(shù)

placeholder = 默認(rèn)提示用戶輸入

oninvalid事件 = 當(dāng)用戶輸入不符合規(guī)則的時(shí)候提示的內(nèi)容隨意改setCustomValidity 就是用來(lái)修改 requered值的函數(shù)

oninput事件 = 約等于chuange事件立即執(zhí)行

console.log('Hello World')

網(wǎng)頁(yè)題目：HTML5新特性總結(jié)
鏈接地址：http://www.jbt999.com/news8/115808.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、網(wǎng)站改版、微信小程序、App設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

網(wǎng)站怎么樣推廣？ 2021-05-31
電商“五大體系”構(gòu)筑互聯(lián)網(wǎng)快車(chē) 2021-05-31
互聯(lián)網(wǎng)高光時(shí)刻正在被“國(guó)風(fēng)”包圍！ 2021-05-31
把客戶作為核心的網(wǎng)站你了解的有多少？ 2021-05-31
簡(jiǎn)述網(wǎng)站LOGO設(shè)計(jì)的技巧 2021-05-31
線下零售除了拉個(gè)微信群，如何適應(yīng)互聯(lián)網(wǎng)？ 2021-05-31
外鏈對(duì)網(wǎng)站的重要性 2021-05-31
建站方面問(wèn)題總結(jié) 2021-05-31