歡迎訪問我的個人博客Coder
HTML5屬于上一代HTML的新迭代語言，設計HTML5最主要的目的是為了在移動設備上支持多媒體，例如：video標簽和audio及canvas代標記，
HTML5中語意化標簽
在HTML5中新增了很多的語意標簽，如
- header
- footer
- nav
- article
- aside
- section
- ... ...
比如以前我們使用以下方式來布局
<div class="header"></div>
現在可以替換為
<header></header>
HTML5可以讓很多更語意化的結構化代碼標簽代替大量無意義的div標簽
1. 這種語意化的特性提升了網頁的質量和語意
2. 減少了以前用于CSS 呼叫的class和id屬性
并且對搜索引擎的友好，新的結構標簽帶來的是網頁布局的改變及提升對搜索引擎的友好，
但是現在碰到一個問題，由于這些具有語意的標簽是HTML5新增的，這就意味著在IE8及以下版本的IE瀏覽器中不支持，如下面的樣式在IE8中就不能夠正常的顯示
<!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>
解決辦法：
- 在script中創建語意標簽header，并且將header的display設定為block
<!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=https://www.cnblogs.com/LastKnight/p/"html5shiv.js"></script>
<body>