還可以跳轉到其他頁面的某個錨點<a href="頁面地址"#錨點名>

圖片

1. 相關標籤

2. 在頁面中引入影象

<img src="圖片地址" alt="圖片的描述資訊" height="高度">

3. 圖片與超連結配合使用

<a href="http://www.baidu.com">	<img src="圖片地址" alt="圖片描述資訊" height="你想要的高  	度"></a>

4. 影象映像

<img src="圖片地址" alt="描述資訊" usemap="#map標籤的名字"><map name="自己起個名字">	<area shape="circle" coords="座標數字" href="想連結的網址" target="_blank" title="標籤點上會顯示的map>

列表標籤

1. 無序列表

<ul>    <li>列表項</li>    <li>列表項</li>    <li>列表項</li></ul><!-- li裡面還可以在套一個<ul>--><ul>    <li>        江蘇    	<ul>            <li>列表項</li>            <li>列表項</li>            <li>列表項</li>        </ul>    </li></ul>

注意：

無序列表在頁面中非常常用，如導航、新聞列表、商品列表等

一組具有相關的內容放在一起，一般使用無需列表

2.有序列表

<ol>    <li>列表項</li>    <li>列表項</li></ol>

注意：

使用有序列表的場景：最熱新聞排名，音樂排行榜 等

3. 定義列表

<h2>商品分類</h2><dl>    <dt>家用電器</dt>    <dd>電視</dd>    <dd>空調</dd>    <dd>洗衣機</dd>    <dd>電冰箱</dd>        <dt>電腦/辦公</dt>    <dd>電腦整機</dd>    <dd>電腦配件</dd>    <dd>外部裝置</dd></dl>

4. 列表標籤總結

表格

1. table 標籤

（ table 是 表格

​ 他包裹著

​ thead（表格頭）

​ tbody（表格主體）

​ tfoot（表格註腳）

）

表格的整體包裹元素，有如下屬性：

• width 指定表格的寬度
• height 指定表格的高度
• border 指定表格邊框的寬度
• cellspacing （桑柏森） 指定單元格和單元格之間的距離
• cellpadding 指定單元格邊框和內容之間的距離
• 都建議用css指定

2. 表格標題

使用 caption 表格標籤， caption 標籤內還可以在巢狀h標籤

<caption>	<h2> 標題 </h2></caption>

3. 表格的結構組成

<!-- table 是表格標籤 所有的表頭表主體啥的都寫在裡面--><table>    <caption>標題</caption>    <!-- 表頭 -->    <thead>        <!-- 一行 -->    	<tr>        	<th>表頭單元格</th>            <th>表頭單元格</th>            <th>表頭單元格</th>        </tr>    </thead>    <!-- 表格主體 -->    <tbody>        <!-- 行 -->    	<tr>            <!-- 普通的單元格-->        	<td></td>        </tr>    </tbody>    <!-- 表格註腳 -->    <tfoot></tfoot></table>

4. 單元格內容的對齊方式

使用 align 屬性設定水平對齊方式，值可以選為 left（左）、right（右）、center（中）	可以給 thead、tbody、tfoot 進行設定、會對裡面的單元格都起作用	可以給 tr 進行設定，對該行的單元格起作用	可以給 td、th 進行設定，只對當前設定的單元格起作用使用 valign 屬性設定垂直對齊方式，值可以選擇為 top（上）、bottom（下）、middle（中）	可以給 thead、tbody、tfoot 進行設定，會對裡面包含的單元格都起作用	可以給tr進行設定，對該行內的單元格起作用	可以給td、th 進行設定，只對當前設定的單元格起作用

5. 設定單元格寬高

給 td 或 th 設定寬度，同列的單元格都會按照設定的寬度，其實是設定列寬給 td 或 th 設定高度，同行的單元格都會按照設定的高度，其實設定行高也可以給 tr 設定高度，設定的是行高

6. 跨行和跨列

用於定義特殊的表格

給td或者 th設定 colspan用於跨列

給td或者 th 設定rowspan用於跨行

7. 表格標籤總結

表單

1. form 標籤

是表單的包裹元素，表單中所有的東西都要寫在form標籤裡面

具有如下屬性：

​ action 指定要提交的地址

​ method 指定提交方式

​ target 指定新開啟的頁面在那個視窗開啟

（它們沒有樣式，如果只想要個樣子也可以不寫）

disabled屬性 任何一個表單都可以用，會顯示不能用

2. 表單控制元件

①文字輸入框

<input type="text">	type 指定表單控制元件的型別			屬性：		type  設定為 text		name  屬性指定名字（向後端提交資料的時候使用）		value 屬性指定預設的值		maxlength  指定輸入框最大可輸入的長度

②密碼輸入框

   <!--password（怕死我的） 單詞本身就是密碼--><input type="password">	屬性：		type 設定為 password		name 屬性指定名字（向後端提交資料的時候使用）		value 屬性指定預設值		maxlength  指定輸入框最大可輸入的長度

④單選按鈕

<input type="radio">（ruai得奧）	屬性：		type 設定為 radio		name 指定屬性名字，多個單選按鈕要實現單選的效果，它們的name屬性值要一致（向後端提交資料的時候使用）		value 屬性指定真正向後端提交的資料		checked 屬性，設定預設選中，使用的時候，不需要給值

⑤隱藏域

<input type="hidden">用於向後端提交隱藏資訊				（黑den）	屬性：		type 設定為 hidden		name 屬性指定名字（向後端提交資料的時候使用）		value 屬性指定向後端提交的資料

⑥提交按鈕

<input type="submit" value="提交">				（撒潑麥特）	屬性：		type 設定為 submit		value 設定按鈕上的文字或者<button>按鈕上的文字</button>或者<button type="submit">按鈕上的文字</button>

⑦重置按鈕

<input type="reset" value="重置">	屬性：		type 設定為 reset		value 設定按鈕上的文字或者<button type="reset">按鈕上的文字</button>

⑧普通按鈕

<input type="button" value="按鈕">普通按鈕沒有任何功能，只有按鈕的樣子	屬性：		type 設定為 button		value 設定按鈕上的文字或者<button type="button">按鈕上的文字</button>

⑨文字域

<textarea></textarea>屬性;	name 屬性指定名字（）向後端提交資料的時候使用	disabled屬性	設定表單控制元件不可用	rows 指定預設顯示的行數，影響到本文的高度	cols 指定預設顯示的列數，影響文字域的寬度

⑩下拉選項

<select name="">    <option value="">選項文字</option>    <option value="">選項文字</option>    <option value="">選項文字</option>    <option value="">選項文字</option>    <option value="">選項文字</option></select>select 的屬性：	name	屬性指定名字（向後端提交資料的時候使用）		option （表示下拉選項框）的屬性：		value 指定真正向後端提交的資料		selected  設定預設選項（不用給值）

3. label 標籤

label 標籤用於表單控制元件做關聯，label 中通常包含表單控制元件的說明文字

好處：

​ ①有利於SEO,讓文字與表單控制元件關聯了

​ ②點選與表單控制元件關聯的文字可以讓表單控制元件獲取焦點

用法：

<!--用於 文字輸入框、密碼輸入框、文字域、下拉選項--><label for="username">使用者名稱：</label><input type="text" id="username"><!-- 用於單選按鈕 或者 複選項 --><label>	<input type="radio">文字</label><label>	<input type="radio">文字</label>

4. fieldset 和 legend 標籤

fieldset 可以在表單控制元件的周圍加一個邊框

legend 指定表單的標題，出現在邊框的上面

<form>    <fieldset>        <legend>表單標題 </legend>         表單控制元件。。。。    </fieldset></form>

5. disabled 屬性

所有的表單控制元件，都可以設定屬性 disabled，設定該屬性，表單控制元件就變為不可用的狀態

6. 表單總結標籤

框架標籤

實體標籤

空格 	&nbsp；<	 &lt;>	 &rt;&	 &amp;¥    &yen;©    &copy;×    &times;÷    &divide;

html的全域性屬性

class	給元素設定類名id		給元素設定id名，元素的id名不能重複style	用於設定 css 樣式dir		設定文字的方向tutle	設定一個文字提示，超連結和圖片用的比較多lang	設定內容的語言

css的基本語法

1. css 與 html 的關係

css	為某個 html 元素設定樣式css	的樣式作用在某個html元素上

2. 元素和元素之間的關係

父元素祖先元素子元素後代元素兄弟元素  具有相同父元素的稱之為兄弟元素

3. 在html中使用css的三種方式

① 行內元素

<p style="css程式碼..."></p>

② 內嵌式

<style>	css 程式碼...</style>

style 標籤一般放在 head 標籤內

③ 外鏈式

css 程式碼寫在單獨的 css 檔案中，在 html 中使用 link 引入 css 檔案

<link rel="stylesheet" href="css檔案的地址">

注意：

內嵌式與外鏈式優先順序是相同的， 後面的覆蓋前面的

行內式的優先順序大於其他兩個

4 基本語法結構

① 在內嵌式和外鏈式中

選擇器： 選擇到一個或多個元素。

宣告塊：{}括起來就是宣告塊，用來設定 css 樣式。

宣告： 宣告塊由一條一條的宣告組成，沒條宣告的後面加分號。

一條宣告的組成： css屬性名: 屬性值;

選擇器 {    css屬性名:值;    css屬性名:值;    css屬性名:值;}

② 行內式語法

行內式的語法規則不需要選擇器，只要把一條一條的宣告寫在 style 屬性的值裡面

<p style="css屬性名：值；css屬性名:值"></p>

SCSS 的基本長度單位

px 畫素em 預設字型大小的倍數百分比	 注意如果width設定為百分比，參照的是父元素寬度          如果font-size設定比分比，參照預設字型大小，等同於 em

如果長度的值設定為0，可以不加單位。

長度的值如果非0，必須加單位。

css三種基本的顏色表示方式

①顏色名方式(colorname)

background-color:red

②rgb方式

計算機三原色：red、green、blue

/*用0~255之之間的數字表示每個顏色*/background-color:rgb(123,255,12);/*使用百分比表示每個顏色，0%~100%*/background-color:rgb(100%,50%，0%）;

③ 十六進位制方式

/*使用6個十六進位制的數字，每組兩個數字是一組，原理通rgb方式一樣*/background-color:#rrggbb;

注意：

三原色的數值都是一樣的，表示為灰色；

數值越大，灰色越淺，如果數值最大，表示白色

數值越小，灰色越深，如果數值都是0，表示黑色

css基本選擇器

1. 基本選擇器

①標籤名選擇器（元素選擇器）

標籤名{    }

② id選擇器

#id名{    }

注意： 元素的id的值是唯一的！

③類名選擇器

.類名{    }

注意：

1. 元素的類名可以相同。
2. 一個元素可以有多個類名

④ 全域性選擇器

能選擇到包括 thml 和body 在內所有的元素

head以及head內部的元素選擇器選不到

*{    }

css的層疊性

所有能夠選擇到一個元素的選擇器所設定的樣式都會作用在這個元素上，這就是css的層疊性

基本選擇器的優先順序

選擇器優先順序：ID名選擇器 > 類名選擇器 > 標籤名選擇器 > 全域性選擇器如果優先順序相同，後面的覆蓋前面的行內式優先順序高於所有的選擇器（降維打擊）

盒子模型

任何一個元素都會被當作一個盒子

1. 盒子模型的顯示模式

① 塊級元素

• 某個元素的顯示模式如果是塊級的，該元素稱之為塊級元素
• 塊級元素能夠獨佔一行
• 塊級元素預設寬度取父元素寬度，預設高度被內容撐開（沒內容就沒高度）
• 可以對塊級元素設定高度

② 行內元素

• 某個元素的顯示模式如果是行內的，該元素稱之為行內元素
• 行內元素不會獨佔一行
• 行內元素的預設寬度和高度都是被內容撐開的（沒內容就沒寬度）
• 無法對內元素設定寬高

③ 行內塊元素

• 某個元素的顯示模式如果是 inline-block 的，該元素稱之為行內塊元素
• 行內塊元素同行內元素一樣不會獨佔一行
• 行內塊元素預設寬度和高度同行內元素一樣被內容撐開（沒內容就沒寬高）
• 行內塊元素可以設定寬高

注意：

原來的css標準中，區分行內元素和塊級元素的唯一標準是：能否獨佔一行

如果按照這個標準，行內塊元素也算作行內元素

元素預設顯示的模式

①塊級元素

格式排版標籤（全部）：div  h1~h6   p   hr  br  pre表格：table	thead	tbody	tfoot	caption	tr表單：form

② 行內元素

文字標籤（全部）：em	strong	ins	del	sup	sub無意義標籤：span超連結：a

③行內塊元素

圖片：img表格：th	td表單：input 	textarea 	select 	button

修改元素的顯示模式

display:inlne(行內)		block（塊級）		inline-block（行內塊）

常用屬性

1. 字型屬性

font-family 字型族科

常見的字型： 宋體，黑體，斜體，楷體襯線字型（serif）：橫豎筆畫不等寬，常見襯線字型：宋體，楷體，黑體，蘭亭黑非襯線字型（sans-serif）：橫豎筆畫等寬，常見非襯線字型：微軟雅黑，黑體，蘭亭黑

font-family:"黑體"，楷體，sans-serif；

font-size 字型大小

font-size：16px；

預設字型大小是16pxchrome 瀏覽器字型大小最小是 12px，如果設定的 font-size 比 12 小，按照12px 顯示

font-style 字型風格，用於設定斜體

font-style:normal;/*預設值*/font-style：italic；/*設定為斜體 使用字型自帶的斜體 推薦！*/font-style：oblique；/*設定為斜體 強制變為斜體*/

font-weight

font-weight:noeml;/*預設值*/font-weight：bold;/*粗體*/ront-weight：lighter;/*細體字*/

font-weight 的值可以指定為數字100~300： 細體400、500： 正常600~900: 粗體

font-variant 字型變形（瞭解）

normalsmall-caps 小型大寫字母

font 字型複合屬性，同時設定多個屬性的值，多個值用空格隔開

/*至少設定 字型大小和字型族科，順序固定 */font: 20px 'Microsoft YaHei',sans-serif;/* 	字型大小和字型族科必須是最後兩個	前面的 weight、style、variant 沒有順序要求*/font: bold 20px 'Microsoft YaHei',sans-serif;font: italic bold 20px 'Microsoft YaHei',sans-serif;

字型顏色

color設定字型顏色

color:#f90;

文字輸入

1. letter-spacing 和 word-spacing(瞭解)

letter-spacing：設定字母之間的間距（漢字也會生效）word-spacing： 設定單詞之間的間距（對漢字無效）

2. 文字對齊方式text-align

設定文字內容再元素內，水平方向的對齊方式

text-align:left/right/center;

3. 設定文字之間如何對齊vertical-align

① 用法

vertical-align:baseline /top /bottom /middlebaseline:沿基線對齊（預設）top：沿頂線對齊middle：沿中線對齊

②用途

第一個用途：行內元素或行內塊元素與文字內容在一行顯示的時候，設定如何對齊

給行內元素或行內塊設定 vertical-align

第二個用途：設定表格中單元格文字的垂直對齊方式

給td 或 th 設定 vertical-align 可以控制文字在單元格內的垂直對齊方式

4. 行高 line-hright

行高： 第一行文字的中線與第二行文字中間的距離

通過設定行高與元素的高度一隻，實現文字在元素內容垂直居中對齊方式，但是，只適合只有一行文字的情況。

行高可以讓文字內容的高度變大，一個元素不設定高度，只設置行高且元素內有文字內容，元素高度與行高大小一致。

font 複合屬性，把行高也複合進去了

font:30px/100px 'microsoft yahei';/* 其中100px 就是行高 */

5. 文字修飾 text-decoration

text-decoration:none /underline /overline /line-throuthnone:無效果（預設）underline：下劃線overline：上劃線line-throuth：刪除線

注意：

超連結a預設有下劃線，可以使用text-decoration:none 去掉a的下劃線

6. 首行縮排text-indent

text-indent:2em;

背景屬性

1. 背景顏色 background-color

background-color:#f89;

注意：

1.給body元素設定背景顏色，其實是設定整個頁面的背景色

2.元素預設的背景顏色是透明色 transparent

2. 背景圖片background-image

background=image:url(圖片地址)；

使用img標籤引入圖片和背景圖片有什麼區別？

1. img標籤是一個元素，圖片本身就是元素；背景圖片可以給任何元素新增背景圖
2. 如果圖片作為網頁內容中的一部分，建議使用img標籤；如果圖片僅僅是修飾，建議使用背景圖片
3. img圖片是可以被搜尋引擎抓取的。

3. 背景圖片重複background-repeat

background-repeat:repeat;

可選值：	repeat 重複（預設）	repeat-x 只在水平方向重複	repeat-y 只在垂直方向重複	no-repeat 不重複

4. 背景圖片定位backgeound-position

調整背景圖片在元素上的位置

①使用方式

使用關鍵字	水平方向的關鍵字： left right center	垂直方向的關鍵字： top bittom center使用關鍵字可以設定兩個值	background-position：left top；使用關鍵字設定一個值（另一個預設值設定為center）	background-position：left；	background-position：center；

使用具體座標，用長度來表示元素的左上角作為座標原點，通過座標設定圖片（左上角）在元素上的位置設定兩個值	background-position：100px 10px設定一個值（100px 會被作為 x 座標，垂直方向預設 center）	background-position:100px;	

② 使用情況

大部分情況，使用background-position的時候，背景圖比元素要小但是，背景圖比元素大的有些情況也需要設定background-position，往往會設定為center center

5. 背景圖片附件 background-attachment

設定背景圖的定位方式

background-attachment:scroll /fixed

scroll：預設值，設定背景圖位置的時候，元素的左上角作為座標原點fixed： 設定背景圖片位置的時候，視口的左上角作為座標原點如果滾動條滾動，元素會跟著滾動，但是視口不會跟著動

6. background複合屬性

把所有的子屬性的值寫在一起，用一個css屬性代替多個屬性

background複合屬性對值沒有順序和數量要求

background:#369 url(圖片地址) no-repeat 10px 50px scroll;

滑鼠游標屬性cursor

設定滑鼠游標華東到元素上之後，游標的樣式

cursor:pointer;

值：	defalut預設值	pointer 小手（最常用）	move 移動圖示（用於商品的放大鏡）

列表屬性

list-style-type		設定列表符號	值： disc、circle。。。。none（常用）	list-style-position 	設定專案符號在li的裡面還是外面	值：	inside		  outside（預設在外面）		  list-style-image：url（圖片地址）list-style 複合屬性，把所有的子屬性寫在裡面，沒有數量和順序要求

/*常見用法*/list-style：none；

表格屬性

table-layou	設定列寬的計算方式		值：		auto	預設，列寬根據單元裡的內容多少計算		fixed	列寬與單元格內內容多少沒關係，如果去設定單元格寬度，所有列等寬		border-collspase	設定單元格邊框是否合併			值：			separate 預設，獨立			collspase 合併			border-spacing	設定單元格之間的距離（類似於 table 的 cellspacing 屬性）			生效的前提：單元格邊框不能合併			cpation-size	設定表格標題位置				值：				top 預設，在表格上面				bottom 在表格下面				empty-cells		設定是否隱藏沒有內容的單元格1				值：				show  預設，顯示				hide  隱藏

注意：

以上五個屬性只能設定給table元素、

常用：

table-；layout、 border-collapse

選擇器

1. 組合器選擇

①後代選擇器

選擇器1 選擇器2選擇器1 選擇器2 選擇器3 選擇器4....

② 子元素選擇器

選擇器1>選擇器2選擇器1>選擇器2>選擇器3>選擇器4

③並集選擇器

選擇器1，選擇器2選擇器1，選擇器2，選擇器3，選擇器4....

④ 交集選擇器

選擇器1選擇器2選擇器1選擇器2選擇器3選擇器4....

偽類選擇器

a：linke

選擇到地址沒有被訪問過的超連結

a：visited

選擇到地址被訪問過的超連結

a：hover

選擇到滑鼠懸停在上面的元素

a：active

選擇到啟用狀態（滑鼠在元素上按鍵按下不鬆手）的元素

注意：

1. ：linke 和 ：visited只能用於超連結元素， ：hover 和 ：active 可以用於所有的元素
2. 4個偽類選擇器一起使用的時候，注意順序 love-hat 愛恨原則； ：link、：visted、：hover、：active
3. 其中：hover 偽類選擇器非常常用

選擇器優先順序

如果有層級比較多的組合選擇器，比較它們你的優先順序，查詢id選擇器、類名選擇器等的數量，進行權衡計算

第一檔次：	ID選擇器第二檔次：	類名選擇器、偽類選擇器第三檔次：	標籤名選擇器第四檔次：	全域性選擇器降維打擊：	行內式開掛：	！important（針對某個具體的css屬性）

！important > 行內式 > ID > 類名 > 標籤名 > *

盒子模型

盒子模型的三種顯示模式

① 塊級元素

1. 能夠獨佔一行2. 可以設定寬高

②行內元素

1. 無法獨佔一行2. 無法設定寬高

③ 行內塊元素

1. 無法獨佔一行2. 可以設定寬高

盒子模型的組成

• 內容區域（元素裡面的文字內容或者是後代元素顯示的區域）
• 內邊距 內容和邊框之間的距離（內容不會顯示在內邊距上）
• 邊框
• 外邊距，外邊距不屬於盒子的一部分

影響盒子大小的設定： 內容區的大小，內邊距的大小，邊框的大小

外邊距不影響盒子大小，影響盒子位置

盒子顯示模式（隱藏盒子）

① 修改盒子的顯示模式

display值：	inline	inline-block	block	none	讓元素隱藏

② 設定元素的可見性

visibility	設定元素的可見性值：	visible 可見的，預設的	hidden 不可見

display：none 和 visibility：hidden 區別：

元素這隻為display：none，元素不在佔用頁面中的位置

元素設定為 visibility：hidden，元素不可見但是還是佔著原來的位置。

塊級元素的預設寬度

1. 如果元素沒有外邊距，元素的總寬度=父元素內容區域寬度
2. 如果元素設定值了左右外邊距，元素的總寬度=父元素內容區域寬度-元素自己的左右外邊距
3. 如果元素本身設定了內邊距或邊框，元素的總寬度不變，內容區域寬度會被擠壓。