普歌-HTML5+CSS3復習總結

一.HTML基礎
- 1.網頁開發工具
- 2.常用基本標簽
- - （1）文本標簽
  - （2）表格標簽
  - （3）串列標簽
  - （4）表單標簽
- 3.HTML5新增
- - (1)HTML5 新增的語意化標簽
  - (2）新增的多媒體標簽
  - (3)新增的input 型別
  - (4)新增的表單屬性
二.CSS
- 1.css選擇器
- - （1）css基礎選擇器
  - （2）css復合選擇器（參考選擇器）
- 2.css字體屬性
- 3.css文本屬性
- 4.css的引入方式
- 5.css元素顯示模式
- 6.css背景
- 7.css三大特性
- 8.頁面布局
- - （1）盒子模型
  - （2）浮動
  - （3）定位
- 9.css用戶界面樣式
- 10. vertical-align 屬性應用
- 11.溢位的文字省略號顯示
- 12.CSS3 的新特性
- - （1）屬性選擇器
  - （2）結構偽類選擇器
  - （3）偽元素選擇器
  - （4）2D轉換
  - （5）影片
  - （6）3D轉換
  - （7）瀏覽器私有前綴

一.HTML基礎

1.網頁開發工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

（1）<！DOCTYPE >標簽

它是檔案型別宣告，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁，
宣告位于檔案中的最前面的位置，處于< html> 標簽之前，
它不是一個HTML 標簽，是檔案型別宣告標簽，

（2）lang語言

用來定義當前檔案顯示的語言，
en定義語言為英語 , zh-CN定義語言為中文
對于檔案顯示來說，定義成en的檔案也可以顯示中文，定義成zh-CN的檔案也可以顯示英文

（3）charset 字符集

字符集(Character set)是多個字符的集合，以便計算機能夠識別和存盤各種文字，
上面語法是必須要寫的代碼，否則可能引起亂碼的情況，一般情況下，統一使用“UTF-8”編碼，

2.常用基本標簽

（1）文本標簽

標題

<h1>標題一共六級選,</h1>
<h2>文字加粗一行顯，</h2>
<h3>由大到小依次減，</h3>
<h4>從重到輕隨之變，</h4>
<h5>語法規范書寫后，</h5>
<h6>具體效果重繪見，</h6>

在這里插入圖片描述

<h1 align="對齊方式">文本內容</h1>

三種對齊方式：left，center，right

文本

在這里插入圖片描述

上標與下標：

<sup>上標標記內容</sup>
<sub>下標標記內容</sub>
例：
    x<sup>3</sup></br>
    2x<sub>2</sub>

在這里插入圖片描述

段落，水平線

<p>段落標簽</p>  //有較大空白縫隙
<br>換行標簽    //強制換行，單標簽
<hr>           //水平線標記

div和span標簽

<div> </div>     // 用來布局，但是現在一行只能放一個div，大盒子
<span> </span>  //用來布局，一行上可以多個span，小盒子

影像標簽和路徑

<img src="圖片的位置" >

屬性	屬性值	說明
src	圖片路徑	必須屬性
alt	文本	替換文本，圖片不能顯示的文字
title	文本	提示文本滑鼠放到影像上，顯示文字
width	像素	設定圖片的寬度
height	像素	設定影像的高度
border	像素	設定圖片的邊框粗細

 *相對路徑*：以參考檔案所在位置為參考基礎，圖片相對于HTML頁面的位置
 *絕對路徑*：是指目錄下的絕對位置，直接到達目標位置，通常是從**盤符**開始的路徑，

在這里插入圖片描述

超鏈接標簽

<a href="跳轉目標" target="目標視窗的彈出方式">文本或影像</a>

在這里插入圖片描述
鏈接分類：

1.外部鏈接
2.內部鏈接
3.空鏈接:如果當時沒有確定鏈接目標時，< a href="#"> 首頁< /a > ，
4.下載鏈接
5.網頁元素鏈接: 在網頁中的各種網頁元素，如文本、影像、表格、音頻、視頻等都可以添加超鏈接.
6.錨點鏈接: 點擊鏈接,可以快速定位到頁面中的某個位置，

（2）表格標簽

 <table>                             //是用于定義表格的標簽
        <tr>                         //定義表格中的行，必須嵌套在<table> </table>標簽中，
        <th>  </th>                  // 表格的表頭部分,加粗顯示
            <td>單元格內的文字</td>   // 定義表格中的單元格，必須嵌套在<tr></tr>標簽中，
            ...
        </tr>
        ...
    </table>

表格結構標簽

<thead></thead>：     //用于定義表格的頭部，
<tbody></tbody>：     //用于定義表格的主體，

合并單元格
跨行合并：rowspan=“合并單元格的個數”
跨列合并：colspan=“合并單元格的個數”

表格相關屬性：
在這里插入圖片描述

（3）串列標簽

無序串列

   <ul>
       <li></li>
   </ul>
//最常用，沒有固定的順序，默認有小圓點

有序串列

   <ol>
       <li></li>
   </ol>
 //有先后順序，默認有數字

自定義串列

        <dl>
            <dt>名詞1</dt>
            <dd>名詞1解釋1</dd>
            <dd>名詞1解釋2</dd>
        </dl>
//1. 一個名稱對應一個值 2.一個名稱對應多個值 3.多個名稱對應一個值

（4）表單標簽

表單的組成

提示資訊,表單域,表單控制元件（表單元素)

表單域

    <form action=“url地址” method=“提交方式” name=“表單域名稱”>
        各種表單元素控制元件
    </form>

在這里插入圖片描述

- 在我們寫表單元素之前,應該有個表單域把他們進行包含.
- 表單域是form標簽.

表單控制元件（1.input表單元素2.select表單元素3.textarea元素）

input 輸入表單元素在這里插入圖片描述

1. 剛打開頁面就默認顯示幾個文字：可以給這些表單元素設定value 屬性=“值”
2.一打開就讓某個單選按鈕或者復選框是選中狀態：checked 屬性：表示默認選中狀態， 添加checked="checked"
3.radio (或者checkbox）如果是一組，我們必須給他們命名相同的名字

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

 < label> 標簽
作用：點擊區域內就可以選擇 
代碼：< label for = "id"> < /label>

select下拉表單元素

    <select>
        <option>選項1</option>
        <option>選項2</option>
        <option>選項3</option>
        ...
    </select>

 1.< select> 中至少包含一對< option>
 2. 在<option> 中定義selected =“selected " 時，當前項為默認選中項，

textarea文本域元素

語法：

    <textarea rows="3" cols="20">
      文本內容
    </textarea>

1.通過<textarea> 標簽可以輕松地創建多行文本輸入框，
2.cols=“每行中的字符數”，rows=“顯示的行數”，我們在實際開發中不會使用，都是用CSS 來改變大小，

簡歷案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>個人資訊注冊</title>
</head>

<body>
    <h4 align="center">個人介紹 </h4>
    <table align="center">
        <tr>
            <td>姓名</td>
            <td>
                <input type="text" value="請輸入您的姓名">
            </td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>
                <input type="radio" name="sex" id="nan" checked="checked"><label for="nan"><img src="images/up.jpg"
                        width="10" />男
                    <input type="radio" name="sex" id="nv"><label for="nv"><img src="images/down.jpg" width="10" />女
            </td>
        </tr>
        <tr>
            <td>出生日期：</td>
            <td>
                <select>
                    <option>--請選擇年份--</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <select>
                    <option>--請選擇月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select> <select>
                    <option>--請選擇日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>籍貫</td>
            <td>
                <select>
                    <option>北京</option>
                    <option>重慶</option>
                    <option selected="selected">山西</option>
                    <option>山東</option>
            </td>
            </select>
        </tr>
        <tr>
            <td>個人愛好：</td>
            <td>
                <input type="checkbox" name="love">唱歌
                <input type="checkbox" name="love">畫畫
                <input type="checkbox" name="love">跳舞
            </td>
        </tr>

        <tr>
            <td>求職原因</td>
            <td>
                <textarea cols="30" rows="10">對公司的描述</textarea>
            </td>
        </tr>

        <tr>
            <td>手機號：</td>
            <td><input type="text"></td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="submit">
                <input type="reset" value="重新填寫">
            </td>
        </tr>

        <tr>
            <td>了解更多</td>
            <td><a href="#">關注公司</a> </td>
        </tr>
        <tr>
            <td>附件</td>
            <td>
                <h5>選拔標準</h5>
                <ul>
                    <li>態度認真</li>
                    <li>陽光開朗</li>
                    <li>專業技能突出</li>
                </ul>
            </td>
        </tr>
    </table>
</body>

</html>

在這里插入圖片描述

3.HTML5新增

(1)HTML5 新增的語意化標簽

< header>：頭部標簽
< nav>：導航標簽
< article>：內容標簽
< section>：定義檔案某個區域
< aside>：側邊欄標簽
< footer>：尾部

(2）新增的多媒體標簽

音頻：< audio>
視頻：< video>

(3)新增的input 型別

在這里插入圖片描述

(4)新增的表單屬性

在這里插入圖片描述

二.CSS

1.css選擇器

在CSS 中，可以根據選擇器的型別把選擇器分為基礎選擇器和復合選擇器，復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的，

（1）css基礎選擇器

標簽選擇器、類選擇器、id 選擇器、通配符選擇器

1.標簽選擇器

p {
  屬性：屬性值;
}

2.類選擇器

.red {
color: red;
}
   （1）結構需要用class屬性來呼叫class 類
   （2）可以在標簽class 屬性中寫多個類名
   （3）多個類名中間必須用空格分開

3.id選擇器

#nav {
color:red;
}
 (1)HTML 元素以id 屬性來設定id 選擇器，CSS 中id 選擇器以“#" 來定義，
 (2)id 屬性只能在每個HTML 檔案中出現一次，

4.通配符選擇器

* {
 margin: 0;padding: 0;
} 
它表示選取頁面中所有元素（標簽），

基礎選擇器	作用	特點	使用情況	用法
標簽選擇器	可以選出所有相同的標簽	不能差異化選擇	較多	p{}；
類選擇器	可以選出1個或多個標簽	可以根據需求選擇	非常多	.p{}；
id選擇器	一次只能選擇1個標簽	id屬性只能在每個HTML檔案出現一次	一般和js搭配	#nav{}；
通配符選擇器	選出所有的標簽	選擇的太多，有部分不需要	特殊情況使用	*{}；

（2）css復合選擇器（參考選擇器）

在這里插入圖片描述
注意：

鏈接偽類選擇器按照LVHA的循順序宣告:link－:visited－:hover－:active，記憶法：love hate 或者lv 包包hao，

在這里插入圖片描述

2.css字體屬性

在這里插入圖片描述

3.css文本屬性

(1)文本顏色

div {
 color：red;
 }

在這里插入圖片描述
（2）裝飾文本

div { 
text-decoration：underline；
}

在這里插入圖片描述
（3）文本縮進
首行縮進:

div { 
text-indent: 10px;
}
p { 
text-indent: 2em;
}
1.px像素相對長度單位，像素px是相對于顯示幕螢屏解析度而言的，
2.em是一個相對單位，就是當前元素1個文字的大小, 如果當前元素沒有設定大小，則會按照父元素的1 個文字大小，

(4) 行間距

p { 
line-height: 26px;
}
控制行高

（5）對齊方式

div {
 text-align: center;  居中
 }

在這里插入圖片描述

4.css的引入方式

（1）內部樣式表（嵌入式）

<style>
   div {
     color: red;
     }
</style>

（2）行內樣式表（行內式）

<div style="color: blue; font-size: 12px;">王俊凱</div>

（3）外部樣式表（鏈接式）

<link rel="stylesheet"  href="css檔案路徑">

在這里插入圖片描述

5.css元素顯示模式

在這里插入圖片描述

轉換為塊元素：display:block;
轉換為行內元素：display:inline;
轉換為行內塊：display: inline-block;

6.css背景

（1）背景顏色

background-color:顏色值; 
background-color:transparent; //透明色

（2）背景圖片

background-image : none；                    //無背景
background-image : url（../images/1.jpg);  //圖片地址

（3）背景平鋪

background-repeat: repeat | no-repeat | repeat-x | repeat-y;

在這里插入圖片描述
(4)背景圖片位置

background-position:x  y;   //引數代表的意思是：x 坐標和y 坐標，可以使用方位名詞或者精確單位

在這里插入圖片描述

(5)背景影像固定（背景附著）

background-attachment :scroll;   //隨物件內容滾動
background-attachment :fixed;    //影像固定

（6）背景影像復合寫法

  background: -背景顏色  -背景圖片地址 -背景平鋪 -背景影像滾動 -背景圖片位置;

background: transparent url(image.jpg) repeat-y  fixed  top ;

（7）背景顏色半透明

background: rgba(0, 0, 0,.3);

最后一個引數是alpha 透明度，取值范圍在0~1之間，
在這里插入圖片描述

7.css三大特性

（1）層疊性

```
 樣式沖突，遵循就近原則
```

（2）繼承性

行高可以跟單位也可以不跟單位

沒有手動指定文字大小，則會繼承父親的文字大小

（3）優先級
在這里插入圖片描述

8.頁面布局

（1）盒子模型

CSS 盒子模型本質上是一個盒子，封裝周圍的HTML 元素，它包括：邊框、外邊距、內邊距、和實際內容，

邊框

在這里插入圖片描述

border-style:solid;         //實線
border-style:dashed;        //虛線
border-style:dotted;        //點線

內邊距
padding屬性用于設定內邊距，即邊框與內容之間的距離，

padding屬性（簡寫屬性）可以有一到四個值，

在這里插入圖片描述

外邊距
margin屬性用于設定外邊距，即控制盒子和盒子之間的距離，

外邊距可以讓塊級盒子水平居中，但是必須滿足兩個條件：
①盒子必須指定了寬度（width），
②盒子左右的外邊距都設定為auto ，margin: 0 auto;

注意：以上方法是讓塊級元素水平居中，行內元素或者行內塊元素水平居中給其父元素添加text-align:center ，
圓角邊框

border-radius:length;

引數值可以為數值或百分比的形式，
分開寫為：border-top-left-radius（左上角）、border-top-right-radius（右上角）、border-bottom-right-radius（右下角）和border-bottom-left-radius(左下角)
盒子陰影
文字陰影

（2）浮動

為什么需要清除浮動？

①父級沒高度，②子盒子浮動了，③影響下面布局了，

（3）定位

總結
定位疊放次序

選擇器{ z-index: 1; }

1.如果屬性值相同，則按照書寫順序，后來居上，
2.數字后面不能加單位
3.只有定位的盒子才有z-index 屬性

元素的顯示與隱藏

1.display 屬性

display: none ；隱藏物件
display：block ；除了轉換為塊級元素之外，同時還有顯示元素的意思，
隱藏元素后，不占有原來的位置，

2.visibility 可見性

visibility：visible ; 元素可視
visibility：hidden; 元素隱藏
隱藏元素后，繼續占有原來的位置，

3.overflow 溢位顯示隱藏
在這里插入圖片描述

9.css用戶界面樣式

（1）滑鼠樣式cursor

li {cursor: pointer; }

在這里插入圖片描述
（2）輪廓線outline

input {outline: none; }

給表單添加outline: 0; 或者outline: none; 樣式之后，就可以去掉默認的藍色邊框，

(3)防止拖拽文本域resize

textarea{ resize: none;}

10. vertical-align 屬性應用

vertical-align 屬性經常用于設定圖片或者表單(行內塊元素）和文字垂直對齊，
官方解釋：用于設定一個元素的垂直對齊方式，但是它只針對于行內元素或者行內塊元素有效，

vertical-align : baseline | top | middle | bottom ;

在這里插入圖片描述

vertical-align 屬性設定為middle 就可以讓文字和圖片垂直居中對齊了，

11.溢位的文字省略號顯示

(1). 先強制一行內顯示文本*/white-space: nowrap; （默認normal 自動換行）
(2). 超出的部分隱藏overflow: hidden;
(3). 文字用省略號替代超出的部分text-overflow: ellipsis;

12.CSS3 的新特性

（1）屬性選擇器

屬性選擇器可以根據元素特定屬性的來選擇元素，這樣就可以不用借助于類或者id選擇器，

在這里插入圖片描述

（2）結構偽類選擇器

結構偽類選擇器主要根據檔案結構來選擇器元素，常用于根據父級選擇器里面的子元素

在這里插入圖片描述

nth-child（n）選擇某個父元素的一個或多個特定的子元素（重點）
n 可以是數字，關鍵字和公式

（3）偽元素選擇器

在這里插入圖片描述

（4）2D轉換

移動：translate

transform: translate(x,y);       //沿著X 和Y 軸移動元素 
transform: translateX(n);          
transform: translateY(n);

translate最大的優點：不會影響到其他元素的位置
translate中的百分比單位是相對于自身元素的translate:(50%,50%);
對行內標簽沒有效果

旋轉：rotate

transform:rotate(度數);

rotate里面跟度數，單位是deg 比如rotate(45deg)
角度為正時，順時針，負時，為逆時針
默認旋轉的中心點是元素的中心點

縮放：scale

transform:scale(x,y);

默認以中心點縮放的，而且不影響其他盒子

2D 轉換中心點

transform-origin: x y;

2D 轉換綜合寫法

1.同時使用多個轉換，其格式為：transform: translate() rotate() scale() …等，
2. 其順序會影轉換的效果，（先旋轉會改變坐標軸方向）
3. 同時有位移和其他屬性的時候，記得要將位移放到最前面

（5）影片

影片的基本使用

用keyframes 定義影片

@keyframes 影片名稱{ 
  0%{        width:100px;  
   }   
    100%{        width:200px;   
    }
 }

再使用（呼叫）影片

div {    
   width: 200px;   
   height: 200px;     
   background-color:blue;      
   /*呼叫影片*/     
  animation-name: 影片名稱;      
   /*持續時間*/    
  animation-duration: 持續時間;   
   }

影片常用屬性

屬性	描述
@keyframes	規定影片，
animation	所有影片屬性的簡寫屬性，除了 animation-play-state 屬性，
animation-name	規定 @keyframes 影片的名稱，
animation-duration	規定影片完成一個周期所花費的秒或毫秒，默認是 0，
animation-timing-function	規定影片的速度曲線，默認是 “ease”，
animation-delay	規定影片何時開始，默認是 0，
animation-iteration-count	規定影片被播放的次數，默認是 1，
animation-direction	規定影片是否在下一周期逆向地播放，默認是 “normal”，alternate逆播放
animation-play-state	規定影片是否正在運行或暫停，默認是 “running”，
animation-fill-mode	規定當影片結束后狀態，保持forwards回到起始backwards

影片簡寫屬性

animation：影片名稱持續時間運動曲線何時開始播放次數是否反方向影片起始或者結束的狀態;

 animation: myfirst 5s linear 2s infinite alternate;

速度曲線細節

animation-timing-function：規定影片的速度曲線，默認是“ease”

值	描述
linear	影片從頭到尾的速度是相同的，
ease	默認，影片以低速開始，然后加快，在結束前變慢，
ease-in	影片以低速開始，
ease-out	影片以低速結束，
ease-in-out	影片以低速開始和結束，
steps()	指定了時間函式中的間隔數量（步長）

（6）3D轉換

3D位移: translate3d(x,y,z)

translform:translateX(100px);    //在x軸上移動,水平向右
translform:translateY(100px);    //在Y軸上移動,垂直向下
translform:translateZ(100px);    //在Z軸上移動,垂直螢屏
transform:translate3d(x,y,z);

3D旋轉: rotate3d(x,y,z)

transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
transform: rotate3d(x,y,z);

透視: perspective

透視寫到被觀察元素的父盒子上面

perspective：500px;

3D呈現 transfrom-style

transform-style :flat;          //默認值，子元素將不保留其 3D 位置，
transform-style :preserve-3d;   //子元素將保留其 3D 位置,在父級元素定義，但是影響的是子元素，

3D轉換方法

函式	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定義 3D 轉換，使用 16 個值的 4x4 矩陣，
translate3d(x,y,z)	定義 3D 轉化，
translateX(x)	定義 3D 轉化，僅使用用于 X 軸的值，
translateY(y)	定義 3D 轉化，僅使用用于 Y 軸的值，
translateZ(z)	定義 3D 轉化，僅使用用于 Z 軸的值，
scale3d(x,y,z)	定義 3D 縮放轉換，
scaleX(x)	定義 3D 縮放轉換，通過給定一個 X 軸的值，
scaleY(y)	定義 3D 縮放轉換，通過給定一個 Y 軸的值，
scaleZ(z)	定義 3D 縮放轉換，通過給定一個 Z 軸的值，
rotate3d(x,y,z,angle)	定義 3D 旋轉，
rotateX(angle)	定義沿 X 軸的 3D 旋轉，
rotateY(angle)	定義沿 Y 軸的 3D 旋轉，
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉，
perspective(n)	定義 3D 轉換元素的透視視圖，

（7）瀏覽器私有前綴

內核	私有前綴	應用瀏覽器
Gecko內核	前綴為 -moz-	火狐瀏覽器
Webkit內核(谷歌內核)	前綴為 -webkit-	chrome瀏覽器、safari瀏覽器、360極速、獵豹、世界之窗
Trident內核	前綴為 -ms-	IE瀏覽器
Presto內核	前綴 -o-	opera瀏覽器

~ 喜歡的小伙伴點個贊唄，評論區留下寶貴的意見-謝謝吶?~

如果文章當中有問題，或者有什么好的意見，大家可以指出來，一起學習，
本文著作權歸作者所有，歡迎轉載，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/272907.html

標籤：其他

上一篇：前端HTML5十大新特性詳細總結

下一篇：vue post msg: "未知例外，請聯系管理員", code: 500}

普歌-前端復習總結HTML+CSS-超詳細，超全面（內容較多，建議收藏）

普歌-HTML5+CSS3復習總結

一.HTML基礎

1.網頁開發工具

2.常用基本標簽

（1）文本標簽

（2）表格標簽

（3）串列標簽

（4）表單標簽

3.HTML5新增

(1)HTML5 新增的語意化標簽

(2）新增的多媒體標簽

(3)新增的input 型別

(4)新增的表單屬性

二.CSS

1.css選擇器

（1）css基礎選擇器

（2）css復合選擇器（參考選擇器）

2.css字體屬性

3.css文本屬性

4.css的引入方式

5.css元素顯示模式

6.css背景

7.css三大特性

8.頁面布局

（1）盒子模型

（2）浮動

（3）定位

9.css用戶界面樣式

10. vertical-align 屬性應用

11.溢位的文字省略號顯示

12.CSS3 的新特性

（1）屬性選擇器

（2）結構偽類選擇器

（3）偽元素選擇器

（4）2D轉換

（5）影片

（6）3D轉換

（7）瀏覽器私有前綴