HTML5基礎之常用標籤以及標籤選擇器
阿新 • • 發佈：2018-12-26
在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>
如圖所示，是一個簡單的導航，點選連結可以實現跳轉，實現程式碼如下：
3、article是一個特殊的section標籤，它比section具有更明確的語義，它代表一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用。例如一篇完整的論壇帖子，一篇部落格文章，一個使用者評論等等。一般來說，article會有標題部分（通常包含在header內），有時也會包含footer。article可以巢狀，內層的article對外層的article標籤有隸屬關係。例如，一篇部落格的文章，可以用article顯示，然後一些評論可以以article的形式嵌入其中。 4、section定義文件中的節。比如章節、頁首、頁尾或文件中的其它部分。一般用於成節的內容，會在文件流中開始一個新的節。它用來表現普通的文件內容或應用區塊，通常由內容及其標題組成。但section元素標籤並非一個普通的容器元素，它表示一段專題性的內容，一般會帶有標題。<!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>
當我們描述一件具體的事物的時候，通常鼓勵使用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> <div class="box">
span1
<span>span2</span>
</div><!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>
