HTML5中語(yǔ)義化標(biāo)簽怎么用
本篇內(nèi)容主要講解“HTML5中語(yǔ)義化標(biāo)簽怎么用”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“HTML5中語(yǔ)義化標(biāo)簽怎么用”吧!
創(chuàng)新互聯(lián)是一家從事企業(yè)網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、做網(wǎng)站、行業(yè)門戶網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)制作的專業(yè)網(wǎng)站建設(shè)公司，擁有經(jīng)驗(yàn)豐富的網(wǎng)站建設(shè)工程師和網(wǎng)頁(yè)設(shè)計(jì)人員，具備各種規(guī)模與類型網(wǎng)站建設(shè)的實(shí)力，在網(wǎng)站建設(shè)領(lǐng)域樹(shù)立了自己獨(dú)特的設(shè)計(jì)風(fēng)格。自公司成立以來(lái)曾獨(dú)立設(shè)計(jì)制作的站點(diǎn)近1000家。
HTML5屬于上一代HTML的新迭代語(yǔ)言，設(shè)計(jì)HTML5最主要的目的是為了在移動(dòng)設(shè)備上支持多媒體，例如：video標(biāo)簽和audio及canvas代標(biāo)記。
HTML5中語(yǔ)義化標(biāo)簽
在HTML5中新增了很多的語(yǔ)義標(biāo)簽，如
比如以前我們使用以下方式來(lái)布局
<div class="header"></div>
現(xiàn)在可以替換為
<header></header>
HTML5可以讓很多更語(yǔ)義化的結(jié)構(gòu)化代碼標(biāo)簽代替大量無(wú)意義的div標(biāo)簽
1. 這種語(yǔ)義化的特性提升了網(wǎng)頁(yè)的質(zhì)量和語(yǔ)義
2. 減少了以前用于CSS 調(diào)用的class和id屬性
并且對(duì)搜索引擎的友好，新的結(jié)構(gòu)標(biāo)簽帶來(lái)的是網(wǎng)頁(yè)布局的改變及提升對(duì)搜索引擎的友好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header {
background-color: red;
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<header></header>
</body>
</html>解決辦法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header {
background-color: red;
height: 400px;
width: 100%;
display: block;
}
</style>
<script>
document.createElement("header");
</script>
</head>
<body>
<header></header>
</body>
</html>使用1的方法，意味著對(duì)每個(gè)語(yǔ)義標(biāo)簽都要?jiǎng)?chuàng)建元素，這樣未免比較麻煩，更好的辦法是使用插件，引入html5shiv.js文件，該插件的實(shí)質(zhì)還是創(chuàng)建了語(yǔ)義元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
header {
background-color: red;
height: 400px;
width: 100%;
}
</style>
<script src="html5shiv.js"></script>
</head>
<body>
<header></header>
</body>
</html>上面的方法還有需要改進(jìn)的地方，比如在谷歌瀏覽器中完全支持 HTML5，這就意味著在渲染HTML網(wǎng)頁(yè)時(shí)不需要下載html5shiv.js 文件，但是上面的方法是在任何的瀏覽器中都會(huì)下載的，所以再次改進(jìn)如下
<!--[if lte IE 8]> <script src="html5shiv.js"></script> <![endif]-->
上面的代碼只有IE瀏覽器才會(huì)識(shí)別，意思是如果IE瀏覽器的版本是IE8及以下的版本，才會(huì)下載這個(gè)js文件，在其他瀏覽器中會(huì)認(rèn)為這時(shí)注釋，自動(dòng)忽略。
video和audio
在瀏覽器中插入視頻和音頻文件，以往是使用flash來(lái)實(shí)現(xiàn)，但是在移動(dòng)端使用flash就會(huì)比較慢，HTML5給了兩個(gè)新的標(biāo)簽，用來(lái)插入視頻和音頻文件。二者的使用相似，現(xiàn)以video為例介紹該標(biāo)簽的屬性
還有一些屬性沒(méi)有介紹，以上是較為常用的，剩余的請(qǐng)參考網(wǎng)站HTML5視頻。這里給出一個(gè)實(shí)例
<video src="resources/video.mp4" controls autoplay loop></video>
另一個(gè)需要注意的是，目前只支持三種格式的視頻
Ogg
MPEG 4(mp4)
WebM
并且不同的瀏覽器支持的程度也不一樣，具體的可以參考上面的鏈接。那么這個(gè)時(shí)候怎么辦? 我們不能這么寫
<video src="test.mp4"></video> <video src="test.ogg"></video> <video src="test.WebM"></video>
雖然我們的本意是：如果支持.mp4，那么就使用.mp4，否則如果支持.ogg，則用.ogg，以此類推。但是上面的效果是出現(xiàn)3個(gè)video，而不是一個(gè)，這個(gè)時(shí)候的解決辦法是使用source標(biāo)簽，如下
<video> <source src="test.mp4"> <source src="test.ogg"> <source src="test.WebM"> </video>
這個(gè)時(shí)候達(dá)到的效果就是我們想要的。
表單
HTML5在表單這里也做了很多的改進(jìn)，比如新增了一些屬性以進(jìn)行表單驗(yàn)證(以往這些工作我們都是使用JavaScript進(jìn)行正則表達(dá)式的驗(yàn)證)，以及新的標(biāo)簽和方法。
智能表單控件
emial
url
number
range
color
date
month
week
time
首先用法如下
<form action="test" method="get"> email: <input type="email"> <br> url: <input type="url"> <br> number: <input type="number"> <br> range: <input type="range"> <br> color: <input type="color"> <br> date: <input type="date"> <br> week: <input type="week"> <br> time: <input type="time"> <br> <button type="submit">提交</button> </form>
當(dāng)type設(shè)置為emial時(shí)，如果輸入的不是電子郵箱，當(dāng)點(diǎn)擊提交按鈕時(shí)，不能提交成功，并給出提示信息
當(dāng)type設(shè)置為url時(shí)，如果輸入的不是url地址，那么當(dāng)點(diǎn)擊提交按鈕時(shí)，也不能提交成功，并給出提示信息
正確的url地址應(yīng)該以http或者h(yuǎn)ttps開(kāi)頭，如http://www.baidu.com。
當(dāng)type設(shè)置為number時(shí)，這時(shí)在控件里面只能輸入數(shù)字，當(dāng)你按其他鍵時(shí)沒(méi)有反應(yīng)，可以自行實(shí)驗(yàn)看看效果。
當(dāng)type設(shè)置為color時(shí)，點(diǎn)擊color后的顏色，會(huì)出現(xiàn)拾色器，可以選擇顏色，如下
設(shè)置type設(shè)置為date, week, time時(shí)，顯示的是各種格式的時(shí)間，這里不多加解釋想必可以明白。
表單屬性
form表單的屬性
autocomplete
直譯過(guò)來(lái)就是自動(dòng)完成，當(dāng)我們提交表單后，表單會(huì)記錄我們提交的內(nèi)容，當(dāng)我們?cè)俅翁顚憰r(shí)，它會(huì)給出我們已經(jīng)提交過(guò)的內(nèi)容作為提示信息。有時(shí)這種情況下可能會(huì)造成信息的泄漏，不安全，我們可以將autocomplete設(shè)置為off，這時(shí)就不會(huì)出現(xiàn)上面的情況。默認(rèn)情況下autocomplete為on
<form action="test" method="get" autocomplete="off"> ... ... </form>
novadilate
上面我們提到，當(dāng)我們使用智能表單控件時(shí)，如果不能滿足格式的要求，如email，則不能提交成功，當(dāng)表單添加novadilate屬性時(shí)，那么這時(shí)即使所填寫的格式不滿足要求，那么也可以提交成功。
<form action="test" method="get" autocomplete="off" novalidate> ... ... </form>
input的屬性
autofocus
自動(dòng)獲得焦點(diǎn)，我們先來(lái)看一個(gè)淘寶的案例
當(dāng)我們進(jìn)入淘寶，搜索框會(huì)自動(dòng)的獲得焦點(diǎn)，用戶可以直接輸入，不需要用鼠標(biāo)先點(diǎn)擊搜索框獲得焦點(diǎn)才能輸入。input添加autofocus的屬性即可有這種效果。
form
先來(lái)看這么一個(gè)結(jié)構(gòu)
<form action="test" method="get"> <input type="text" name="one"> <button type="submit">提交</button> </form> <input type="text" name="two">
我們可以知道當(dāng)提交form表單時(shí)，只會(huì)提交表單域里面的表單，表單域外的表單不會(huì)提交，所以當(dāng)我們提交時(shí)，只會(huì)有one的數(shù)據(jù)才會(huì)提交
但是如果希望當(dāng)提交時(shí)，two的數(shù)據(jù)也能進(jìn)行提交(別奇怪，真的有這種需求)，這個(gè)時(shí)候就需要用到form屬性了
<form id="data" action="test" method="get"> <input type="text" name="one"> <button type="submit">提交</button> </form> <input type="text" name="two" form="data">
form屬性的值為form表單的id值。這時(shí)再次進(jìn)行提交
這時(shí)two的數(shù)據(jù)也得到了提交。
list
list屬性要配合HTML5新添加的表單標(biāo)簽<datalist>使用，如下
<input type="text" list="list"> <datalist id="list"> <option value="One"></option> <option value="Two"></option> <option value="Three"></option> </datalist>
list屬性的值為datalist標(biāo)簽的id值。當(dāng)我們?cè)趖ext中輸入時(shí)，會(huì)有datalist中option值的提示
multiple
multiple可以實(shí)現(xiàn)多選的效果，比如選擇多個(gè)文件，假設(shè)有下面的input標(biāo)簽
<input type="file">
這時(shí)只能選擇一個(gè)文件，為了選擇多個(gè)文件，我們?yōu)閕nput標(biāo)簽添加multiple屬性
<input type="file" multiple>
這時(shí)就可以選擇多個(gè)文件了。
placeholder
使用placeholder作為提示信息，假設(shè)有如下標(biāo)簽
<input type="text" placeholder="請(qǐng)輸入信息">
當(dāng)我們輸入文字時(shí)，提示信息會(huì)消失，當(dāng)我們將文字消失時(shí)，文字又會(huì)出現(xiàn)。
required
當(dāng)input使用該屬性時(shí)，表示該input控件是必填項(xiàng)，否則無(wú)法提交，具體可以自己試驗(yàn)一下，這里就不演示了。
HTML5 API
獲取DOM元素
假設(shè)有如下的html結(jié)構(gòu)
<ul> <li> <span>span1</span> </li> <li> <a href="#"><span>span2</span></a> </li> </ul>
如果我們要改變span的樣式(通過(guò)JS)，我們我們一般要為span標(biāo)簽添加id屬性或者class屬性，這樣才能獲取要對(duì)應(yīng)的DOM元素，HTML5新增了兩個(gè)方法
querySelector()：只能選擇一個(gè)元素
querySelectorAll()：可以選擇所有符合條件的元素
可以向其中傳入選擇器(任何CSS支持的選擇器)，從而來(lái)選擇DOM元素，如
//使用子代選擇器選擇span元素
document.querySelector("li>span").style.color = "red";類名操作
有時(shí)候我們需要為某個(gè)標(biāo)簽添加或者移除類樣式，HTML5為我們提供了API接口
classList.add()：為DOM元素添加指定的類樣式
classList.remove()：為DOM元素移除指定的類樣式
classList.toggle()：切換，意思即如果DOM元素有這個(gè)類樣式，則移除這個(gè)類樣式，如果沒(méi)有這個(gè)類樣式，這添加這個(gè)類樣式
classList.contains()：判斷該DOM元素是否包含這個(gè)類樣式，包含則返回true，否則返回false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active {
width: 100%;
height: 100px;
background-color: darkred;
}
</style>
</head>
<body>
<div></div>
<button class="add">添加類名</button>
<button class="remove">移除類名</button>
<button class="toggle">切換類名</button>
<button class="contains">是否包含類名</button>
<script>
document.querySelector(".add").onclick = function () {
document.querySelector("div").classList.add("active");
}
document.querySelector(".remove").onclick = function () {
document.querySelector("div").classList.remove("active");
}
document.querySelector(".toggle").onclick = function () {
document.querySelector("div").classList.toggle("active");
}
document.querySelector(".contains").onclick = function () {
console.log(document.querySelector("div").classList.contains("active"));
}
</script>
</body>
</html>自定義屬性
HTML5規(guī)定自定義屬性需要以data-開(kāi)頭，如
<div data-test="one"></div>
上面自定義了一個(gè)叫test的屬性，我們可以通過(guò)DOM元素的dataset來(lái)訪問(wèn)或者修改自定義屬性的值，有兩種方式
dataset.屬性名
dataset["屬性名"]
<div data-test="one"></div>
<script>
console.log(document.querySelector("div").dataset.test);
document.querySelector("div").dataset["test"] = "two";
</script>如果屬性名之間使用-之間連接，如下
<div data-test-name="one"></div>
那么使用dataset訪問(wèn)或修改時(shí)要使用駝峰命名法獲取，如下
console.log(document.querySelector("div").dataset.testName);
document.querySelector("div").dataset["testName"] = "two";文件讀取
FileReader是用來(lái)讀取上傳的文件的，它有3個(gè)讀取的方法
readAsText()：讀取文本文件，返回文本字符串(utf-8)
readAsBinaryString()：讀取任意文件，返回二進(jìn)制文件
readAsDataURL()：讀取任意文件，得到包含一個(gè)data:URL格式的字符串(base64編碼)，以表示所讀取文件的內(nèi)容
上面三個(gè)方法讀取的內(nèi)容都會(huì)放在FileReader對(duì)象的result屬性中。
現(xiàn)在演示一個(gè)案例，選擇上傳的圖片，在上傳之后希望有預(yù)覽的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file"><br>
<br>
<img src="" width="800"></img>
<script>
//獲得input DOM元素
let input = document.querySelector("input");
//獲得img DOM元素
let image = document.querySelector("img");
//當(dāng)input發(fā)生改變時(shí)即有文件上傳時(shí)觸發(fā)該事件
input.onchange = function () {
//獲得上傳的文件對(duì)象
let file = input.files[0];
//獲得FileReader對(duì)象
let reader = new FileReader();
//使用FileReader讀取該圖片，得到一個(gè)base64格式的編碼
reader.readAsDataURL(file);
//reader讀取完畢后觸發(fā)該事件
reader.onload = function() {
//將讀取到的base64編碼格式的URL賦值給img標(biāo)簽的src屬性
image.src = reader.result;
}
}
</script>
</body>
</html>上面的代碼中，我們用到了FileReader對(duì)象的onload事件，這里列出FileReader提供的事件
onabort：中斷時(shí)觸發(fā)
onerror：出錯(cuò)時(shí)觸發(fā)
onload：文件讀取成功完成時(shí)觸發(fā)
onloadend：讀取完成觸發(fā)，無(wú)論成功或失敗
onloadstart：讀取開(kāi)始時(shí)觸發(fā)
onprogress：在讀取過(guò)程中持續(xù)觸發(fā)
獲取網(wǎng)絡(luò)狀態(tài)
HTML5提供了有關(guān)網(wǎng)絡(luò)狀態(tài)的API，使用window.navigator.onLine可以獲取當(dāng)前的網(wǎng)絡(luò)狀態(tài)，返回一個(gè)布爾值。除此之外，還提供了兩個(gè)網(wǎng)絡(luò)事件
ononline()：連上網(wǎng)絡(luò)的時(shí)候觸發(fā)
onoffline()：斷開(kāi)網(wǎng)絡(luò)的時(shí)候觸發(fā)
window.ononline = function () {
console.log("online");
}
window.onoffline = function () {
console.log("offline");
}本地存儲(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ù)。
sessionStorage的大小大約為5M左右，它的生命周期為當(dāng)前頁(yè)面，即當(dāng)關(guān)閉當(dāng)前頁(yè)面時(shí)，存儲(chǔ)在本地的數(shù)據(jù)會(huì)被清除。并且不同頁(yè)面之間的sessionStorage是獨(dú)立的，不能互相訪問(wèn)。sessionStorage的方法有
setItem(key, value)：存儲(chǔ)鍵值對(duì)
getItem(key)：根據(jù)key獲取對(duì)應(yīng)的value
removeItem(key)：刪除key所對(duì)應(yīng)的鍵值對(duì)
clear()：清除sessionStorage本地緩存
localStorage的大小為20M左右，它的生命周期為當(dāng)前瀏覽器。關(guān)閉瀏覽器不會(huì)清除數(shù)據(jù)，數(shù)據(jù)存儲(chǔ)在硬盤上，只能手動(dòng)清除。localStorage的方法同sessionStorage。
header
footer
nav
article
aside
section
... ...
但是現(xiàn)在碰到一個(gè)問(wèn)題，由于這些具有語(yǔ)義的標(biāo)簽是HTML5新增的，這就意味著在IE8及以下版本的IE瀏覽器中不支持，如下面的樣式在IE8中就不能夠正常的顯示，在script中創(chuàng)建語(yǔ)義標(biāo)簽header，并且將header的display設(shè)置為block
到此，相信大家對(duì)“HTML5中語(yǔ)義化標(biāo)簽怎么用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！
網(wǎng)站標(biāo)題：HTML5中語(yǔ)義化標(biāo)簽怎么用
分享地址：http://www.chinadenli.net/article8/ggiiop.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、用戶體驗(yàn)、關(guān)鍵詞優(yōu)化、定制開(kāi)發(fā)、自適應(yīng)網(wǎng)站、電子商務(wù)
聲明：本網(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；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 網(wǎng)站導(dǎo)航也需要優(yōu)化哦 2016-11-01
- 網(wǎng)站導(dǎo)航系統(tǒng)設(shè)計(jì)注意事項(xiàng) 2015-02-25
- 網(wǎng)站導(dǎo)航優(yōu)化的5個(gè)小竅門 2022-08-20
- 企業(yè)網(wǎng)站導(dǎo)航欄設(shè)計(jì)有哪些技巧 2021-11-05
- 網(wǎng)站導(dǎo)航系統(tǒng)對(duì)網(wǎng)站優(yōu)化作用的幾大點(diǎn) 2016-12-28
- 在網(wǎng)站制作如何劃分清晰的網(wǎng)站導(dǎo)航欄目 2022-11-24
- 網(wǎng)站導(dǎo)航的布局要點(diǎn) 2022-10-29
- 企業(yè)網(wǎng)站建設(shè)網(wǎng)站導(dǎo)航設(shè)計(jì)應(yīng)注意的問(wèn)題 2016-11-08
- 如何規(guī)劃網(wǎng)站導(dǎo)航和欄目關(guān)鍵詞更合理? 2023-04-25
- 企業(yè)常見(jiàn)的網(wǎng)站導(dǎo)航類型有哪些 2023-02-07
- 網(wǎng)站制作時(shí)候網(wǎng)站導(dǎo)航更合理方案 2015-12-01
- 廣告點(diǎn)擊網(wǎng)站導(dǎo)航的優(yōu)化方法 2013-09-27