書籍之 Head First HTML與CSS
看到同事寫web伺服器，決心也要學習一下，技多不壓身，先從html和css入門吧。
1、Web語言：開始瞭解HTML1
開發工具：Sublime Text （外掛Zen Coding + View In Browser），
快速執行：首選項->快捷鍵->使用者
{ "keys": ["f2"], "command": "open_in_browser" },
]
學習之初：只用notepad，之後快速開發用這個Sublime。
元素= 開始標記+內容+結束標記
2.認識HTML中的“HT”：深入理解超文字
1）".." ：回上一級目錄
2）對於檔案html和圖片資源，份資料夾管理。
3）<em> 設定為斜體
3.構建網頁：構建模組
1）<q>：短引用，文字前後加 " 引號，用於段落裡新增引用，作為其中的一部分。
2）<blockquote>：長引用，建立一個單獨的文字塊，將文字稍微縮排。用於一段或者多段文字，自成一個新段落。
3）<br> 換行
4）塊元素：單獨顯示，前後有換行的效果，特立獨行 例如：h1，h2，...,h6，p，blockquote
內聯元素：在段落中，隨波逐流 例如：q，a，em
5）元素分為兩大類：
void元素（空元素）：沒有實際內容的元素，目的減少HTML標記數量。不需要</>，例如：<br>，<img>
正常元素：例如<p></p> ，<h1> ，<a>
6）列表:
<li>：列表元素，包含在列表，作為一個列表項
<ol>：包圍列表項，作為有序列表顯示
<ul>：包圍列表項，作為無序列表顯示
注意：<ul>和<ol>必須包含<li>使用
定義列表：以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
4 Web鎮之旅：開始連結
1）域名：網站唯一的名字 eg: www.starbuzzcoffee.com （www.之後的都是域名）
域名可以用於多個網站，域名唯一，但是網站名字不唯一。 eg:corpo.starbuzzcoffee.com ，empl.starbuzzcoffee.com
2）HTTP：超文字傳輸協議， HyperText Transfer Protocol
URL：統一資源定位符，Uniform Resource Locator，
例如：http://www.starbuzz.com/index.html
協議 （http/FTP 告訴遊覽器使用什麼方式獲取資源）+ 網站 （伺服器名+域名組成，告訴遊覽器從什麼計算機獲取資源）+ 絕對路徑（告訴伺服器要找那個網頁）
3）在寫專案時候，儘量用相對路徑。
4）target="_blank" 跳轉到新標籤頁（並且100%有效，根據遊覽器的設定）
5 認識媒體：給網頁新增影象
1）web最常用的圖片格式：JPEG，PNG，GIF
JPEG：照片和複雜影象。不支援動畫，有損格式
PNG或GIF：單色影象、logo和幾何圖形，無損格式。PNG更適合透明和多種顏色
GIF：是唯一支援動畫的圖片格式
2）<img src=""> src屬性：制定圖片的位置 img是void元素。
屬性：
alt：當遊覽器無法正常顯示，會描述這個影象的一些文字
width：影象的寬度
height：影象的高度
3）HTML：用於提供結構 CSS：用來提供表現
4）網頁顯示的圖片都分略縮圖和原圖，顯示網頁一般都是略縮圖，點選後的網址顯示大圖。
<a href="html/seattle_video_med.html">
<img src="thumbnails/seattle_video_med.jpg" alt="My video iPod in Seattle, WA">
</a>
6 嚴格的HTML：遵循標準，合乎規範
1）舊版本：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http;//www.w3.org/TR/html4/strict.dtd"
HTML5 doctype： <!doctype html> 告訴遊覽器正在使用HTML5
2）構建web應用書籍： 《Head First HTML5 Programming》
3）HTML5：在這個版本里面，使用向後相容性，也就是規則可自定義。在這個版本之後，再也沒有HTML6，也可以直接稱為HTML。
5）meta制定Unicode：在head之間新增 <meta charset="utf-8">
7 新增一個“X”到HTML：轉到XHTML
1）p{color:maroon;}
h1{font-family:sans-serif;color:gray;}
h2{font-family:sans-serif;color:gray;}
h1,h2{ font-family:sans-serif;color:gray; }
css樣式分離：建立css指令碼，在HTML腳本里面引用css樣式。
<link type="text/css" rel="stylesheet" href="lounge.css">
rel屬性：制定了HTML檔案與所連線的檔案之間的關係。stylesheet 樣式表
href屬性：檔案地址
2）在html裡面：<link type="text/css" rel="stylesheet" href="lounge.css">
<p class="greentea">
在css裡面：
p.greentea{
color: green;
}
8 新增一些樣式：開始學習CSS
1）CSS屬性：
font-family: 設定字型，可以寫多個，從左往右，那個字型有，用哪個
font-size: 設定字型大小
color: 設定顏色
font-weight:bold:字型的粗細 lighter、normal、bold、bolder
text-decoration:裝飾，上劃線（underline），下劃線（overline），刪除線（line-through）
2）web字型：
href屬性：檔案地址
TrueType字型：.ttf OpenType字型：.otf
這兩個字型，後者在前者基礎上建立的。
Embedded OpenType字型：.eot 是 otf字型的一種壓縮形式，這種格式是專用的Microsoft，僅IE支援。
SVG字型：svg 通用影象格式
Web開放字型：.woff 大多數遊覽器對此字型提供了支援
3）font-face屬性：
@font-face {
font-family: "Emblema One"; /*新增名字*/
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
4）字型：老版本的遊覽器IE不支援畫素制定字型大小的文字縮放
em：字型大小，類似百分比，是一個相對度量單位
5）font-style：italic 斜體/ oblique 傾斜文字，傾斜，有時候一樣有時候不一樣，直接用italic
background-color: rgb(80%,40%,0%); rgb開頭， 100%是255，r：255*80%
9 擴大你的詞彙量：字型和顏色樣式
1）盒模型：box model 。css將每個元素看做一個盒子表示，每一個盒子由一個內容區以及可選的內邊距、邊框和外邊距組成。
2）css樣式：
css檔案裡面 以.開頭
.guarantee{
border-color: black;
border-width:1px;
border-style:solid;
background-color:#a7cece;
}
html裡面： <p class="guarantee"></p>
3）邊框樣式：
border-style: groove;
border-width:thin; / 5px; /*邊框寬度*/
border-color:red;
指定一個邊的邊框： border-top-color，border-top-style，border-top-width
指定邊框圓角：border-radius:15px;
4）CSS中使用id號：
屬性名#id號{}
在html裡面 <p id="guarantee">
舉例： p#specilas{ color:red; }
5)平臺樣式相容：
a. media屬性：根據不同平臺呼叫不同的css檔案。在link裡面新增：media="screen and (max-device-width:480px)"，media="print" （差異性大，建議分開，便於管理）
b. @media screen and (min-device-width:481px) { } 可以把所有平臺的樣式程式碼都放在一起。
10 與元素親密接觸：盒模式
1）<div> 可定義文件中的分割槽或節（division/section）。<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。把相關的元素歸組到一起，放在邏輯區中。
如果用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。
2）簡寫：例如 border:thin solid #007e7e; 寫成一行
3）<div>允許為塊級內容建立邏輯劃分 <span>將相關的內聯內容的邏輯分組
4）偽類：用於向某些選擇器新增特殊的效果。所以有點像類，但不呼叫，所以偽。
#elixirs a:link{color:#007e7e;}
#elixirs a:visited{color:#333333;}
#elixirs a:hover{background:#f88393; color:#0d5353;}
11 高階網站構建：div和 span
12 佈置元素：佈局和排版
13 開始製作表格：表格和列表
14 互動活動：XHTML 表單