【江哥帶你從“零”玩轉Html5 + 跨平臺開發】學習筆記
阿新 • • 發佈：2019-02-18
最近一段時間都沒有寫部落格，一是因為有新的專案要做，而是最近在學習有關H5移動開發相關方面的內容，以下是看了“【江哥帶你從“零”玩轉Html5 + 跨平臺開發】”總結的學習筆記，目前只是更新到了H5+CSS3，相關視訊網站地址：http://bbs.520it.com/forum.php?mod=viewthread&tid=2418
HTML學習筆記
字符集：header標籤中新增<meta charset = “GBK”/>解決亂碼，指定當前網頁字符集。
注意：在html檔案中指定的字符集和儲存這個檔案的字符集一直，否則還會楚翔亂碼。
DTD文件宣告。
每一個不同版本的規範都有不同的DTD文件宣告。
<!DOCTYPE html>
注：DTD文件宣告必須寫在第一行。不區分大小寫。不是一個標籤。是一個指令。瀏覽器編譯/解析/渲染網頁時不會完全依賴DTD文件宣告。
base標籤：就是專門用來統一指定當前網頁中的超連結需要如何開啟。必須寫在head標籤。
列表：
無序列表
<ul>
<li>內容</li>
</ul>
<ul>和<li>是一個組合，一般整體出現，不會單獨出現。
有序列表
<ol>
<li>內容</li>
</ol>
定義列表：1）網站尾部描述資訊，例如京東尾部的購物指南，配送方式等。2）做圖文混排
<dl>
<dt></dt>definition title，定義標題
<dd></dd>definition description，定義描述
</dl>
<dd>和<dt>中新增其他標籤。
webStorm快速編寫<ul>格式
ul>li*3然後按tab鍵
ul>li*2>h2+ul>li*3
格式化：command+option+l
註釋：command+/
表格標籤：一個table標籤就是一個表格
注：表格邊框有邊框屬性，預設屬性值為0的。
<table>
<tr>
<td></td>
</tr>
</table>
<caption></caption>為表格的標題。寫在<table>標籤裡。自動相對錶格居中。
<th><th/>標題單元格標籤，文字預設加粗，居中。
表格的儲存資料：(完整結構)
1. 標題 caption
2. 表頭 thead
3. 內容 tbody
4. 頁尾 tfoot
注：如果指定了thead 和 tfoot，設定table高度不會受影響，有自身的預設高度。
合併單元格：
水平方向合併<td colspan = “2”>把當前單元格當做兩個單元格看待，需把多出的單元格刪掉。
只能向上或者向下合併。
垂直方向合併：<td rowspan=“2”>，同理刪除多餘單元格。
表單：收集使用者資訊
格式：
<form>
<表單元素>
</form>
常見表單元素：
<input>輸入框，type屬性（功能和外觀），有很多型別。
提交表單資料：
新增action，提交的路徑URL
提交內容新增name屬性。
隱藏域：配合提交按鈕將一些資料偷偷的提交到伺服器。（Ajax）
datalist :輸入框待選項，需要繫結輸入框
<input type = “test” list = “listId”>
<datalist id=“listId”>
<option>待選內容</option>
</datalist>
select 標籤，下拉列表。不能輸入內容，直接選擇。可以設定預設值。
可以使用optgroup標籤包裹進行分組。
<select>
<optgroup label = “分組名稱”>
<option>待選內容</option>
<option selected = “selected”>預設選項</option>
</optgroup>
</select>
多行輸入框：<textarea>標籤。
css學習筆記
優點
1.不用記憶哪些屬性屬於哪個標籤。
2.需求變更不需要修改大量的程式碼。
css，只能放在<style>標籤中，<style>標籤只能放在<head>標籤中。 type=“text/css”：代表文字的css樣式。 css： 標籤名稱 { 屬性名稱：屬性值 } 選擇器：標籤名稱 屬性 設定字型：可以選擇備選方案。中文字型能處理中文和英文，英文字型只能處理英文。 font-family:”Times New Roman”,”微軟雅黑” 單獨給英文設定字型，英文字型放在前面 文字樣式縮寫：font：italic bold 10px “楷體” 縮寫格式中，style和weight不是必寫項並可以交換位置。 有的屬性值必須寫，並且必能隨便亂放位置，size必寫family前面，並且size和family必需協助最後。 文字縮排的屬性：text-indent:2em縮排2個文字。 標籤選擇器： 根據指定的標籤名稱，在當前頁面找到所有標籤並設定屬性。 id選擇器和類選擇器，id名稱唯一，不能重複。 前面必寫新增“#”。 名稱規範：數字，字母，下劃線。不能以數字開頭。 類名選擇器：可以重複，前面加“.”，給某個特定標籤設定屬性的。一個標籤可以同時繫結多個類名（用空格分開）。 後代選擇器：找到指定標籤的所有後代標籤，設定屬性。 標籤名稱1 標籤名稱2 { } 先找到標籤1，然後查詢標籤1下的所有標籤名稱2。 空格分開，後代既包含該標籤中的所有標籤2。 可混合使用，可無限延伸，例如： #id .class { 屬性值 } 子元素選擇器： 找到指定標籤中所有特定的直接子元素，然後設定屬性。 先找到標籤1，然後找標籤1下所有直接子元素的標籤2。 格式： 標籤1>標籤2 { 屬性 } 注意：只會查詢兒子，不會查詢其他巢狀的孫子，”>”相連線，同後代選擇器一樣，可以混合使用並無限延伸。 找id標籤下的類為class的標籤下的div。 #id>.class>div { } 後代選擇器和子選擇器的區別？ 1.一個是空格連結，一個是>號連線。 2.後代：兒子/孫子… 子選擇器：兒子 後代選擇器和子選擇器的共同？ 1.混合使用 2.通過連線符號一直無限下去。 交集選擇器：給所有選擇器選擇的標籤中，相交的那部分標籤設定屬性。 格式： 選擇器1選擇器2{ 屬性 } 選擇器之間沒有連線符號。 例如： p.paral { 屬性 } #id.class{ 屬性 } 找到id是“id”的所有標籤，類名是”class”的所有標籤，這些標籤相交的部分。 並集選擇器：給所有選擇器選擇的標籤中，並集的那部分標籤設定屬性。 格式： 選擇器1，選擇器2{ } 使用“,”相連線， #id，.class{ 屬性 } 兄弟選擇器：同級關係例如<head>和<body>標籤。 相鄰兄弟選擇器（CSS2）：給指定選擇器後面緊跟的那個選擇器選中的標籤設定屬性。 格式：選擇器1+選擇器2 { 屬性 } h1+p{ color:red; } 例如：給相鄰<h1>標籤的<p>標籤設定屬性（段落1和段落4） <h1>標題1</h1> <p>段落1</p> <p>段落2</p> <p>段落3</p> <h1>標題2</h1> <p>段落4</p> <p>段落5</p> <p>段落6</p> 注意：+號相連線，只能選中緊跟其後的那個標籤。 例如：段落1不會變成紅色字型。 <h1>標題1</h1> <a href=“#”>超連結</a> <p>段落1</p> <p>段落2</p> <p>段落3</p> <h1>標題2</h1> <p>段落4</p> <p>段落5</p> <p>段落6</p> 通用兄弟選擇器(CSS3)：給指定的選擇器後面的所有選擇器選擇的所有標籤設定屬性。 格式：選擇器1~選擇器2 { 屬性 } h1~p{ color:red; } 注意：~連線，選中的是指定選擇的後面的某個選擇器選中的所有標籤，無論有沒有被其他標籤分割。 例如：給<h1>標籤的後面的所有<p>標籤設定屬性。 <h1>標題1</h1> <p>段落1</p> <p>段落2</p> <p>段落3</p> <h1>標題2</h1> <p>段落4</p> <p>段落5</p> <p>段落6</p> 例如：段落1仍會變成紅色字型，不受影響。 <h1>標題1</h1> <a href=“#”>超連結</a> <p>段落1</p> <p>段落2</p> <p>段落3</p> <h1>標題2</h1> <p>段落4</p> <p>段落5</p> <p>段落6</p> 序選擇器：（CSS3中新增的最具代表性的選擇器） 1.同級別的第幾個 1）同級別中第一個：:first-child 格式：p:first-child { color:red； } 例如：段落1和段落3變紅。 <p>段落1</p> <p>段落2</p> <div> <p>段落3</p> <p>段落4</p> <p>段落5</p> </div> 注意：不區分型別。同級別第一個是<h1>，所以段落1不會變紅。 例如：段落1不會變紅，段落3變紅。 <h1>標題2</h1> <p>段落1</p> <p>段落2</p> <div> <p>段落3</p> <p>段落4</p> <p>段落5</p> </div> 以上這種情況可以使用:first-of-type，就可以使段落1和段落3變紅 2）同級別中最後一個：:last-child，不區分型別。 3）同級別中第n個：:nth-child(n)，不區分型別。 4）同級別中倒數第n個：:nth-last-child(n)，不區分型別。 5) 選擇標籤中只有一個子元素的子元素標籤:only-child 例如：段落3變紅，Q:為什麼段落一沒有變紅？因為最外層有兩個標籤，<p>和<div>。 <p>段落1</p> <div> <p>段落3</p> </div> 2.同級別同類型的第幾個 1) 同級別同類型第一個:first-of-type，區分型別。 2) 同級別同類型最後一個:last-of-type，區分型別。 3) 同級別同類型第n個:nth-of-type(n)，區分型別。 4) 同級別同類型倒數第n個:nth-last-of-type(n)，區分型別。 5) 選擇標籤中同類型的標籤只有一個子元素的子元素標籤:only-of-type 例如：段落1和段落3都變紅變紅，區分型別。 <p>段落1</p> <div> <p>段落3</p> <h1>標題</h1> </div> 補充： 同級別： 1)基數都變成紅色（段落1，3，5）：:nth-child(odd) 2)偶數都變成紅色（段落2，4，6）：:nth-child(even) 3)符合表示式的標籤變成紅色：:nth-child(xn+y) x和y是使用者自定義的，而n是一個計數器，從0開始遞增。p:nth-child(2n+0){ color:red }：（段落2，4，6變成紅色） <p>段落1</p> <p>段落2</p> <p>段落3</p> <p>段落4</p> <p>段落5</p> <p>段落6</p> 同級別同類型： 1)基數都變成紅色（段落1，3，5）：p:nth-of-type(odd) 2)偶數都變成紅色（段落2，4）：:nth-of-type(even) <h1>標題1</h1> <p>段落1</p> <p>段落2</p> <p>段落3</p> <h1>標題2</h1> <p>段落4</p> <p>段落5</p> <h1>標題3</h1> <p>段落6</p> 屬性選擇器 1.根據指定的屬性名稱找到對應的標籤，然後設定屬性。 格式：[attribute] 例如：將有”id”屬性的<p>標籤設定為紅色： p[id]{ color:red; } <p id=“id1”>段落1</p> <p id=“id2”>段落2</p> <p>段落3</p> 2.找到指定屬性名稱，並且屬性值等於value的標籤，然後設定屬性。 格式：[attribute=value] 最常見應用場景，設定<input>的標籤。 其他屬性選擇器： 1.屬性取值以什麼開頭。 [attribute|=value] CSS2：只能找到以“abc”開頭，並且“abc”與其他值以”-”分割。如下 <img src= “” alt=“abc-www”> [attribute^=value] CSS3 格式：<img>標籤中alt屬性以”abc”開頭的標籤。 img[alt^=abc] { color = red; } 2.屬性取值以什麼結尾。 [attribute$=value] CSS3 3.屬性取值是否包含某個特定值。 [attribute~=value] CSS2：只能找到獨立單詞，也就是包含”abc”，並且被空格隔開。 [attribute*=value] CSS3：只要包含“abc”就能被找到。 CSS三大特性： 1.繼承性：給父元素設定屬性，子元素也可以使用。 例如：給div設定顏色為紅色，段落會變成紅色字型。 div{ color:red; } <div> <p>段落</p> </div> 注意： 1.不是所有屬性都能繼承：color/font-/text-/line開頭的屬性才可以繼承。 2.不僅僅是兒子能繼承，只要是後代都能繼承。 3.繼承性的特殊性，只能單獨設定其屬性。 1）a標籤的文字、顏色和下劃線是不能繼承的。 2）h類 標籤的文字大小是不能繼承的。 應用場景： 一般用於設定網頁上的一些共性的資訊，例如：網頁文字顏色，字型等。 2.層疊性：CSS處理衝突的一種特性。（按優先順序顯示屬性） 注意：只有在多個選這群選中同一個標籤，又設定的相同的屬性就會發生層疊性。 CSS Cascading(層疊性) stylesheet 3.優先順序：多個選這群選中同一個標籤，又設定的相同的屬性，如何層由優先順序決定。 優先順序判斷的三種方式： 1）是否是直接選中（間接選中就是繼承） 間接選中：誰離目標標籤近就設定其屬性 2）是否是相同選擇器 相同選擇器，誰寫在後面就選擇誰。（同是類選擇器等） 3）不同選擇器 如果都是直接選擇，並且不是相同型別的選擇器，就會按照選擇器的優先順序來層疊。 id>類>標籤>萬用字元>繼承>瀏覽器預設 優先順序important 作用：用於提升某個直接選中標籤的選擇器的某個屬性的優先順序，可以將被指定的屬性優先順序提升到最高。 注意： 1）只能用於直接選中，不能用於間接選中。 2）萬用字元選擇器選中的標籤也是直接選中的，可以使用important。 3）!important只能提升被指定的屬性的優先順序，其他屬性的優先順序不會被提升。 4）!important寫在分號前面。 優先順序的權重 作用：當多個選擇器混合在一起使用時，可以使用權重來判斷誰的優先順序高。 計算規則： 1）所限先計算選擇器中有多少個id，id多的選擇器優先順序最高。 2）如果id個數一樣，再看類名個數，類名個數多的優先順序最高。 3） 同理，類名個數一樣看標籤個數。 4）如果id,類名，標籤個數都一樣，誰寫在後面優先順序最高。 注意：只有選擇器為直接選中的，權重才有用。 div和span標籤 div:一般用於配合css完成網頁的基本佈局。 span：一般用於配合css修改網頁中的一些區域性的資訊。label繫結表單元素。 區別： 1）div:單獨佔領一行，span不會單獨佔一行。 2）div:容器基本標籤。span:文字標籤、超連結、 3）容器級標籤可以巢狀所有標籤。文字級可以巢狀文字/圖片/超連結。 CSS元素的顯示模式 分類： 1.快級元素：獨佔一行。容器級標籤+<p。如果沒有設定寬度，預設和父元素一樣寬 2.行內元素：不會獨佔一行。文字級標籤—<p>。不可以設定寬度和高度。 3.行內塊級元素：不佔一行，又可以設定寬度和高度。img標籤 行內，塊級，行內塊級間相互轉換: div{ display:inline/block/inline-block; } 設定背景圖片：如果網頁上出現了圖片，那麼瀏覽器會再次傳送請求獲取圖片。 設定背景圖平鋪方式：backgroud-repeat。 控制背景圖片位置：backgroud-position:left top 取值：1）居停方位名詞 2）具體畫素(一定要寫單位px) CSS精靈圖：一種影象的合成技術。減少圖片請求次數，降低伺服器壓力。 通過定位找到我們想要的圖片。 推薦工具：fireworks 注意：定位的時候移動的是負數的x和y值。 邊框框屬性的格式： 1）border:邊框的寬度 邊框的樣式 邊框的顏色。（連寫格式） 2）border-top，border-bottom，border-left，border-right（連寫格式） 3) 按照要素，顏色，樣式，寬度（border-width、border-style、border-color）（連寫格式） 例如：(上 右 下 左) border-width：1px 5px 2px 10px border-color: red green blue yellow 注意： 省略左邊屬性，左邊就會和右邊一樣。 同理省略下邊，回和上邊一樣 只寫一個值，其他值和這個值得屬性值一樣。 4）border-top-width等等樣式（非連寫格式） 內邊距屬性：邊框和內容之間的距離。 設定內邊距，標籤的大小也會發生變化。 1.非連寫：padding-top等樣式 2.連寫：padding：(上 右 下 左)同border一樣 省略左邊屬性，左邊就會和右邊一樣。 同理省略下邊，回和上邊一樣 只寫一個值，其他值和這個值得屬性值一樣。 外邊距屬性：標籤與標籤之間的距離。 1.非連寫：margin-top等 2.連寫：margin(上 右 下 左) 注意：外邊距沒有背景顏色，內邊距有背景色 外邊距合併現象：垂直方向外邊距不會疊加，會出現合併現象，有多個margin，不會相加，取最大值。 盒子模型：html中所有德爾標籤都是盒子模型，能夠設定寬高，邊框，外邊距，內邊距。 內容的寬高：width.height設定的屬性 元素的寬高：邊框+內邊距+內容的寬高。 元素空間的寬高：外邊距+邊框+內邊距+內容的寬高。 保證增加border/padding元素的寬高不變（box-sizing，css3，內容的寬高減少） box-sizing:content-box 元素寬高=邊框+內邊距+內容的寬高。 box-sizing:border-box 盒子元素寬高不變。 元素寬高=內容的寬高 注意點： 1.如果兩個盒子是巢狀關係，設定了裡面一個盒子的頂部外邊距，外面盒子也會同時被頂下拉。 2.如果外面盒子不想被頂下來，可以新增邊框屬性就可以。 3.控制巢狀盒子距離，首先考慮 padding。設定父子關係標籤屬性。 4.巢狀關係盒子中，使用margin: 0 auto;水平居中，只對水平方向有效。 清空預設邊距： *{ margin:0; padding:0; } 萬用字元會遍歷所有標籤，效能不好。 行高和字號：line-height 1）文字在行高中預設為垂直居中。 2）盒子高度和行高設定一樣（一行文字） 3）兩行文字居中：padding設定。 網頁佈局方式 1.標準流排版方式（又叫文件流/普通流）瀏覽器 預設排版方式，（垂直排版（塊級），水平排版（行內，行內塊級）) 2.浮動流排版方式 浮動流一種辦脫離標準留的排版方式（水平排版，只能設定標籤左對齊或者右對齊，沒有居中 浮動流不能使用margin: 0 auto 浮動流不分行內，塊級元素，都會顯示在同一行，並且塊級元素能設定寬高。 浮動流中的原素和標準流中的行內塊級元素很像。 浮動元素脫標： 脫標：脫離標準流 當某一個元素浮動後，那麼這個元素看上去就像標準流中刪除一樣。 浮動元素高度問題 1.標準流中，內容的高度可以撐起父元素的高度。 2.在浮動流中，浮動的原始是不能撐起父元素的高度。 清除浮動方式： 1)給前面一個父元素設定高度（最好不要設定高度，用的比較少） 2）給後面的盒子新增clear屬性。（clear:left；）left/right/both/none 注意：當給某個原始新增clear屬性，那麼這個元素的margin屬性會失效。 3）隔牆法 1.外牆法：兩個盒子中間新增額外的塊級元素（class = “wall”），並設定其clear：both;屬性。 注意：外牆法可以讓第二個盒子使用margin-top屬性，不能讓第一個盒子使用margin-bottom 屬性。所有最好設定中間的塊級元素的高度就可以設定兩個box之間的間隙。 2.內牆法:第一個盒子所有子元素最後新增格外的塊級元素（class = “wall”），並設定其clear：both;屬性。 注意：外牆法可以讓第二個盒子使用margin-top屬性，也能讓第一個盒子使用margin-bottom 屬性。同時也可以設定中間的塊級元素的高度就可以設定兩個box之間的間隙。 外牆、內牆之間的區別？ 1.內牆法可以撐起第一個盒子的高度，外牆法不可以 。 注意：企業中一般不常用隔牆法清除浮動。（結構和樣式分離，隔牆法需要新增空標籤設定邊距，所以不推薦） 4）使用偽元素選擇器新增塊級元素，去浮動。（跟內牆法的原理一樣，但是是利用css去新增塊級元素） .box1::after{ content:””;//子元素內容為空 display:block; height:0px;//高度設定為0 visibility:hidden;//設定子元素不可見 clear:both; } 相容問題：偽元素選擇器為css，瀏覽器版本低的需要在格外新增如下程式碼： .box1{ *zoom:1;//相容IE6 } 偽元素選擇器（CSS3）：給指定標籤的內容前面/後面新增一個子元素。 <div> <p>我是段落1</p> 我是文字 <p>我是段落2</p> </div> 偽元素選擇器實現以上程式碼： <div> 我是文字 </div> css樣式程式碼： div::before{ content:”我是段落1”； width:50px; height:50px; display:block; } 偽元素選擇器格式： 標籤名稱::before{ 屬性; } 不顯示子元素： div::before{ content:””； width:50px; height:0px;//高度設定為0 display:block; visibility:hidden;//設定子元素不可見 } 5）使用orderflow屬性清除浮動：將盒子1樣式中新增orderflow就可以實現。 orderflow屬性作用： 1.不想讓內容超出標籤範圍：orderflow:hidden;屬性 2. 清除浮動 3.兩個盒子巢狀關係，裡邊盒子想要設定margion-top,外邊盒子不會受影響一起頂下來，並且外邊盒子不想設定邊框，這時可以給外邊的盒子設定orderflow:hidden;屬性。 致命注意點：相容問題，IE6同樣不識別。同偽元素選擇其處理方法一樣，新增如下程式碼： .box1{ *zoom:1;//相容IE6 } 3.定位流排版方式 1）相對定位： 1.1 不脫離標準流，相對自己以前在標準流中的位置移動距離。 position：relative，需要配合top:20px，right:20px，等屬性一起使用。 1.同一個方向上的定位屬性只能使用一個。 1.3 區分塊級，行內，行內塊級 1.4 設定margin/padding等屬性會影響標準流（會影響給定位之前的位置，而不是定位之後的位置） 2）絕對定位（跟浮動流類似）：相對於body進行定位，左，上，右，下。 2.1 脫離標準流 2.2 不區分塊級，行內，行內塊級 規律： 無論有沒有祖先元素，都會以body作為參考點。 如果一個絕對定位的元素有祖先元素，並且祖先元素（巢狀層級可以是多級）也是定位流（相對定位，絕對定位，固定定位），那麼就以定位流的那個祖先元素作為參考點。注意靜態定位不可以。 多個祖先元素都為定位流，以離該元素最近的那個靜態定位作為參考點。 注意點： 絕對定位元素以body作為參考點，那麼其實是以網頁首屏的寬度和高度作為參考點，而不是以整個網易的寬度和高度作為參考點。 絕對定位的元素會忽略祖先元素的padding屬性。 相對定位弊端：相對定位不會脫離標準流，會繼續在標準流中佔用一份空間，不利於佈局。 絕對定位弊端:預設情況下絕對定位的元素會以body作為參考點, 所以會隨著瀏覽器的寬度高度的變化而變化。 子絕父相（使用絕對定位和相對定位混合使用）：子元素用絕對定位, 父元使用相對定位。 讓局對定位元素水平居中： div{ position:absolute; left:50%; margin-left：-150px;(該元素寬度一半 ) } 3）固定定位：位置固定，不隨滾動條滾動。多用於設定背景圖片。 3.1 固定定位元素脫離標準流。 3.2 不區分塊級，行內，行內塊級 ie6不支援固定定位。 4）靜態定位：預設就是靜態定位 z-index屬性：預設情況下所有的元素都有一個預設的z-index屬性，取值為0. 作用：專門用於控制定位流元素的覆蓋關係的。 預設情況下，定位流的元素會蓋住標準留的元素。 預設情況加定位流的元素後面變形的會蓋住前面編寫的元素。 如果定位流的元素設定了z-index屬性，誰的z-index屬性比較大，誰就顯示在上面。 注意點： 1.從父現象 1.1 如果兩個元素的父元素都沒有設定z-index屬性，那麼誰的z-index屬性比較大誰就顯示在上面。 1.2 如果兩個元素設定了z-index屬性，那麼子元素的z-index屬性就會失效，也就是說誰的父元素的z-index屬性比較大，誰就顯示在上面。 未完待續...