課程來自慕客網(wǎng)：http://www.imooc.com/code/49
另外有網(wǎng)易coursera合作的課程：網(wǎng)絡(luò)技巧 - 網(wǎng)絡(luò)技術(shù)和HTML5簡介
提前準(zhǔn)備：安裝Dreamweaver 6
點(diǎn)擊安裝Dreamweaver 6?親測破解版可用，算是這兩天最大的收獲了。
注意：安裝中自己碰到了兩個(gè)問題,解決辦法如下：
1-安裝到一半提示需要重啟電腦。
? ? 原因：之前安裝不成功留下了記錄
解決辦法：進(jìn)入注冊表刪除注冊不成功記錄
2-安裝提示連接不上網(wǎng)絡(luò)
? ? 原因：不知
? ? 解決辦法：先斷網(wǎng)，然后再運(yùn)行安裝。（坑爹啊，連著網(wǎng)的時(shí)候提示連接不上網(wǎng)絡(luò)；斷網(wǎng)之后，反而安裝成功了）
2015-1-20 學(xué)習(xí)筆記
1-1:代碼初體驗(yàn)
1-2：html 和 CSS的關(guān)系：內(nèi)容和表達(dá)形式的關(guān)系
1-3&1-4: 標(biāo)簽以及標(biāo)簽的寫法
1-5：html 語言的基本結(jié)構(gòu)：
? ? ? ? <html>
? ? ? ? ?<head></head>
? ? ? ? ? <body></body>
? ? ? ? </html>
1-6：文檔頭：<head></head>,包含文檔的基本信息，如title等，但一般不會展示給用戶看。
1-7：代碼注釋方式：<!--注釋文字-->
2-1:語義化
2-2：容納具體網(wǎng)站內(nèi)容的標(biāo)簽:<body></body>
2-3：分段標(biāo)簽：<p></p>
2-4：字體大小：<h1></h1>-><h6></h6>
2-5: <em>這是斜體</em>；<strong>這是加粗</strong>
2-6:用span設(shè)置文本格式：
? ? a-先設(shè)定span的意思：比如“藍(lán)色”
? ? ? <style>
? ? ? ? ? ? ? ? ? <span>color:blue;</span>
? ? ? ?</style>
? ? ? ? b-指定應(yīng)用范圍： <span>文本</span>
2-7:一句話的引用：<q></q>
2-8：長段文章引用：<blockquote></blockquote>
2-9:使用</br>標(biāo)簽分行顯示文本
2-10:添加空格：
2-11: 加入分隔線： <hr> 或者 <hr/>, 空標(biāo)簽
2-12: 加入地址標(biāo)簽（變斜體）：<address></address>
2-13: 加入一句代碼標(biāo)簽： <code></code>
2-14:保留原文本格式（加入大段代碼）標(biāo)簽：
? ? ? ? ?<pre></pre>
3-1:信息列表: <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<li></li>
? ? ? ? ? ? ? ? ? ? ? ?</ul>
3-2:ol 有序信息列表： <ol>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li></li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?</ol>
3-3:<div></div> 邏輯板塊分類（division)
3-4：給DIV命名<div id=xxx></div>
2015-1-21 學(xué)習(xí)筆記
3-5表格標(biāo)簽：
? ? ?<table>
? ? ?<--!以下是表頭,一般表頭默認(rèn)為一行，由任意個(gè)表格組成-->
? ? ?<th>
? ? ?<td>這是表格<td>
? ? ?</th>
? ? ? <--!以下是表格內(nèi)容，默認(rèn)為一行，由任意個(gè)表格組成-->
? ? ? <tr><td>內(nèi)容</td></tr>
? ? ? </table>
3-6 用CSS樣式，為表格添加邊框
? ? ?<style type="style/css">
? ? ? table,tr,td,th{border:1px,solid,#000;}
? ? ? </style>
3-7:表格摘要及標(biāo)題：
? ? ? <table summary="摘要內(nèi)容">
? ? ? <caption>標(biāo)題</caption>
4-1:認(rèn)識<a>標(biāo)簽，鏈接到另外一個(gè)頁面，默認(rèn)為在原有瀏覽器打開
? ? ? ?<a href="鏈接" title="鼠標(biāo)滑過顯示的文本">展示的文本</a>
比如：<a href="http://xxx" title="學(xué)習(xí)網(wǎng)站">點(diǎn)擊這里</a>
4-2: 在新建瀏覽器打開頁面：目標(biāo)網(wǎng)址后+ target="_blank"
4-3：使用mailto 發(fā)送郵件，更多詳細(xì)說明點(diǎn)擊這里
<a href="mailto:xx@xx.com?cc=xx@xx.com&bcc=xx@xx.com&subject=文本內(nèi)容&body=文本內(nèi)容></a>
4-4:插入圖片
<img src="圖片地址" alt="下載失敗時(shí)的替換文本" title = "提示文本">
1-22 學(xué)習(xí)筆記
5-1 表單文件
<form method=“傳送方式” action="服務(wù)器文件" ></form>
舉例：
<form method="post"? action="save.php">
? ? ? ? <label for="username">用戶名:</label>
? ? ? ? <input type="text" name="username" />?
?? ? ? <label for="pass">密碼:</label>? ? ? ? <input type="password" name="pass"/></form>
5-2 文本輸入框 密碼輸入框
<form>
? ? ? ? ? ? ?<input type="text/password" name="名稱” value="文本"/>
</form>
當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?當(dāng)type="password"時(shí)，輸入框?yàn)槊艽a輸入框。
5-3 文本域，支持多行文本輸入
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
5-4 單選框，復(fù)選框
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
? ? 1、type:
? ? ? 當(dāng)type="radio"時(shí)，控件為單選框.name取值一定要一致，這樣才能起到單選作用。
? ? ? 當(dāng)type="checkbox"時(shí)，控件為復(fù)選框
? ? 2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）
? ? 3、name：為控件命名，以備后臺程序ASP、PHP使用
? ? 4、checked：當(dāng)設(shè)置checked="checked"時(shí)，該選項(xiàng)被默認(rèn)選中
5-5 使用下拉表框進(jìn)行單選，節(jié)省空間
<select>
<option value="提交值">選項(xiàng)</option>
</select>
selected 屬性為默認(rèn)選擇，使用方法：selected="selected".
5-6 使用下拉表框進(jìn)行多選
在<select>標(biāo)簽中設(shè)置 multiple="multiple"屬性，就可以實(shí)現(xiàn)多選功能。size="2", size為顯示出來的選項(xiàng)數(shù)。
5-7 使用提交鈕，提交數(shù)據(jù)
<input type="submit" value="提交">
5-8 使用重置按鈕，重置表單信息
<input type="reset" value="重置">
5-9 form表單中的label標(biāo)簽
<label for="空間id名稱">, 標(biāo)簽的for屬性中的值應(yīng)當(dāng)與相關(guān)控件的id相同。
1-23 學(xué)習(xí)日志
6-1: 認(rèn)識CSS
CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等。
6-2:CSS的優(yōu)勢
為什么使用css樣式來設(shè)置網(wǎng)頁的外觀樣式呢？右邊編輯器是一段文字，我們想把“超酷的互聯(lián)網(wǎng)”、“服務(wù)及時(shí)貼心”、“有趣易學(xué)”這三個(gè)短語的文本顏色設(shè)置為紅色，這時(shí)就 可以通過設(shè)置樣式來設(shè)置，而且只需要編寫一條css樣式語句。
第一步：把這三個(gè)短語用<span></span>括起來。（見右邊代碼編輯器13行）
第二步：寫入下列代碼：span{ color:red;}
6-3:CSS語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。如圖所示。
聲明：在英文大括號“｛｝”中的的就是聲明，屬性和值之間用英文冒號“：”分隔。當(dāng)有多條聲明時(shí)，中間可以英文分號“;”分隔，如下所示：
p{color:blue;fontsize:12px;
6-4: 注釋代碼 /*文字內(nèi)容*/
7-1內(nèi)聯(lián)式：
<p style="color:red">這里文字是紅色。</p>
7-2嵌入式：嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標(biāo)簽之間。
7-3 外部式：
外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中，這個(gè)css樣式文件以“.css”為擴(kuò)展名，在<head>內(nèi)（不是在<style>標(biāo)簽內(nèi)）使用<link>標(biāo)簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、標(biāo)簽位置一般寫在標(biāo)簽之內(nèi)。
7-4 不同形式的優(yōu)先級：就近原則。一般：內(nèi)聯(lián)式 > 嵌入式 > 外部式
8-1 選擇器
每一條css樣式聲明（定義）由兩部分組成：選擇器{樣式}
在{}之前的部分就是“選擇器”，“選擇器”指明了{(lán)}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素。
8-2 標(biāo)簽選擇器
標(biāo)簽選擇器其實(shí)就是html代碼中的標(biāo)簽。如右側(cè)代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。
8-3 類選擇器
.類選器名稱{css樣式代碼;
步驟：
第一步：使用合適的標(biāo)簽把要修飾的內(nèi)容標(biāo)記起來：<span>膽小如鼠</span>
第二步：使用class="類選擇器名稱"為標(biāo)簽設(shè)置一個(gè)類，如下：<span class="stress">膽小如鼠</span>
第三步：設(shè)置類選器css樣式，如下：.stress{color:red;}/*類前面要加入一個(gè)英文圓點(diǎn)*/
8-4 ID選擇器
在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：
1、為標(biāo)簽設(shè)置id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號（#）號，而不是英文圓點(diǎn)（.）。
8-5 ID選擇器和類選擇器的比較
相同點(diǎn)：可以應(yīng)用于任何元素
不同點(diǎn)：
1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個(gè)HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。
2、可以使用類選擇器詞列表方法為一個(gè)元素同時(shí)設(shè)置多個(gè)樣式。我們可以為一個(gè)元素同時(shí)設(shè)多個(gè)樣式，但只可以用類選擇器的方法實(shí)現(xiàn)，ID選擇器是不可以的（不能使用 ID 詞列表）。
8-6 子選擇器
還有一個(gè)比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標(biāo)簽元素的第一代子元素。
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實(shí)線邊框。
8-7 包含(后代)選擇器
.first? span{color:red;}
和子選擇器的差別：包含所有后代，子選擇器只包含直接后代。
8-8 通用選擇器
通用選擇器是功能最強(qiáng)大的選擇器，它使用一個(gè)（*）號指定，它的作用是匹配html中所有標(biāo)簽元素，
8-9 偽類選擇符
a:hover{color:red;}
8-9 分組選擇符
.first,#second span{color:green;}
9-1,9-2
各類標(biāo)簽符號的權(quán)值：權(quán)值越高，對指定文本的控制度越高。
p{color:red;}/*權(quán)值為1*/
p span{color:green;}/*權(quán)值為1+1=2*/
.warning{color:white;}/*權(quán)值為10*/
p span.warning{color:purple;}/*權(quán)值為1+1+10=12*/
#footer .note p{color:yellow;}/*權(quán)值為100+10+1=111*/
9-3 CSS的層疊：就近原則
9-4 重要性：
p{color:red!important;}
p{color:green;}
<p class="first">三年級時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>
10-1 字體
body{font-family:"宋體";}
10-2 文字排版--字號、顏色
body{font-size:12px;color:#666}
10-3,4 文字排版--粗體,斜體,下劃線,刪除線
p span{font-weight:bold;}
p a{font-style:italic;}
p a{text-decoration:underline;}
.oldPrice{text-decoration:line-through;}
10-7 段落排版 縮進(jìn)
p{text-indent:2em;}
10-8 段落排版--行間距（行高）
p{line-height:1.5em;}
10-9 段落排版--字間距、字母間距
如果想在網(wǎng)頁排版中設(shè)置文字間隔或者字母間隔就可以使用letter-spacing來實(shí)現(xiàn).
如果我想設(shè)置英文單詞之間的間距呢？可以使用word-spacing來實(shí)現(xiàn)。
10-10 段落排版--對齊
想為塊狀元素中的文本、圖片設(shè)置居中樣式嗎？可以使用text-align樣式代碼，如下代碼可實(shí)現(xiàn)文本居中顯示。
text-align:center;
text-align:left;
text-align:right;
11-1 元素分類
在講解CSS布局之前，我們需要提前知道一些知識，在CSS中，html中的標(biāo)簽元素大體被分為三種不同的類型：塊狀元素、內(nèi)聯(lián)元素(又叫行內(nèi)元素)和內(nèi)聯(lián)塊狀元素。
常用的塊狀元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的內(nèi)聯(lián)元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的內(nèi)聯(lián)塊狀元素有：
<img><input>
11-2 元素分類--塊級元素
在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素。設(shè)置<display:block>就是將元素顯示為塊級元素。
塊級元素特點(diǎn)：
1、每個(gè)塊級元素都從新的一行開始，并且其后的元素也另起一行。（真霸道，一個(gè)塊級元素獨(dú)占一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3、元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度。
11-3 內(nèi)聯(lián)元素
在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的內(nèi)聯(lián)元素（行內(nèi)元素）（inline）元素。當(dāng)然塊狀元素也可以通過代碼display:inline將元素設(shè)置為內(nèi)聯(lián)元素。如下代碼就是將塊狀元素div轉(zhuǎn)換為內(nèi)聯(lián)元素，從頁使用div元素具有內(nèi)聯(lián)元素特點(diǎn)。
內(nèi)聯(lián)元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高及頂部和底部邊距不可設(shè)置；
3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
11-4 元素分類--內(nèi)聯(lián)塊狀元素
內(nèi)聯(lián)塊狀元素（inline-block）就是同時(shí)具備內(nèi)聯(lián)元素、塊狀元素的特點(diǎn)，代碼display:inline-block就是將元素設(shè)置為內(nèi)聯(lián)塊狀元素。(css2.1新增)，<img>、<input>標(biāo)簽就是這種內(nèi)聯(lián)塊狀標(biāo)簽。
inline-block元素特點(diǎn)：
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
11-5 盒子模型（視頻）
margin, padding,border
11-6 盒子模型（邊框）
盒子模型的邊框就是圍繞著內(nèi)容及補(bǔ)白的線，這條線你可以設(shè)置它的粗細(xì)、樣式和顏色(邊框三個(gè)屬性)。
注意：
1、border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點(diǎn)線）| solid（實(shí)線）。
2、border-color（邊框顏色）中的顏色可設(shè)置為十六進(jìn)制顏色，如:border-color:#888;//前面的井號不要忘掉。
3、border-width（邊框?qū)挾龋┲械膶挾纫部梢栽O(shè)置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
例子：p{border:2px dotted #ccc;}
11-7 盒子模型 邊框（二）
現(xiàn)在有一個(gè)問題，如果有想為p標(biāo)簽單獨(dú)設(shè)置下邊框，而其它三邊都不設(shè)置邊框樣式怎么辦呢？css樣式中允許只為一個(gè)方向的邊框設(shè)置樣式：div{border-bottom:1px solid red;}
也可以 border-right, border-left, border top.
11-8 盒模型--寬度和高度
盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內(nèi)定義的寬（width）和高（height），指的是填充以里的內(nèi)容范圍。
因此一個(gè)元素實(shí)際寬度（盒子的寬度）=左邊界+左邊框+左填充+內(nèi)容寬度+右填充+右邊框+右邊界。見圖。
11-9 盒模型--填充
元素內(nèi)容與邊框之間是可以設(shè)置距離的，稱之為“填充”(padding)。填充也可分為上、右、下、左(順時(shí)針)。如下代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
11-10 盒模型--邊界
元素與其它元素之間的距離可以使用邊界（margin）來設(shè)置。邊界也是可分為上、右、下、左。如下代碼：div{margin:20px 10px 15px 30px;}
12-1 css布局模型
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網(wǎng)頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）
12-2 流模型
流動布局模型具有2個(gè)比較典型的特征：
第一點(diǎn)，塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊狀元素的寬度都為100%。實(shí)際上，塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個(gè)塊狀元素標(biāo)簽(div，h1，p)寬度顯示為100%。
12-2 流模型（2）
第二點(diǎn)，在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）
右側(cè)代碼編輯器中內(nèi)聯(lián)元素標(biāo)簽a、span、em、strong都是內(nèi)聯(lián)元素。
12-3 浮動模型
12-5 什么是層模型？
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個(gè)圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計(jì)領(lǐng)域，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧。
層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
12-6 絕對定位
如果想為元素設(shè)置層模型中的絕對定位，需要設(shè)置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
12-7 層模型--相對定位
如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
12-8 relative 和 absolute 的搭配使用
1. 被參照定位的元素一定要是參照定位元素的父元素。
? <div id="box1"><!--被參照定位的元素-->
<div id="box2">相對參照元素進(jìn)行定位</div><!--相對定位元素-->
2、被參照定位的元素必須加入position:relative;
3、參照定位的元素必須加入 position:absolute;
13-1 盒模型代碼簡寫
通常有下面三種縮寫方法:
1、如果top、right、bottom、left的值相同，寫一個(gè)。如：margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代碼：margin:10px 20px;
3、如果left和right的值相同，如下面代碼：margin:10px 20px 30px;
13-2 顏色值縮寫
關(guān)于顏色的css樣式也是可以縮寫的，當(dāng)你設(shè)置的顏色是16進(jìn)制的色彩值時(shí)，如果每兩位的值相同，可以縮寫一半。
13-3 字體縮寫
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
可以簡寫為：
body{
font:italic? small-caps? bold? 12px/1.5em? "宋體",sans-serif;
}
1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-varient、line-height)如未指定將自動使用默認(rèn)值。
2、在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜扛。
W3school 練習(xí)
1-不帶下劃線的鏈接
<a href="地址" ?style="textdecoration:none">這是一個(gè)鏈接！</a>
2-外部樣式表
外部樣式表
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。
3-內(nèi)部樣式表
內(nèi)部樣式表
當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。你可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>
4-插入圖像作為超鏈接：
您也可以使用圖像來作鏈接：
<p>
<a href="鏈接">
<img src="">
</a>
</p>
我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接。
有兩種使用 標(biāo)簽的方式：
通過使用 href 屬性 - 創(chuàng)建指向另一個(gè)文檔的鏈接
通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽
5-設(shè)置圖像在文本中對齊
<img src="鏈接" align="bottom">, 還可以用 ?middle, top.
6-圖片浮動
<img src="鏈接" align="left">, 還可以用 right
7-改變圖片大小
<img src="鏈接" width=100px height=100px>
8-無法顯示圖片時(shí)（比如由于瀏覽器不兼容），可以顯示替換文本
<img src="鏈接" alt="向左轉(zhuǎn)">
