以下是常用html+相關css全部匯總：

# 01html標簽

```

html標簽 是組成網(wǎng)頁的骨架

區(qū)域劃分作用：

????????????????h1 ~ h6 標題標簽

????????????????????h1權重最高 (頁面中 最重要的位置logo 新聞標題)頁面中只能出現(xiàn)一次

????????????????????標題標簽 就用在 有標題效果的區(qū)域 讓網(wǎng)頁更有結構

????????????????div 盒子標簽 布局?最最基礎的劃分區(qū)域的標簽 包裹內容

????????????????p 段落標簽 換行的效果 (包裹大篇新聞內容 )

????????????????列表標簽 使用在 布局內容雷同(相似的地方 菜單區(qū)域)

????????????????ul? 定義無序列表

????????????????????li 列表項 (ul父子級關系 不允許 放入其他的標簽) li里可以放任意標簽

????????????????????標簽內部屬性 style=""? 屬性名="屬性值"? 英文狀態(tài)下的單雙引號都可以

????????????????ol? 定義有序列表

????????????????????li 列表項

????????????????????type=""? 默認阿拉伯數(shù)字? a A i I

????????????????dl? 定義術語列表

????????????????????dt 描述術語標題

????????????????????dd 描述術語內容???????????????

????????????????<div></div> 雙標簽 99% 開始標簽 + 結束標簽

????????????????<meta/> 單標簽? / 可加可不加

????css屬性的寫法

????????????list-style-type:;? 屬性名:屬性值; 寫在能夠存放css的地方

????????????????none 不需要列表樣式 (取消 記憶)

????????????????disc 小黑心遠點

????????????????square 方塊

????????????????circle 空心圓

????????????也可以直接寫成:

????????????????list-style:; 可以繼承 (除了字體 文本之外的其他的屬性 都不能繼承

????內容展示作用

????????????????span? 賦予樣式 文字標簽 最弱的內容標簽 可以與文字橫排顯示 也可以存放小圖標? 小按鈕

????????????????????color:;?????????

????????????????i? 傾斜標簽 存放阿里圖標? 小按鈕 存放小圖標

????????????????b???加粗標簽 (不使用了)

????????????????em? 傾斜標簽 + 強調效果

????????????????strong 加粗標簽 + 強調效果 用在需要著重強調的區(qū)域? em強調效果沒有strong大

????????????????br 換行標簽 單標簽 不要使用 不利于維護

????????????????hr 分割線標簽 不要使用???

????img 圖片標簽 單標簽

????????????????四要素

????????????????src => 路徑

????????????????????絕對路徑 打開文件后綴名

????????????????????????網(wǎng)絡絕對????https://img.alicdn.com/tfs/TB1oquGGv9TBuNjy0FcXXbeiFXa-?????????????????????????????????????????????468-1236.png

????????????????????????本地絕對 從盤符出發(fā)

????????????????????????????C:/Users/HiWin10/Desktop/01/5.jpg

????????????????????相對路徑

????????????????????????./img/5.jpg? 當前目錄下 img 文件夾內的5.jpg

????????????????????????先找 找到了之后 一層一層去敲開門 直到找到圖片為止??????????????

????????????????????????../img/123/5.jpg? html文檔退到上一級文件夾目錄 圖片最外層文件夾繼續(xù)敲門?

????????????????alt => 描述 seo

????????????????width => 寬度? 標簽屬性? px值可以省略

????????????????height => 高度? 標簽屬性? 不用于修改圖片的布局大小(通過css控制布局大小) 寫圖片的?????????????????實際大小????????????????????

```

##### 重點：相對路徑弄清楚着帽；1甚颂、./是當前目錄2摔认、../是父級目錄3、/是根目錄

# 02 CSS

```

????超鏈接標簽

????????????????跳轉功能

????????????????href="" 要跳轉的地址

????????????????target="" 何處打開 _self 當前窗口打開? _blank在空白窗口打開

????????????????????點擊圖片跳轉

????????????????????<a target="_blank">

????????????????????????<img src="../image/01.png" alt="">

????????????????????</a>

????????????????錨點? 先給目的地標記用id標記? a的href里 #id名

????????????????????png? 支持透明圖片 色彩多 大 (精靈圖 小圖片)

????????????????????jpg? 不支持透明圖片? 小 失真

????????????????????gif? 支持動態(tài)圖片 大

```

```

????html 網(wǎng)頁的骨架 組成

????????????css 層疊樣式表? 賦予樣式 血肉 穿好衣服 化好妝

????????????js? 與用戶的交互 數(shù)據(jù)的交互

????????????????標簽 自帶默認css??????????????

????????????????css存放位置

????????????????????1,標簽內部(行內樣式) <div style="css屬性">第一個div</div>

????????????????????????????<divstyle="color:red; font-size:14px">11</div>

????????????????????????優(yōu)缺點: 精準度高 耦合度高(和html過分親密) 不利于維護,不可復用 造成html文檔???????????????????????過大

????????????????????????js在操控樣式的時候 操控行內樣式

????????????????????2,style標簽(內部樣式) css的區(qū)域

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

????????????????????????????選擇器=>精準控制到元素

????????????????????????????{}=>需要設置的屬性 (聲明塊)

????????????????????????p{color:red;}? 一條聲明color:red;

????????????????????????優(yōu)缺點: 精準度高 耦合度中等 不利于維護, 造成html文檔過大

????????????????????3.外部樣式

????????????????????????@charset "utf-8"; 必帶 ;號

????????????????????????<link rel="stylesheet" href="css/index.css">

????????????????????????<link rel="stylesheet" type="text/css" href="#">

????????????????????css 屬性名:屬性值;

????????????????????html注釋<!--可視化區(qū)域--

????????????????????css注釋 /* 你好 */??

????????????????????行內樣式 > 內部樣式 = 外部樣式

????選擇器類型

????????????標簽選擇器 直接通過標簽名 來控制標簽

????????????id作用(1,劃分頁面的主體結構 大盒子分布局用id屬性 2.重要內容用id? 3.用于給js提供控制)

????????????????id選擇器 #id名{} 具有權重 具有唯一性 復用性低

????????????????????取名字環(huán)節(jié):(企業(yè)命名規(guī)范) 具體參照群內企業(yè)命名規(guī)范文檔

????????????????????????1.見名知意 (不會就翻譯一波)

????????????????????????2.英文字母開頭(小寫)

????????????????????????3.后面能跟數(shù)字

????????????????????????4.連接 - _? 駝峰命名information-bar => informationBar

????????????????????????5.不要命名帶有advertising ad adv adver 防止該部分當成垃圾廣告過濾掉

????????????????class選擇器? .class名{} =>類名 代碼復用性高 靈活

????????????????*選擇器 選中全部標簽 不要使用 (樣式初始化的時候)

```

##### 重點：1圾另、外鏈式css偎血，js的寫法 2诸衔、選擇器的命名。

# 03 組合選擇 盒模型

```

盒子模型

????????????????content區(qū)域

????????????????????width: 100px;

????????????????????height: 100px;

????????????????????內容是在content區(qū)域的左上角開始排列的

????????????????border邊框線 復合屬性

? ? ? ? ? ? ? ? border是占據(jù)空間的颇玷，outline是不占據(jù)空間的笨农；

????????????????????border-style 邊框線樣式 (必寫)

????????????????????????solid 實線 dashed虛線? dotted點狀線 double雙線

????????????????????border-color 邊框線的顏色 (要寫)

????????????????????????red blue關鍵字

????????????????????????十六進制顏色值 三對 紅綠藍

????????????????????????????# 0~9? a~f

????????????????????????????#0000ff

????????????????????????????00=>紅色 00=>綠色 ff=>藍色

????????????????????????????純 000000 ff ff ff 0~f逐漸變白(灰的過程) cccccc

????????????????????????????簡寫:=> #fff #000

????????????????????border-width 邊框線粗細

????????????????????????px值 關鍵詞=>thin 細的1px? thick 粗的5px? medium默認3px

????????????????????border-top上? left左 right右? bottom下

????????????????????取消邊框線 border:0; none也可以

????????????????快遞? content=>電視機 border=>快遞盒 padding=>填充物 margin=>外部泡沫板

????????????????border:4px solid #ccc;

????????????????border-top:0;

????????????????border-style:solid;

????????????????border-color:red;

????????????????border-width:3px;

????????????????border-top-color:blue;

????????????????border-top-color:blue;

????????????????border-left-color:red;

????????????????border-right-color:purple;

????????????????border-bottom-color:grey;

????????????????padding 內邊距 邊框線到內容區(qū)域的距離 撐大盒子實際大小 撐大多少 減去對應撐大的寬高

????????????????????px

????????????????????padding-top ????left????bottom??????right

????????????????????一個值? =>四個方向

????????????????????兩個值? 上下? 左右

????????????????????三個值? 上 左右 下

????????????????????四個值? 上 右 下 左

????????????????margin 外邊距? 邊框線以外 添加的泡沫板

????????????????????auto 讓塊級元素 左右居中 布局元素

css 存放位置

????????????樣式

????????????????選擇器+聲明 {}

????????????基礎選擇器

????????????????tagname標簽

????????????????class

????????????????id

????????????????* 通配符選擇器

????????????組合選擇器? =>目的 為了更加精準的控制元素

????????????????依賴于元素嵌套關系

????????????????????通過后代關系:

????????????????????.wrap p 空格 后代元素選擇器? p必須是.wrap的后代

????????????????????.wrap > p 選擇 子元素選擇器? 選擇wrap的子元素 p

????????????????????通過兄弟關系:

????????????????????p + div ???? +? 鄰居關系(毗鄰元素選擇器)? p后面的一個兄弟元素 div

????????????????????p ~ div? ???~ 下面的所有的符合條件的兄弟元素???????????

????????????????????div.wrap ???交集選擇器 類名為wrap的div標簽

```

##### 重點：1、記得用padding帖渠，撐大多少 減去對應撐大的寬高谒亦；2、margin用法空郊。

# 04 樣式初始化 元素類型

```

????樣式初始化

????????????????默認樣式=> 保持最基本的可讀性 ???html5 ??????多元素選擇器 怪異盒模型 ???元素類型

????怪異盒模型???box-sizing:border-box;

????????????????盒子的實際大小?width: 200px;height: 200px;

????????????標準盒模型

????????????????box-sizing:content-box;

????????????盒子的實際大小 content + padding + border??width: 200px;???height: 200px;??

????元素類型????

????????????塊級元素? 行內(內聯(lián))元素

????????????????display: block塊 =>顯示類型的?

????????????????塊級元素特性:1.獨占一行? 2.支持寬高

????????????????????????不設置寬高? ?寬度 是父級content寬度?????高度 由內容撐開

????????????????????????固定死寬高???什么都撐不開了 固定死了

????????????????????3.margin padding 支持 margin:auto;

????????????????????4.嵌套(包裹)其他任意的標簽

????????????????????5.p標簽 不能嵌套塊級標簽 包括p自身

????????????????????????h1~h6 里面嵌套 塊級標簽?????div ul li ol dl dt dd h1~h6 p .....?

? ? ? ? ? ? 行內元素 ???內聯(lián)元素

????????????1.友好 和其他行內元素 橫排顯示的

????????????2.不支持寬高? 全部由內容撐開

????????????3.? margin 支持左右 不支持上下 不支持auto

????????????????padding 支持左右? 不支持上下(上下顯示效果沒問題 但是不影響其他的元素)

????????????4. 行內元素之間 會解析空格(跟文字大小相關)

????????????????父級去設置 font-size:0;

????????????????span設置回來字體大小

????????????5. 基線對齊問題

????????????6. 行內元素 不允許嵌套任意塊級元素

????????????????a可以包裹任意塊級元素 最好外面包裹一層div布局

????????????????span a i b strong em.... img input

元素類型的轉換

????????????(塊級/行內)變成行內塊

????????????行內變成塊級

????????????display:inline;

????????????行內塊特性 中和

????????????????display:inline-block;

????????????????1.橫排顯示 inline/inline-block (行內)

????????????????2.能夠支持寬高 (塊級)

????????????????????不設置寬高

????????????????????????由內容撐開 (行內)

????????????????????固定死寬高之后

????????????????????????什么都不能撐開了

????????????????3 margin padding????只是不支持margin auto????

????????????????4. 會解析空格 會有基線對齊的問題

????????????????行內不管變成啥 都不能嵌套塊級元素 除了a

????????????display:none; 讓元素消失 包括所有的內容

????????????img input 特殊的行內元素? 可以認為是行內塊元素

```

##### 重點：1份招、塊級元素：div ul li ol dl dt dd h1~h6 p 和 行內元素：span a i b strong em.... img input；

##### ??? 2狞甚、行內變塊級元素display:block;

##### ??? 3锁摔、行內塊：inline-block：橫排顯示? 能夠支持寬高 (塊級)? 不設置寬高由內容撐開 (行內)。??????????????????????

##### 4哼审、a可以包裹任意塊級元素 最好外面包裹一層div布局

# 05 外邊距合并? ? 一般背景相關

```

外邊距合并問題

????????????合并取最大的一個值(顯示距離為最大值)

????????????條件: 塊級 相遇? 父級和子級 垂直方向相遇

????????????????解決方法：1.父級padding（常用）

????????????????????????2.父級border?

????????????????兄弟和兄弟之間?垂直方向相遇

????????????????1,浮動 定位特性

????????????????2,給父級 overflow:hidden; 溢出的處理? hidden隱藏? bfc

????????????????3.給父級 inline-block

背景 色 元素的 底色

????????????????transparent 透明色?????十六進制 # 0~9 a~f

????????????????rgb()red green blue ????0 ~ 255 0 ~ 255 0 ~ 255

????????????????rgba() alpha 透明度 0~1? 0完全透明? 0.5 半透明 1 完全不透明????0.5 => .5

????????????背景圖片 => 裝飾

????????????????background-image:url(03.jpg);

????????????背景平鋪

????????????????background-repeat???默認repeat 平鋪 滿盒子 ????no-repeat 不平鋪???????

????????????背景大小

????????????????px % 關鍵詞 cover contain

????????????????background-size:;

????????????????只有一個值 背景圖的寬度 高度等比縮放

????????????????兩個值 第一個是寬度? 第二個 高度

????????????????%? 相對于盒子的寬高

????????????????cover 讓背景圖片? 充滿整個盒子

????????????????contain 讓盒子包裹整個完整的背景圖

????????????背景位置

????????????????background-position

????????????????px % 關鍵詞

????????????????一個值時? 水平方向? 另一個方向 居中

????????????????兩個值? 水平方向 豎直方向??

????????????????%? 父盒子的20%處? 和 背景圖的20%處重合 (父盒子-背景寬度)*百分比????????????????

????????????????left right top bottom center

????????????????background:url('22.jpg') no-repeat 100px;?

????????????????image? repeat? position/size color

????????????????如果沒有size image? repeat? position color

????????????????如果沒有position?

```

##### 重點：1鄙漏、外邊距合并問題：解決方法.父級padding（常用）；

##### ??? ? 2棺蛛、背景background:url('22.jpg') no-repeat 100px;?

# 06 文本綜合問題

```

????牢記

????????行內元素可有左右margin（span img? a）; display要常用怔蚌；dl dt dd列表要記得用；

????文字 文本 基線對齊

????????????行內 行內塊 橫排對齊的時候 基于基線對齊

????????????vertical-align:baseline;

????????????????1.圖片下方間隙問題

????????????????????解決方法 => 給img任意值覆蓋baseline

????????????????2.圖文的對齊方式? 行內元素或者行內塊元素之間的對齊方式

????????????????????解決方法

????????????????????????頂部對齊? 給兩個元素 同時加上vertical-align:top;?

????????????top 對齊元素(你設置了vertical的元素)的頂端 與line-box 的頂端對齊

????????????bottom? 對齊元素(你設置了vertical的元素)的底端 與line-box 的底端對齊

????????????middle (常用)對齊元素 的中線 父元素的基線加上小寫x的一半

????????????px進行微調? <input type=""><span>你好</span>

????????????line-height 行高 決定了行框盒子的頂端和底端

????文字屬性 繼承性

????????????????控制元素內的 文本

????????????文字大小

????????????font-size:

????????????????默認文字大小 16px

????????????????最小文字大小 12px 默認body里面設置字體大小的時候設置12px

????????????????% 相對于父級字體大小

????????????????em (響應式布局) em就是父級的字體大小

????????????????rem (移動端自適應) rem就是html根標簽的字體大小 默認16px

????????????color 字體顏色

????????????font-family 字體族

????????????????serif 襯線字體 "宋體" 末端加粗 擴張 間隙末端以襯線

????????????????sans-serif 非襯線字體? 微軟雅黑? 黑體

????????????????引入自定義字體

????????????font-weight 字體粗細

????????????????bold 加粗

????????????????normal 正常

????????????????(忽視的:100 ~ 900? lighter更細的 bolder更粗的)

????????????font-style 字體傾斜 i em

????????????????normal 正常的

????????????????italic 傾斜字體

????????????????oblique 使文字傾斜

????????????line-height 行高

????????????????px? ???em??當前元素的字體大小???rem (移動端)當前的html根標簽的字體大小

????????????復合寫法:

????????????????font-family最后的一項? 倒數(shù)第二項是font-size 并且兩者必須要有??其他的 寫前面就好

????????????????font-size/line-height? 12px/1.5

????????????????font: bold italic? 12px/1.5 "黑體";

????????????font-variant 定義小型大寫字母

????????????????small-caps

文本對齊方式

????????????text-align? 設置在父容器上,來控制自己內部的行內元素 行內塊元素 文本

????????????????left左對齊?????????right 右對齊???center 居中對齊?????justify 兩端對齊

????????????text-indent 首行縮進

????????????????px??????em 自身文字大小???rem

????????????text-transform 控制文本的大小寫

????????????????uppercase 大寫????lowercase 小寫????capitalize 首字母大寫

????????????text-decoration 文本修飾

????????????????underline 下劃線 ??none 取消?????overline 上劃線????line-through 中劃線

????????????letter-spacing 字間距? 字符

????????????word-spacing 詞間距 單詞左右

????????????white-space 決定文本是否換行

????????????????wrap 換行?????nowrap 不換行

????????????white-space:nowrap; 不適用于行內元素

????????????overflow:hidden;

????????????text-overflow:ellipsis; 實現(xiàn)單排溢出省略號

????????????word-break:break-all;

????????????文本 字體 繼承性 list-style ul=>li

```

# 07 浮動

```

????浮動

????????????????最初的作用 圖文環(huán)繞效果

????????????????塊級橫排顯示? 布局

????????????????讓元素 脫離文檔流 左邊或者右邊浮動? 直到遇到父級的邊界或者是相鄰的浮動元素 停下來

????????????????文檔流中不占位置 display block inline不遵循

????????????????后面的 存在于文檔流里面的元素 重新去排列文檔流

????????????????浮動元素特性:

????????????????????無論是塊級還是行內還是行內塊 只要給上浮動 那么就會具備以下特性

????????????????????!.文檔流里不占位置

????????????????????1.支持寬高

????????????????????????不給寬高時 由內容撐開

????????????????????????固定死寬高時? 什么都撐不開

????????????????????2.橫排顯示 (跟 浮動元素橫排顯示)

????????????????????3.margin padding 不支持margin auto

????????????????????4.不會造成空格與基線對齊問題

????問題

????????????????子元素掉下來:

????????????????????1.查看是否全部設置好了浮動

????????????????????2.子級寬度是不是太大了

????????????????????????padding border

????????????????????3.父級寬度不夠

????????????????卡住的問題

????????????????????1.溢出的部分 或者是其他的浮動元素會卡住掉下的浮動元素

????????????????大問題

????????????????????子元素浮動不在文檔流 導致文檔流內的爸爸 高度塌陷 頁面布局會亂掉

????????????????解決方案:(清除浮動對父級的影響)(恰好)

????????????????????1.給上父級高度 (不靈活 )(一般由內容撐開 )

????????????????????2.overflow:hidden? (設置出去的定位元素 隱藏掉)

????????????????????3.display:inline-block? 空格 基線對齊問題

????????????????????4.父元素恰好就是浮動元素

????????????????????5.父元素恰好是絕對定位

????????????????????主動清除

????????????????????????.clearfix:after{

????????????????????????????content:'';

????????????????????????????display:block;

????????????????????????????clear:both;

????????????????????????}

????????????????????低版本ie 加給父級 zoom:1;

????border-radius:10px;

????????????????px

????????????????% 相對于寬高?????????

????????????????兩個值:左上右下? 右上左下??三個值:左上 右上左下 右下

????????????????四個值:順時針方向

????????????????八個值:border-radius:20px 40px 50px 60px / 20px 40px 50px 60px;

```

# 08定位

```

絕對定位 那就相對這個元素

????????????????????提升層級

????????????????????????后來居上

????????????????????top

????????????????????????top距離定位父級top 正下 負上

????????????????????left

????????????????????????left距離定位父級left 正右 負左

????????????????????right

????????????????????????right距離定位父級right? 正左 負右

????????????????????bottom

????????????????????????bottom距離定位父級bottom 正上 負下

????????????????????如果定位值 未賦值時? 默認不是0? 而是 auto auto會決定 你的初始位置是你未定位前的位置 但是文檔流里 你已經(jīng)不在了

????????????????????如果給絕對定位元素 找合適的定位父級 那么就找到合適的祖先標簽 給上相對定位

????????????????????如果恰好祖先是相對或者絕對定位元素 那么就不需要給了

????????????????????會改變元素的特性

????????????????????????1.能夠支持寬高

????????????????????????2.如果不給寬高 由內容撐開寬高 但是不會超過定位父級邊界

????????????????????????????(最好是固定 寬度 )

????????????????????????3.不占位置

????????????????????????4 margin padding 不支持margin auto?

?相對定位 絕對定位

????????????????????相對定位:

????????????????????????1.配合絕對定位使用

????????????????????????2.占有原來位置的輕微移動

????????????????????????3.讓元素具備層級

????????????????????絕對定位:

????????????????????????1.讓元素飄在其他的元素上空

????????????????????????2.元素的位置 比較的特殊

????????????????????固定定位:

????????????????????????特性同絕對定位 參考物瀏覽器窗口

????????????????????????作用:側邊導航欄 及 頂部導航欄

```

# 09高級選擇器

```

比較優(yōu)先級時?保證有精準的控制到元素

????????????????id > class > tagName > *

????????????????組合選擇器中

????????????????先去看 id選擇器 比較id選擇器的個數(shù)

????????????????????個數(shù)越多,優(yōu)先級越高

????????????????????個數(shù)相等

????????????????????????比較類名選擇器個數(shù)

????????????????????????????個數(shù)越多 優(yōu)先級越高

????????????????????????????個數(shù)相等

????????????????????????????????比較標簽選擇器個數(shù)

????????????????????????????????????個數(shù)越多 優(yōu)先級越高

????????????????????????????????????個數(shù)相等 優(yōu)先級同等 下面的覆蓋上面的

偽類選擇器

????????????依賴于 狀態(tài)

????????????hover 依賴于鼠標和元素的狀態(tài)

????????????????:link 未被點擊鏈接的a的狀態(tài)

????????????????:visited 已被點擊鏈接的a的狀態(tài)

????????????????:hover

????????????????:active? 正在被點擊的a的狀態(tài)

????????????關于文字

????????????????:first-letter 控制元素的第一個文字

????????????????:first-line 控制元素的第一行文字

????????????????::selection 控制元素中被鼠標選中的文字的樣式

和結構有關的選擇器

????????????p:first-of-type

????????????????選擇 父元素中 的第一個p元素 無視其他元素

????????????p:last-of-type

????????????????選擇 父元素中 的最后一個p元素 無視其他元素

????????????p:nth-of-type(7)

????????????????選擇 父元素中 的第n(7)個p元素 無視其他元素

????????????????2n-1 奇數(shù)

????????????????2n 偶數(shù)

????????????p:nth-last-of-type()

????????????????選擇 父元素中 的倒數(shù)第n(2)個p元素 無視其他元素

????????????p:first-child

????????????????選擇 父元素中 的第一個子元素 并且必須是p標簽

????????????p:last-child

????????????????選擇 父元素中 的最后一個子元素 并且必須是p標簽

????????????p:nth-child(5)

????????????????選擇 父元素中 的第n(5)子元素 并且必須是p標簽

????????????????2n-1 奇數(shù)

????????????????2n 偶數(shù)

????????????p:nth-last-child()

????????????????選擇 父元素中 的倒數(shù)第n(5)子元素 并且必須是p標簽

????????????p:not(:first-child) 不要第一個p? .box 不要類名為box的p 其他都要

????????????標簽類型統(tǒng)一時? 用nth-child

????????????標簽種類換亂時? 用nth-of-type

屬性選擇器

????????????[src] 選擇 具有 src屬性的元素

????????????[class = "box1"] 具有 class屬性 并且值只能是 box1 不能有其他的類名

????????????[class ~= "box1"]? 具有 class屬性 并且值內有 box1這個類名

????????????[src ^= "i"] 具有 src屬性 并以 i開頭? 模糊匹配

????????????[src $= "jpg"] 具有 src屬性 并以 jpg結尾? 模糊匹配

????????????[src *= "05"] 具有 src屬性 值內存在 05? 模糊匹配

????????????after

????????????在元素內容的后面添加偽元素

? ? ? ? ::before

????????????在元素內容的之前添加偽元素???????????

????????content:'';

????????????偽元素的核心內容? 偽元素 本質上 特性和行內元素一樣

????????????????none 偽元素不存在

????????????????normal 偽元素不存在

????????????????"你好" 添加文本

????????????????url() 添加圖片

????????作用 : 裝小圖標? 制作小三角形 小原型 (不要用偽元素去做復雜的事情)

????????????減少html代碼 優(yōu)化代碼結構

opacity visibility

????????????opacity? 決定元素的透明度 會影響到里面所有的內容

????????????0~1 0完全透明 雖然變透明看不見了 但是存在于頁面 占位置并且鼠標能夠摸到? 1完全不透明

????????????ie兼容

????????????????filter:alpha(opacity=0~100) 0完全透明? 100完全不透明

????????????visibility

????????????????visible 可見的

????????????????hidden 隱藏? 讓元素不可見 但是元素依然存在于界面 占位置但是鼠標摸不到

????????????display:none

????????????????完全消失 不占位置 鼠標也摸不到

```

# 10表單元素

```

包裹表單元素的一塊區(qū)域? 鍵值對

????????????????action=>屬性值 =>需要提交的后臺的地址 url

????????????????method=>屬性值 =>提交的數(shù)據(jù)的方式

????????????????get (獲取數(shù)據(jù))

????????????數(shù)據(jù)拼接到url后面 => 后臺 根據(jù)你的提交url做出對應的處理 (保存數(shù)據(jù)? 清除數(shù)據(jù) 返回數(shù)據(jù))

????????????????post (提交數(shù)據(jù))

????????????????????????????數(shù)據(jù)不會拼接到url后面

????????????????target='_blank' 跳轉頁面的打開位置

????????????你好 123

????????????????數(shù)據(jù)的傳輸格式

????????????????????鍵值對? 鍵:值? 性別:男? name:value =>age:12

????????????input

????????????????type 定義表單類型

????????????????????text 普通的文本框

????????????????????submit 提交功能按鈕 默認value="提交"

????????????????????password 密碼框

????????????????????number 選擇數(shù)字規(guī)格???最小值 min 最大值 max?????????????

????????????????????range 選擇范圍框?????最小值 min ????最大值 max

????????????????????color 選擇顏色框

????????????????????date 年月日? 手動輸入值 點擊 上下調值

????????????????????time 時間點?

????????????????????month 月份

????????????????????week 周

????????????????????datatime-local 日期信息輸入

????????????????????file 文件按鈕 加上multiple這條屬性 可以傳入多個文件???????????????

????????????????????button? 功能按鈕 普通的按鈕

????????????????????????<button>1234</button> 也可以

????????????????????reset 重置按鈕

????????????????????選項按鈕

????????????????????radio 單選按鈕??????????????????

????????????????好玩的屬性:

????????????????????placeholder ='請輸入賬戶名'屬性? 用在普通輸入文本框

????????????????一般性 我們會被 input取消border 需要就重新給一個border線

????????????????????我們還需要取消 outline 外輪廓線? outline:none;

????????????????label 關聯(lián)? 通過for =>id名? 點擊對應的label標簽 會選中對應 id名的 按鈕

????????????????disabled 禁選的????checked 默認選中的

????????????????????resize

????????????????????none 不能拉動

????????????????????vertical 垂直能拉動

????????????????????horizontal 水平方向能拉動

????????????????????both 兩者都可以

????????????????textarea 文本域

????????????????select 下拉選框 size屬性決定 露出來的選項個數(shù)

????????????????????選項歸類

????????????????????????optgroup

????????????????????????????選項 option? ? 默認選中 selected

????????????????datalist (推薦選項)id屬性? => input list屬性

????????????????表單分區(qū)

????????????????????fieldset 分??????區(qū)標題?legend

?input相關偽類

????????????????focus 獲取焦點(鼠標點擊之后具有光標)的時候

????????????????checked 在按鈕被選中時

????????????????disabled 在input失效(禁選)時

????????????????enabled? 在input沒有失效(沒有禁選)時

寫CSS屬性只要注意的順序

顯示屬性

????????????????????float: left;浮動

????????????????????position: absolute;定位

????????????????????z-index

????????????????????visibility

????????????????????overflow

????????????????????list-style

????????????????????display

自身屬性(盒子相關)

????????????????????width

????????????????????height

????????????????????padding

????????????????????margin

????????????????????border

????????????????????background

?文本屬性

????????????????????line-height: ;

????????????????????font-size: ;

????????????????????text-align: ;這類的文本屬性

css3屬性

????????????????????border-radius

????????????????????box-shadow 盒子陰影

????????????????????transition 過渡

```

以下是我個人在網(wǎng)上的總結：

?現(xiàn)代前端開發(fā)中旁赊，iframe 很少用：? ? iframe 用于在當前頁面里嵌入一個頁面-->

? <noscript>如果用戶瀏覽器不支持 script桦踊，則會顯示 noscript 中的內容</noscript>

? ?以下是 典型的可替換元素有：

????????????????????????<iframe>

????????????????????????<video>

????????????????????????<embed>

????????????????????????<img>

以下元素僅在特定情況下被作為可替換元素處理：

????????????????????????<option>

????????????????????????<audio>

????????????????????????<canvas>

????????????????????????<object>

????????????????????????<applet>

在 HTML 中有以下這些空元素：

????????????????????????<area>??????????

????????????????????????<base>

????????????????????????<br>

????????????????????????<col>

????????????????????????<colgroup> when the span is present

????????????????????????<command>

????????????????????????<embed>

????????????????????????<hr>

????????????????????????<img>

????????????????????????<input>

????????????????????????<keygen>

????????????????????????<link>

????????????????????????<meta>

????????????????????????<param>

????????????????????????<source>

????????????????????????<track>

????????????????????????<wbr>

可以出現(xiàn)在<head></head>中出現(xiàn)的元素：base\title\meta\link\scrpt\noscript

?<strong>強調內容的重要性</strong>

?<b>單純的加粗字體</b>