溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“HTML5中語義化標簽怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“HTML5中語義化標簽怎么用”吧!
HTML5屬于上一代HTML的新迭代語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體，例如：video標簽和audio及canvas代標記。
在HTML5中新增了很多的語義標簽，如
比如以前我們使用以下方式來布局
<div class="header"></div>
現在可以替換為
<header></header>
HTML5可以讓很多更語義化的結構化代碼標簽代替大量無意義的div標簽
1. 這種語義化的特性提升了網頁的質量和語義
2. 減少了以前用于CSS 調用的class和id屬性
并且對搜索引擎的友好，新的結構標簽帶來的是網頁布局的改變及提升對搜索引擎的友好。
<!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的方法，意味著對每個語義標簽都要創建元素，這樣未免比較麻煩，更好的辦法是使用插件，引入html5shiv.js文件，該插件的實質還是創建了語義元素
<!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>上面的方法還有需要改進的地方，比如在谷歌瀏覽器中完全支持 HTML5，這就意味著在渲染HTML網頁時不需要下載html5shiv.js 文件，但是上面的方法是在任何的瀏覽器中都會下載的，所以再次改進如下
<!--[if lte IE 8]> <script src="html5shiv.js"></script> <![endif]-->
上面的代碼只有IE瀏覽器才會識別，意思是如果IE瀏覽器的版本是IE8及以下的版本，才會下載這個js文件，在其他瀏覽器中會認為這時注釋，自動忽略。
在瀏覽器中插入視頻和音頻文件，以往是使用flash來實現，但是在移動端使用flash就會比較慢，HTML5給了兩個新的標簽，用來插入視頻和音頻文件。二者的使用相似，現以video為例介紹該標簽的屬性
還有一些屬性沒有介紹，以上是較為常用的，剩余的請參考網站HTML5視頻。這里給出一個實例
<video src="resources/video.mp4" controls autoplay loop></video>
另一個需要注意的是，目前只支持三種格式的視頻
Ogg
MPEG 4(mp4)
WebM
并且不同的瀏覽器支持的程度也不一樣，具體的可以參考上面的鏈接。那么這個時候怎么辦? 我們不能這么寫
<video src="test.mp4"></video> <video src="test.ogg"></video> <video src="test.WebM"></video>
雖然我們的本意是：如果支持.mp4，那么就使用.mp4，否則如果支持.ogg，則用.ogg，以此類推。但是上面的效果是出現3個video，而不是一個，這個時候的解決辦法是使用source標簽，如下
<video> <source src="test.mp4"> <source src="test.ogg"> <source src="test.WebM"> </video>
這個時候達到的效果就是我們想要的。
HTML5在表單這里也做了很多的改進，比如新增了一些屬性以進行表單驗證(以往這些工作我們都是使用JavaScript進行正則表達式的驗證)，以及新的標簽和方法。
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>
當type設置為emial時，如果輸入的不是電子郵箱，當點擊提交按鈕時，不能提交成功，并給出提示信息
當type設置為url時，如果輸入的不是url地址，那么當點擊提交按鈕時，也不能提交成功，并給出提示信息
正確的url地址應該以http或者https開頭，如http://www.baidu.com。
當type設置為number時，這時在控件里面只能輸入數字，當你按其他鍵時沒有反應，可以自行實驗看看效果。
當type設置為color時，點擊color后的顏色，會出現拾色器，可以選擇顏色，如下
設置type設置為date, week, time時，顯示的是各種格式的時間，這里不多加解釋想必可以明白。
autocomplete
直譯過來就是自動完成，當我們提交表單后，表單會記錄我們提交的內容，當我們再次填寫時，它會給出我們已經提交過的內容作為提示信息。有時這種情況下可能會造成信息的泄漏，不安全，我們可以將autocomplete設置為off，這時就不會出現上面的情況。默認情況下autocomplete為on
<form action="test" method="get" autocomplete="off"> ... ... </form>
novadilate
上面我們提到，當我們使用智能表單控件時，如果不能滿足格式的要求，如email，則不能提交成功，當表單添加novadilate屬性時，那么這時即使所填寫的格式不滿足要求，那么也可以提交成功。
<form action="test" method="get" autocomplete="off" novalidate> ... ... </form>
autofocus
自動獲得焦點，我們先來看一個淘寶的案例
當我們進入淘寶，搜索框會自動的獲得焦點，用戶可以直接輸入，不需要用鼠標先點擊搜索框獲得焦點才能輸入。input添加autofocus的屬性即可有這種效果。
form
先來看這么一個結構
<form action="test" method="get"> <input type="text" name="one"> <button type="submit">提交</button> </form> <input type="text" name="two">
我們可以知道當提交form表單時，只會提交表單域里面的表單，表單域外的表單不會提交，所以當我們提交時，只會有one的數據才會提交
但是如果希望當提交時，two的數據也能進行提交(別奇怪，真的有這種需求)，這個時候就需要用到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值。這時再次進行提交
這時two的數據也得到了提交。
list
list屬性要配合HTML5新添加的表單標簽<datalist>使用，如下
<input type="text" list="list"> <datalist id="list"> <option value="One"></option> <option value="Two"></option> <option value="Three"></option> </datalist>
list屬性的值為datalist標簽的id值。當我們在text中輸入時，會有datalist中option值的提示
multiple
multiple可以實現多選的效果，比如選擇多個文件，假設有下面的input標簽
<input type="file">
這時只能選擇一個文件，為了選擇多個文件，我們為input標簽添加multiple屬性
<input type="file" multiple>
這時就可以選擇多個文件了。
placeholder
使用placeholder作為提示信息，假設有如下標簽
<input type="text" placeholder="請輸入信息">
當我們輸入文字時，提示信息會消失，當我們將文字消失時，文字又會出現。
required
當input使用該屬性時，表示該input控件是必填項，否則無法提交，具體可以自己試驗一下，這里就不演示了。
假設有如下的html結構
<ul> <li> <span>span1</span> </li> <li> <a href="#"><span>span2</span></a> </li> </ul>
如果我們要改變span的樣式(通過JS)，我們我們一般要為span標簽添加id屬性或者class屬性，這樣才能獲取要對應的DOM元素，HTML5新增了兩個方法
querySelector()：只能選擇一個元素
querySelectorAll()：可以選擇所有符合條件的元素
可以向其中傳入選擇器(任何CSS支持的選擇器)，從而來選擇DOM元素，如
//使用子代選擇器選擇span元素
document.querySelector("li>span").style.color = "red";有時候我們需要為某個標簽添加或者移除類樣式，HTML5為我們提供了API接口
classList.add()：為DOM元素添加指定的類樣式
classList.remove()：為DOM元素移除指定的類樣式
classList.toggle()：切換，意思即如果DOM元素有這個類樣式，則移除這個類樣式，如果沒有這個類樣式，這添加這個類樣式
classList.contains()：判斷該DOM元素是否包含這個類樣式，包含則返回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規定自定義屬性需要以data-開頭，如
<div data-test="one"></div>
上面自定義了一個叫test的屬性，我們可以通過DOM元素的dataset來訪問或者修改自定義屬性的值，有兩種方式
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訪問或修改時要使用駝峰命名法獲取，如下
console.log(document.querySelector("div").dataset.testName);
document.querySelector("div").dataset["testName"] = "two";FileReader是用來讀取上傳的文件的，它有3個讀取的方法
readAsText()：讀取文本文件，返回文本字符串(utf-8)
readAsBinaryString()：讀取任意文件，返回二進制文件
readAsDataURL()：讀取任意文件，得到包含一個data:URL格式的字符串(base64編碼)，以表示所讀取文件的內容
上面三個方法讀取的內容都會放在FileReader對象的result屬性中。
現在演示一個案例，選擇上傳的圖片，在上傳之后希望有預覽的效果
<!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");
//當input發生改變時即有文件上傳時觸發該事件
input.onchange = function () {
//獲得上傳的文件對象
let file = input.files[0];
//獲得FileReader對象
let reader = new FileReader();
//使用FileReader讀取該圖片，得到一個base64格式的編碼
reader.readAsDataURL(file);
//reader讀取完畢后觸發該事件
reader.onload = function() {
//將讀取到的base64編碼格式的URL賦值給img標簽的src屬性
image.src = reader.result;
}
}
</script>
</body>
</html>上面的代碼中，我們用到了FileReader對象的onload事件，這里列出FileReader提供的事件
onabort：中斷時觸發
onerror：出錯時觸發
onload：文件讀取成功完成時觸發
onloadend：讀取完成觸發，無論成功或失敗
onloadstart：讀取開始時觸發
onprogress：在讀取過程中持續觸發
HTML5提供了有關網絡狀態的API，使用window.navigator.onLine可以獲取當前的網絡狀態，返回一個布爾值。除此之外，還提供了兩個網絡事件
ononline()：連上網絡的時候觸發
onoffline()：斷開網絡的時候觸發
window.ononline = function () {
console.log("online");
}
window.onoffline = function () {
console.log("offline");
}隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，傳統方式我們以document.cookie來進行存儲的，但是由于其存儲大小只有4k左右，并且解析也相當的復雜，給開發帶來諸多不便，HTML5規范則提出解決方案，使用sessionStorage和localStorage存儲數據。
sessionStorage的大小大約為5M左右，它的生命周期為當前頁面，即當關閉當前頁面時，存儲在本地的數據會被清除。并且不同頁面之間的sessionStorage是獨立的，不能互相訪問。sessionStorage的方法有
setItem(key, value)：存儲鍵值對
getItem(key)：根據key獲取對應的value
removeItem(key)：刪除key所對應的鍵值對
clear()：清除sessionStorage本地緩存
localStorage的大小為20M左右，它的生命周期為當前瀏覽器。關閉瀏覽器不會清除數據，數據存儲在硬盤上，只能手動清除。localStorage的方法同sessionStorage。
header
footer
nav
article
aside
section
... ...
但是現在碰到一個問題，由于這些具有語義的標簽是HTML5新增的，這就意味著在IE8及以下版本的IE瀏覽器中不支持，如下面的樣式在IE8中就不能夠正常的顯示，在script中創建語義標簽header，并且將header的display設置為block
到此，相信大家對“HTML5中語義化標簽怎么用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
