整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多互聯網新鮮資訊、工作奇淫技巧關注原創【飛魚在浪嶼】（日更新）
Unicode是涵蓋世界上大多數書寫系統。用在網絡，大多數操作系統，Java和.NET的標準編碼等。
在Unicode誕生之前，都有自己的編碼，它們都不同，而且不兼容編碼。而Unicode是幾乎所有字符的超集，因此可以用于互換信息。
它誕生至今30多年了。
在開始下文之前，如果遇到查詢unicode代碼的，可以使用工具類網站https://unicode.yunser.com/unicode
Unicode 為每個字符（例如a，?， ?，不和?）定義一個代碼/數字。從Unicode 6.2開始（http://www.unicode.org/versions/Unicode6.2.0/），共有109,976個代碼！
它還包括組合字符，諸如??之類，這些字符可以添加到其他字符中；這樣，Unicode不需要字母和重音的每種可能組合設置一個代碼。另一方面，Unicode的一般不關心字體或風格上的區別：比如下面兩個是同一種字符：
Unicode不只是字符集合。它還涵蓋了諸如UTF-8之類的標準編碼。小寫/大寫/標題大小寫映射，整理（排序），換行符，從右到左的腳本的渲染處理等。
因為Unicode是其他編碼的超集，所以它有時包括同一個字符，但是卻有多個不同的代碼，例如，以下三個：
python輸出
為了使它們在相等性測試等中被視為相同的字符串，您應該通過Unicode規范（http://unicode.org/reports/tr15/）運行所有輸入。最常見的形式是 NFC（Normalisation Form C），它盡可能使用預先組合字符，并如果存在多個，則一個嚴格的順序定義這變音符號。NFD D（Normalisation Form D）則盡可能撰寫1個字符。只要您保持一致，使用哪種形式都沒有關系。NFD通常更快（代碼點更少），建議通過NFD運行輸入，并通過NFC輸出。
Compatibility decomposition/兼容性分解（NFKC，compatibility decomposition + canonical composition）會把?，Ⅸ和甚至?映射為為“FFI”，“IX”和“5”分別。搜索文本時，這種NFKC規范化功能會起到幫助。
在Unicode世界中，大小寫并不是那么簡單：
為了確保您的代碼能夠處理這些情況以及任何新的情況，Unicode提供了 一種單向 “ casefold”操作，該操作允許不區分大小寫的比較。
排序（或排序規則）是特定于語言環境的，并且像大小寫一樣充滿特殊性：
僅通過二進制比較進行排序是不夠的。而且，代碼點通常也不是明智的。幸運的是，Unicode指定了一種 可高度自定義的歸類算法，該算法涵蓋了所有邊緣情況，并且做了一些巧妙的工作以使其變得相當快。這是一個示例：2
該UCA可以把“10”和“2”視為數值，如排序“10”“放在“2”后面？” 。把“?”視為字符串“問號”。
大端序有UTF-8，UTF-16和UTF-32。每種編碼都保證幾乎每個碼點和字節序列的可逆映射。
國際字符 給域名帶來了一個大問題。就像 I （I 0049 拉丁文大寫 I）和 l（l 006C拉丁L的小寫） 看起來很相似一樣，Unicode除了增加了許多不可見的控制字符，空格字符和從右到左的文本外，還將這個問題放大很多。
瀏覽器和注冊商已針對此采取了幾種措施：
RFC 3491定義了nameprep，一種在字符串可以在域名中使用之前對字符串進行大小寫折疊，規范化和清理的機制。如果使用了禁止的代碼點，這將刪除許多不可見的字符并拋出異常。
出于傳統原因，DNS不允許ASCII之外的擴展字符，因此Punycode是ASCII兼容的編碼方案。例如，café.com變為xn--caf-dma.com。所有Punycode編碼的域組件都可以通過其xn--前綴立即識別。
這也適用于頂級域名 ：比如中國的代碼為xn-fiqs8s。
在Perl至少，一切（substr，length，index，reverse...）操作是以代碼點為準。但這通常不是你想要的，因為用戶認為像?這樣的字符實際上是兩個代碼點（y + ??）。
甚至看似沒問題的東西，例如printf "%-10s", $str完全中斷組合字符，全角字符（例如中文/日文）或零角字符的操作。
一旦涉及到Unicode ，換行（或自動換行）就變得異常復雜。您必須考慮各種不間斷和不間斷的控制和空格字符，每種語言中的標點符號（例如?和?引號或數字中使用的句號或逗號）以及每個字符的寬度。
當您使用Unicode字符串作為文件或目錄名稱時，所有操作都不好用。使用什么編碼？使用什么API？（Windows有兩種，一種使用Unicode，另一種嘗試使用與語言環境相關的編碼）。Mac OSX文件系統則會執行規范化，例如對文件名執行NFD。如果您的平臺不了解分解后的Unicode，則可能會出現問題。
漢字是中文，日文（漢字）以及韓文和越南文的共同特征。根據腳本的不同，許多腳本都有獨特的視覺外觀，但是Unicode出于簡化和性能的原因將它們統一為一個代碼點（示例）。
這引起了爭議，因為角色的視覺形式可能有意義；可能不會向用戶顯示他們的國家/地區版本，而是其他國家/地區的版本。在某些情況下，它們看起來可能非常不同（例如，直）。正如西方名稱的變化（例如“ John”或“ Jon”）一樣，日語名稱可能使用Unicode無法提供的特定字形變體，因此人們實際上無法以自己喜歡的方式來寫自己的名字！
實際上，用戶選擇一種字體以其想要的樣式呈現字形，無論是日語還是中文。變體選擇器（參見下文）是解決該問題的另一種方法。
由于政治和遺留原因（與舊字符集兼容），Unicode不會嘗試統一簡體和繁體中文。
Unicode 6.0版增加了722個“表情符號”字符，這些表情符號通常在日語手機上使用，但最近在Mac OS X（Lion），Gmail，iPhone和Windows Phone 7中使用。某些字體可能選擇將其呈現為全彩色表情符號。 ; 有些則可能根本不支持他們。
表情符號的Unicode表示，包含你熟悉的LOVE HOTEL 和PILE OF POO
Unicode 6.0的表情符號為許多國家（地區）標志引入了符號，但并不是全部國家。作為一種可選方案，范圍U + 1F1E6 .. U + 1F1FF 定義了從A到Z的符號。如果該范圍中的兩個符號形成了ISO-3166-1國家代碼（例如，法國的“ FR”），則渲染器可以顯示為國旗！
變體選擇器是代碼點，可更改渲染字符之前的字符方式。有256個，它們占據的范圍為U + FE00 .. U + FE0F 和U + E0100.. U + E01EF加上U + 180B，U + 180C和U + 180D。
它們對于蒙古語腳本來說是必不可少的，蒙古語腳本具有不同的字形形式，具體取決于其在單詞中的位置，單詞的性別，附近有哪些字母，單詞是否為外國單詞以及現代與傳統拼字法（詳細信息）。
預計這些將用于提供由Han Unification統一的字形的變體。
它們還用于更深奧的事物，例如數學運算符的襯線版本。
tml和css的關系：css是修飾HTML樣是的，HTML+css是構成網頁的基本頁面結構及樣式。
1、標簽是由英文狀態下< >兩個尖括號構成的。
2、html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。
3、標簽與標簽之間是可以嵌套的，但是先后順序必須保持一致。
4、HTML標簽不區分大小寫，一般采用小寫。
5、head標簽：head標簽為雙標簽，通常嵌套<meta>、<title>、<style>標簽使用。
6、body標簽：網頁中所展示的內容全部放在body標簽中。
2-1語義化
明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中等等。
語義化標簽的好處：
1. 更容易被搜索引擎收錄。
2. 更容易讓屏幕閱讀器讀出網頁內容。
2-2段落標簽-p標簽
語法：<p>段落文本</p>
注意：在網頁上顯示文章，就把文章放在p標簽中。有多少個段落就放多少個p標簽。
2-3 自定義文字樣式-span標簽
語法：<span>文本</span>
注意：這個標簽是沒有語義的，它的作用就是設置單獨的樣式。
2-4標題標簽-hx標簽
語法：<hx>標題文本</hx>（x為1-6）
注意：標題標簽一共有6個，h1,h2,h3,h4,h5,h6,分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。
2-5 自定義塊-div標簽
語法：<div>......</div>
注意：在網頁中獨立的欄目板塊就是一個典型的邏輯部分，每個邏輯部分可以單獨放在div標簽中，div標簽相當于一個容器。
2-6在body中用<header>標簽來定義頭部；<footer>標簽來定義底部；<section>標簽用來定義正文的區域；<aside>標簽，定義一個側邊欄區域。
文本中需要換行的地方使用<br/>標簽，<br />標簽作用相當于word文檔中的回車； 代表一個空格；<hr/>標簽代表水平分割線。 <hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
4-1無序列表-ul-li標簽
語法：<ul>
<li>信息</li>
<li>信息</li>
<li>信息</li>
....................
</ul>
注意：ul-li是無序列表標簽，ul-li是沒有前后順序的，在網頁中默認每項li前顯示的是一個小圓點。
4-2 有序列表-ol-li標簽
語法：<ol>
<li>信息</li>
<li>信息</li>
<li>信息</li>
....................
</ol>
注意：ol-li標簽是有序列表標簽，是用前后順序的，在網頁中默認每項li前從1開始顯示。
5-1 添加圖片標簽-img標簽
語法：<img src="圖片地址" alt="下載失敗時的替換文本" title="提示文本">
講解：
1、src：標識圖像的位置；
2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件。
5-2添加超鏈接-a標簽
語法：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
5-3 a標簽target屬性，可選值為”_self和_blank”，默認值為_self，代表在當前頁面打開鏈接，_blank代表在新窗口打開鏈接。
5-4制作表格標簽-table標簽
講解：
創建表格的四個元素：table、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
2、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
3、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
4、<th>…</th>：表格的頭部的一個單元格，表格表頭。
5、表格中列的個數，取決于一行中數據單元格的個數。
6、border屬性可以為表格添加邊框，屬性值為數字。
注意：
1、table標簽用來定義整個表格，為雙標簽，必須有結束標簽。
2、table標簽里面可以放caption標簽和tr標簽。
3、caption標簽用來定義表格的標題。
4、tr標簽用來設置表格的行，tr里面只能放th或者td標簽，一組tr標簽代表一行。
5、th用來設置表格的標題，會加粗居中顯示。也就是th標簽中的文本默認為粗體并且居中顯示。
6、td同來設置表格的列，一組td標簽代表一列。
7、table表格在沒有添加border屬性之前, 在瀏覽器中顯示是沒有表格線的。
6-1表單標簽-form標簽
表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：<form method="傳送方式" action="服務器文件">。
講解：
1.<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
3. method ： 數據傳送的方式（get/post）。
注意：
1、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 <form></form> 標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
2、method : post/get 的區別這一部分內容屬于后端程序員考慮的問題。
6-2 用戶名和密碼-文本輸入框、密碼輸入框
語法：
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
1、type：
當type="text"時，輸入框為文本輸入框;
當type="password"時, 輸入框為密碼輸入框。
2、name：為文本框命名，以備后臺程序ASP 、PHP使用。
3、value：為文本輸入框設置默認值。(一般起到提示作用)。
6-3 input標簽的Placeholder屬性。
當需要提示用戶輸入框需要輸入框的內容，可以用到placeholder屬性。
1、placeholder屬性為輸入框占位符,里面可以放提示的輸入信息。
2、placeholder屬性的值可以任意填寫,當輸入框輸入內容時,占位符內容消失,輸入框無內容時,占位符內容顯示。
3、占位符內容不是輸入框真正的內容。
6-4數字輸入框
講解：
1、input的type屬性設置為number,則表示該輸入框的類型為數字。
2、數字框只能輸入數字，輸入其他字符無效。
3、數字框最右側會有一個加減符號,可以調整輸入數字的大小,不同瀏覽器表現不一致。
6-5網址輸入框
1、input的type屬性設置為url,則表示該輸入框的類型為網址。
2、數字框的值需以http://或者https://開頭,且后面必須有內容,否則表單提交的時候會報錯誤提示。
6-6郵箱輸入框
1、Input的type屬性設置為email,則表示該輸入框的類型為郵箱。
2、數字框的值必須包含@。
3、數字框的值@之后必須有內容,否則會報錯誤提示。
6-7 創建文本域-textarea標簽
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：
<textarea rows="行數" cols="列數">文本</textarea>
這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。
1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：多行輸入域的列數。
3、rows ：多行輸入域的行數。
4、在<textarea></textarea>標簽之間可以輸入默認值。
6-8 lable標簽
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：<label for="控件id名稱">
注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
6-9 單選框和復選框
兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框
2、value：提交數據到服務器的值（后臺程序PHP使用）
3、name：為控件命名，以備后臺程序 ASP、PHP 使用
4、checked：當設置 checked="checked" 時，該選項被默認選中
注意:同一組的單選按鈕，name 取值一定要一致
6-10 創建下拉菜單-select、option標簽
講解：
1、select和option標簽都是雙標簽，它總是成對出現的，需要首標簽和尾標簽。
2、select標簽里面只能放option標簽，表示下拉列表的選項。
3、option標簽放選項內容，不放置其他標簽。
4、value：<option value=”提交值”>選項</option>
5、selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。
6-11 提交按鈕-submit
當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法：<input type="submit" value="提交">
type：只有當type值設置為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
6-12 重置按鈕-reset
當用戶需要重置表單信息到初始時的狀態時,可以設置reset按鈕。
語法：<input type="reset" value="重置">
type：只有當type值設置為reset時，按鈕才有重置作用
value：按鈕上顯示的文字
7-1 認識CSS樣式
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統一的字體、字號或者顏色等。
7-2 CSS代碼語法
CSS樣式由選擇符和聲明組成，而聲明又由屬性和值組成。
選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素。
聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當有多條聲明時，中間可以英文分號“;”分隔。
7-3 CSS注釋代碼
注釋語句：就像在Html的注釋一樣，在CSS中也有注釋語句：用/*注釋語句*/來表明
7-4 內聯式CSS樣式
內聯式：就是把css代碼直接寫在現有的HTML標簽中，注意要寫在元素的開始標簽里，并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。
例：<p style="color:red">這里文字是紅色。</p>
7-5 嵌入式CSS樣式
嵌入式：就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間。嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間。
例：<style type="text/css">
span{
color:red;
}
</style>
7-6 外部式CSS樣式
外部式：外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內。
例：<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標簽位置一般寫在<head>標簽之內。
7-7 三種連接方式的優先級
總結：他們的優先級：內聯式 > 嵌入式 > 外部式。但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的后面。采取就近原則，離被設置元素越近優先級別越高。
8-1 什么是選擇器
css3每一條css樣式聲明（定義）由兩部分組成
選擇器{
樣式;
}
在{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
8-2標簽選擇器
如編輯器中的<html>、<body>、<h1>、<p>、<img>，就是HTML代碼中的標簽
8-3 類選擇器
語法：.類選器名稱{css樣式代碼;}
注意：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
8-4 ID選擇器
注意：
1、使用ID選擇器，必須給標簽添加上id屬性，為標簽設置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
3、id屬性的值即為當前標簽的id，盡量見名思意，語義化。
8-5 類選擇器和ID選擇器的區別
相同點：可以應用于任何元素；
不同點：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。
8-6 的選擇器
即大于符號(>),用于選擇指定標簽元素的第一代子元素。
8-7 后代選擇器
包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。
注意：子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。
總結：>作用于元素的第一代后代，空格作用于元素的所有后代。
8-8 通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素。
8-9 偽類選擇器
它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態來設置字體顏色：比較常用的還是 a:hover 的組合。
8-10 分組選擇器
為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，）。
9-1 樣式的繼承
樣式的繼承：CSS的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。
9-2 選擇器的優先級
講解：
1、如果一個元素使用了多個選擇器,則會按照選擇器的優先級來給定樣式。
2、選擇器的優先級依次是: 內聯樣式 > id選擇器 > 類選擇器 > 標簽選擇器 > 通配符選擇器。
9-3 權值計算-特殊性
標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。
9-4 選擇器的最高層級!important
!important要寫在分號前面。
當網頁制作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁，瀏覽器默認的樣式 < 網頁制作者樣式 < 用戶自己設置的樣式，請記住!important優先級樣式是個例外，權值高于用戶自己設置的樣式。
10-1 字體的樣式
font-family：設置字體的類型
例：body{font-family:"Microsoft Yahei";}
font-size:設置字體的大小
例：body{font-size:12px;}
font-weight:設置字體的粗細
例：p span{font-weight:bold;}
font-style：設置字體的斜體樣式
1、font-style可以設置字體樣式，并且有種3設置方式。
2、正常字體為normal,也是font-style的默認值。
3、italic為設置字體為斜體，用于字體本身就有傾斜的樣式。
4、oblique為設置傾斜的字體，強制將字體傾斜。
10-2 字體顏色
1、color屬性可以設置字體顏色。
2、color的值有3種設置方式：
英文命令顏色
例：p{color:red;}
RGB顏色
這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。
例：p{color:rgb(133,45,200);}
每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。
例：p{color:rgb(20%,33%,25%);}
十六進制顏色
這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。
例：p{color:#00ffff;}
第十一章 CSS3文本樣式
11-1添加文本修飾-text-decoration
1、text-decoration可以設置添加到文本的修飾。
2、text-decoration默認值為none, 定義標準的文本。
3、text-decoration的值為underline為定義文本下的一條線。
4、text-decoration的值為overline為定義文本上的一條線。
5、text-decoration的值為line-through為定義穿過文本下的一條線，一般用于商品折扣價。
11-2 文本添加首行縮進-text-indent
為文本添加首行縮進，2em的意思就是文字的2倍大小。
例：p{text-indent:2em;}
11-3 為文字設置行間間距-line-height
例：p{line-height:1.5em;}
11-4 增加或減少字符間的空白
letter-spacing:設置文字間隔或者字母間隔
注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。
word-spacing:設置單詞與單詞之間的距離。
11-5 設置對齊方式-text-align
例：h1{
text-align:center;
}
<h1>了不起的蓋茨比</h1>
11-6 長度值
長度單位：常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
12-1 元素分類
分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>....
常用的內聯元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>.....
常用的內聯塊狀元素有：
<img>、<input>.....
12-2 塊級元素
display:block就是將元素顯示為塊級元素
例：將內聯元素a轉換為塊狀元素，從而使a元素具有塊狀元素特點。
a{display:block;}
塊級元素特點：
1、每個塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個塊級元素獨占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
3、元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
12-3 內聯元素
display:inline將元素設置為內聯元素
例： div{
display:inline;
}
......
<div>我要變成內聯元素</div>
內聯元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度及頂部和底部邊距不可設置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
12-4 內聯塊狀元素
display:inline-block就是將元素設置為內聯塊狀元素
內聯塊狀元素特點：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設置。
12-5盒模型的寬度和高度
css內定義的寬（width）和高（height），指的是填充以里的內容范圍。
一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。
12-6盒模型的背景
網頁中的標簽不論是行內元素還是塊狀元素都可以給它設置一個背景色。
為標簽設置背景顏色可以使background-color:顏色值來實現。
12-7盒模型的邊框
盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
講解:
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
2、border-color（邊框顏色）中的顏色可設置為十六進制顏色，如:
border-color:#888;//前面的井號不要忘掉。
3、border-width（邊框寬度）中的寬度也可以設置為：
thin | medium | thick（但不是很常用），最常還是用像素（px）。
12-8 設置圓角邊框-border-radius
例：div{border-radius: 20px 10px 15px 30px;}
12-9 設置內邊距-padding
元素內容與邊框之間是可以設置距離的，稱之為“內邊距（填充）”。
填充也可分為上、右、下、左(順時針)
12-10 設置外邊距-margin
元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分為上、右、下、左。
總結一下：padding和margin的區別，padding在邊框里，margin在邊框外。
在網頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
13-1 流動模型
流動模型，流動（Flow）是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。
特征：
1、塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。
2、在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這么霸道獨占一行）。
13-2 浮動模型
浮動模型：任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動
例：實現兩個 div 元素一行顯示。
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
例：同時設置兩個元素右浮動也可以實現一行顯示。
div{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
例：設置兩個元素一左一右可以實現一行顯示
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
13-3 層模型
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
13-4 絕對定位：position:absolute
需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
例：實現div元素相對于瀏覽器窗口向右移動100px，向下移動50px。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
13-5 相對定位：position:relative
需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
例：實現相對于以前位置向下移動50px，向右移動100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
13-6 固定定位：position:fixed
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。
13-7 Relative與Absolute組合使用
1、參照定位的元素必須是相對定位元素的前輩元素：
<div id="box1"><!--參照定位的元素-->
<div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>
從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。
2、參照定位的元素必須加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設置了）。
14-1彈性盒模型之flex屬性
技術點的解釋：
1、設置display: flex屬性可以把塊級元素在一排顯示。
2、flex需要添加在父元素上，改變子元素的排列順序。
3、默認為從左往右依次排列,且和父元素左邊沒有間隙。
14-2使用justify-content屬性設置橫軸排列方式
本屬性定義了項目在主軸上的對齊方式
屬性值分別為：justify-content: flex-start（交叉軸的起點對齊） | flex-end（右對齊） | center（居中） | space-between（兩端對齊，項目之間的間隔都相等。） | space-around（每個項目兩側的間隔相等）;
14-3 使用align-items屬性設置縱軸排列方式
本屬性定義了項目在交叉軸上的對齊方式
屬性值分別為：
align-items: flex-start（左對齊） | flex-end（交叉軸的終點對齊） | center（交叉軸的中點對齊） | baseline（項目的第一行文字的基線對齊） | stretch（如果項目未設置高度或設為auto，將占滿整個容器的高度。）;
14-4 給子元素設置flex占比
1、給子元素設置flex屬性,可以設置子元素相對于父元素的占比。
2、flex屬性的值只能是正整數,表示占比多少。
3、給子元素設置了flex之后,其寬度屬性會失效。
15-1 水平居中行內元素
如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。
例：<body>
<div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>
css代碼
<style>
.txtCenter{
text-align:center;
}
</style>
15-2 水平居中設置-定寬塊狀元素
定寬塊狀元素：塊狀元素的寬度width為固定值。
滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。注意：元素的“上下 margin” 是可以隨意設置的。
例：
html代碼：
<body>
<div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>
css代碼：
<style>
div{
border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/
width:200px;/*定寬*/
margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}
</style>
15-3 已知寬高實現盒子水平垂直居中
已知寬高實現盒子水平垂直居中。通常使用定位完成
例：
要實現子元素相對于父元素垂直水平居中,我們只需要輸入以下代碼：
講解：
1、利用父元素設置相對定位,子元素設置絕對定位,那么子元素就是相對于父元素定位的特性。
2、子元素設置上和左偏移的值都為50%，是元素的左上角在父元素中心點的位置。效果：
3、然后再用margin給上和左都給負的自身寬高的一半,就能達到垂直水平居中的效果。
15-4 寬高不定實現盒子水平垂直居中
未知寬高實現盒子水平垂直居中，通常使用定位以及translate完成
例： <div class="box">
<div class="box1">
慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網慕課網
</div>
</div>
添加樣式：
.box {
border: 1px solid #00ee00;
height: 300px;
position: relative;
}
.box1 {
border: 1px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
效果圖：
技術點的解釋：
1、利用父元素設置相對定位,子元素設置絕對定位,那么子元素就是相對于父元素定位的特性。
2、子元素設置上和左偏移的值都為50%。
3、然后再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果。
<canvas> 是 HTML5 新增的元素，可用于通過使用 JavaScript 中的腳本來繪制圖形。例如，它可以用于繪制圖形、制作照片、創建動畫，甚至可以進行實時視頻處理或渲染。
重點：
canvas的應用場景非常廣泛，目前canvas主要應用于一下幾個領域。
（1）數據可視化
canvas在數據可視化中應用最多的就是繪制圖表了，因為canvas是Javascript動態繪制的，用它不僅僅是繪制一張靜態的圖表，還可以夠根據數據的變化動態修改圖表，實時展現數據的變化
現在有很多的數據可視化的js庫，比如百度開源的Echart大部分是基于canvas開發的
（2）H5小游戲
Canvas以其獨特的特性，強大的繪圖功能，可以輕松勝任游戲開發。我們在手機上、網頁上隨處可見的網頁游戲，很大一部分是基于canvas開發的。
一個簡單的html canvas開發的五子棋游戲
另外現在火熱的各種小游戲，如微信小游戲、頭條小游戲絕大部分也是基于canvas開發的。針對此也出現了很多H5游戲引擎，比如Egret（白鷺）引擎、Layabox引擎。用它們來開發小游戲會更加的方便。更多的H5小游戲，可以在微信或里搜索查看。
（3）特效背景
我們經常看到有一些網站的背景有一些會動的線條，還會跟隨鼠標移動，看起非常的酷炫，而且還很好玩。比如我們來欣賞幾個：
這是一個登陸界面的酷炫背景，隨著鼠標的移動會有點線圖形跟隨出現，結合背景圖，有一種星空的深邃感。
在很多網站見過這個背景效果，鼠標移動時，就有一些會動的點線圖案隨著鼠標移動，有時瀏覽網站會情不自禁地玩上一會兒。
還有白色的
這是一個漂亮的心形效果，應該知道能用它來做什么。
比較酷炫的鼠標滑過效果，在歡迎頁面或活動頁面比較實用
以上只是隨便分享了幾個，網上可以搜到更多、更酷炫的效果，感興趣的可以自行搜索。
（5）其它應用
canvas的應用還有很多，它可以是一個大型的應用，也可以是一個非常小的效果，比如一些小動畫、活動頁面的一個小游戲等，這里無法一一列舉。總之 canvas的應用場景是非常廣泛的。還有更多的場景需要我們去探索。
看了這么多的效果，接下來我們就要來學習如何使用canvas了，不多它多復雜，我們都通過一個簡單的例子來入門。請看如下代碼：
說明：
canvas是一個html元素，一般我們就在html中使用它，步驟如下
（1）在html中建一個<canvas>元素；
（2）在js代碼中獲取canvas對象；
（3）用獲取到的canvas對象再獲取繪畫上下文對象context;
（4）真正繪畫時，我們使用的是context進行繪制
本文主要了解canvas及其應用場景，最后簡單的介紹了canvas的使用，后續將有更多的canvas系列教程，敬請關注。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
