Head First HTML 和 CSS

13-第二版：讀書筆記；這是一本十分簡單的入門書，讀的目標是對CSS有一個完整和清晰的認識；

使用HTML可以將網頁中的內容標記成瀏覽器能夠識別解析的結構更好的展示；

html元素和屬性

html元素可以有屬性，能提供額外的一些元素信息；屬性值需要使用雙引號；

HTML5支持定製數據屬性；
屬性用來定製一個元素，爲其提供附加信息；
a元素 href屬性=>hypertextreference的簡寫，可以鏈接各種web資源；

常用元素

元素q：

內聯（inline）元素：方便嵌入到一段文字中；

<q>表示一段簡短的引用</q>

元素blockquote：

塊級（block）元素：會自成一段還會縮進（不同瀏覽器的處理不同，要顯示統一，可以指定CSS樣式）；

<blockquote>表示一段較長的引用</blockquote>

br元素

提供換行的元素；沒有任何內容的元素被稱爲空元素（void元素）；

<br>
<!-- 嚴格的XHTML 可以使用如下 -->
<br/>

有序列表：

<ol>
    <li></li>
</ol>

無序列表：

<ul>
    <li></li>
</ul>

定義列表：

<dl>
    <dt>定義術語</dt>
    <dd>定義描述</dd>
</dl>

code元素：

顯示計算機編程代碼；

time元素：

告訴瀏覽器這個內容是一個日期或時間，或包含一個日期和時間；

pre元素：

希望瀏覽器按照你輸入的方式原樣顯示文本；

字符實體：

如果需要輸入類似html標籤的特殊字符，可以通過字符實體：

&lt;html&gt;

還有很多其他的；參考Web入門梳理：HTML-特殊字符替換代碼；

字符實體還有對應的10進制Unicode編碼，表示方式如 ☠ ☠；這些字符如果需要在js代碼中使用，需要使用16進制的Unicode編碼，表示如 \u2100 ；

域名和服務器

域名

域名控制機構域名註冊費/year

示例：www.sssssss.com

www :這部分是域名中特定服務器的名字；可以有多個；
www.sssssss.com :這是網站名；
sssssss.com : 這一部分是域名；
com :不同的域結尾有不同的用途，com、org、gov、edu等，選擇域時要選擇一個最合適的；

服務器

技術支持數據傳輸限制備份和可靠性

通過域名映射到服務器的地址；將部署的文件(FTP文件傳輸協議)放到服務器的根目錄下（可能是最簡單的一種“搬家”方式了）；

FTP命令：

dir：當前目錄的文件列表；
pwd：顯示當前目錄；
put：將文件傳送到服務器；
get：從服務器獲取文件；

SFTP：安全文件傳輸協議；

操作服務器需要掌握更多DOS或Linux命令；

可以使用一些成熟的FTP應用（如Cyberduck）；

URL

統一資源定位符

示例：http://www.sssssss.com/index.html

http：指出獲取資源的協議；
www.sssssss.com：網站名；
index.html：根文件夾到資源的絕對路徑；

http：超文本傳輸協議

如果找不到資源，就會報“404”錯誤；

http://www.sssssss.com
http://www.sssssss.com/
http://www.sssssss.com/index.html

這三個其實等價的，瀏覽器會把沒有/的請求加上/；同時訪問一個路徑時，服務器默認會返回這個路徑下的默認文件，正常是index.html命名的文件（取決於使用哪種web服務器）；

默認的服務器訪問端口是80；

HTML補充要點

更加完善的a元素

爲a標籤指定title屬性，表示所要鏈接的頁面的文本描述（鼠標1s懸停鏈接上時，會展示title）；可以爲任何元素指定title屬性；
訪問鏈接頁面特定點：鏈接頁面選擇錨點，指定id；a標籤的href鏈接後使用 # 加上剛剛設置的錨點id；注：(具體到文件的絕對路徑，如index.html或者以/結尾，補全是必要的，否者可能無法正常工作)
返回頂部：<a href="#top">Back to top</a>，在頁面最上邊定義一個目標‘top’；
使用target屬性打開新窗口；target = “_blank”；如果爲target指定了一個特定的名稱，實際上就是在對要顯示的鏈接頁面的新窗口命名；

img

img是內聯元素；

常用的三種圖片格式jpeg（有損不支持透明適合連續色調圖像，如照片）；png（無損支持透明適合單色圖像和線條構成的圖像，如logo）；gif（無損支持透明支持動畫）；

alt屬性

指定描述圖像的一些文本，如果圖像沒能顯示，就會使用這個文本來取代他（必要）；

調整圖像大小

witdh=“100”
height=“100”
均使用像素指定；可以輔助頁面佈局；真要實用的話最好設置成和圖像實際大小一致；
一般經驗 1英寸 = 96px；
實際圖像的使用最好結合縮略圖；

doctype

html5的doctype，html的規範就是一個文檔，由W3C維護；

<!DOCTYPE html>

CSS 樣式表

CSS簡述及引用

CSS的一種引入方式：

<head>
    <style type="text/css">
        body {
            border: 2px dotted black;
        }
    </style>
</head>

鏈接外部樣式表

<head>
<!-- ref指定 html文件 和 所鏈接的文件之間的關係 -->
    <link href="style.css" ref="stylesheet" type="text/css">
    <!-- 鏈入 多個css樣式表時 順序很重要！最下面的最優先 -->
</head>

CSS的編輯最好符合元素的樹狀結構，方便查看繼承的樣式；

不只面向瀏覽器的樣式表

對外鏈link元素使用屬性media，只使用書用於指定設備的樣式文件；

<link href="style.css" ref="stylesheet" media="screen and (max-device-width:480px)">
<!-- 創建一個媒體查詢裏指定設備類型 -->
<!-- 指明：有屏幕的設備 且 屏幕寬度不超過480px -->

<link href="style.css" ref="stylesheet" media="print">
<!-- 媒體類型爲print，表示打印機查看頁面 -->

媒體查詢的屬性：

min-device-width
max-device-width
orientation:landscape 或 portrait 顯示方向橫向或縱向
其他

關於繼承：

影響文本外觀的屬性均可繼承；
其他屬性不能繼承，如border；

CSS的註釋使用/* */

關於選擇器：

p#id
p.class

一個元素的多個類class值，使用空格間隔；

@font-face：

允許定義一種字體的名字和位置，然後在頁面中使用；可以使用多次；

需要在服務器上存儲字體文件，如Myfont.woff、Myfont.ttf；（加載字體需要時間，一旦加載瀏覽器就會緩存）

使用@font-face:

在css最上邊使用如下代碼：

@font-face {
    font-family:"Myfont One";
    src: url("fonts/Myfont.woff"),url("fonts/Myfont.ttf");
/* 這裏的字體地址 還可以使用提供字體託管服務的網站提供的地址，如Google Web字體服務；*/
}

使用@font-face 匹配到並分配的字體名：

font-family:"Myfont One",sans-serif;/* 還指定了通用字體名 */```

@font-face是內置的css規則，此外還有：

@import：導入其他css樣式；
@media：允許創建某些特定“媒體”類型的css規則，如打印機；

關於字體格式：

TryeType字體：.ttf
OpenType字體：.otf
SVG字體：.svg
Web開放字體格式：.woff

可以查找開源字體，使用更多免費字體；

關於設置字體大小

選擇一個關鍵字（如 small 或 medium）指定爲body的字體大小（覆蓋默認字體大小）；
使用em或百分數相對body字體指定其他元素的字體大小；

關於顏色的指定

color:red;
color:rgb(80%,40%,0%);
color:rgb(204,102,0);
color:#cc6600;

關於color

實際控制的是元素的前景色（文本和邊框）；可以使用border-color單獨修改邊框顏色；

常用屬性

描述	屬性	值
字體	font-family	候選字體列表，使用逗號間隔，依次查找使用；(請加上引號)
字體大小	font-size	14px (指定字體大小的方式有多種)
字體粗細	font-weight	lighter normal bold bolder
字體風格	font-style	如斜體italic 傾斜oblique
文本顏色	color	準確來說是前景色

文字下劃線	text-decoration	underline
文字裝飾	text-decoration	none underline overline line-through，可以同時設置多個裝飾生效，使用空格間隔；
文字對齊	text-align	`實際上它會對塊狀元素的所有內聯內容對齊，它只能設置在塊級元素上，而且會被繼承；`
文本元素行間距	line-height
列表列表項外觀	list-style

背景色	background-color
背景圖	background-image	url(images/xxx.png)
邊框	border	1px dotted #888888
下邊框	border-bottom	1px soild black（關閉text-decoration，以此取代文字下劃線的樣式設置）

CSS 盒模型

內容：內容可以自行設置寬高（width 和 height只是內容區的寬高，默認auto佔滿所有可用區域）；
內邊距：border-width border-style border-color border-radius(圓角半徑)
邊框：8種邊框樣式 solid dotted double dashed groove inset outset ridge
外邊距

關於background-image的使用修正

background-image屬性把一個圖像放在元素背景中；還有兩個屬性也會影響背景圖像；

background-position：默認左上角
background-repeat：默認圖像會重複

p {
    background-image:url(images/test.png);/*注意不需要引號*/
    background-repeat:no-repeat;/* repeat no-repeat repeat-x repeat-y inherit（繼承：按父元素來設置） */
    background-position: top left;
}

關於邊框圓角的指定

border-radius
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius

不只面向瀏覽器的樣式表（CSS）

爲CSS指定有特定屬性的設備；

@media screen and (min-device-width:481px){
    p {
        color:red;
    }
}
@media screen and (max-device-width:480px){
    p {
        color:green;
    }
}
@media print{
    p {
        color:white;
    }
}

/* 公共規則寫在下邊 */

min-device-width：設備窗口
max-device-width：設備窗口
min-width：瀏覽器窗口
max-width：瀏覽器窗口

div 與 span

大工程的支撐架構；

div

使用div元素標記邏輯區；

使用div元素對頁面結構進行邏輯劃分；相當於一個邏輯容器；（後面還會看到div作爲圖形容器用於指定樣式和定位）
div 指定類，有點像面向對象的邏輯；
div的功能應爲邏輯分區，不要濫用；

再看選擇器

兄弟：p,h1{}
後代：div #pa h2{}
父子：div>h1{}
兄弟：h1+p{}

line-height的特殊值

如果爲一個div設置的line-height的值的單位是1em（基於其繼承來的行高值），那麼div的所有子元素的行高會繼承該值，並將自己的行高設置爲div字體大小的1倍；

除了是一個相對度量，還可以使用數字1 (line-height:1;)，表示div的各個子元素的行高是其自己字體大小的1倍；

在實際中，這個可以解決許多實際問題；

類型	CSS樣式 =>	簡寫
背景	`background-color:white;background-image:url(images/test.png);background-repeat:repeat-x;`	`background:white url(images/test.png) repeat-x;`
字體	font-style font-variant font-weight(前三個可選) font-size(必須)/line-height(可選) font-family(至少一個字體，多個用逗號隔開)	`font: small/1.6em Verdana, Arial;`

span

<div>允許你爲塊級內容創建邏輯劃分，<span>元素則採用類似的方式建立內聯內容的邏輯分組；

可以爲內聯元素設置寬度，內外邊距及邊框；如果設置外邊距，一般只能看到左右增加的效果；如果設置內邊距的上下，並不會影響包圍它的其他內聯元素的間距，而是會重疊；
圖片和其他內聯元素稍有不同，寬度、內外邊距都表現的像塊元素；

a元素的默認樣式修改【僞類】

未點擊：link
一點擊：visited
鼠標懸停：hover
獲取焦點：focus(如是說能tab鍵輪流訪問頁面鏈接時，就是回去焦點的狀態)
活動：active(用戶第一次單擊一個鏈接時，就處於活動狀態)

這幾個的使用也需要按照這個順序；

需要根據元素的狀態指定樣式：需要用到‘僞類’

a:link{
    color:blue;
}
a:visited{
    color:red;
}
a:hover{
    color:yellow;
}

其他僞類

first-child
last-child

僞類可以應用於其他元素；

層疊

在屬性聲明的最後加上!important，就會覆蓋掉之前的樣式；
瀏覽器本身會維護一組默認樣式，優先使用頁面作者提供的樣式表；
多個樣式表，瀏覽器會以層疊方式來確定具體使用的樣式；

對於層疊的理解和我印象中的差不多，偏差不大：

作者提供的優於瀏覽器默認的；
後邊的覆蓋前邊的；
特定的優於普通的；

如何界定“特定”：

選擇器包含id，標記爲1，否則爲0；
選擇器包含類或僞類，標記爲1，否則爲0；
選擇器包含元素名，標記爲1，否則爲0；
以此類推，最終得到 1 1 1…多個標記值，這多個值可以看做是1個數，越大則越“特定”；
對於兄弟元素的選擇器可以看做是兩個單獨的特定界定規則；

再看“層疊”

按作者讀者瀏覽器的順序對規則排序；在各個類別中，再按照特定性排序，對於有相同特定性的元素，則根據樣式表中的順序再次進行排序；

對於無法找到特定屬性聲明的規則，瀏覽器會依賴繼承，找到你要用的屬性值；無法繼承的，就只能依靠瀏覽器樣式表中設置的默認值了；

層疊，即將來自多個樣式表的樣式層疊在界面上，對各個元素應用最特定的樣式；

佈局與定位-擺放元素

流式佈局

從上到下從左到右；

瀏覽器並排放置兩個內聯元素：兩個元素邊框之間的距離是，兩個元素外邊距的和；
瀏覽器上下放置兩個內聯元素：兩個元素邊框之間的距離是，兩個元素外邊距中較大的一個（會有摺疊）；

這種摺疊發生的情況：只要兩個垂直外邊距碰到一起，就會發生！

float屬性

float屬性首先儘可能遠的向左或向右（根據屬性值left或right）浮動一個元素；它下面的所有內容會繞流這個元素（像流體一樣繞着這個元素流動）；

對所有浮動元素都有一個要求：必須要先指定一個寬度；

其他元素如何繼續“流入”：

對一個段落p設置浮動之後，會從正常流中刪除，其他塊級元素（它下邊的）會填在這裏，就好像沒有它一樣；
內聯元素（塊元素中的也算）的定位會考慮浮動元素的邊界，因此會圍繞着浮動元素；

浮動一個元素時，如果希望它在某個元素後面，就要緊挨着那個元素放置！

修正兩欄問題：

問題1：我們要浮動到“右”的div，與主div分爲兩欄，如果默認浮動右側div，在其下方會有主div的內聯內容‘流入’；

解決方式：

讓主div的右外邊距與浮動的div ‘寬度’相等；（注意這個寬度=width+padding-left+padding-right+margin-left+margin-right）

兩欄之間的空隙，有一個術語-中縫（gutter）；

問題2：當頁面很寬的時候，主div下的其他塊如頁腳，會忽略已經浮動的右div，從而導致重疊；

解決方式：

需要使用另一個css屬性：clear屬性；

clear屬性

當元素流入頁面時，這個元素左邊、右邊或兩邊不允許由浮動內容；如果有則會將當前元素下移，直到沒有浮動內容爲止；

Tint：

浮動元素的外邊距不會有摺疊，因爲浮動元素的外邊距並不會碰到正常流中元素的外邊距；
內聯元素也可以浮動，常見的是在段落中浮動圖像，向左或向右浮動，文字會圍繞在它周圍；（內聯元素會留意浮動元素的邊界）

問題：

上述左右分欄的實現，是使右邊欄浮動，但是由於要在頁眉下“挨着”展示右邊欄，所以需要把主div放到右div後邊；這實際是調整了語義的機構，如果是在很小的屏幕上瀏覽，一開始看到的將會是邊欄，之後才能看見主div的內容，這並不是我們想看到的；

流體佈局 vs 凍結佈局

凍結佈局：瀏覽屏幕調整時，設計依然保持原樣；

如何進行凍結佈局

最簡單的指定一個包裹的div的寬度爲固定；

凝膠：流體和凍結的中間態

鎖定頁面中內容區的寬度，並將它在瀏覽器中居中；

#allog {
    /*如果指定內容區寬度爲auto：瀏覽器會根據需要擴展內容區*/
    width:800px;
    /*如果外邊距指定爲auto：瀏覽器會確定合適的外邊距，同時還會確保左右相等，即居中*/
    margin-left:auto;
    margin-right:auto;
}

爲解決此節之前的問題，還有其他創建兩(多)欄佈局的技術，能確保正確的語義順序——絕對定位；

絕對佈局

一個元素絕對定位時，瀏覽器先將其在流中刪除，然後依據top right(bottom left）的組合確定位置；同時還需要設置寬度（非必須，默認塊元素佔瀏覽器整個寬）；

#sidebar {
    position:absolute;/*static(靜態)是position的默認值*/
    top:100px;
    right:200px;/*可以設置負數 如果是固定定位設置負數 會被瀏覽器蓋住一部分*/
    width:300px;
}

流中元素不會講內聯內容圍繞在絕對定位元素周圍，因爲它們完全不知道這個絕對定位元素；絕對定位元素也不會對其他元素有任何影響；可以對所有元素使用絕對定位；

絕對定位元素的放置次序

每個絕對定位元素都有一個 z-index屬性，指定虛軸z上的位置，越上邊的元素值越大；

只有使用CSS 絕對定位相對定位固定定位的元素纔有z-index；

絕對定位的position屬性

屬性值	描述
static	默認值，瀏覽器決定顯示位置
absolute	絕對定位，相對頁面確定顯示位置
fixed	固定定位，相對瀏覽器窗口確定顯示位置，因此固定元素永遠也不會移動（如相對瀏覽器位置固定的購物車按鈕）
relative	相對定位，元素會正常流入頁面，不過在頁面顯示之前要進行偏移（用於更高級的定位）

解決分欄的另一種方式——CSS表格顯示

CSS表格顯示允許你在一個有行和列的表格中顯示塊元素且只能是塊元素；表格會自動擴展以適應內容，表格顯示也有自己的優缺點；

注意我們說的不是html的表格！

CSS的表格用一個div包裹，一行是一個div，每一列設置一個塊元素；

<div id="tableContainer">
    <div class="tableRow">
        <div class="main"></div>
        <div class="sideBar"></div>
    </div>
    <div class="tableRow">
        <div class="main"></div>
        <div class="sideBar"></div>
    </div>
</div>

div#tableContainer {
    display:table;
    border-spacing:10px;/*單元格邊框間距，不再需要設置單元格塊元素的外邊距了*/
}

div.tableRow {
    display:table-row;
}

.main {
    display:table-cell;
    /*其他樣式屬性設置*/
    vertical-align:top;/*top  middle  bottom*/
}

.sideBar {
    display:table-cell;
    /*其他樣式屬性設置*/
    vertical-align:top;/*單元格中內容相對單元格上邊對齊*/
}

border-spacing並不是外邊距，因此與其他塊元素的外邊距不會重疊；

CSS表格對均分欄很合適，也可以通過width設置不同的列單元格寬度；

固定定位

使用基本和絕對定位一致，只不過是基於瀏覽器窗口的，而非頁面；

相對定位

和絕對定位類似，只是元素仍在流中（內容不會有重疊）；通過top left bottom right指定偏移量進行顯示；

如果想把一張圖片放到邊欄內容的下邊，可以讓img的div嵌入邊欄的內容區下邊，把position改爲relative，在通過top right設置下具體的顯示位置即可；

重點：理解絕對定位和相對定位

定位	描述
絕對定位	從流中取出，相對父元素（一般是html頁面，除非自己另行指定）指定絕對位置
相對定位	仍在流中，相對器外圍包含元素來定位

絕對定位的父元素：

一般是html頁面，但如果一個元素及其父元素均使用了絕對定位，那麼這個元素絕對位置就是相對其父元素的；其父元素再相對html頁面；

HTML5-現代HTML

引入更多語義化的元素：

<article> 文章 包含獨立內容
<nav>
<header>
<footer>
<time datetime="2012-12-12">12/12/2012</time>
<aside> 邊欄 展示輔助內容
<section> 區塊分組 多個區塊組成內容
<video> 視頻 (很像<img>)

<mark>突出文本
<audio>
<progress>進度條
<meter>範圍度量
<canvas>用於在頁面中顯示 使用js繪製的圖像和動畫
<figure>用於定義類似照片 圖標 代碼等獨立內容

nav-導航欄的實現

<nav>
<ul>
    <li><a href="">1</a></li>
    <li class="selected"><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
</ul>
</nav>

nav {
    background-color:#efe5d0;
    margin:10px 10px 0px 10px;
}
nav ul {
    margin:0px;
    list-style-type:none;/*刪除列表項的項目符號*/
    padding:5px 0px 5px 0px;
}
nav ul li {
    display:inline;/*從block 修改爲 inline，li會像內聯元素一樣流入一行*/
    padding:5px 10px 5px 10px;
}
nav ul li a:link,nav ul li a:visited {/*修改導航中鏈接的樣式*/
    color:#954b4b;
    border-bottom:none;
    font-weight:bold;
}
nav ul li.selected{
    background-color:#c8b99c;
}

video-視頻播放

<video controls
       autoplay
       width="512" 
       height="288"
       poster="images/poster.png"
       id="video"
    >
    <source src="test.mp4">
    <source src="test.ogg">
    該瀏覽器不支持html5視頻播放
    <object>可能用於flash的...</object>
</video>

preload = none：在用戶播放視頻之前不加載；
loop：布爾值，視頻結束後自動循環；
width和heigth最好符合原視頻尺寸，否則可能會有黑邊；

不同瀏覽器可能展示出來的控件樣式不同，如果需要還可以結合JS自定義控件；

source

<source src="test.ogv" type='video/ogg; codecs="theora, vorbis"'>

codecs指定使用哪種編解碼器對視頻和音頻進行編解碼；
type同時指定視頻文件的MIME類型；可用於瀏覽器判斷是否支持該類型的文件；

表格與更多列表

table

<table>
    <caption>
        表格標題 默認顯示在表格上方（可以使用CSS調整標題顯示位置）
    </caption>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

table {
    border:thin solid black;
    caption-side:bottom;/*調整標題顯示位置*/
    border-spacing:10px 30px;/*水平邊框間距 垂直邊框間距*/
}
td, th {
    border:thin dotted gray;
    padding:5px;
}
caption {
    font-style:italic;
    padding-top:8px;
}

如果希望表頭放在表格左側，只需要把表頭元素放在各行中（如各行中的第一項）；
不要嘗試用html的表格建立佈局；提供表現是CSS該做的；
表格單元格的外邊距稍有不同，單元格間距一般叫邊框間距（border-spacing）；

因此不需要設置外邊距，而是使用border-spacing屬性，針對整個表格進行定義；

邊框摺疊

摺疊邊框，使單元格之間根本沒有邊框間距；（瀏覽器會忽略所有邊框設置）

table {
    border-collapse:collapse;
}

爲表格各行設置顏色

使用 nth-child僞類，它的狀態是一個元素相對於它的兄弟元素的數字順序；

<section>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
</section>

p:nth-child(even) {
    /*偶數：紅背景*/
    background-color:red;
}
p:nth-child(odd) {
    /*奇數：綠背景*/
    background-color:green;
}

或者

/*使用數字n指定簡單表達式*/
p:nth-child(2n) {
    /*偶數：紅背景*/
    background-color:red;
}
p:nth-child(2n+1) {
    /*奇數：綠背景*/
    background-color:green;
}

單元格跨行

使用rowspan屬性實現跨行；
使用colspan屬性實現跨列；

<tr>
    <td rowspan="2"></td>
    <td ></td>
    <td rowspan="2"></td>
    <td rowspan="2"></td>
    <td ></td>
</tr>

<tr>
    <!-- 第二行 不再需要被跨行的列 -->
    <td></td>
    <td></td>
</tr>

爲列表增加樣式

li {
    list-style-type: disc;/*默認列表標記類型*/
}

list-style-type: disc/circle/square/none;

定製標記

li {
    list-style-image: url(images/text.png); 
    padding-top:5px;
    margin-left:20px;
}

對有序列表可以使用list-style-type屬性控制一個有序列表的標記是十進制的數字、羅馬數字還是字母表符號；常用值：decimal/upper-alpha/lower-alpha/upper-roman/lower-roman;

設置文本回繞方式

li {
    list-style-position:inside;/*inside  outside*/
}

inside：標記在列表項裏，在標記下回繞；
outside：標記在列表項外，在文本下回繞；

HTML 表單

form表單

<form action="http://ssssssss/sss.php" method="post"></form>

關於表單的內容，我們在《Web入門梳理：HTML》“表單標籤”《Web入門梳理：HTML5》“新增的input type屬性值”已有介紹；

Detail…after: 2020-03-20（日後有時間把最後一章內容補上）

本書未涉及的主題

僞元素

用來選擇元素的某些部分：

:first-letter
:first-line

語法與僞類一樣，不過建議使用“::”以區別於僞類；

屬性選擇器

根據屬性值來選擇元素；

img[width]
img[height=“300”]
img[alt~=“flower”]：屬性包含單詞的所有img

關於CSS動畫

CSS提供的動畫：

css提供了基礎動畫，包括變換和過渡特性，更復雜的動畫需要使用JavaScript來實現；

開發商特定的CSS屬性

瀏覽器製造商（Mozilla WebKit等）爲瀏覽器增加新功能特性，或者是一些在使用但是沒有被標準批准的CSS擴展，會創建類似這樣的CSS屬性：-moz-transform

div{
    background-color:red;
    transition:transform 2s;/*transform 無值，即默認無變換*/
    -webkit-transition:-webkit-transform 2s;
    -moz-transition:-moz-transform 2s;
    -o-transition:-o-transform 2s;
    -ms-transition:-ms-transform 2s;
}
div:hover {
    transform:rotate(45deg);/*這是一個css動畫*/
    -webkit-transform:rotate(45deg);/*Safari & Chrome*/
    -moz-transform:rotate(45deg);/*Mozilla*/
    -o-transform:rotate(45deg);/*Opera*/
    -ms-transform:rotate(45deg);/*IE*/
}

添加JavaScript交互

JS能做很多很多事；

HTML5 API和Web應用

HTML5還提供了新的應用編程接口，可通過JS訪問，提供了豐富的描述和功能；

繪製2D圖形；
掌握位置信息；
使用web工作線程提高js執行效率，更好的利用多核；
訪問web應用；
使用瀏覽器緩存數據、本地存儲數據（實現離線訪問）；
集成地圖；
創建定製的視頻播放控件，建立完整的視頻體驗；；
結合JS提供更好的交互性；

參考書籍《head first html5 programing》

服務器端腳本

Node.js

Head First HTML 和 CSS

Head First HTML 和 CSS

html元素和屬性

常用元素

元素q：

元素blockquote：

br元素

有序列表：

無序列表：

定義列表：

code元素：

time元素：

pre元素：

字符實體：

域名和服務器

域名

服務器

URL

HTML補充要點

更加完善的a元素

img

doctype

meta

CSS 樣式表

CSS簡述及引用

鏈接外部樣式表

不只面向瀏覽器的樣式表

關於繼承：

關於選擇器：

@font-face：

關於字體格式：

關於設置字體大小

關於顏色的指定

關於color

常用屬性

CSS 盒模型

關於background-image的使用修正

關於邊框圓角的指定

不只面向瀏覽器的樣式表（CSS）

div 與 span

div

再看選擇器

line-height的特殊值

更多簡寫形式

span

a元素的默認樣式修改【僞類】

其他僞類

層疊

如何界定“特定”：

再看“層疊”

佈局與定位-擺放元素

流式佈局

float屬性

clear屬性

流體佈局 vs 凍結佈局

絕對佈局

絕對定位元素的放置次序

絕對定位的position屬性

解決分欄的另一種方式——CSS表格顯示

固定定位

相對定位

重點：理解 絕對定位和相對定位

nav-導航欄的實現

video-視頻播放

source

表格與更多列表

table

邊框摺疊

爲表格各行設置顏色

單元格跨行

爲列表增加樣式

定製標記

設置文本回繞方式

HTML 表單

form表單

本書未涉及的主題

僞元素

屬性選擇器

關於CSS動畫

開發商特定的CSS屬性

重點：理解絕對定位和相對定位