HTML5新特性總結(jié)
2021-05-31 分類： 網(wǎng)站建設(shè)
HTML5屬于上一代HTML的新迭代語言，設(shè)計HTML5最主要的目的是為了在移動設(shè)備上支持多媒體?。?！
例如： video 標(biāo)簽和 audio 及 canvas 標(biāo)記
新特性：
1. 取消了過時的顯示效果標(biāo)記 <font></font> 和 <center></center>等...
2. 新語義標(biāo)簽的引入
3. 新表單元素引入
4. canvas標(biāo)簽（圖形設(shè)計）
5. 本地數(shù)據(jù)庫（本地存儲）
6. 一些API
好處：跨平臺
例如：比如你開發(fā)了一款HTML5的游戲，你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應(yīng)用平臺，甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上，所以它的跨平臺性非常強(qiáng)大，這也是大多數(shù)人對HTML5有興趣的主要原因。
缺點：
pc端瀏覽器支持不是特別友好，造成用戶體驗不佳(隨著移動端的發(fā)展不斷擴(kuò)大和win10（ie10）的大量推廣，這一缺點將被無限縮小)
HTML5新語義標(biāo)簽
HTML5新標(biāo)簽的數(shù)量在25個左右具體也沒有找到詳細(xì)的資料來查看（每個網(wǎng)站顯示的數(shù)量都不一樣）
雖然新增的標(biāo)簽很多但是實際上用到的應(yīng)該只有十個左右MDN上有一句話“HTML 使用“標(biāo)記”來注明文本、圖片和其他內(nèi)容，以便于在 Web 瀏覽器中顯示。HTML 標(biāo)記包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等?！?這其中大部分有HTML5以前的標(biāo)簽也有HTML5的而這些剛好就是我們常用的標(biāo)簽，不常用的也許不必太過了解布局DIV也可以不是么？
另外推薦大家在使用新語義標(biāo)簽的時候盡量每個獨立的頁面只使用一個標(biāo)簽作為包裹，語義化的作用就是seo（具體可百度），就是讓搜索引擎知道網(wǎng)上到底有些什么，如header 、main、footer標(biāo)簽等等，當(dāng)然你也可以寫100個！
以下總結(jié)出HTML5常用的標(biāo)簽：
“header” “nav” “main”“article” “address”“section”“aside” “footer”
如果忘記了這些標(biāo)簽的意思可以訪問 MDN、W3C、或者CSND,當(dāng)然博客園上搜搜可能會更快
以下為菜鳥教程對html5新標(biāo)簽的注解 http://www.runoob.com/html/html5-new-element.html
HTML5的重點標(biāo)簽之video和audio
<video></video> 視頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設(shè)置循環(huán)播放
<audio></audio> 音頻
屬性：controls 顯示控制欄
屬性：autoplay 自動播放
屬性：loop 設(shè)置循環(huán)播放
video標(biāo)簽支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp
多媒體標(biāo)簽在網(wǎng)頁中的兼容效果方式（每個瀏覽器支持的情況不同所以需要做兼容性處理）（以下source屬性只會生效一個 即 if = true 之后 就不執(zhí)行了）
<video>
<source src="code/多媒體標(biāo)簽/trailer.mp4">
<source src="trailer.ogg">
<source src="trailer.WebM">
</video>
HTML5中的智能表單控件
<input type="email">
type值 ={
email: 輸入合法的郵箱地址
url： 輸入合法的網(wǎng)址
number： 只能輸入數(shù)字
range： 滑塊
color： 拾色器
date： 顯示日期
month： 顯示月份
week ： 顯示第幾周
time： 顯示時間
}
（智能表單，會自動對輸入的內(nèi)容做基本校驗，內(nèi)容不符合基本校驗則拒絕提交請求
表單屬性
◆form屬性：
autocomplete=on | off 自動完成
novalidate=true | false 是否關(guān)閉校驗
◆ input屬性：
autofocus ： 自動獲取焦點
<input type="text" list="abc"/>
<datalist id="abc">
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
<option value="123">12312</option>
</datalist>
multiple： 實現(xiàn)多選效果
placeholder ： 占位符 （提示信息）
required：必填項
HTML5中新的一些API
以前獲取節(jié)點通過
document.getElementById("ID名稱")這些還有className，name，tagname等等方式獲取返回當(dāng)前節(jié)點
H5新增的節(jié)點獲取方法只有兩個
document.querySelector("選擇器")； 返回節(jié)點
document.querySelectorAll("選擇器"); 返回數(shù)組
可以好的代替以前或者節(jié)點的方式，如果無需兼容ie10以下的話
H5中對class的操作
classList.add("類名")
添加class類名 不返回任何值 如果你把它賦值給一個變量 得到結(jié)果是undefined
classList.remove("類名"); 刪除
classList.contains("類名");
檢查has className 是否存在返回布爾值 即true and false
classList.toggle("active");
查詢active 是否存在，存在就刪除，不存在就添加 ，省去了if判斷！返回布爾值如果執(zhí)行多條 即 true false true false.
自定義屬性 （小案例分析體驗自定義屬性） data-自定義屬性名
獲取自定義屬性 Dom.dataset 返回的是一個對象
Dom.dataset.屬性名 或者 Dom.dataset[屬性名]
注：屬性名無需加data如自定義屬性名 = data-canvas 那么獲取的時候 直接dataset.canvas即可 設(shè)置同理
設(shè)置自定義屬性
Dom.dataset.自定義屬性名=值 或者 Dom.dataset[自定義屬性名]=值；
文件讀取 FileReader
FileReader 接口有3個用來讀取文件方法返回結(jié)果在result中
readAsBinaryString ---將文件讀取為二進(jìn)制編碼
readAsText ---將文件讀取為文本
readAsDataURL ---將文件讀取為DataURL
FileReader 提供的事件模型
onabort 中斷時觸發(fā)
onerror 出錯時觸發(fā)
onload 文件讀取成功完成時觸發(fā)
onloadend 讀取完成觸發(fā)，無論成功或失敗
onloadstart 讀取開始時觸發(fā)
onprogress 讀取中
獲取當(dāng)前網(wǎng)絡(luò)狀態(tài)
window.navigator.onLine 返回一個布爾值 網(wǎng)沒問題返回true否則返回false
網(wǎng)絡(luò)狀態(tài)事件 （大部分為不支持和廢棄狀態(tài)也許移動端用的比較多）
window.ononline
window.onoffline
獲取地理定位
獲取一次當(dāng)前位置
window.navigator.geolocation.getCurrentPosition(success,error);
success成功之后獲取位置信息 否則拋出錯誤，比如獲取位置信息被拒絕
coords.latitude 維度
coords.longitude 經(jīng)度
實時獲取當(dāng)前位置
window.navigator.geolocation.watchPosition(success,error);
本地存儲 隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁的應(yīng)用越來越普遍，同時也變的越來越復(fù)雜，為了滿足各種各樣的需求，會經(jīng)常性在本地存儲大量的數(shù)據(jù)，傳統(tǒng)方式我們以document.cookie來進(jìn)行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當(dāng)?shù)膹?fù)雜，給開發(fā)帶來諸多不便，HTML5規(guī)范則提出解決方案，使用sessionStorage和localStorage存儲數(shù)據(jù)。
localStorage：
永久生效
多窗口共享
容量大約為20M
◆window.localStorage.setItem(key,value) 設(shè)置存儲內(nèi)容
◆window.localStorage.getItem(key) 獲取內(nèi)容
◆window.localStorage.removeItem(key) 刪除內(nèi)容
◆window.localStorage.clear() 清空內(nèi)容
sessionStorage：
生命周期為關(guān)閉當(dāng)前瀏覽器窗口
可以在同一個窗口下訪問
數(shù)據(jù)大小為5M左右
◆window.sessionStorage.setItem(key,value)
◆window.sessionStorage.getItem(key)
◆window.sessionStorage.removeItem(key)
◆window.sessionStorage.clear()
required如何修改默認(rèn)提示選項
需要兩個幾個參數(shù)
placeholder = 默認(rèn)提示用戶輸入
oninvalid事件 = 當(dāng)用戶輸入不符合規(guī)則的時候提示的內(nèi)容隨意改setCustomValidity 就是用來修改 requered值的函數(shù)
oninput事件 = 約等于chuange事件 立即執(zhí)行
console.log('Hello World')
網(wǎng)頁題目：HTML5新特性總結(jié)
鏈接地址：http://www.rwnh.cn/news8/115808.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站改版、微信小程序、App設(shè)計、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站收錄
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)站怎么樣推廣？ 2021-05-31
- 電商“五大體系”構(gòu)筑互聯(lián)網(wǎng)快車 2021-05-31
- 互聯(lián)網(wǎng)高光時刻正在被“國風(fēng)”包圍！ 2021-05-31
- 把客戶作為核心的網(wǎng)站你了解的有多少？ 2021-05-31
- 簡述網(wǎng)站LOGO設(shè)計的技巧 2021-05-31
- 線下零售除了拉個微信群，如何適應(yīng)互聯(lián)網(wǎng)？ 2021-05-31
- 外鏈對網(wǎng)站的重要性 2021-05-31
- 建站方面問題總結(jié) 2021-05-31
- 深圳企業(yè)網(wǎng)站統(tǒng)計分析系統(tǒng)要觀察的指標(biāo) 2021-05-31
- 互聯(lián)網(wǎng)“數(shù)據(jù)服務(wù)”成為下沉市場“新寵” 2021-05-31
- 客戶有網(wǎng)站問題你可以直接說，其實用不著這樣？ 2021-05-31
- APP節(jié)日圖標(biāo)設(shè)計思路 2021-05-31
- 巧妙運用交互打造精致營銷網(wǎng)站 2021-05-31
- 企業(yè)網(wǎng)站做好以后如何推廣，網(wǎng)站推廣需要注意的幾個重點 2021-05-31
- 建設(shè)門戶網(wǎng)站有哪些方面值得關(guān)注？ 2021-05-31
- 北京黃女士建設(shè)網(wǎng)站的經(jīng)歷 2021-05-31
- 工業(yè)互聯(lián)網(wǎng)細(xì)分賽道力量正在發(fā)力 2021-05-31
- 網(wǎng)站開發(fā)的過程當(dāng)中，應(yīng)該從哪幾個環(huán)節(jié)出發(fā) 2021-05-31
- 電商網(wǎng)站對于企業(yè)品牌宣傳的重要性 2021-05-31