一、常用實體（字元轉義） '<' == '<' '©' == '©' '>' == '>' '"' == '"' ' ' == ' ' '®' == '®' '&&' == '&' '&t ...
一、常用實體（字元轉義）
'<' == '<' '©' == '©'
'>' == '>' '"' == '"'
' ' == ' ' '®' == '®'
'&&' == '&' '™' == '™'
二、圖片
選擇時，需要考慮 效果 與 文件體積
<img src="路徑" title="滑鼠懸浮顯示的文字" alt="圖片不顯示時，顯示的文字，被搜索引擎收錄" />
img 標簽可以設置屬性 width="50px", height="90px"，只設置一項時，圖片按比例縮放。
圖片特點：
JPEG（jpg） ---- 支持的顏色多，可壓縮，但不支持透明
GIF ---- 支持的顏色少，支持動態圖，支持簡單的透明（要求顏色單一，形狀規整，不然效果很差）
PNG ---- 支持顏色多，並支持複雜的透明
SVG ---- 可縮放矢量圖，體積小，放大不失真，但似乎色彩不是特別豐富
ICON ---- 文字亦是圖片，所以顏色單一，放大不失真，體積以 Byte 計
三、內聯 與 塊
HTML 5 中已經沒有塊元素，內聯元素的說法了，但是元素的特點並沒有變
塊元素 ---- div （無語義，常用於頁面佈局），p（段落），h（標題）
特點：不受 width 的值的影響，獨占一行。
內聯元素 ---- span（常用於修飾文字），a，img（行內塊元素），iframe
特點：只占自身大小，可以設置水平方向的 padding ，margin 值，無法設置 width，height
一般使用規範：
a 元素可以包裹除他本身之外的任何元素
p 元素內不要包裹塊元素
一般來說用塊元素去包裹內聯元素
通過 CSS 修改類型
display：inline 內聯元素
display：block 塊元素
display：inline-block 行內塊元素（可設置 height 的行內元素）
display：none 隱藏且不占用文檔中的位置（visibility: hidden 隱藏但占位置）
四、HTML 標簽
- <meta />
設置網頁編碼
<meta charset="UTF-8" />
設置關鍵字
<meta name="keywords" content="HTML, CSS,JS" />
設置網頁描述
<meta name="description" content="這是我的大亂燉筆記" />
設置請求重定向(5秒後跳轉)
<meta http-equiv="refresh" content="5;url=https://www.baidu.com" />
- <a></a>
href 屬性取值
href="#" ---- 回頁面頂部
href="#id" ---- 到對應id的元素所在的位置
href="mailto：[email protected]" ---- 給我發郵件
target 屬性取值
target="_self" ---- 在當標簽打開鏈接（預設）
target="_blank" ---- 在新標簽打開鏈接
在 iframe 中打開
<a href="https://www.baidu.com" target="baidu">打開百度首頁</a> <iframe src="https://www.tencent.com" name="baidu" width="300px" height="500px"></iframe>
為不同狀態的 a 標簽設置樣式（書寫樣式 a:hover，a:active 時不可交換順序）
a:link 未訪問之前的樣式
a:visited 訪問後的樣式（只能設置字體顏色）
a:hover 滑鼠懸浮時的樣式
a:active 點擊剎那的樣式
- <strong></strong>
強調標簽里的內容 樣式 -- 加粗（<b></b> 樣式加粗，無語義）
- <em></em>
標簽里內容語氣上的強調 樣式 -- 斜體（<i></i> 樣式斜體，無語義）
- <small></small>
多用於合同小字，版權聲明之類的文本 樣式 -- 比父標簽的字體小
- <cite></cite>
引用書名，歌名，電影名（表示參考） 樣式 -- 內容斜體
- <q></q>
引用句子，行內引用（短引用） 樣式 -- 內容帶雙引號
- <blockquote></blockquote>
引用很多句子，塊級引用（長引用） 樣式 -- 獨占一行
- <sup></sup>
設置上標 樣式 -- 博客園[1]
- <sub></sub>
設置下標 樣式 -- H2O
- <del></del>
表示刪除內容 樣式 -- ¥999
- <ins></ins>
表示插入的內容 樣式 -- 內容帶下劃線
- <pre></pre>
預格式，常與 code 連用 樣式 -- 保留文本格式（換行，空格）
- <code></code>
常與 pre 連用，插入代碼塊 樣式 -- 單獨使用沒啥特別的效果
- <ul></ul>
無序列表多用與頁面菜單佈局
type 屬性取值：
type="disc" --- 列表項為實心圓點（預設）
type="square" --- 列表項為實心方塊
type="circle" --- 列表項為空心圓點
- <ol></ol>
帶序號的列表
type 屬性取值：
type="1" --- 列表項為數字（預設）
type="i" --- 列表項為小寫羅馬字
type="I" --- 列表項為大寫羅馬字
type="a" --- 列表項為小寫字母
type="A" --- 列表項為大寫字母
- <dl></dl>
<dl> <dt>西紅柿炒雞蛋</dt> <dd>新鮮的西紅柿，洗凈，切成片，雞蛋打碎。。。。。。。</dd> </dl>
定義列表，列表項 dt 是被定義的內容，dd 是對定義內容的描述（表現為縮進2個字元）。對菜譜的描述，人物的描述中會用到
- <table></table>
<table> <thead> <tr> <th>row1</th> <th>row2</th> <th>row3</th> </tr> </thead> <tfoot> <tr> <td>sum:</td> <td colspan="2">6</td> </tr> </tfoot> <tbody> <tr> <td>1</td> <td>2</td> <td rowspan="2">0</td> <tr> <td>1</td> <td>2</td> </tr> </tbody> </table>
表格的列數，由列數最多的那個 tr 決定。th 是特別的 td，在表頭中。樣式 -- 文字居中，加粗。tfoot 與 tbody 交換位置是可以的。
td 屬性 colspan -- 橫向合併單元格，值為要合併的 td 個數，屬性 rowspan -- 縱向合併單元格，值為要合併的 td 個數（縱向合併只能向下合併）
表格邊框，可給 td，table 分別設置 border。給 table 設置 border-spacing 指定二者 border 之間的距離；給 table 設置 border-collapse: collapse 可以合併(重疊)二者的邊框。
註：給 table 設置 border-collapse: collapse 後，border-spacing 自動失效
- <form></form>
<form action="/xxx/query" method="post" onsubmit="return false"> <fieldset> <legend>登錄</legend> <label for="user">用戶名</label> <input type="text" name="user" id="user" autocomplete="off"> <br> <label for="lock">密 碼</label> <input type="password" name="lock" id="lock"> </fieldset> <br> <fieldset> <legend>調查問卷</legend> <label for="pic">選擇頭像: </label> <input type="file" name="pic" id="pic"> <br> <br> 性別 : <input type="radio" name="sex" value="female" id="female"><label for="female">女</label> <input type="radio" name="sex" value="male" id="male" checked="checked"><label for="male">男</label> <br> <br> 興趣 : <input type="checkbox" name="hobby" value="swim" id="swim"><label for="swim">游泳</label> <input type="checkbox" name="hobby" value="sleep" id="sleep" checked="checked"><label for="sleep">睡覺</label> <input type="checkbox" name="hobby" value="eat" id="eat"><label for="eat">吃飯</label> <br> <br> 居住地 : <select name="city"> <option value="shenzhen">深圳</option> <option value="guangzhou" selected="selected">廣州</option> </select> <br> <br> 說點啥 : <textarea name="msg" cols="30" rows="8"></textarea> </fieldset> <input type="reset" value="重置"> <input type="submit" value="提交"> <input type="button" value="按鈕"> </form>
input 屬性 type 可選值 text，password，radio，file，checkbox，reset，submit，button。type 是 radio 時，要保持 name 是相同的，作為按鈕時，沒有 name 屬性。
如果希望某項被預設選中，設置 checked="checked" 屬性（input 元素） 或 設置 selected="selected" 屬性（select 元素）。
select 元素設置 multiple="multiple" 屬性，可按 Ctrl 鍵多選，給 option 套父元素 <optgroup label="groupName"></optgroup> 可對元素進行分組.
屬性 autocomplete="off" 禁止瀏覽器顯示歷史輸入記錄，屬性 disabled="true" 可以設置禁用輸入，屬性 readonly="true" 可以設置為只讀。但js 仍然能對其取值，賦值。
label 屬性 for 綁定對應的輸入，點擊該標簽即可聚焦到輸入框 或 選中選框
textarea 文本域，屬性 cols 定義列數，屬性 rows 定義行數。樣式 resize: none; 禁止縮放文本域。
fieldset 元素可對錶單進行分組，組名寫在 legend 元素中。
預設的提交方式在 form 元素設置 action（提交地址），method（提交方式），提交後會自動跳轉，禁用預設提交方式只要給 form 設置屬性 onsubmit="return false"
Jquery 的 Ajax 能識別數據是否從 form 元素中獲取的，建議把要提交的數據放在 form 元素中，以防出現不必要的麻煩
- <frameset></frameset>
<frameset rows="50%, 50%"> <frame src="https://www.baidu.com"></frame> <frameset cols="50%, 50%"> <frame src="https://www.tencent.com"></frame> <frame src="https://www.baidu.com"></frame> </frameset> </frameset>
frameset 元素中可以引入多個 frame，但是一定要給 frameset 設置 rows 屬性 或是 cols 屬性，frameset 之間互相嵌套。
frameset 不能和 body 出現在同一個頁面中。frameset 和 iframe 中的內容不能被搜索引擎檢索，而且 frameset 中不能自定義內容。
五、CSS
- 選擇器權重（優先順序）
!important：最高 （慎用）
內聯樣式： 1000
id選擇器：100
類和偽類：10
元素選擇器：1
通配選擇器：0
繼承樣式：無
註：多個選擇器組合時，權重回疊加，但是，仍然無法超越其上一級。（例如：11個元素選擇器疊加，無法超過偽類）
- 長度單位
像素 px ----
em ---- 相對與 當前元素 所在的 父元素 的字體大小（1em = 1font-size）
rem ---- 相對與 根 節點（html）的字體大小（CSS3）
- 顏色單位
String 用於描述顏色的英文單詞 'green' 'red' 'blue'
RGB rgb(dec, dec, dec) 三組10進位的數 （或百分比）+ 不透明度 。例：rgba(33, 55, 88, .6), rgb(20%, 40%, 60%)
HEX #ffffff（#fff）三組16進位的數組合而成
HSLA 和 PS 中的調色一樣 （IE8 及以下不支持） hsla(0, 20%, 70%, .5)
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
S：Saturation(飽和度)。取值為：0.0% - 100.0%
L：Lightness(亮度)。取值為：0.0% - 100.0%
A：Alpha透明度。取值0~1之間。
- 字體 font
瀏覽器預設的字體大小一般是 16px，不同的瀏覽器預設的字體樣式不同，所，通常會給 html 設置一個 font-family 來統一顯示效果
字體分類：
serif --- 襯線字體
sans-serif --- 非襯線字體
monospace --- 等寬字體
cursive --- 草書字體
fantasy --- 虛幻字體
設置字體樣式：
font-family: Arial, "Microsoft YaHei", sans-serif; --- 設置多種預期的字體類型（具體，大類均可），以防電腦中沒有安裝某字體。
font-stlye: normal | italic | oblique --- italic 和 oblique 顯示效果都是斜體
font-weight: normal | bold | 100~900 --- (一般計算計安裝 400（normal） 和 700（bold） 的字體)
font-variant: normal | small-caps --- 轉成小型的大寫字母
簡寫字體樣式：
font: italic small-caps bold 30px/1.5 "微軟雅黑"；
註：此處指定行高 1.5 倍（也可以用具體的數值 px） ，不指定則會使用預設行高。之前如果設置了 line-height 將被此處覆蓋，簡寫 font 樣式需格外註意
color: #ccc; --- 字體顏色需要單獨設置
- 文版樣式
text-transform 改變顯示的樣式，也只是樣式，本質沒變
text-transform: none; -- 預設
text-transform: capitalize; -- 首字母顯示大寫
text-transform: uppercase; -- 所有字母顯示大寫
text-transform: lowercase; -- 所有字母顯示小寫
text-decration
text-decoration: none; -- 預設
text-decoration: underline; -- 下劃線
text-decoration: overline; -- 上畫線
text-decoration: line-through; -- 刪除線
letter-spacing 字元間距
word-spacing （英文）單詞間距 -- （識別空格來判斷是不是單詞）
text-align 文本對齊方式
text-align: left; -- 左對齊（預設）
text-align: right; -- 右對齊
text-align: center; -- 居中
text-align: justify; -- 兩端對齊（調整空格來實現的）
text-indent 設置（只針對）首行縮進（一般設置 2em），取取值可以隱藏文本，只讓 SE 能檢索而不顯示
- 盒模型 box
盒子組成：
margin -- 盒子外邊距
border -- 盒子邊框
padding -- 盒子內邊距
content -- 盒子內容
盒子的可見寬大小 = border * 2 + padding * 2 + content
對於樣式盒子的樣式 width
IE --- width = border * 2 + padding * 2 + content
W3C --- width = content
請在 html 中聲明 DTD ，讓 IE 使用 W3C 的盒子模型，另外，box-sizing: border-box; 樣式可以讓你在佈局時省去很多麻煩
邊框 border
border-style: solid | dotted | dashed | double 四種可選樣式（CSS3 提供了 border-image）
註：在設置 border 時，要同時指定 width ， color ， style ，統一不同瀏覽器預設顯示樣式，content 的背景是會延伸到 padding 的
外邊距 margin
margin-top -- 設置該值為正值（負值），該盒子下移動（上移），並驅使它下麵的盒子下移（上移），但它上面的盒子不動（會被它覆蓋）
margin-bottom -- 設置該值為正值（負值），該盒子不動，它下麵的盒子下移（上移並會覆蓋該盒子）
margin-left，margin-right -- 對於塊元素獨占一行，設置該值對下麵的元素沒啥影響，對與 行內塊 元素，類比 margin-top，margin-bottom
讓 塊 元素水平居中：margin-left: auto; margin-right: auto; 或 margin: 30px auto;
註：行內元素無法設置垂直外邊距值，但可設置 padding 值，設置垂直方向 padding 值不會擠推其它元素，只會覆蓋其它元素，設置水平 margin、padding 值對水平方向的元素有擠推的影響
垂直方向外邊距重疊
網頁中 垂直方向 的 相鄰的 兄弟 元素之間的外邊距會重疊，而不是相加，重疊後，取較大值
如果 父子 元素 垂直方向 的外邊距 相鄰 重疊了，則子元素的外邊距會設置給父元素
給父元素設置 border，或者給父元素設置 ::before{content: ""}，父子元素外邊距不再是相鄰重疊的
瀏覽器預設樣式
瀏覽器自動為許多元素設置了 margin 和 padding 值，如 body 四邊有 8px 的外邊距，p 有上下外邊距之類的，各個瀏覽器還有區別
統一樣式： *{margin: 0; padding: 0}, 或是引入 reset.css
- 溢出 overflow
父元素無法容納子元素時，子元素會溢出
overflow:visible; -- 不做處理，溢出後可見 （預設）
overflow:hidden; -- 溢出的內容被隱藏，不顯示
overflow:scroll; -- 不論是否溢出，均給父元素添加水平和垂直方向滾動條
overflow:auto; -- 根據是否溢出，和溢出的方向，自動為父元素添加滾動條
overflow-x，overflow-y 可以指定水平和垂直方向的溢出樣式
- 文檔流
文檔流在網頁的最底層，它表示是一個頁面中的位置，我們創建的元素預設處在文檔流中
元素在文檔流中的特點：
塊元素
當元素的寬度，高度為自動（auto）時，指定 padding，border 不影響盒子的可見寬的大小，元素的寬度為父元素的 100%，高度被其子元素撐開，獨占一行，自上而下排列
行內（內聯）元素
自占自身大小，從左至右排列，一行不足以容納時，自動換行，其高度被其子元素撐開
元素浮動特點
設置 float: none | left | right 元素浮動會脫離文檔流，不占原來(文檔流中)的位置。遇到 父元素的邊框 或 其它浮動的元素 則停止。文字會環繞在浮動元素周圍。
浮動的 行內快 元素會占用在 浮動方向上的 沒有浮動 的兄弟元素的位置，而一個素浮動後，下麵的元素上移，被浮動的元素覆蓋。
如果浮動元素上邊有一個 沒有浮動 的 塊 元素，則浮動元素不會超過這個塊元素，浮動元素也不會超過它的 浮動的 兄弟元素
浮動元素的 width，height 預設是被內容撐開的，和文檔流中的塊元素不同
內聯（行內）元素浮動後，可以設置它的 with，height，所以浮動後塊元素和內聯元素一樣了
浮動用途：
對塊元素水平佈局，如 ul 列表項 li 水平排列
display: inline-block; 也能使 li 水平排列，但是如果 li 標簽書寫時換行了，列表項之間會有一個空格，雖然可以給父元素設置 font-size: 0 來去除空格...）
浮動帶來的問題：
父元素高度塌陷
文檔流中，未指定父元素 height 值時（靈活的佈局中，一般不設置指定父元素 height 值），父元素高度由子元素撐起，子元素浮動後，父元素就沒有高度，其下麵的元素上移，佈局亂
下麵的未浮動的元素上移，被樓上浮動的元素覆蓋，佈局亂
解決方法
據 W3C 標準中，頁面中的元素都有一個隱含的屬性 Block Formatting Context，預設是關閉的，開啟後有如下屬性
父元素的垂直外邊距不會和子元素重疊
開啟該屬性的元素不會被浮動元素覆蓋
開啟該屬性的父元素的 height 可以被浮動的子元素撐開
開啟 Block Formatting Context 的方式
1. 設置元素浮動； 2. 設置元素絕對定位； 3. 設置元素的 display 為 inline-block； 4. 設置 overflow 為非 visible 的值
上述的四個方法都有些副作用，設置 overflow 的副作用最小
IE 6 不支持 Block Formatting Context ，但它有個隱含屬性 hasLayout
給元素設置 zoom: 1; 即可開啟 hasLayout 屬性 （其它瀏覽器會忽略這個屬性）
清除浮動對下麵未浮動的元素的影響
對受影響的元素設置 clear: left | right | both
clear: left -- 清除左側浮動的元素對當前元素的影響，當前元素不超過左側浮動元素
clear: right -- 清除右側浮動的元素對當前元素的影響，當前元素不超過右側浮動元素
clear: both -- 清除左右兩邊對當前元素影響最大的那個的影響，當前元素不超過兩側浮動元素
鑒於 clear 的功效，只要浮動子元素下麵的元素設置 clear，這個帶 clear 樣式的元素可以撐起父元素的 height
在不增加不必要的子元素的前提下，給父元素設置 ::after{content: ""; display: table; clear: both}，即可解決父元素塌陷的問題
- 定位 position
position: static; -- 定位不開啟（預設）
position: relative; -- 相對定位，相對其自身在文檔流中原來的位置定位，未脫離文檔流，提高一個層級，
指定偏移量後可覆蓋未定位的元素，仍然占用原來的位置，不會改變塊或是內聯元素的類型
position: absolute; -- 絕對定位，相對與開啟了定位的祖先元素定位（祖先都未開啟定位，則相對與 body 定位），
脫離文檔流，提高一個層級，不再占文檔中流中的位置，內聯元素開啟後變成塊元素，height 預設被內容撐開
position: fixed; -- 固定定位（特殊的絕對定位）,相對與瀏覽器視窗定位，且不隨滾動條滾動（IE 6 不支持）
- 層級 z-index
開啟同一種定位後，定位有重疊，且元素的層級一樣時，寫在下邊的 盒子 覆蓋上面的 盒子 在瀏覽器中優先顯示，
手動的給元素設置層級 z-index ，可修改顯示的優先順序
註：沒有開啟定位的元素不能設置 z-index，父元素的層級再高，也不能覆蓋其子元素
- 不透明度 opacity
opacity 的值在 0~1 之間，0 表示 完全透明，1 表示 完全不透明。（IE 8 及以下不支持）
相容低版本 IE 的寫法 filter: alpha(opacity=0~100);
- 背景圖片 background-image
background-image: url("./image/test.jpg");
圖片預設從元素的左上角開始重覆平鋪。
設置背景圖片重覆
background-repeat: repeat; -- 雙方向重覆平鋪（預設）
background-repeat: no-repeat; -- 不重覆
background-repeat: repeat-x; -- 沿 x 方向重覆平鋪
background-repeat: repeat-y; -- 沿 y 方向重覆平鋪
設置背景圖片在元素中的位置
