HTML5基礎(chǔ)之常用標(biāo)簽以及標(biāo)簽選擇器

在html中，標(biāo)簽非常多，比如說(shuō)列表，按鈕，圖片，文字等等，每一種標(biāo)簽都有自己的使用方法以及相關(guān)的約束條件。具體的標(biāo)簽可以直接到w3c的網(wǎng)站上查看，這里就簡(jiǎn)單了解一下html5的標(biāo)簽。

一、HTML5的新結(jié)構(gòu)標(biāo)簽

在之前的HTML頁(yè)面中，在布局方式中，大家基本上都是用Div+CSS。而搜索引擎去抓取頁(yè)面的內(nèi)容的時(shí)候，它只能猜測(cè)你的某個(gè)div內(nèi)的內(nèi)容是文章內(nèi)容容器，或者是導(dǎo)航模塊的容器，或者是作者介紹的容器等等。也就是說(shuō)整個(gè)HTML文檔結(jié)構(gòu)定義不清晰，HTML5中為了解決這個(gè)問(wèn)題添加了：頁(yè)眉、頁(yè)腳、導(dǎo)航、文章內(nèi)容等跟結(jié)構(gòu)相關(guān)的結(jié)構(gòu)元素標(biāo)簽。如下圖所示：

Paste_Image.png

首先我們來(lái)從視圖上認(rèn)識(shí)一下新結(jié)構(gòu)標(biāo)簽的顯示。在HTML5中，一個(gè)普通的頁(yè)面，會(huì)有頭部，導(dǎo)航，文章內(nèi)容，還有附著的右邊欄，還有底部等模塊。如下圖所示：

Paste_Image.png

相關(guān)的代碼有：

<body>  
    <header>header</header>  
    <nav>nav</nav>  
    <article>  
        <section>section</section>  
    </article>  
    <aside>aside</aside>  
    <footer>footer</footer>  
</body>

接下來(lái)詳細(xì)說(shuō)明這幾個(gè)標(biāo)簽的含義：
1、<header>主要用于頁(yè)面的頭部的信息介紹，也可用于板塊頭部，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫在網(wǎng)頁(yè)頭部，也可以寫在網(wǎng)頁(yè)內(nèi)容里面。通常<header>標(biāo)簽至少包含（但不局限于）一個(gè)標(biāo)題標(biāo)記（<h1>-<h6>），還可以包括<hgroup>標(biāo)簽，還可以包括表格內(nèi)容、標(biāo)識(shí)、搜索表單、<nav>導(dǎo)航等。

2、nav標(biāo)簽代表頁(yè)面的一個(gè)部分，是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組，其中的導(dǎo)航元素鏈接到其它頁(yè)面或者當(dāng)前頁(yè)面的其它部分，使html代碼在語(yǔ)義化方面更加精確，同時(shí)對(duì)于屏幕閱讀器等設(shè)備的支持也更好


如圖所示，是一個(gè)簡(jiǎn)單的導(dǎo)航，點(diǎn)擊鏈接可以實(shí)現(xiàn)跳轉(zhuǎn)，實(shí)現(xiàn)代碼如下：

<!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="#">首頁(yè)</a></li>  
        <li><a href="#">信息頁(yè)</a></li>  
        <li><a href="#">主頁(yè)</a></li>  
    </ul>  
</nav>  
</body>  
</html>

3、article是一個(gè)特殊的section標(biāo)簽，它比section具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個(gè)用戶評(píng)論等等。一般來(lái)說(shuō)，article會(huì)有標(biāo)題部分（通常包含在header內(nèi)），有時(shí)也會(huì)包含footer。article可以嵌套，內(nèi)層的article對(duì)外層的article標(biāo)簽有隸屬關(guān)系。例如，一篇博客的文章，可以用article顯示，然后一些評(píng)論可以以article的形式嵌入其中。

4、section定義文檔中的節(jié)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其它部分。一般用于成節(jié)的內(nèi)容，會(huì)在文檔流中開(kāi)始一個(gè)新的節(jié)。它用來(lái)表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊，通常由內(nèi)容及其標(biāo)題組成。但section元素標(biāo)簽并非一個(gè)普通的容器元素，它表示一段專題性的內(nèi)容，一般會(huì)帶有標(biāo)題。 當(dāng)我們描述一件具體的事物的時(shí)候，通常鼓勵(lì)使用article來(lái)代替section；當(dāng)我們使用section時(shí)，仍然可以使用h1來(lái)作為標(biāo)題，而不用擔(dān)心它所處的位置，以及其它地方是否用到；當(dāng)一個(gè)容器需要被直接定義樣式或通過(guò)腳本定義行為時(shí)，推薦使用div元素而非section。

5、aside標(biāo)簽用來(lái)裝載非正文的內(nèi)容，被視為頁(yè)面里面一個(gè)單獨(dú)的部分。它包含的內(nèi)容與頁(yè)面的主要內(nèi)容是分開(kāi)的，可以被刪除，而不會(huì)影響到網(wǎng)頁(yè)的內(nèi)容、章節(jié)或是頁(yè)面所要傳達(dá)的信息。例如引用、側(cè)邊欄、廣告、nav元素組，以及其他類似的有別與主要內(nèi)容的部分等等。

6、footer標(biāo)簽定義section或document的頁(yè)腳，包含了與頁(yè)面、文章或是部分內(nèi)容有關(guān)的信息，比如說(shuō)文章的作者或者日期。作為頁(yè)面的頁(yè)腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它和<header>標(biāo)簽使用基本一樣，可以在一個(gè)頁(yè)面中多次使用，如果在一個(gè)區(qū)段的后面加入footer，那么它就相當(dāng)于該區(qū)段的頁(yè)腳了。
如下圖中CSDN的頁(yè)腳：

Paste_Image.png

二、標(biāo)簽選擇器

1、初始化標(biāo)簽

標(biāo)簽在初始化的時(shí)候，都會(huì)自帶一些樣式，比如說(shuō)標(biāo)簽h1，當(dāng)我們使用這個(gè)標(biāo)簽的時(shí)候，就已經(jīng)有margin的樣式，如果想要自己定義樣式的話，就需要在初始化標(biāo)簽的時(shí)候，清除所有的默認(rèn)樣式。
哪些樣式是需要重置的？？？

  • 1）與盒模型相關(guān)的樣式：border margin padding
  • 2）標(biāo)簽特有的樣式： ul>li ol>li
    書寫原則：
  • 1）用到什么標(biāo)簽就清除所用標(biāo)簽的默認(rèn)樣式。
  • 2）建議不要直接將所有標(biāo)簽全部加上。
  • 3）不要將所有標(biāo)簽全部統(tǒng)一設(shè)置一致的reset，需根據(jù)標(biāo)簽?zāi)J(rèn)樣式特征來(lái)分類設(shè)置。
    如：
<!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>標(biāo)題 - logo</h1>  
        <h2>標(biāo)題</h2>  
        <h3>標(biāo)題</h3>  
        <h4>標(biāo)題</h4>  
        <h5>標(biāo)題</h5>  
        <h6>標(biāo)題</h6>  
          
        <p>段落</p>  
          
        <strong>強(qiáng)調(diào)</strong>  
        <em>強(qiáng)調(diào)</em>  
          
        <ul>  
            <li>ul - 無(wú)序列表</li>  
            <li>列表項(xiàng)</li>  
            <li>ul的子集（下一級(jí)元素）只能是li</li>  
        </ul>  
          
        <ol>  
            <li>ol - 有序列表</li>  
            <li>列表項(xiàng)</li>  
            <li>ol的子集（下一級(jí)元素）只能是li</li>  
        </ol>  
          
        <dl>  
            <dt>dl-自定義列表；dt-自定義列表title</dt>  
            <dd>dd-自定義列表的列表項(xiàng)（信息）</dd>  
        </dl>  
          
        <mark>標(biāo)記</mark>  
    </body>  
</html>

2、標(biāo)簽選擇器

  • 1）id選擇器：當(dāng)前頁(yè)面唯一，“#”
  • 2）類(class）選擇器：當(dāng)前頁(yè)面可以多個(gè)，“.”
  • 3）標(biāo)簽選擇器：當(dāng)前頁(yè)面上所有標(biāo)簽名為xxx的元素，比如div{},h1{},span{}等
  • 4）群組選擇器：用逗號(hào)分隔，被逗號(hào)分隔的元素（選擇器）全部執(zhí)行統(tǒng)一的代碼片段，比如div,p,h1{}
  • 5）包含選擇器：
    舉例說(shuō)明：我想找到div中的span標(biāo)簽
    代碼段：
<div class="box">  
    span1  
    <span>span2</span>  
</div>

所以包含選擇器的寫法就是： .box span{}

  • 6）通配符*：找到頁(yè)面上符合規(guī)則的所有元素，但是不建議使用通配符。

3、選擇器的優(yōu)先級(jí)

選擇器的優(yōu)先級(jí)即代碼執(zhí)行生效的順序，不同的選擇器的優(yōu)先級(jí)不一樣，也就決定著你所寫的樣式是否生效的順序。
以下是選擇器的優(yōu)先級(jí)：
行間樣式>id選擇器>類選擇器>標(biāo)簽選擇器
接下來(lái)舉例說(shuō)明：
我們把選擇器的優(yōu)先級(jí)比作是價(jià)值，用人民幣的大小來(lái)表示，即：
1)行間樣式 $1000
2)id選擇器 $100
3)類選擇器 $10
4)標(biāo)簽選擇器 $1
目標(biāo)：看看我們所定義的樣式時(shí)哪個(gè)執(zhí)行生效？

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>選擇器的優(yōu)先級(jí)</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>

通過(guò)代碼中計(jì)算過(guò)程，我們可以得到最后的結(jié)果是第二條樣式生效，即背景顏色是粉色。

Paste_Image.png

學(xué)習(xí)前端的同學(xué)注意了?。?！
學(xué)習(xí)過(guò)程中遇到什么問(wèn)題或者想獲取學(xué)習(xí)資源的話，歡迎加入前端學(xué)習(xí)交流群461593224，我們一起學(xué)前端！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,088評(píng)論 1贊 92
  • 首先是關(guān)于語(yǔ)義（Semantics）和默認(rèn)樣式的區(qū)別，默認(rèn)樣式是瀏覽器設(shè)定的一些常用tag的表現(xiàn)形式，語(yǔ)義化的主要...
    DecadeHeart閱讀 3,512評(píng)論 0贊 3
  • HTML 5的革新之一：語(yǔ)義化標(biāo)簽一節(jié)元素標(biāo)簽。 在HTML 5出來(lái)之前，我們用div來(lái)表示頁(yè)面章節(jié)，但是這些di...
    吳越公子閱讀 821評(píng)論 0贊 0
  • 今天周五，明天兒子又休息了，今晚我就沒(méi)管他，和他的同學(xué)開(kāi)心的玩了一晚上。放學(xué)回來(lái)吃了飯，就下樓去玩球去了，...
    六年級(jí)三班陳楓媽媽閱讀 298評(píng)論 0贊 0
  • 孩子一上小學(xué)，我們家長(zhǎng)又多了一份工作，那就是輔導(dǎo)孩子家庭作業(yè)。 現(xiàn)在小學(xué)生的作業(yè)，可不是我們那個(gè)年代的作...
    徐心老師閱讀 434評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容