html、css筆記

<!DOCTYPE>必須是html第一行，其指示瀏覽器關於頁面使用哪個HTML版本進行編寫的指令。

HTML4.0中DOCTYPE宣告引用dtd，因為其基於SGML，DTD規定了標記語言的規則。

HTML5.0不基於SGML，所以不用引用DTD。

W3C建議始終新增<!DOCTYPE>，加強頁面相容性，降低對瀏覽器的依賴，不加就是瀏覽器的標準（造成不同瀏覽器IE，火狐）可能出現不同效果。

元素型別：

行內元素、塊級元素、空元素 

css規範，每個元素都有display屬性，用來確定每個元素的型別

行內元素有：a、b（文字粗體）、span、img、input、select、strong（其中img、input為行內替換元素，也具備塊元素特性）

塊元素：div、ul、ol、li、dl、dt、dd、h1.。。。h5、p

常見的空元素（那些含有空內容的html，就是空元素。空元素是在開始標籤中關閉的。）

：br、hr、img、input、link、meta（雖然不閉合瀏覽器也可以執行、但最好還是閉合）

link和@import有什麼區別

link屬於xhtml標籤，除了載入css外，還能用於定義rss，定義rel連線屬性，而import只能載入css

link是載入頁面同時載入樣式，

import IE5以上可以使用，且只能載入樣式。

瀏覽器核心：

主要分兩部分：渲染引擎和js引擎

渲染引擎：負責取得網頁的內容（html、xml、，影象），整理訊息（引入css等），以及計算網頁顯示方式，

然後會輸出至顯示器或印表機，瀏覽器核心不同對網頁的語法解釋會不同，所有網頁瀏覽器、電子郵件客戶端

以及其它需要編輯，顯示網路內容的應用程式都需要核心。

JS引擎：解釋和執行JS來實現動態效果。

 HTML 語義化：

用正確的標籤做正確的事情
html 語義化讓頁面的內容結構化， 結構更清晰， 便於對瀏覽器、 搜尋引擎解析;
即使在沒有樣式 CSS 情況下也以一種文件格式顯示， 並且是容易閱讀的;
搜尋引擎的爬蟲也依賴於 HTML 標記來確定上下文和各個關鍵字的權重， 利於 SEO;
使閱讀原始碼的人對網站更容易將網站分塊， 便於閱讀維護理解
不要什麼都用div   標籤要用h1、h2、h3  session aside 等 讓瀏覽器更好的識別

1. 儘可能少的使用無語義的標籤div和span；
2. 在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
3. 不要使用純樣式標籤，如：b、font、u等，改用css設定。
4. 需要強調的文字，可以包含在strong或者em標籤中（瀏覽器預設樣式，能用CSS指定就不用他們），strong預設樣式是加粗（不要用b），em是斜體（不用i）；
5. 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
6. 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；
7. 每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

                                         

Label 的作用是什麼：

label 標籤來定義表單控制間的關係,當用戶選擇該標籤時， 瀏覽器會自動將焦點轉
到和標籤相關的表單控制元件上。
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<label>name:<input type="text" name="B"/></label>
 我感覺就是捆綁關係，讓兩個內容聯絡在一起 ，用for和ID來連結(for和id中的內容要相同)

實現不使用 border 畫出 1px 高的線：

在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果:

<div style="height:1px;overflow:hidden;background:red"></div>

title 與 h1 的區別、 b 與 strong 的區別、 i 與 em 的區別:

title 屬性沒有明確意義只表示是個標題， H1 則表示層次明確的標題， 對頁面資訊的抓取也有很大的影響；
strong 是標明重點內容， 有語氣加強的含義， 使用閱讀裝置閱讀網路時<strong>會重讀， 而<B>是展示強調內容。
i 內容展示為斜體， em 表示強調的文字；

Physical Style Elements -- 自然樣式標籤
b, i, u, s, pre

Semantic Style Elements -- 語義樣式標籤
strong, em, ins, del, code

應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。

CSS 的盒子模型:

 W3C 盒子模型；
盒模型： 內容(content)、 填充(padding)、 邊界(margin)、 邊框(border)；
IE 的 content 部分把 border 和 padding 計算了進去;
box-sizing:border-box; （把border和padding算進content）

CSS 選擇符：

1. id 選擇器（# myid）
2. 類選擇器（ .myclassname）
3. 標籤選擇器（ div, h1, p）
4. 相鄰選擇器（ h1 + p）
5. 子選擇器（ ul > li）
6. 後代選擇器（ li a）
7. 萬用字元選擇器（* ）
8. 屬性選擇器（ a[rel = "external"]）
9. 偽類選擇器（ a:hover, li:nth-child）（li:nth-child(2n+1)所以li中的奇數位）

可繼承的樣式： font-size font-family color, UL LI DL DD DT;
不可繼承的樣式： border padding margin width height

CSS 優先順序演算法：

優先順序就近原則， 同權重情況下樣式定義最近者為準;（例如：類選擇器中的樣式和類選擇器所在的標籤內部的樣式）
載入樣式以最後載入的定位為準;
優先順序為:
同權重: 內聯樣式表（ 標籤內部） > 嵌入樣式表（ 當前檔案中） > 外部樣式表（ 外部文
件中） 。
!important > id > class > tag
important 比 內聯優先順序高

下面是不同樣式的權重和權重的累加：

/權重為1/
div{
}
/權重為10/
.class1{
}
/權重為100/
#id1{
}
/權重為100+1=101/
#id1 div{
}
/權重為10+1=11/
.class1 div{
}
/權重為10+10+1=21/
.class1 .class2 div{
}
如果權重相同，則最後定義的樣式會起作用，但是應該避免這種情況出現

div如何居中：

水平居中： 給 div 設定一個寬度， 然後新增 margin:0 auto 屬性div{width:200px;margin:0 auto;}這樣是沒錯啦，不過沒高度在瀏覽器看不到的

讓絕對定位的 div 居中div {position: absolute;width: 300px;height: 300px;margin: auto;top: 0;left: 0;bottom: 0;right: 0;background-color: pink; }水平垂直居中

水平垂直居中一
確定容器的寬高 寬 500 高 300 的層,設定層的外邊距
div {position: relative; /* 相對定位或絕對定位均可 */
width:500px;height:300px;top: 50%;left: 50%;margin: -150px 0 0 -250px;/* 外邊距為自身寬高的一半 */background-color: pink; }
水平垂直居中二
未知容器的寬高， 利用 `transform` 屬性（html5）
div {position: absolute; /* 相對定位或絕對定位均可 */width:500px;height:300px;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: pink; }
水平垂直居中三
利用 flex 佈局,實際使用時應考慮相容性IE11以下要慎重
.container {display: flex; align-items: center;/* 垂直居中 */justify-content: center;/*水平居中 */}
.container div {width: 100px;height: 100px;background-color: pink;/* 方便看效果 */}

display 有哪些值：

block 塊型別。 預設寬度為父元素寬度， 可設定寬高， 換行顯示。
none 預設值。 象行內元素型別一樣顯示。 //隱藏不展示
inline 行內元素型別。 預設寬度為內容寬度， 不可設定寬高， 同行顯示。
inline-block 預設寬度為內容寬度， 可以設定寬高， 同行顯示。
list-item 象塊型別元素一樣顯示， 並新增樣式列表標記。
table 此元素會作為塊級表格來顯示。
inherit 規定應該從父元素繼承 display 屬性的值

position 的值 relative 和 absolute：

absolute
生成絕對定位的元素， 相對於值不為 static 的第一個父元素進行定位。
fixed （ 老 IE 不支援）
生成絕對定位的元素， 相對於瀏覽器視窗進行定位。
relative
生成相對定位的元素， 相對於其正常位置進行定位。
static
預設值。 沒有定位， 元素出現在正常的流中（ 忽略 top, bottom, left, right z-index 宣告） 。
inherit  規定從父元素繼承 position 屬性的值。

經常遇到的瀏覽器的相容性有哪些：

1.瀏覽器預設的 margin 和 padding 不同。 解決方案是加一個全域性的*{margin:0;padding:0;}來統一。（簡書中不推薦）
下面是阿里淘寶的全域性：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin:0; padding:0;} body, button, input, select, textarea {font:12px/1.5tahoma, arial,\5b8b\4f53;} h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; }

IE 下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用 getAttribute()獲取自定義屬性;

Firefox 下,只能使用 getAttribute()獲取自定義屬性。
解決方法:統一通過 getAttribute()獲取自定義屬性。

IE 下,even 物件有 x,y 屬性,但是沒有 pageX,pageY 屬性;
Firefox 下,event 物件有 pageX,pageY 屬性,但是沒有 x,y 屬性。
解決方法： （ 條件註釋） 缺點是在 IE 瀏覽器下可能會增加額外的 HTTP 請求數。
Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決。

超連結訪問過後 hover 樣式就不出現了 被點選訪問過的超連結樣式不在具有 hover
和 active 瞭解決方法是改變 CSS 屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

為什麼需要清除浮動：

通常我們在寫html+css的時候，如果一個父級元素內部的子元素是浮動的（float），那麼常會發生父元素不能被子元素正常撐開的情況，如下例子所示：

<div class="container"> <!-- black -->

<div class="left">left</div> <!-- red -->

<div class="right">right</div> <!-- green --></div>

<div class="footer">footer</div> <!-- blue -->

<style>

.container {width: 500px;background-color: black;}

.left {width: 200px;height: 300px;background-color: red;float: left;}

.right {width: 200px;height: 200px;background-color: green;float: right;}

.footer {width: 400px;height: 50px;background-color: blue;}

</style>

  

雖然footer在container外部，卻沒位於底端，因為container內部子元素為float，導致container並沒有被撐開（圖中根本沒有黑色元素顯示出來，當然如果你給container中來個高度那都不是問題，哈哈）。

解決方法一：不過給footer中加上clear:both/left問題也可以被解決，不過container的盒子依然沒被撐開

解決方法二：給它加個類clearfix

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}

解析原理：
（1） display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
（2）height:0 避免生成內容破壞原有佈局的高度。
（3）visibility:hidden 使生成的內容不可見， 並允許可能被生成內容蓋住的內容可
以進行點選和互動;
（4） 通過 content:"."生成內容作為最後一個元素， 至於 content 裡面是點還是其
他都是可以的
（5） zoom： 1 觸發 IE hasLayout。

通過分析發現， 除了 clear： both 用來閉合浮動的， 其他程式碼無非都是為了隱藏掉 content 生成的內容，
這也就是其他版本的閉合浮動為什麼會有 font-size： 0， line-height： 0。

CSS優化，提高效能

（這裡只是簡單提交）

1、載入效能 
主要是從減少檔案體積，減少阻塞載入，提高併發方面入手
2、選擇器效能

3、渲染效能

4、可維護性
較為具體的優化方案： 
慎重使用高性屬性：浮動、定位； 
去除空規則； 
屬性值為0時，不加單位； 
屬性值為浮點數0.**時，可以省略小數點前的0； 
標準化各種瀏覽器字首，帶瀏覽器字首的在前，標準的在後； 
不使用@import字首，它會影響css載入速度； 
充分利用css繼承屬性，減少程式碼量； 
抽象提取公用樣式，減少程式碼量； 
選擇器優化巢狀，儘量避免層級過深（最好不要超過3層）； 
將css檔案放在頁面的最上面；

margin 和 padding 分別適合什麼場景：

margin 是用來隔開元素與元素的間距；margin 用於佈局分開元素使元素與元素互不相干；

padding 是用來隔開元素與內容的間隔；padding 用於元素與內容之間的間隔， 讓內容（ 文字） 與（ 包裹） 元素之間有一段