HTML5新特性是什么
小編給大家分享一下HTML5新特性是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)公司主營(yíng)平川網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,app軟件開(kāi)發(fā)公司,平川h5小程序定制開(kāi)發(fā)搭建,平川網(wǎng)站營(yíng)銷(xiāo)推廣歡迎平川等地區(qū)企業(yè)咨詢(xún)
一、HTML5與HTML4
1.1 推出的理由和目標(biāo)
H5的出現(xiàn)，對(duì)于Web來(lái)說(shuō)意義重大。因?yàn)樗囊鈭D是想要把目前Web上存在的各種問(wèn)題一并解決掉。
Web瀏覽器之間的兼容性很低
文檔結(jié)構(gòu)不夠明確（增加了很多結(jié)構(gòu), 語(yǔ)義化的標(biāo)簽）
Web應(yīng)用程序的功能受到了限制
H5 的出現(xiàn)極大的解決了上面的問(wèn)題
1.2 語(yǔ)法的改變
1.2.1 DOCTYPE聲明
H5 DOCTYPE的聲明是這樣的：
<!DOCTYPE html>
Html:4s DOCTYPE的聲明是這樣的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Html: 4t DOCTYPE 的聲明是這樣的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
1.2.2 指定字符編碼
H5指定字符編碼格式如下：
<meta charset="UTF-8" />
Html:4s 指定字符編碼如下：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
1.2.3 可以省略結(jié)束標(biāo)記的元素
給大家舉一個(gè)簡(jiǎn)單的例子就明白啥玩意了
我們平常寫(xiě) p 標(biāo)簽 是這樣寫(xiě)的：
<body> <p>Hello world!</p> </body>
新的寫(xiě)法可以這樣寫(xiě)：
<body>
<p/>Hello world!
</body>如果大家不相信，可以親自去測(cè)試一下，怎么測(cè)試呢？很簡(jiǎn)單，就是分別設(shè)置他們的樣式即可，看看是否一樣，若一樣，證明二者是等價(jià)的！注意：設(shè)置 p標(biāo)簽的樣式。
1.2.4 具有boolean值的屬性（disabled，checked）
disabled 多用于input元素，button元素，option元素等 ，意思是 是否禁用這些 元素 ，用法如下：
其中屬性值“disabled”可以替換成任何的其它單詞甚至是“enabled”（不過(guò)“false”除外），因?yàn)閷傩灾禐椤癴alse”時(shí)表示屬性不啟用，屬性值“true”表示啟用屬性。如下代碼的button元素都處于禁用狀態(tài)：
<input type="button" disabled="true" value="測(cè)試按鈕">
<input type="button" disabled="123" value="測(cè)試按鈕">
<input type="button" disabled=" " value="測(cè)試按鈕">
<input type="button" disabled="any word" value="測(cè)試按鈕">如下代碼的button元素處于啟用狀態(tài)：
<input type="button" disabled="false" value="測(cè)試按鈕">
<input type="button" value="測(cè)試按鈕">checked 用法和disabled一樣，這里小編就不在過(guò)多贅述！
1.2.5 省略引號(hào) （標(biāo)簽內(nèi)的屬性值可以省略引號(hào)）
H5之前屬性值的寫(xiě)法是這樣寫(xiě)的，以 img 標(biāo)簽的 src 屬性為例：
<body>
<img src="1.png" alt="">
</body>目前可以這樣寫(xiě)：
<body>
<img sre = 1.png alt = "">
</body>二者的結(jié)果是一樣的。都能夠正常顯示圖片
1.3 新增的語(yǔ)義化標(biāo)簽
什么是語(yǔ)義化？
語(yǔ)義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。通俗地講,語(yǔ)義化就是對(duì)數(shù)據(jù)和信息進(jìn)行處理,使得機(jī)器可以理解.語(yǔ)義化
新增的語(yǔ)義化標(biāo)簽：Section、article、aside、header、hgroup、footer、nav、figure
具體用法：新增語(yǔ)義化標(biāo)簽的用法
1.4 新增的"花樣"標(biāo)簽元素
video、audio、canvas、embed、mark、progress、meter、time、ruby、rt、rp、wbr、command、details、datalist、datagrid、keygen、output、source、menu
這些標(biāo)簽小編這里就不在一 一介紹用法了。用的時(shí)候直接百度就行。一般用的也不多，記住有這個(gè)東西就行。(面試的時(shí)候可能會(huì)用到)
1.5 新增的 input 類(lèi)型
Email、url、number、range、DatePickers
這里只給出部分講解：
number
<input type="number" name="">
range
<input type = "range" name = "">
其余的小編就不測(cè)試了，有心的你可以測(cè)試一下！
1.6 廢除的標(biāo)簽
能使用CSS替代的basefont、big、center、font、s、tt、u等
不再使用frame框架
只有部分瀏覽器支持的元素
其他被廢除的元素
1.7 新增的全局屬性
全局屬性是指對(duì)所有標(biāo)簽都可以使用的屬性
contentEditable屬性(規(guī)定內(nèi)容是否可編輯)
<input type="text" name="name" contenteditable="true">
designMode屬性(這個(gè)在js中進(jìn)行使用，讓頁(yè)面中所有的元素開(kāi)啟可編輯模式)
window.onload = function() {
document.designMode = "on";
}hidden屬性
spellcheck屬性 （input和textarea提供的新屬性，做了語(yǔ)法檢查）
tabindex屬性 (讓標(biāo)簽獲取到焦點(diǎn))
<a href="javascript:void(0);" tabindex="3">你好</a>
<a href="javascript:void(0);" tabindex="2">hello world!</a>
<a href="javascript:void(0);" tabindex="1">html5</a>
二、新增的語(yǔ)義化標(biāo)簽
2.1 新增元素
<header></header> 頁(yè)眉
主要用于頁(yè)面的頭部的信息介紹，也可用于板塊頭部
<footer></footer>頁(yè)腳
頁(yè)面的底部 或者 版塊底部
<nav></nav> 導(dǎo)航 (包含鏈接的的一個(gè)列表)
<nav>
<a href="#">鏈接1</a>
<a href="#">鏈接2</a>
</nav><hgroup></hgroup> 頁(yè)面上的一個(gè)標(biāo)題組合
<hgroup>
<h2>旅游</h2>
<h3>上海</h3>
</hgroup><section></section> 頁(yè)面上的板塊
用于劃分頁(yè)面上的不同區(qū)域,或者劃分文章里不同的節(jié)
<article></ article > 用來(lái)在頁(yè)面中表示一套結(jié)構(gòu)完整且獨(dú)立的內(nèi)容部分
可以用來(lái)呈現(xiàn)論壇的一個(gè)帖子，雜志或報(bào)紙中的一篇文章，一篇博客，用戶(hù)提交的評(píng)論內(nèi)容，可互動(dòng)的頁(yè)面模塊掛件等
<aside></aside>
該元素標(biāo)簽可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類(lèi)似的有別與主要內(nèi)容的部分
8.<figure></figure>
用于對(duì)元素進(jìn)行組合。一般用于圖片或視頻
<figcation></figcation> figure 的子元素,用于對(duì)figure的內(nèi)容進(jìn)行說(shuō)明
<figure>
<!-- (注意沒(méi)有alt) -->
<img src="images/225.jpg" width="100px" height="100px" />
<figcaption>薰衣草</figcaption>
</figure>
2.2 講解標(biāo)簽
<article><object><embed>強(qiáng)調(diào)獨(dú)立性
<section> 強(qiáng)調(diào)分段，一般存在一個(gè)標(biāo)題的
<section>
<h2>CAR</h2>
</section><nav> 并不是所有的鏈接組都放在nav標(biāo)簽中，只需要將主要的，基本的放進(jìn)nav中即可。
一般用于傳統(tǒng)導(dǎo)航，側(cè)邊欄導(dǎo)航，頁(yè)內(nèi)導(dǎo)航、翻頁(yè)導(dǎo)航
<aside> 來(lái)表示當(dāng)前頁(yè)面或文章的附屬信息部分，它可以包含與當(dāng)前頁(yè)面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類(lèi)似的有區(qū)別于主要內(nèi)容的部分。
非主體結(jié)構(gòu)標(biāo)簽
Header 元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來(lái)防止整個(gè)頁(yè)面和頁(yè)面內(nèi)的一個(gè)內(nèi)容區(qū)塊的標(biāo)題，但是也可以包含其他內(nèi)容，例如數(shù)據(jù)、搜索表單或相關(guān)的logo圖片。
Footer元素可以作為其上層父級(jí)內(nèi)容區(qū)或者一個(gè)根區(qū)塊的腳注。Footer通常包含其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)的閱讀鏈接及其版權(quán)信息等
Hgroup元素是將標(biāo)題及其子標(biāo)題進(jìn)行分組的標(biāo)簽。Hgroup標(biāo)簽通常會(huì)將h2-h7標(biāo)簽進(jìn)行分組。譬如一個(gè)內(nèi)容區(qū)的標(biāo)題及其子元素算一組。
Address元素用來(lái)在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護(hù)者的名字、它們的網(wǎng)站鏈接、電子郵箱、真實(shí)地址、電話(huà)號(hào)碼等。Address應(yīng)該不只用來(lái)呈現(xiàn)電子郵箱或真實(shí)地址，還用來(lái)展示跟文檔相關(guān)的聯(lián)系人的所有聯(lián)系信息。
三、表單內(nèi)新增的元素和屬性
3.1 form 小編俗解：在 表單外部的標(biāo)簽可以通過(guò)form屬性進(jìn)行鏈接
eg：
<form id="form1">
<label for="man">MAN</label><input type="radio" id="man" name="sex">
<input type="radio" id="woman" name="sex">
</form>
<label for="woman" form="form1">WOMAN</label>
3.2 formtarget 屬性
_blank 在新窗口中打開(kāi)。
_self 默認(rèn)。在相同的框架中打開(kāi)。
_parent 在父框架集中打開(kāi)。
_top 在整個(gè)窗口中打開(kāi)。
3.3 autofocus 獲取焦點(diǎn)
<input type="text" name="">
<input type="text" name="" autofocus="autofocus">
3.4 required 屬性
HTML5中新增的屬性可以應(yīng)用于大多數(shù)的輸入標(biāo)簽上，在提交時(shí)，如果元素中內(nèi)容為空白，則不允許提交，同時(shí)在瀏覽器中顯示信息提示文字?？聪旅胬樱?/p>
<form>
<input type="text" name="" autofocus="autofocus" required>
<input type="submit" name="">
</form>
3.5 placeholder 屬性，用于顯示文本未輸入內(nèi)容之前，
<form>
<input type="text" name="name" placeholder="請(qǐng)輸入你的姓名">
</form>
3.6 autoComplete 屬性
<form autocomplete="on">
<input type="text" name="name" placeholder="請(qǐng)輸入你的姓名" >
</form>
3.7 pattern 屬性
該屬性用于正則表達(dá)式。見(jiàn)下面小例子：
<form>
<input type="text" name="content" autocomplete="off" placeholder="請(qǐng)輸入郵箱" pattern="\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}" >
<input type="submit">
</form>
3.8 小編有話(huà)說(shuō)
新增的表單屬性和元素還有很多，在這里我只列舉了一些較常用的屬性和元素，至于剩余的部分，小伙伴們用到的時(shí)候網(wǎng)上搜索就行。好啦！這部分結(jié)束，繼續(xù)下面的內(nèi)容。
四、新的Javascript選擇器
4.1 querySelector()
<p id="box">Hello World！</p>
<script type="text/javascript">
var box = document.querySelector("#box");
box.style.color = "red";
box.style.fontSize = "24px";
box.style.fontWeight = "blod";
</script>
4.2 querySelectorAll()
<p id="box">Hello World！</p>
<p id="box">Hello！</p>
<p id="box">World！</p>
<script type="text/javascript">
var boxList = document.querySelectorAll("#box");
boxList.forEach(function(item){
item.style.color = "red";
item.style.fontSize = "24px";
item.style.fontWeight = "blod";
});
</script>
五、新增 dom 節(jié)點(diǎn)屬性
clasList 中的屬性和方法
length (長(zhǎng)度)
<p id="box" class="test test1 test2 test 3 test4"></p>
<script>
var box = document.querySelector("#box");
window.onload = function (){
console.log(box.classList);
console.log(box.classList.length);
}
</script>
add() 增加
<p id = "box" class = "test test1 test2 test3 test4 "></p>
<script>
var box = document.querySelector("#box");
window.onload = function(){
box.classList.add("test5");
console.log(box.classList);
}
</script>
remove() 移除
<p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.remove("test");
console.log(box.classList);
}
</script>
toggle() 簡(jiǎn)單理解：有則刪除，沒(méi)有則添加
有的時(shí)候
<p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test");
console.log(box.classList);
}
</script>
沒(méi)有的時(shí)候
<p id="box" class="test test2 test3 test4">Hello World!</p>
<script type="text/javascript">
var box = document.querySelector("#box");
window.onload = function (){
box.classList.toggle("test5");
console.log(box.classList);
}
</script>
六、JSON 的新方法
6.1 eval
eval(): 可以解析任何字符串變成JS , 對(duì)JSON內(nèi)容進(jìn)行解析的話(huà)必須在最外面使用(); 例如:
<script>
var str = "({name:'Tom',age:'20',sex:'man'})";
var obj = eval(str);
console.log(obj);
</script>
七、自定義標(biāo)簽屬性
語(yǔ)法：1. 在標(biāo)簽中使用data-str1-str2
2. 在JS 中獲取到相應(yīng)的自定義屬性的值 。dom.dataset.str1Str2
見(jiàn)下面的小例子就明白了：
<p id="box" data-my-color="red" data-font-size="24px">Hello world!</p>
<script>
var box = document.querySelector("#box");
box.style.color = box.dataset.myColor;
box.style.fontSize = box.dataset.fontSize;
</script>
分析： 其實(shí)很簡(jiǎn)單，首先在標(biāo)簽中根據(jù)自己的需要定義屬性，比如小編這里定義了字體的顏色和大小，光定義是不行的，瀏覽器不認(rèn)識(shí)，所以還需要引用，在js中進(jìn)行引用，引用方式就是和平常我們用js改變屬性值是一樣的，謹(jǐn)記要用駝峰命名法。
八、JS加載過(guò)程
一般情況
按照慣例，所有script元素都應(yīng)該放在頁(yè)面的head元素中。這種做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方?？墒?，在文檔的head元素中包含所有JavaScript文件，意味著必須等到全部JavaScript代碼都被下載、解析和執(zhí)行完成以后，才能開(kāi)始呈現(xiàn)頁(yè)面的內(nèi)容(瀏覽器在遇到body標(biāo)簽時(shí)才開(kāi)始呈現(xiàn)內(nèi)容)。
對(duì)于那些需要很多JavaScript代碼的頁(yè)面來(lái)說(shuō)，這無(wú)疑會(huì)導(dǎo)致瀏覽器在呈現(xiàn)頁(yè)面時(shí)出現(xiàn)明顯的延遲，而延遲期間的瀏覽器窗口中將是一片空白。為了避免這個(gè)問(wèn)題，現(xiàn)在Web應(yīng)用程序一般都把全部JavaScript引用放在body元素中頁(yè)面的內(nèi)容后面。這樣一來(lái)，在解析包含的JavaScript代碼之前，頁(yè)面的內(nèi)容將完全呈現(xiàn)在瀏覽器中。而用戶(hù)也會(huì)因?yàn)闉g覽器窗口顯示空白頁(yè)面的時(shí)間縮短而感到打開(kāi)頁(yè)面的速度加快了。
總結(jié)一句話(huà)：在JavaScript代碼時(shí)要把該部分放在body的后面
看下面的圖解：
defer (延遲腳本)
延遲腳本：defer屬性只適用于外部腳本文件。
如果給script標(biāo)簽定義了defer屬性，這個(gè)屬性的作用是表明腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢后再運(yùn)行。因此，如果script元素中設(shè)置了defer屬性，相當(dāng)于告訴瀏覽器立即下載，但延遲執(zhí)行。
看下面的圖文詳解：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>延遲加載</title>
<script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>分析：這個(gè)例子中，雖然我們把script元素放在了文檔的head元素中，但其中包含的腳本將延遲到瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。
HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行，而這兩個(gè)腳本會(huì)先于DOMContentLoaded事件(在DOM樹(shù)構(gòu)建完成后觸發(fā)，不需要等到所有的資源都加載完畢)執(zhí)行。
特別注意：在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行，也不一定會(huì)在DOMContentLoaded事件觸發(fā)前執(zhí)行，因此最好只包含一個(gè)延遲腳本。
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
最佳的方法：從實(shí)用角度來(lái)說(shuō)，把所有腳本都放在 </body> 之前是最佳實(shí)踐，因?yàn)閷?duì)于舊瀏覽器來(lái)說(shuō)這是唯一的優(yōu)化選擇，此法可保證非腳本的其他一切元素能夠以最快的速度得到加載和解析。
圖解：
async (異步腳本)
異步腳本：async屬性也只適用于外部腳本文件，并告訴瀏覽器立即下載文件。
但與defer不同的是：標(biāo)記為async的腳本并不保證按照指定它們的先后順序執(zhí)行。
直接圖解：
defer 和 async 的異同
同
defer 和 async 在網(wǎng)絡(luò)讀?。_本下載）這塊兒是一樣的，都是異步的（相較于 HTML 解析）
異
在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的。defer是立即下載但延遲執(zhí)行，加載后續(xù)文檔元素的過(guò)程將和腳本的加載并行進(jìn)行（異步），但是腳本的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。async是立即下載并執(zhí)行，加載和渲染后續(xù)文檔元素的過(guò)程將和js腳本的加載與執(zhí)行并行進(jìn)行（異步）。
以上是“HTML5新特性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
分享題目：HTML5新特性是什么
文章URL：http://aaarwkj.com/article24/pcscce.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、建站公司、網(wǎng)頁(yè)設(shè)計(jì)公司、商城網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 商城網(wǎng)站建設(shè)必須注意的事項(xiàng) 2016-11-14
- 商城網(wǎng)站該如何建立從這些方面著手 2022-11-12
- 商城網(wǎng)站建設(shè):廠家企業(yè)電商未來(lái)趨勢(shì) 2022-05-02
- 淘寶搜索“你絕對(duì)不想知道的事”，以此來(lái)看商城網(wǎng)站制作思路 2013-04-26
- 成都網(wǎng)站制作公司開(kāi)發(fā)購(gòu)物商城網(wǎng)站建設(shè)類(lèi)型的網(wǎng)站需要注意什么問(wèn)題？ 2013-05-01
- 網(wǎng)上商城建設(shè)需要注意什么？ 2014-08-27
- 購(gòu)物商城網(wǎng)站建設(shè)的要求 2021-10-11
- 如何搭建網(wǎng)上商城系統(tǒng)？ 2015-09-13
- 電子商城網(wǎng)站設(shè)計(jì)費(fèi)用多少 2022-11-24
- 只有常做網(wǎng)站，才更懂商城網(wǎng)站建設(shè)費(fèi)用是多少錢(qián)? 2022-08-06
- 商城網(wǎng)站建設(shè)需要達(dá)到哪些標(biāo)準(zhǔn)呢 2021-09-20
- 商城網(wǎng)站建設(shè)，購(gòu)物商城網(wǎng)站建設(shè)解決方案 2023-03-08