前言

通過學習，咱們再前期面對HTML的基礎標簽和CSS的基本知識的掌握和應用，現在我們為了能夠進一步提升自己的打代碼能力以及也要學會巧妙“偷懶”我們需要在此之前的基礎上學習HTML5和CSS3，在從我的角度來認知這個學習，我覺得就是學會多種方法來實作同一種效果，以此提高我們的制作效率，

一、對HTML5的學習

1.學習目標

HTML5其實就是在HTML中引入新特性，在HTML原先基礎上中引入新的標簽和表單，在這一塊我們需要明確掌握：說出3~5個HTML5新增布局和表單標簽

2.新增標簽與屬性

在使用這些新特性前需要我們注意：
這些新特性都有兼容性問題，基本是IE9+以上版本的瀏覽器才支持！

在之前做網頁前是否也會和我一樣頭痛，每一次div都需要給一個盒子取類名，哈哈哈，現在HTML5就能在這給你解放頭腦了！因為在HTML5中增加新的語意化標簽：
代碼如下（示例）：
在這里插入圖片描述
這些名字能夠直接在style中使用，不需要我們再頭大去類名啦！大致網頁的布局如下圖：

不過再使用中也需要給大家一點小tips！
在這里插入圖片描述
除了以上的新增標簽，我們為了頁面更具畫面感與讓使用者身臨其境，所以我們又增加了視頻標簽、音頻標簽，
視頻標簽：
代碼如下（示例）：

<video src="檔案地址/檔案名.mp4" controls="controls"></video>

在這里插入圖片描述

音頻標簽：
代碼如下（示例）：

<audio src="檔案地址/檔案名.mp3" controls="controls"></audio>

在這里插入圖片描述
在之前也有學習表單元素但我們相對學的比較基礎，如下圖：

現在我們新增了一些新的表單標簽
具有更多的功能并且讓它具有限制性，提高表單填寫內容的準確性，

下圖是新增的表單屬性
在這里插入圖片描述

二、對CSS3的學習

1.學習目標

CSS3同樣也是在CSS中引入新特性，在CSS原先基礎上引入新特性，在這一塊我們需要明確掌握：說出CSS的新增特性有哪些，

2.新增選擇器與屬性

屬性選擇器
代碼如下（示例）：style里的樣式

<style>
        /* 必須是input但是同時具有value這個屬性 選擇這個元素[] */
        
        input[value] {
            color: pink;
        }
        /* 只選擇type=text 文本框的input 選取出來 */
        
        input[type=text] {
            color: pink;
        }
        /* 選擇首先是div，然后具有class屬性，并且屬性值必須是icon開頭前的這些元素 */
        
        div[class^=icon] {
            color: pink;
        }
        
        section[class$=data] {
            color: blue;
        }
    </style>

代碼如下（示例）：body里的樣式

  <body>
    <!-- 1.利用屬性選擇器就可以不用借助于類或者id選擇器 -->
    <input type="text" value="請輸入用戶名">
    <input type="text">
    <!-- 2.屬性選擇器還可以選擇屬性=值的某些元素 ★這個是重點！！！ -->
    <input type="text" name="" id="">
    <input type="password" name="" id="">
    <!-- 3.屬性選擇器可以選擇屬性值開頭的某些元素 前面^-->
    <!-- div[class^=icon] -->
    <div class="icon1">小圖示1</div>
    <div class="icon2">小圖示2</div>
    <div class="icon3">小圖示3</div>
    <div class="icon4">小圖示4</div>
    <!-- 4.屬性選擇器可以選擇性值結尾的某些元素 后面$ -->
    <!-- section[class$=data] -->
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是哥斯拉</section>
    <section class="icon3-ico">那我是誰</section>
</body>

如圖總結上方代碼：
在這里插入圖片描述

對于選擇器中會有權重問題當div.icon1與section[class$=data] 權重相同時，網頁會依據HTML中的就近原則來實行，

結構偽類選擇器
nth-child(n)
nth-child(n)中n可以是數字，關鍵字和公式：

n如果是數字，就可以選擇第n個子元素，里面數字從1開始 n也可以是關鍵字：even 偶數，odd 奇數
表示父盒子里面的第一個first-child{ };
表示父盒子里面的最后一個last-child{ };
n也可以是公式：（公式里面的n是從0開始，但是第0個元素或者超出了元素的個數會被忽略）
如下圖：

nth-of-type(n)
nth-of-type(n)中n可以是數字，關鍵字和公式：

表示父盒子里面的第一個first-of-type{ };
表示父盒子里面的最后一個last-of-type{ };
n也可以是公式：（公式里面的n是從0開始，但是第0個元素或者超出了元素的個數會被忽略）
如下圖

nth-child(n) 與 nth-of-type(n) 的區別
參照代碼先感受一下：

<style>
        /* 會發現不產生效果
        因為nth-chil(1)先把所有盒子排一個序列
        執行的時候會發現第一個盒子不是div那就不會執行*/
        section div:nth-child(1) {
            background-color: pink;
        }

        /* nth-of-type(1)區別于nth-child(1)
         nth-of-type(1)會把指定的盒子div先找到再看時第幾個*/
        section div:nth-of-type(1) {
            background-color: gray;
        }
    </style>
</head>

<body>
    <section>
        <p>光頭強</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

section div:nth-child(1)設定樣式，先是給所有盒子排序，再看第一個盒子是否是div這個盒子，再代碼中第一個盒子是p標簽這個盒子，
section div:nth-of-type(1)設定樣式，把指定的盒子先找到再看排序，

偽類元素選擇器
在這里插入圖片描述
代碼展示：

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        div::before {
            /* content是必須要寫的 */
            content: "我before";
        }
        /*利用偽元素的好處就是可以不用嵌套盒子*/
        div::after {
            content: "偽元素";
        }
    </style>
</head>

<body>
    <div>
        是
    </div>
</body>