在html中，標簽非常多，比如說列表，按鈕，圖片，文字等等，每一種標簽都有自己的使用方法以及相關的約束條件。具體的標簽可以直接到w3c的網站上查看，這里就簡單了解一下html5的標簽。
一、HTML5的新結構標簽
在之前的HTML頁面中，在布局方式中，大家基本上都是用Div+CSS。而搜索引擎去抓取頁面的內容的時候，它只能猜測你的某個div內的內容是文章內容容器，或者是導航模塊的容器，或者是作者介紹的容器等等。也就是說整個HTML文檔結構定義不清晰，HTML5中為了解決這個問題添加了：頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標簽。如下圖所示：
首先我們來從視圖上認識一下新結構標簽的顯示。在HTML5中，一個普通的頁面，會有頭部，導航，文章內容，還有附著的右邊欄，還有底部等模塊。如下圖所示：
相關的代碼有：
<body>
<header>header</header>
<nav>nav</nav>
<article>
<section>section</section>
</article>
<aside>aside</aside>
<footer>footer</footer>
</body>
接下來詳細說明這幾個標簽的含義：
1、<header>主要用于頁面的頭部的信息介紹，也可用于板塊頭部，通常是一些引導和導航信息。它不局限于寫在網頁頭部，也可以寫在網頁內容里面。通常<header>標簽至少包含（但不局限于）一個標題標記（<h1>-<h6>），還可以包括<hgroup>標簽，還可以包括表格內容、標識、搜索表單、<nav>導航等。
2、nav標簽代表頁面的一個部分，是一個可以作為頁面導航的鏈接組，其中的導航元素鏈接到其它頁面或者當前頁面的其它部分，使html代碼在語義化方面更加精確，同時對于屏幕閱讀器等設備的支持也更好
如圖所示，是一個簡單的導航，點擊鏈接可以實現跳轉，實現代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav</title>
<style>
li{
list-style: none;
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 20px;
padding-left: 10px;
float: left;
}
ul{
padding-left: 0px;
width:200px;
height: 40px;
background-color: #00A2E9;
}
a{
text-decoration: none;
color:#fff;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">信息頁</a></li>
<li><a href="#">主頁</a></li>
</ul>
</nav>
</body>
</html>
3、article是一個特殊的section標簽，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。一般來說，article會有標題部分（通常包含在header內），有時也會包含footer。article可以嵌套，內層的article對外層的article標簽有隸屬關系。例如，一篇博客的文章，可以用article顯示，然后一些評論可以以article的形式嵌入其中。
4、section定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其它部分。一般用于成節的內容，會在文檔流中開始一個新的節。它用來表現普通的文檔內容或應用區塊，通常由內容及其標題組成。但section元素標簽并非一個普通的容器元素，它表示一段專題性的內容，一般會帶有標題。 當我們描述一件具體的事物的時候，通常鼓勵使用article來代替section；當我們使用section時，仍然可以使用h1來作為標題，而不用擔心它所處的位置，以及其它地方是否用到；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div元素而非section。
5、aside標簽用來裝載非正文的內容，被視為頁面里面一個單獨的部分。它包含的內容與頁面的主要內容是分開的，可以被刪除，而不會影響到網頁的內容、章節或是頁面所要傳達的信息。例如引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分等等。
6、footer標簽定義section或document的頁腳，包含了與頁面、文章或是部分內容有關的信息，比如說文章的作者或者日期。作為頁面的頁腳時，一般包含了版權、相關文件和鏈接。它和<header>標簽使用基本一樣，可以在一個頁面中多次使用，如果在一個區段的后面加入footer，那么它就相當于該區段的頁腳了。
如下圖中CSDN的頁腳：
二、標簽選擇器
1、初始化標簽
標簽在初始化的時候，都會自帶一些樣式，比如說標簽h1，當我們使用這個標簽的時候，就已經有margin的樣式，如果想要自己定義樣式的話，就需要在初始化標簽的時候，清除所有的默認樣式。
哪些樣式是需要重置的？？？
- 1）與盒模型相關的樣式：border margin padding
- 2）標簽特有的樣式： ul>li ol>li
書寫原則： - 1）用到什么標簽就清除所用標簽的默認樣式。
- 2）建議不要直接將所有標簽全部加上。
- 3）不要將所有標簽全部統一設置一致的reset，需根據標簽默認樣式特征來分類設置。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body, h1, h2, h3, h4, h5, h6, p, dl, dd{
margin: 0;
}
ul, ol{
margin: 0;
padding: 0;
list-style: none;
}
img{
border: none;
vertical-align: top;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="">超鏈接</a>
<a href="">
<img src="img/1.png" alt="" />
</a>
<h1>標題 - logo</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>
<p>段落</p>
<strong>強調</strong>
<em>強調</em>
<ul>
<li>ul - 無序列表</li>
<li>列表項</li>
<li>ul的子集（下一級元素）只能是li</li>
</ul>
<ol>
<li>ol - 有序列表</li>
<li>列表項</li>
<li>ol的子集（下一級元素）只能是li</li>
</ol>
<dl>
<dt>dl-自定義列表；dt-自定義列表title</dt>
<dd>dd-自定義列表的列表項（信息）</dd>
</dl>
<mark>標記</mark>
</body>
</html>
2、標簽選擇器
- 1）id選擇器：當前頁面唯一，“#”
- 2）類(class）選擇器：當前頁面可以多個，“.”
- 3）標簽選擇器：當前頁面上所有標簽名為xxx的元素，比如div{},h1{},span{}等
- 4）群組選擇器：用逗號分隔，被逗號分隔的元素（選擇器）全部執行統一的代碼片段，比如div,p,h1{}
- 5）包含選擇器：
舉例說明：我想找到div中的span標簽
代碼段：
<div class="box">
span1
<span>span2</span>
</div>
所以包含選擇器的寫法就是： .box span{}
- 6）通配符*：找到頁面上符合規則的所有元素，但是不建議使用通配符。
3、選擇器的優先級
選擇器的優先級即代碼執行生效的順序，不同的選擇器的優先級不一樣，也就決定著你所寫的樣式是否生效的順序。
以下是選擇器的優先級：
行間樣式>id選擇器>類選擇器>標簽選擇器
接下來舉例說明：
我們把選擇器的優先級比作是價值，用人民幣的大小來表示，即：
1)行間樣式 $1000
2)id選擇器 $100
3)類選擇器 $10
4)標簽選擇器 $1
目標：看看我們所定義的樣式時哪個執行生效？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器的優先級</title>
<style>
/* 1 + 1 = 2*/
div div{
height: 100px;
background-color: yellow;
}
/* 100 + 1 = 101*/
#box div{
background-color: pink;
}
/* 10 + 1 = 11*/
.div1 div{
background-color: green;
}
</style>
</head>
<body>
<!--<div id="box" class="div1" style="background-color: red;"></div>-->
<div id="box" class="div1">
<div>div>div</div>
</div>
</body>
</html>
通過代碼中計算過程，我們可以得到最后的結果是第二條樣式生效，即背景顏色是粉色。
學習前端的同學注意了！！！
學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入前端學習交流群461593224，我們一起學前端！
