不求重複造輪子，但必須要知道輪子是怎麼造的。
阿新 • • 發佈：2019-01-11
前端的基本組成：
- 結構 html
- 表現 css
- 行為 JS
文件說明
宣告文件的型別，是Html4 還是 xhtml 還是H5
<!DOCTYPE html/>H5的文件說明字符集
宣告一個網頁的編碼的格式。
<meta charset="utf-8" />//宣告這個html檔案的編碼格式為UTF-8有關於空格
html中，字元之間再多的空格，瀏覽器也會當成一個空格，同樣，換行也一樣。也會當成一個空格。
實體
不能直接使用<> 等特殊字元，需要使用一些特殊的符號，這些特殊符號成為實體，（轉義字元）
實體以&開頭，;結尾 參考
內聯樣式
就是把樣式寫到標籤裡面的style裡面。內聯樣式只對當前標籤起作用。
內部樣式表
將css屬性寫在head裡面的style裡面寫樣式。
外部樣式表
將樣式獨立分開寫到一個獨立的css檔案中，在head裡面導進去，就可以使用這些屬性。
<link rel="stylesheet" type="text/css" href ="style.css"/>塊元素和內聯元素
- 塊元素：塊元素會獨佔一行，常見的塊元素：div h1 p
- 內聯元素（行內元素）:只會佔用自身大小。常見的內聯元素：span a img iframe，（span 專門用來選中文字，來設定樣式）
- 塊元素一般要用來佈局，內聯元素一般為元素設定樣式。一般用塊元素包含內聯元素，內聯元素一般不會包含塊元素
- 特殊1：a可以包含任意的元素，包括塊元素，除了a本身以外。
- 特殊2： p元素不能包含其他任意的塊元素。
css選擇器
- 元素選擇器：p{} 選中所有的p元素
- id選擇器：#id{} 一個頁面中有且僅有一個。
- 類選擇器：.{} 一個頁面中可以有多個（一個元素裡面可以有多個class，多個class之間用空格隔開）
- 選擇器分組，選擇器1，選擇器2{}，滿足選擇器1和滿足選擇器2的元素全部都會選中（或關係）
- 通配選擇器：*{}選中所有元素
- 複合選擇器，選擇器1選擇器2{}（多個選擇器直接挨在一起，表示既要滿足選擇器1又要滿則選擇器2，複合選擇器一般是類選擇器和元素選擇器組成，一般不會包含ID選擇器，因為id已經可以確定唯一性了。前面的組選擇器是或關係，這個是且的關係）
- 後代選擇器 表示選擇元素裡面的元素，元素之間用空格隔開
div span{} 表示選中div裡面的span元素
#divid span{} 表示選中id為divid裡面的span元素
#divid p span{} 表示選中id為divid裡面的p元素裡面的span元素- 子元素選擇器 表示選擇直接子元素，其他子元素都不要
div > span 表示選中div裡面的直接的span元素，不要孫元素- 偽類選擇器：專門用來表示元素的特殊的狀態，例如超連結是否訪問過、文字框是否獲取焦點等。。。
:link 普通的連結，也就是沒訪問過的連結
:visited 表示訪問過的連結,只能設定字型的顏色，其他屬性不起作用，例如不能設定字型的大小等。
:hover 表示滑鼠在上面的時候
:activity 被啟用的時候，也就是正在點選的時候。
hover 和 activity 不僅可以給a標籤起作用，還可以給其他的標槍使用
:focus 獲取焦點的時候。例如：input輸入框的獲取焦點的時候。
::selection 選中，也就是滑鼠選中頁面上的內容的時候（火狐裡面需要::-moz-selection）moz只支援火狐瀏覽器，- 偽元素選擇器：表示元素中特殊的位置。
:first-letter 表示首字母
:first-line 表示第一行
:before 表示標籤之後，內容之前的部分
:after 表示標籤之前，內容之後
before和after要結合content使用。p:before{content:"我是前面"} 表示在P標籤的前面加上content這段文字- 屬性選擇器：可以根據元素中是否有某個屬性，或者具有某個屬性值，例如：title屬性，表示滑鼠移動到元素上的時候，元素的屬性提示就會出來。
p[title] 表示具有title屬性的p元素
p[title = abc] 表示具有title屬性，並且屬性值必須是abc的p元素
p[title ^= 'ab'] 表示具有title屬性，並且屬性值必須是以ab開頭的屬性的p標籤。
p[title $= 'c'] 表示具有title屬性，並且屬性值必須是以c結尾的p標籤。
p[title *= 'c'] 表示具有title屬性，並且屬性值必須要有c 的P標籤- 其他子類選擇器：
:first-child 第一個直接子元素
p:first-child 表示所有的直接P元素中的第一個
body > p:first-child 表示body裡面的直接子元素中的第一個p元素
:last-child 和first-child就差不多了，
:nth-child 表示第幾個元素 當傳even的時候表示偶數，odd表示奇數
p:nth-child(2){} 表示選中直接子元素的p當中的第二個元素；
:fist-of-type
:last-of-type
:nth-of-type
這三個和前面三個差不多，只不過前面三個必須要是第一個，而這三個前面還可以有其他子元素，前面三個表示元素前面不能有其他子元素- 兄弟選擇器
span + p 表示選中span之後的第一個p元素，span和p之間不能有其他元素
span - p 和 + 一樣，一前一後
span ~ p 表示span後的所有的p元素，其中span 和 p之間可以有其他元素，也可以沒有- 否定選擇器：也就是選中全部，不要某一個，和選中相反。選中的所有元素中剔除某個元素
p:not(.cls){} 表示選擇除了class為cls的p標籤以外所有的p標籤，- 選擇器的優先順序
使用不同的選擇器選中同一個元素的時候，選擇器有一定的優先順序；
id選擇器的優先順序大於類選擇器，類選擇器的優先順序大於元素選擇器
選擇器的優先順序：
內聯樣式：1000 （指的是style寫在標籤裡面）
id選擇器：100
類和偽類：10
元素選擇器：1
通配選擇器：0
繼承的樣式：沒有優先順序 （繼承表示父元素的屬性）
選擇器中有多個選擇器的時候，多個選擇器的優先順序相加，誰的大就誰優先
（但是要注意的是：10個類選擇器最多也就優先順序為90，不可能超過100）
（選擇器的優先順序一樣，誰在樣式的後面，誰生效）
（在樣式的後面寫!important在屬性值的後面，分號的前面的時候，優先順序最高）- 偽類選擇器的優先順序：偽類選擇器的優先順序是一樣的。 但放置的位置不一樣會有不一樣的效果（偽類選擇器的順序應該是link visited hover active)
標籤
常用的html標籤
- 註釋
不論啥語言，都有註釋哈，首先來看看html的註釋是怎麼寫的。
<!-- -->
html 的註釋用上面這種標籤包裹，可以是多行，也可以是單行的註釋- font
<font color="red">內容<font> //字型標籤，標籤內的內容的顏色為紅色，font 的 size 最大為7- h 標題
<h1> - <h6>，標題標籤，1最大，6最小。- p
段落，最後自動新增一行空格。
p元素內不能包含任何函式。- br
換行標籤（ 自結束標籤）- hr
一條水平線（自結束）- img
src:指定圖片的地址；alt:圖片描述，在圖片沒有的時候顯示,搜尋圖片檢索的時候，需要用到alt
width 和 height 只指定一個的時候，圖片會按比例放大或者縮小。
圖片適用原則：效果一致。使用小的，效果不一致，使用好的。
img 也是一個自結束標籤- meta
可以使用這個標籤來設定網頁的關鍵字，描述，請求的重定向等。
name:名字 keywords，description等。
content:內容，裡面的內容可以用逗號分隔。
<meta http-equiv="refresh" content="5;url=www.baidu.com"> 5秒後開啟baidu- iframe
內聯框架，
src，指定框架的頁面- a
超連結，href 屬性指定目標跳轉的 url
target 指定開啟連結的位置。_self 自身，_black 開啟一個新的視窗。也可以是iframe
a元素可以包含任意元素。除了它本身，也就是不能自我包含- center
居中，裡面的內容都居中- div
塊元素，會獨佔一行，無論內容多少都會獨佔一行
塊元素有：P h1 h2 h3 等
div和其他塊元素的區別，它是一個純粹的塊元素，主要的作用是對頁面進行佈局。- span
span是內聯元素，行內元素，只佔自身大小的元素，不會佔用一行。
常見的內聯元素，a img iframe
span 也沒有任何語義，span專門用來選中元素，來進行設定樣式。- em 和 strong
兩個都是強調，em一般用於一段文字的某一部分，而strong表示整段的。- i 和 b
i 表示斜體 b 表示加粗- small 和 big
small 小 big 大 這兩個標籤常用於一段文字中，某個部分大一點或小一點- cite
表示引用或參考 多用於書名歌名等用書名號引起來的- q 和 quoteblock
兩個都是引用 q用於短引用，會自動的加上雙引號，quoteblock 表示塊引用，會獨立成一塊顯示- sup 和 sub
一個表示上標，一個表示下標，上標例如數學中次方的顯示，下標一般用於化學符號的顯示，例如水是H2O 2就用下標顯示- del
刪除，會自動的給標籤裡面的文字新增刪除線- ins
插入，會自動的給標籤裡面的內容新增下劃線- pre
預格式標籤，也就是會保留程式碼裡面的格式，不會因為多個空格壓縮成一個空格等。程式碼裡面文字是怎麼樣就怎麼樣- code
沒啥意義，只是表示這是程式碼- 列表標籤
- ul li 組成的無序列表
- ol有序列表
- 定義列表 dl dt dd
ul 表示一個列表
type ='disc' 實心圓點 預設
type = quote 實心的正方形
type = circle 空心的圓
一般都不要type 一般用css去除掉，list-
li 表示列表裡面的一個列表項
ol有序列表，區別是，有序列表前面多了序號123
ol的type 可以指定型別。
type = 1 a A i、I（羅馬數字）
定義列表 dl dt dd
dl 是定義一個定義列表
dt 表示被定義的內容
dd 對我們定義內容的描述
ul dl ol 之間可以相互巢狀Html 佈局
- 長度單位
- px 畫素
- % 百分比，表示佔父元素的百分之多少。好處是父元素的改變的時候，子元素的大小也會改變
- em 和百分比類似，它是相對於當前元素的字型大小來計算的
1em = 1 font-size
- 顏色
特殊的顏色可以直接寫，例如，red green等，，，
rgb
background-color：rgb(161,187,209);
background-color：rgb(1%,18%,20%);表示255乘以百分比
background-color：#e43d2a;
字型顏色：直接只用color字型
字型大小，瀏覽器預設的字型大小是16px
font-size，設定字型的大小。其實設定的並不是文字本身的大小，而是文字佔有的大小。
- font-family，設定字型的樣式。font-family：微軟雅黑;宋體，等等
當採用某種字型，當前瀏覽器有，就使用指定的字型，沒有就顯示預設的字型。
該樣式可以指定多種字型，也就是可以接收多個引數，每個引數之間用逗號分開。
當採用多個字型的時候，瀏覽器會優先使用前面的，沒有就下一個，一直沒有就預設咯。
檢視計算機中有什麼字型，在C盤window裡面的font資料夾裡面
字型的分類
sans-serif 非襯線字型
minisoace 等寬字型
curisive 草書字型
fantasy 虛幻字型
襯線和非襯線的區別是：襯線字型筆畫頭尾字型大小不一，非襯線字型，字型筆畫的頭尾大小一致。
等寬字型，表示每個字型的寬度佔的位置都一樣。- font-style 字型樣式
normal 正常
italic 斜體
oblique 傾斜 italic 和 oblique在大部分瀏覽器上是一樣的 ，一般不會用oblique
inherit 繼承父元素的字型樣式
font-weight 用來設定字型的加粗
normal 正常
bold 粗體
bolder 更粗
lighter 更細
還可以接收數字，100-900的整百的數值，但大部分瀏覽器並不支援，也就是100-500都一樣的- font-variant，以用來設定小型大寫字母
normal 正常
small-caps 小型的大寫字母（所有的字母以大寫的形式存在，但字母的大小比正常的大寫字母要小）- font 樣式，可以設定font-XXX的屬性，可以設定5個相關的樣式，將不同的屬性用空格分開
例如 font：italic small-caps bold 60px ‘微軟雅黑";
這些屬性的順序可以隨意調換。也可以不寫。
字型大小和樣式，必須存在，且大小在倒數第二個位置，樣式在最後一個。
5個屬性合併在一起寫的話，效能會比較好。常見的佈局屬性
- line-height 行高
line-height = 30px；表示行高為30px；
line-height = 150%；表示行高為字型大小的百分之150；
line-height = 1；表示一倍行高，跟100%是一樣的效果
line-height 和 height 的大小一致的話，可實現字型在父元素中居中
行高屬性，還可以跟在字型的屬性後面。例如 font：30px/50px；表示字型大小為30px，行高是50；- text-trnsform
可以用來設定文字的大小寫，這個屬性對英文起作用，因為中文是沒有大小寫之分的
none 預設值
capitalize 單詞首字母大寫，所有的單詞的首字母都大寫，通過空格來識別單詞
uppercase 所有的字母都大寫
lowercase 所有的字母都小寫- text-decoration 給文字新增裝飾效果
none 預設值，沒效果
underline 在文字新增一條下劃線
overline 文字頂端新增一條線
line-through 新增一條刪除線
a 標籤的預設值是underlinne 需要去除超連結的下劃線，去掉只需要設定為none就可以了- letter-spacing 設定字元之間的距離
none
10px 表示每個字元之間的間距是10px；對中英文都有效果- word-spacing 設定單詞之間的間距
和 letter-spacing 一樣，
這個屬性，對英文有效果，對中文，很奇怪，每個詞之間不會起作用，只會在遇到空格的時候起作用- text-align 對其方式
left 預設左對其
right 右對齊
center 居中對齊
justify 兩端對齊- text-indent 首行縮排，只對第一行起作用。
20px 表示首行縮排20個畫素。
2em 表示縮排兩個字的大小。
可以是負數，表示縮排去了，隱藏了- width height 寬高
只是內容區域的大小，不包括border，padding等。- border 邊框
border-width 邊框大小
接收1個值的時候， top right bottom left 都一樣
接收2個引數的時候，表示上下，左右
接收3個引數的時候，表示 上 左右，下
接收4個引數的時候，表示 上右下左
上面這中規律適合於下面這兩種屬性
border-width 還可以單獨設定。
border-left 20px,表示，左邊的邊框的大小為20px。
border-color 邊框顏色
border-style 邊框樣式
solid 實線
dotted 點狀邊框
dashed 表示虛線邊框
double 雙實線
其他值不常用
大部分瀏覽器的邊框的寬和顏色都有預設值的，如果沒有寬和顏色，那麼預設都是0
如果設定了寬沒設定顏色，那麼顏色就會使用預設值，
只設置了顏色沒有設定寬，那麼就會使用預設的寬
border的簡寫，border ： 30px red solid； - padding 內邊距
會影響我們元素的盒子的大小- margin 外邊距
如果將 left 和 right 的兩個值設定為auto的話，會自動的在這個元素的父元素中居中。
margin：0 auto；居中
垂直方向的外邊距重合的時候，會取他們的最大值，而不是求和
如果父元素和子元素的外邊距相鄰，則會把子元素的外邊距設定給父元素。（也就是父元素的第一個子元素的外邊距會給父元素）內聯元素不能設定width和height（可以設定水平方向的padding，垂直方向的可以設定，但不影響佈局）
display
inline 可以將一個元素當作內聯元素顯示，也就是行內元素
block 可以將一個元素設定塊元素顯示
inline-block 將一個元素轉換成行內元素，可以將一個元素既有行內元素的特點，也有快元素的特點，既可以設定寬高，也不會獨佔一行
none 此元素不會被顯示，隱藏元素- visibility
可以用來顯示和隱藏元素
visible 顯示 預設是顯示的
hidden 隱藏，是佔位隱藏，也就是沒了，但依舊佔著茅坑- overflow 定義溢位的內容怎麼樣顯示
visible 預設，不會對溢位的內容進行處理
hidden 隱藏
scroll 滑動，不論內容是否溢位，都會加上水平的和垂直的滾動條
auto 內容會被修剪。會根據需要是否加上滾動條- float 浮動
預設是none，在文件流中，垂直襬放；left 向左浮動；right 向右浮動，
元素脫離文件流的時候，下邊的元素會自動的向上移動
元素浮動後，會盡量想頁面的左上或者右上浮動，知道遇到父元素或者其他兄弟浮動元素。
如果浮動元素上邊是一個沒有浮動的塊元素。則浮動元素不會超過塊元素，浮動的元素不會超多他上邊的兄弟元素，最多最多一邊齊。
浮動的元素不會蓋住文字，文字會自動環繞在文字的周圍。可以用來設定文字環繞的效果
如果div的width不設定的話，會自動的佔滿一行，但如果設定了浮動，那麼，寬會被內容撐開。高也一樣。- BFC 和 hasLayout
文件流中，父元素的高度預設是被子元素撐開的，如果給子元素設定了float，那麼父元素的高度就淪陷了。
BFC（block formatting context）IE6（包括6）以下的瀏覽器不支援
父元素的垂直外邊距不會和子元素重疊
開啟bfc的元素不會被浮動元素重疊
開啟BFC的元素可以包含浮動的子元素
開啟bfc的方式
設定元素浮動（設定父元素的浮動）
設定元素的絕對定位
使用這2種方式，可以撐開父元素，但會導致父元素的寬度丟失，而且使用這種方式會導致下邊的元素上移
設定元素為 display：inline-block
可以解決問題，但還是寬度還是丟失。
將元素的overflow設定為非visible，例如設定為auto或者hidden
IE6以下是不支援BFC的，但還有一個屬性，hasLayout屬性，也是一個隱含的屬性。
開啟hasLayout的方式
設定zoom屬性，這個屬性表示放大N倍，zoom:1;表示放大1倍，也就是不變。
這種方式只支援IE，且是在IE8以下，其他瀏覽器都不支援。