HTML

什麼是網頁？

網頁是指在因特網根據一定的規則展示特定內容的數據，就是html文件;

網頁的構成：

圖片，文字，超鏈接，聲音，視頻等元素組成

什麼HTML（記住）？

Html是超文本標記語言，不是編程語言，是用來描述網頁的一種語言，是以標籤格式組成的一種標記語言

網頁形成的過程

前端人員開發代碼 --- 瀏覽器顯示代碼（解析、渲染）---- 生成web頁面

常見的瀏覽器內核和常見5大瀏覽器

IE內核：Trident
火狐內核： Gecko
蘋果內核：Webkit
谷歌/歐朋：Blink

內核的作用：讀取網頁的內容；

Web標準

使用web標準原因

web標準是由W3C組織和其他標準化組織制定的一系列標準的集合
由於瀏覽器的內核不同，解析代碼時候可能會不統一，我們可以通過web標準規範各大瀏覽器的解析規範，達到元素最終顯示的樣式統一；

web標準的組成：

1. 結構標準 html
2. 表現標準（樣式標準） css
3. 行爲標準 javascript

HTML語法規範

HTML標籤是由尖括號<>包圍的關鍵字
HTML標籤通常有雙標籤和單標籤兩種
1. 成對出現的 --- 稱爲雙標籤 ,一個開始標籤一個結束標籤; 例如：<html></html>
2. 單獨出現的 --- 稱爲單標籤，只有開始標籤沒有結束標籤；例如：<br />
標籤關係：分爲包含關係和並列關係
包含關係（父子關係）:有父子級嵌套關係的盒子
並列關係（兄弟關係）:並列的兄弟關係；

HTML基本結構

<html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

一對html標籤嵌套head和body標籤，heade標籤裏面的內容是給瀏覽器解析的用戶是看不見的除了title，body裏面的內容是給用戶看的，會全部渲染到瀏覽器中；

網頁的開發工具

VS Code的使用
新建文件 Ctrl+N，建議大家使用點擊+好完成
保存 Ctrl+S ，必須保存爲.html文件
Ctrl+加號，Ctrl+減號可以縮放視圖
生成骨架:英文輸入！按下Tab鍵即可；

默認結構代碼

DOCTYPE:聲明文檔類型告訴瀏覽器使用哪種HTML版本來顯示網頁
lang：定義文檔的顯示哪個國家的語言
charset：字符的集合計算機能夠識別和存儲的文字

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

標籤語義化

在合適的地方給個最合理的標籤可以讓頁面結構更加清晰

常用標籤

標題標籤從h1-h6 標題使用並且依據重要性遞減
段落標籤是p標籤根據文檔分成若干個段落
換行標籤br：強制換行
注意：
01、標題標籤在使用的時候，h1標籤一個頁面最好只能出現一次，並且只放網站logo，h2標籤最好一個頁面最多出現兩次，主要放權重高的標題；h3~h6標籤可以隨意使用；
02、段落標籤可以自動換行，兩個標籤之間有間隙；

關於瀏覽器對空格和回車換行的解析

瀏覽器在解析代碼的時候對空格只解析一個，如果想要多個空格就用特殊符號 來設置，對回車換行解析爲一個空格，想要換行就用<br >完成；

文本格式化標籤

重點：加粗和傾斜

兩大布局標籤：div與span

div標籤用來佈局但一行只能放一個div，主要是用來做大框架佈局使用
span標籤用來佈局一行可以放多個盒子，主要用來實現特殊效果的文字或者小圖標等；

圖片標籤img

src 是必須要寫的、

alt 是圖片顯示錯誤的時候顯示對應文本

title 是鼠標劃上圖片提示文本

width 圖片的寬度

height 圖片的高度

border 圖片邊框（不要使用）

注意：
01、圖片的src屬性是必須要書寫的
02、圖片設置寬高的時候，我們只需要設置寬度即可，高度不用設置會自己等比例進行縮放
03、圖片可以同時書寫多個屬性，只需要用空格隔開即可

目錄文件夾：實際開發中我們的文件管理文件夾，一般在裏面我們會新建css文件夾、img文件夾、upload文件夾、js文件夾、fonts文件夾

路徑

定義：路徑可以理解爲：從文件自身出發去查找目標文件；
路徑分爲相對路徑和絕對路徑
絕對路徑：帶有本地盤符的路徑和在線的http://wagnzhi
相對路徑：同級路徑、上級路徑、下級路徑
1. 同級路徑：文件和目標文件是並列的關係，直接 src=“文件名稱”；
2. 下級路徑：文件和目標文件的父級盒子是並列關係，src=“目標文件的父級/目標文件名稱”
3. 上級路徑：文件的父級盒子和目標文件的父級盒子是並列關係，src需要通過../先出來一級再去查找圖片對應的路徑 --- src=“../文件父級/文件名稱”，上級路徑一般在外部鏈接的css中查找背景圖時經常用到；

絕對路徑分爲兩種：
帶有盤符的路徑：絕對不能使用，因爲每個的電腦硬盤只能自己訪問，別人是訪問不了的
在線網絡地址：可以使用，但是使用的時候必須書寫http://前綴，但是要注意如果在線網站掛了該鏈接就不生效了；

例如：http://www.itcast.cn/

超鏈接標籤

超鏈接標籤a：雙標籤， <a href="相對路徑"></a>
1. href標籤是必須要書寫屬性
2. target屬性可以控制超鏈接a的打開方式，target=“_blank”新的窗口打開頁面
鏈接分類：
1. 1. 外部鏈接: 例如 < a href="http:// www.baidu.com "> 百度</a >
2. 2. 內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可（其實就是咱們的相對路徑），例如 < a href="index.html"> 首頁 </a >
3. 3. 空鏈接: 如果當時沒有確定鏈接目標時，< a href=“#”> 首頁 </a >

假鏈接：<a href="javascript:;)" val="1">常規體檢</a>

注意：空鏈接#表示將當前的頁面重新刷新加載了一次，假鏈接javascript:;表示執行了一個空的JS語句，頁面不刷新；

1. 4. 下載鏈接: 如果 href 裏面地址是一個文件或者壓縮包，會下載這個文件。
2. 5. 網頁元素鏈接: 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接.

錨點鏈接

作用：實現了頁面的內部跳轉；

第一步：確定要跳轉的目標用id標記 ==== 在開始標籤身上書寫id=’id名稱’

第二步：綁定錨點按鈕用超鏈接a，href=‘#id名稱’；

註釋快捷鍵 Ctrl+？

Html註釋
Css註釋 /*註釋內容*/

特殊符號

空格  

左尖括號 < === <

右尖括號 > === >

版權 ©

人民幣 ¥

表格

表格的主要作用：

表格不是用來佈局頁面的,而是用來展示數據的數據;

表格的基本語法：

table表示整個表格的整體，tr表示表格的行，td表示表格的單元格（列），tr裏面也可以嵌套th表頭
<table>
<tr>
<th>表頭1</th>
<th>表頭2</th>
</tr>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
</table>

表頭標籤th：

一般表頭單元格位於表格的第一行或第一列，表頭單元格里面的文本內容加粗居中顯示.

表格的相關屬性：

居中：align=“center” 邊框：border
內容到單元格周邊的距離：cellpadding
單元格和單元格之間的距離：cellspacing
寬：width
表格結構標籤(瞭解）：
1. thead ：頭部標籤
2. tbody：主體內容標籤
3. tfoot：表格底部標籤

表格標題caption

<table>
<caption>
<h2>個人簡歷</h2>
</caption>
<tr>
<td></td>
</tr>
</table>

合併單元格

跨行合併單元格 rowspan
跨列合併單元格 colspan
合併單元格三步曲：
第一步：先確定是跨行還是跨列合併，如果是跨行合併rowspan從上到下的合併，如果是跨列合併colspan從左到右的合併
第二步：找到目標單元格，在開始單元格上書寫跨行或者跨列，寫上合併的格子： --- <td colspan=“2”></td>
第三步：刪除多餘的單元格；

列表

無序列表（最常用）

結構：ul嵌套li，ul裏面只能嵌套li，li裏面可以嵌套任何標籤；

<ul>

</ul>

實際工作中：無序列表用的最多，主要做圖文列表，導航、文字列表等；

有序列表

結構：ol嵌套li，ol裏面只能嵌套li，li裏面可以嵌套任何標籤；

<ol>

</ol>

有序列表實際工作中不使用，但是我們會在做滾動圖片的時候會使用一下；

自定義列表（項目列表）

結構： dl嵌套dt和dd兩個標籤，dt表示描述的標題，dd表示描述的說明；

<dl>

</dl>

自定義列表的使用技巧：

01 一個dl嵌套一個dt和多個dd，相當於中國的一詞多義；

02 一個dl裏面可以嵌套多對的dt和dd；

實際開發中自定義列表建議大家只做下面的效果

表單

作用目的：收集用戶信息；

表單的組成：

提示文本、表單控件、表單域（form）

表單域form

1、作用：在HTML中，form標籤被用於定義表單域，以實現用戶信息的收集和傳遞，form中的所有內容都會被提交給服務器。

2、默認屬性：

action=“url地址” ----- 用於指定接收並處理表單數據的服務器程序的url地址。

method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交；

name=“名字” 設置不同的取值名稱用於後臺提交；

注意：一個頁面中可能會出現多個form標籤，我們需要用添加name屬性設置不同的表單名稱來區分；

以後只要是書寫表單效果就要書寫form表單域標籤進行包裹

input表單控件

input標籤是單標籤，我們可以通過更改input的type屬性值能實現不同的功能’

文本框：input的type取值爲text

文本框: <input type="text">

密碼框：input的type取值爲password

密碼： <input type="password">

單選按鈕：input的type取值爲type=“radio”

單選： <input type="radio">男 <input type="radio"> 女

如果想要實現單選效果我們就需要給input標籤設置相同的name，歸爲一類；

單選：<input type="radio" name="sex">男 <input type="radio" name="sex"> 女

複選按鈕：input的type取值type=“checkbox”

複選框：<input type="checkbox"> 吃飯<input type="checkbox"> 睡覺

實際開發找那個複選按鈕也要設置相同的name

複選框：<input type="checkbox" name="aihao"> 吃飯<input type="checkbox" name="aihao"> 睡覺

實際開發中想要實現單選按鈕和複選按鈕的默認選中我們就設置屬性

checked=“checked”，因爲屬性=屬性值的我們可以在書寫的時候吧屬性值省略不寫，但是我們建議大家寫全；

單選： <input type="radio" name="sex" checked="checked">

單選： <input type="radio" name="sex" checked>

input按鈕控件

提交按鈕： type=“submit”

可以設置自己的value值也可以用默認的；

重置按鈕： type=“reset”

可以設置自己的value值也可以用默認的；

普通按鈕： type=“button”

必須要自己設置value值；

圖片按鈕： type=“image“

src屬性必須書寫查找圖片路徑；

文件域名： type=“file”

上傳文件使用；

標籤按鈕button

<button>我也是按鈕哦</button>

label標籤

1、作用：提高用戶體驗，擴大input表單的可操作性，點擊文字可以直接將光標定到輸入框，label不是表單標籤；

2、使用方法：

用for 屬性規定 label 與哪個表單元素綁定 ---- <label for=“nan”>男</label> <input type=“radio” name=“sex” id=“nan“ />

可以簡單的理解爲：在表單身上用id標準位置，然後在label上用for調用；

只用label擴大表單元素的可操作區域的時候，for的值一定要和id的值相同；

select下拉表單

下拉列表的結構：一對select標籤嵌套多對的option標籤

</select>

如果option有selected=“selected”表示默認選中；

</select>

textarea文本域標籤

是雙標籤，裏面可以直接書寫默認文字，而且不要回車換行，如果回車換行會出現文字前面出現大量的空格；

文本框input和文本域textarea的區別：

input只能顯示一行文本，單標籤，通過value設置默認值，一般適用於用戶名，暱稱，密碼等；

textarea可以顯示多行文本，雙標籤，一般適用於留言板等；

input常見的幾個屬性

name屬性：在存在多個input表單的時候，設置不同的name取值進行區別，一般是後臺工作人員去使用；

value屬性：設置默認的值；一般的input標籤都可以上設置，是只會在輸入內容的控件上顯示，如果想要給密碼框password設置默認的文字我們需要用到placeholder屬性設置，屬於佔位符屬性設置；

密碼： <input type="password" placeholder="請輸入密碼" >

單選按鈕和多選實現默認選中：設置checked=“checked”

限制表單最多輸入的文字長度：maxlenght=“number”

---- 比如 <input type=“text” max-length=“6” >表示最多隻能輸入6個字符長度

===== Css階段 ====

Css的概述（作用）：

Cascading Style Sheets，簡稱層疊樣式表，主要是用來進行頁面的版面佈局和外觀樣式的美化；

使用css的價值：

能夠將結構html和樣式css分離書寫，簡化代碼，提高可閱讀性；

Css的語法結構

選擇器 { 屬性1:屬性值; 屬性2:屬性值;…… }

Css的書寫位置

目前我們將css書寫在一對style標籤中，放在head標籤中title標籤下面
注意：css屬性和屬性值之間要用冒號:連接，每一個屬性和屬性之間要用封號隔開；
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 選擇器 {css} */
p {
font-size: 30px;
}
</style>
</head>

css代碼風格

展開形式和緊湊形式，實際開發中推薦大家使用展開形式
樣式書寫都要小寫，屬性值前面，冒號後面，保留一個空格
選擇器和大括號中間保留空格
<style>
p {
font-size: 30px;
color: red;
}
</style>

css選擇器

作用：選中標籤，設置樣式；

選擇器的分類

選擇器分爲：基礎選擇器和複合選擇器

基礎選擇器：標籤選擇器、類選擇器、id選擇器

複合選擇器：後代選擇器、並集選擇器、屬性選擇器、指定標籤選擇器等；

標籤選擇器定義

指用HTML標籤名稱作爲選擇器，按照標籤名稱分類，爲頁面中的某一類標籤指定統一的樣式
也可以簡答理解爲：直接用標籤名稱選中元素設置樣式

注意：標籤選擇器在實際開發中不建議單獨直接使用，因爲會將頁面中該標籤全部選中，如果要使用就建議用後代選擇器來選中；

類選擇器

類選擇器使用有一個過程：
1. 01 定義：在css裏面用點“ . ” + 類名稱 +{ css鍵值對 } 進行樣式定義;
2. 02 調用：在html裏面哪個標籤需要，就在開始標籤敲空格class=“類名稱”進行調用；
Css類名調用：
1. 實際開發中類名稱是可以重複調用的，前提條件是兩個盒子樣式完全一致
類選擇器的命名規則：
1. 不能用純數字、數字開頭的、中文命名,可以用數字結尾；
2. 命名最好有意義，儘量讓別人一眼就能知道這個類名的目的；
3. 長名稱或者詞組可以使用橫線或者下劃線連接命名；

記憶口訣：樣式點定義，結構類調用，一個或多個，開發最常用；

<style>

/* .類名稱 { css樣式} */

.p1 {

font-size: 60px;

color: #f00;

}

</style>

<body>

</body>

類選擇器特殊使用-多類名

一個標籤身上只能使用一個class，如果想要調用多個類名我們可以在一個class裏面直接以空格隔開直接書寫另一個類名稱即可；
<div class="red font30">老王最好</div>

以上代碼表示一個div盒子同時具有了兩個類樣式

id選擇器

id選擇器使用有一個過程：

定義：在css裏面用 “ # ” + id名稱 +{ css鍵值對 } 進行樣式定義;

調用：在html裏面哪個標籤需要，就在開始標籤敲空格id=“id名稱”進行調用；

id選擇器的命名規則：不能用純數字、數字開頭的、中文命名；

實際開發中書寫靜態頁面是不使用ID選擇器的，我們在後期的JS學習中會用id選擇器獲取元素使用；

類選擇器和id選擇器的區別：

類選擇可以重複使用，只要樣式一致就可以重複的使用同一個類名稱；

id選擇器是唯一的不能重複使用，一個id名稱一個頁面只能出現一次；

通配符選擇器 *

一個*表示選中所有標籤，匹配頁面的所有標籤，降低頁面得到響應時間，

實際開發中我們會在css的最前面設置以下代碼清空默認的內外邊距；

/* 選中了多用的標籤並且設置默認的內外邊距爲0 */

* {

margin: 0;

padding: 0;

}

Css文字控制屬性

文字字體 font-family

取值：可以是中文（要用英文的引號引起來），英文（如果英文是由多個單詞構成也要用英文引號引起來）；換可以同時設置多個字體，每一個字體之間用英文的逗號隔開；

font-family: '微軟雅黑','宋體';

文字大小 font-size

取值是實際的像素值，必須要跟上px單位

font-size: 60px;

文字的加粗 font-weight

取值有兩個： bold 700 實際工作中建議大家使用700

font-weight: bold;

font-weight: 700;

文字不加粗 font-weight

在實際的開發中有些標籤默認是加粗的，比如h標題標籤和加粗標籤b和strong，我們可以設置他們不加粗

我們可以直接設置font-weigth是取值有兩個： normal 和 400 實際開發中建議大家使用400；

font-weight: normal;

font-weight: 400;

文字的傾斜樣式 font-style

取值爲 italic 可以設置文字傾斜

font-style: italic;

文字不傾斜 font-style

實際的開發中有兩個標籤i和em是默認傾斜的，往往我們不需要他們傾斜

我們將font-style的取值設置爲normal就可以實現不傾斜；

實際的開發中我們會在css的最前面設置以下代碼，直接將em和i設置爲不傾斜，方便我們的佈局使用；

em,

i {

font-style: normal;

}

文字的綜合寫法font

綜合寫法：font：是否傾斜是否加粗文字大小/行高字體；
綜合寫法注意:

使用font的綜合書寫的時候一定要按照順序書寫，屬性之間用空格隔開，如果沒有的屬性可以省略不寫，文字大小和字體是必須要書寫的；一般的傾斜和加粗沒有就直接不寫不要寫normal；

實際工作中一般只用：font:文字大小字體；

文本的顏色color

color可以設置字體顏色，取值可以是hi預定義的英文單詞，也可以是16進制寫法一定要以#開頭，還可以設置爲rgb取值，範圍是0-255之間；

color: #f00;

color: red;

color: rgb(255, 0, 255);

文本對齊text-align

實際開發中我們可以設置文本在父級盒子中對齊方式，有居左、居中、居右三種對齊方式；

文本默認是居中顯示 text-align:left; 我們不需要設置

文本居中（常用）

/* 文本居中 */

text-align: center;

注意：可以讓父級盒子裏面的文字還有圖片，input表單控件居中顯示,需要將這個屬性加到父級盒子身上；

文本居右

/* 文本居右 */

text-align: right;

文本線條裝飾text-decoration

下劃線（重點）

text-decoration: underline;

上劃線

text-decoration: overline;

沒有線（重點）

text-decoration: none;

超鏈接a有默認的下劃線，開發的時候我們需要將其幹掉，我們一般會在css的最前面設置以下代碼，保證頁面中所有的a沒有默認的下劃線

a {

text-decoration: none;

}

刪除線

text-decoration: line-through;

文本首行縮進 text-indent

取值爲實際的數值，單位是em，em單位的大小是當前文字的文字大小，那麼2em表示兩個字，也可以去像素；

text-indent: 2em;

行間距（行高）line-height

行高就是兩行文字之間的距離，我們直接設置line-height的取值就可以；

line-height: 30px;

測量文本的行高

在PS中以第一行的文字的開始（結束）到另一行的文字的開始（結束）的高度的就是行高；

p {

width: 600px;

background: gold;

text-indent: 2em;

line-height: 30px;

}

css的引入方式

行內樣式

直接在標籤的開始標籤身上添加一個 style=“”屬性，然後在引號裏面書寫css屬性和屬性值即可，沒有實現結構和樣式分離，儘量不用：

後期書寫JS特效的時候可能會使用一下；

內部樣式（內嵌）

書寫在head標籤裏面，title標籤下面，以一對style標籤包裹，實現了結構和樣式的半分離；

<head>

<title>Document</title>

<style>

.box {

width: 200px;

height: 200px;

}

</style>

</head>

外部鏈接式

外部鏈接的步驟：
01 新建：.css格式的css文件，直接在裏面書寫選擇器以及css樣式；
02 引用：利用link標籤引入新建的css文件，要配合link的三個屬性 rel關係，type文件類型直接省略，href文件路徑；
<link rel="stylesheet" href="css/style.css">
使用外部鏈接的好處：實現了結構和樣式的完全分離，代碼；簡潔，可讀性強；

Emmet語法：

標籤名+tab鍵可以生成整個標籤；例如：div 表示生成div標籤；
標籤*數字+tab鍵可以按照數字生成對應的個數標籤；例如：p*3表示3生成3個p；
如果是父子級關係可以直接用>連接+tab：例如：div>p 表示div嵌套p標籤；
如果是兄弟關係就直接用+加tab；例如：div+p 表示div和p標籤是同級元素；
如果要寫類名和id名稱直接早標籤後面跟. 和#即可；例如：div.box === <div class=“box”></div> div#box === <div id=“box”></div> ；
如果想要生成有順序的類名，直接在類名後面加$+數字；
如果想要在生成的標籤裏面添加內容我們可以直接在標籤後面加{內容}

快速格式化代碼

Vscode 快速格式化代碼: shift+alt+f
也可以設置當我們保存頁面的時候自動格式化代碼:
1）文件 ------.>【首選項】---------->【設置】；
2）搜索emmet.include;
3）在settings.json下的【工作區設置】中添加以下語句：
"editor.formatOnType": true,
"editor.formatOnSave": true

複合選擇器

是由兩個或多個基礎選擇器，通過不同的方式組合而成的，可以更準確、更高效的選擇目標元素（標籤）

後代選擇器

後代選擇器又稱爲包含選擇器，可以選擇父元素裏面子元素

後代選擇器/包含選擇器：有父子級的包含關係，一個空格表示了後代關係；
注意：
父元素和子元素中間用空格隔開
元素1 是父級，元素2 是子級，最終選擇的是元素2
元素2 可以是兒子，也可以是孫子等，只要是元素1 的後代即可
元素1 和元素2 可以是任意基礎選擇器
<style>
/* 表示將box盒子下面所有的元素p選中只選中不管是第一層還是最裏面的都可以選中 */
.box p {
color: red;
}
</style>

子元素選擇器：

只能選擇嵌套關係的父子關係得到元素，也就是嵌套的第一層元素，一個大於號“>”表示選中子級;
注意：
元素1 和元素2 中間用大於號隔開
元素1 是父級，元素2 是子級，最終選擇的是元素2
元素2 必須是親兒子，其孫子、重孫之類都不歸他管. 你也可以叫他親兒子選擇器
<style>
/* 表示將box盒子下面所有的子級關係的元素p選中只選中第一層 */
.box>p {
color: red;
}
</style>

並集選擇器：

樣式一致的盒子如果單獨設置樣式需要書寫多次，我們可以把樣式相同的盒子只寫一個樣式，用英文的逗號隔開即可，一個逗號表示合併關係；
注意：
元素1,元素2 { 樣式聲明 } 表示選擇元素1 和元素2
元素1 和元素2 中間用逗號隔開
逗號可以理解爲和的意思
並集選擇器通常用於集體聲明

好處：使用並集選擇器書寫代碼可以節約代碼量，重複的代碼只寫一遍；

<style>

.box1,

.box2 {

width: 300px;

height: 300px;

}

.box1 {

background: pink;

}

.box2 {

background: palegreen;

}

</style>

超鏈接僞類 --- 僞類用冒號鏈接

鏈接的僞類四種狀態：
a:link 未訪問的鏈接（訪問前）
a:visited 已訪問的鏈接（訪問後）
a:hover 鼠標移動到連接上（鼠標經過）
a:active 選定的鏈接（按下鼠標的時候）
注意：如果以上幾個狀態都寫，以上的順序不能顛倒,但是實際開發中我們不會全部都寫；
實際使用的時候超鏈接的僞類時，不需要全部都寫，只需要先設置一個總體的a的樣式表示所有狀態，然後單獨設置鼠標經過a:hover 的樣式；
<style>
a {
text-decoration: none;
}
.box a {
font-size: 180px;
color: red;
}
.box a:hover {
color: purple;
}
</style>

focus僞類選擇器

:focus 僞類選擇器用於選取獲得焦點的表單元素，一般input表單才能獲取該焦點
input:focus {
background: pink;
width: 300px;
height: 50px;
}

元素顯示模式

塊級元素

比較霸道，自己獨佔一行。
高度，寬度、外邊距以及內邊距都可以控制。
寬度默認是容器（父級寬度）的100%。
是一個容器及盒子，裏面可以放行內或者塊級元素。
注意：p標籤是塊級元素，但是p標籤裏面不能放div標籤；

同理h標籤（標題標籤）dt等都是文字類塊級標籤，裏面儘量不能放其他塊級元素；

一句話：塊級元素獨佔一行，可以設置寬高和內外邊距，如果不給盒子設置寬度，默認的寬度就是父級的100%顯示，塊級元素裏面可以放任何元素，但是要主要p標籤和標題標籤儘量不要在裏面嵌套div；

常見的塊級標籤：div/p/h1-h6/dl/dt/dd/ul/li

行內元素

相鄰行內元素在一行上，一行可以顯示多個。
寬高可以設置，但是寬高直接設置是無效的。
默認寬度就是它本身內容的寬度（內容撐開）。
行內元素只能容納文本或其他行內元素。
常見的行內元素：a span u s del strong em i ins 等；
注意：
超鏈接裏面不能嵌套超鏈接；
特殊情況a標籤裏面可以放塊級元素，但是最好給a轉換成塊級模式；

一句話：行內元素一行共存多個，能夠設置寬高但是不生效，默認的寬度是由內容撐開的，行內元素裏面最好嵌套文本和其他的行內元素；

行內塊元素

和相鄰行內元素（行內塊）在一行上，但是他們之間會有空白縫隙。
一行可以顯示多個（行內元素特點）。
默認寬度就是它本身內容的寬度（行內元素特點）。
寬高、外邊距以及內邊距都可以控制（塊級元素特點）。

一句話： 行內塊元素一行共存多個，每一個之間有默認的間隙，默認的寬高是內容撐開，但是我們可以自己設置寬高和內外邊距並且生效；

常見的行內塊元素：input、img、button等；

顯示模式的轉換display

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

單行文字垂直居中

單行文字文本垂直居中：文字的行高等於盒子的高度；

背景background

背景圖片background-image

引入背景圖片，如果想要給盒子添加背景圖片，盒子必須要有固定的寬高讓盒子真實存在；

background-image屬性必須配合url獲取圖片路徑才能將背景圖片引入；

background-image: url(img/01.jpg);

背景顏色background-color

background-color可以給盒子設置背景顏色，取值：預定義的英文單詞，十六進制（去設置高吸取）、rgb三元素色（取值範圍是0-255）

background-color: #f00;

背景平鋪方式background-repeat

如果我們給盒子添加了背景圖片，背景圖片默認是平鋪滿盒子的，怎麼不平鋪?

background-repeat的取值：

默認是平鋪的repeat，不設置

background-repeat: repeat;

repeat-x水平方向平鋪（X軸）

background-repeat: repeat-x;

repeat-垂直方向平鋪（Y軸）

background-repeat: repeat-y;

no-repeat 不平鋪（死記硬背）

background-repeat: no-repeat;

Html css基礎知識點總結

HTML

什麼是網頁？

網頁的構成：

什麼HTML（記住）？

網頁形成的過程

常見的瀏覽器內核和常見5大瀏覽器

Web標準

使用web標準原因

web標準的組成：

HTML語法規範

HTML基本結構

網頁的開發工具

默認結構代碼

標籤語義化

常用標籤

關於瀏覽器對空格和回車換行的解析

文本格式化標籤

兩大布局標籤：div與span

圖片標籤img

目錄文件夾和根目錄

路徑

超鏈接標籤

錨點鏈接

註釋快捷鍵 Ctrl+？

特殊符號

表格

表格的主要作用：

表格的基本語法：

表頭標籤th：

表格的相關屬性：

表格標題caption

合併單元格

列表

無序列表（最常用）

有序列表

自定義列表（項目列表）

表單

作用目的：收集用戶信息；

表單的組成：

表單域form

input表單控件

input按鈕控件

標籤按鈕button

label標籤

select下拉表單

textarea文本域標籤

文本框input和文本域textarea的區別：

input常見的幾個屬性

===== Css階段 ====

Css的概述（作用）：

使用css的價值：

Css的語法結構

Css的書寫位置

css代碼風格

css選擇器

作用：選中標籤，設置樣式；

選擇器的分類

類選擇器和id選擇器的區別：

通配符選擇器 *

Css文字控制屬性

文字字體 font-family

文字大小 font-size

文字的加粗 font-weight

文字不加粗 font-weight

文字的傾斜樣式 font-style

文字不傾斜 font-style

文字的綜合寫法font

文本的顏色color

文本對齊text-align

文本線條裝飾text-decoration

文本首行縮進 text-indent

行間距（行高）line-height

css的引入方式

行內樣式

內部樣式（內嵌）

外部鏈接式

Emmet語法：

快速格式化代碼

複合選擇器