語義化
- 標簽一
<body>標簽：頁面上的所有內(nèi)容
<p>段落文本</p>文章段落標簽 //段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。
<hx>標題文本</hx> (x為1-6)網(wǎng)頁添加標題 //<h1>是最高的等級。一般h1標簽被用在網(wǎng)站名稱上
<strong>需要強調(diào)的文本</strong>（粗體）、<em>需要強調(diào)的文本</em>（斜體）
<span>文本</span> 為了設(shè)置文本單獨樣式
<q>引用文本</q> 會自動加雙引號引用
<blocksquote>引用文本</blocksquote> 一般用于較長文本
//html代碼中輸入**空格**、**回車**都是沒有作用的
<br /> (寫在段落后 ) 分行顯示文本
（寫在需要空格的文字后）
<hr /> 加一條分割的橫線 ，同<br /> 是一個空標簽 只有開始標簽 無結(jié)束標簽。
<address>聯(lián)系地址信息</address> (也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份) --顯示為斜體
<code>代碼語言</code> 插入顯示代碼語言時，適用于一行代碼 多行可用<pre>
<pre>語言代碼段</pre> 插入顯示代碼段 （會預(yù)格式化文本、被包圍在 pre 元素中的文本通常會保留空格和換行符）
===網(wǎng)頁中預(yù)顯示格式時都可以使用它
- 標簽二
ul-li標簽: 信息列表（每項li前都自帶一個圓點）
<ul>
<li>[信息]</li>
<li>[信息]</li>
......
</ul>
ol-li：有序列表標簽 (每項<li>前都自帶一個序號，序號默認從1開始)
<ol>
<li>[信息]</li>
<li>[信息]</li>
......
</ol>
<div>…</div> 劃分出獨立模塊、邏輯部分（相當(dāng)于一個容器）
參考代碼：
<div>
<h2>熱門課程排行榜</h2>
<ol>
<li>前端開發(fā)面試心法 </li>
<li>零基礎(chǔ)學(xué)習(xí)html</li>
<li>javascript全攻略</li>
</ol>
</div>
<div>
<h2>最新課程排行</h2>
<ol>
<li>版本管理工具介紹—Git篇 </li>
<li>Canvas繪圖詳解</li>
<li>QQ5.0側(cè)滑菜單</li>
</ol>
</div>
<div id="版塊名稱">…</div> (給div命名，使邏輯更加清晰) ==為這一個獨立的邏輯部分
設(shè)置一個名稱，用id屬性來為<div>提供唯一的名稱
表格：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>標記開始、</table>標記結(jié)束。
2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內(nèi)容全部下載完才會顯示。如右側(cè)代碼編輯器中的代碼。
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>..</td>
，說明一行中就有幾列。
5、<th>…</th>：表格的頭部的一個單元格，**表格表頭。**
6、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。
(沒有表格線/表頭，也就是th標簽中的文本默認為**粗體**并且**居中**顯示)
<table summary="表格簡介文本"> (摘要：摘要的內(nèi)容是不會在瀏覽器中顯示出來，增加表格的可讀性(語義化))
<caption>****標題文本</caption> （描述表格內(nèi)容，標題的顯示位置：表格上方）
示例如下
<table summary="表格簡介文本">
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
超鏈接：
<a href="目標網(wǎng)址" title="鼠標滑過顯示的文本">鏈接顯示的</a>
實現(xiàn)超鏈接語法
title屬性：鼠標滑過鏈接文字時會顯示這個屬性的文本內(nèi)容
<a>標簽在默認情況下，鏈接的網(wǎng)頁是在當(dāng)前瀏覽器窗口中打開
<a href="目標網(wǎng)址" target="_blank">click here!</a> 在新的瀏覽器窗口打開鏈接
<a>標簽還有一個作用是可以鏈接Email地址使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送
電子郵件。如果mailto后面同時有多個參數(shù)的話，第一個參數(shù)必須以“?”開頭，后面的參數(shù)
每一個都以“&”分隔。
<a href = "mailto : 郵箱地址"> 發(fā)送</a> (瀏覽器自動調(diào)用默認客戶端郵件程序，并在收貨人中自動填上地址)
cc=填寫抄送地址 bcc=密件抄送地址 subject= 添加郵件主題 body= 添加郵件內(nèi)容
如：<a href = "mailto:yy@imooc.com ? subject= 該死 & body= 你好">發(fā)送</a>
<a href = "mailto : 郵箱地址 ；另一個郵箱地址"> 發(fā)送</a> （分好隔開多個收貨人地址，群發(fā)）
圖片：
<img arc="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">
1、src：標識圖像的位置（加載圖片；
2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時（下載不成功時），可看到該屬性指定的文本；
3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
4、圖像可以是GIF，PNG，JPEG格式的圖像文件
#表單標簽、與用戶交互
<form method="傳送方式" action="服務(wù)器文件">
#單選、復(fù)選框
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、 當(dāng) type="radio" 時，控件為單選框
當(dāng) type="checkbox" 時，控件為復(fù)選框
2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）
3、name：為控件命名，以備后臺程序 ASP、PHP 使用
4、checked：當(dāng)設(shè)置 checked="checked" 時，該選項被默認選中
??：同一組的單選按鈕，name 取值一定要一致
#下拉列表選擇框 eg:
<select>
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運動">運動</option>
<option value="購物" selected = "selected">購物</option>
</select>
1、value是向服務(wù)器提交的值
2、<option>選項</option> 選項為顯示的可選擇的值
3、設(shè)置selected ="selected"屬性，表示該選擇項默認被選中
#下拉列表框多選
在 select標簽中設(shè)置multiple="multiple"屬性，如下：
<select multiple = "multiple">...</select>
#提交按鈕（確定、提交數(shù)據(jù)）、重置按鈕（使輸入框等恢復(fù)初始狀態(tài)）
<input type="submit" value="提交" name="submitBtn" />
<input type="reset" value="重置" />
1、type為submit時，按鈕才有提交作用、為reset時，才有重置作用
2、value：按鈕上顯示的文字
#label標簽
label標簽不會向用戶呈現(xiàn)任何特殊效果，在 label 標簽內(nèi)點擊文本，就會觸發(fā)此控件。就是說，
當(dāng)用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上（就自動選
中和該label標簽相關(guān)連的表單控件上）。
<label for ="123">慢跑</label>
<label for="控件id名稱"> （標簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。）如：（注意label中for和控件上id的值）
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<br />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
CSS
認識CSS
1、CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內(nèi)容在瀏覽器內(nèi)的顯示樣式，如文字大小、顏色、字體加粗等
//如下即設(shè)置段落p內(nèi)的樣式
p{
font-size:12px;/*設(shè)置文字字號*/
color:red;/*設(shè)置文字顏色*/
font-weight:bold;/*設(shè)置字體加粗*/
}
2、把<p></p>中的三個短語設(shè)置顏色：
把這三個短語用<span></span>括起來，在寫如以下代碼：
span{
color:red;
}
3、CSS代碼語法
css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示
選擇符：選擇器、指明網(wǎng)頁中要應(yīng)用樣式規(guī)則的元素，如本例中是網(wǎng)頁中所有的段（p）的文字將變成藍色，而其他的元素（如ol）不會受到影響。
聲明：在{}中，屬性和值之間冒號隔開，多條聲明分好隔開
如：
p{
font-size:12px;
color:red;
font-weight:bold;
}
4
5、CSS 樣式代碼插入的形式來看基本可以分為以下3種：內(nèi)聯(lián)式、嵌入式和外部式三種
內(nèi)聯(lián)式：
css樣式表就是把css代碼直接寫在現(xiàn)有的HTML開始標簽中,如
<p style="color:red">這里文字是紅色。</p>
css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設(shè)置可以寫在一起，中間用分號隔開，如：
<p style="color:red;font-size:12px">這里文字是紅色。</p>
嵌入式css樣式，
就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間。如下面代碼實現(xiàn)把三個<span>標簽中的文字設(shè)置為紅色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間,如上
外部式css樣式
(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內(nèi)（不是在<style>標簽內(nèi)）使用<link>標簽將css樣式文件鏈接到HTML文件內(nèi)，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
1、（如上base.css，即單獨的外部css文件名稱）css樣式文件名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標簽位置一般寫在<head>標簽之內(nèi)。
然后再css文件中修改樣式
<link href="style.css" rel="stylesheet" type="text/css" />
上述三種方法的優(yōu)先級
內(nèi)聯(lián)式 > 嵌入式 > 外部式
注意點：1??、外部式<link href="style.css" ...>代碼在嵌入式<style type="text/css">...</style>代碼的前面，所以離設(shè)置元素較遠，即它們的優(yōu)先級遵循就近原則。
2??、上面所總結(jié)的優(yōu)先級是有一個前提：內(nèi)聯(lián)式、嵌入式、外部式樣式表中css樣式是在的相同權(quán)值的情況下
選擇器
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選擇器{ body{
樣式; font-size:12px
} }
{}之前的部分就是“選擇器”，“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網(wǎng)頁中的哪些元素
屏幕快照 2016-11-19 下午2.24.11.png
類選擇器
語法：
.類選器名稱{css樣式代碼;} (英文圓點開頭、類選擇器名稱可以任意命名)
使用方法：
1??使用合適的標簽把要修飾的內(nèi)容標記起來，如：
<span>膽小如鼠</span>
2??使用class="類選擇器名稱"為標簽設(shè)置一個類，如：
<span class="stress">膽小如鼠</span>
3??設(shè)置類選器css樣式，如：
.stress{color:red;}
ID選擇器
ID選擇器都類似于類選擇符,區(qū)別：
1??、為標簽設(shè)置id = "ID名稱"，而不是class = "類名稱"。
2??、ID選擇符前面是井號（#），而不是英文圓點（.）。
如：
<span id = "halo">簡單的問學(xué)</span>
#halo{
font-size:20px;
color:green;
}
類和ID選擇器的區(qū)別：
相同點：可以用于任何元素
不同點：
1??ID選擇器只能在文檔中使用一次。與類選擇器不用，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次，而類選擇器可以使用很多次。
2??可以使用類選擇器 詞列表方法為一個元素同時設(shè)置多個樣式，只可用類選擇器方法實現(xiàn)，ID選擇器不行（不能使用ID 詞列表）
如：
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
<p>到了<span **class="stress bigsize"**>三年級</span>下學(xué)期時，我們班上了一節(jié)公開課...</p>
子選擇器
即大于符號(>),用于選擇指定標簽元素的第一代子元素。如:
.food>li{border:1px solid red;}
//如此處是為 <p>..</p>標簽中的*第一代子元素*<span>..</span>里的內(nèi)容設(shè)置灰色邊框
.first>span{
border:2px solid gray;
}
<p class="first">三年級時，<span>我還是一個<span>膽小如鼠</span>的小女孩</span>，上課從來不敢回答老師提出的問題</p>
包含（后代）選擇器
包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素,如：
.first span{color:red;} //即設(shè)置first類下所有span元素的字體為紅色，也可繼續(xù)加新標簽賦值，如直接
在后面寫上 <strong>{color:blue }, 同時給下面<p>標簽中需要設(shè)置蔚藍色字體的文字加上<strong >標簽
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩</p>
與子選擇器區(qū)別：子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇?？偨Y(jié)：>作用于元素的第一代后代，空格作用于元素的所有后代。
通用選擇器
通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設(shè)置為紅色：
* {color:red;}
偽類選擇符
允許給html不存在的標簽（標簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設(shè)置字體大小顏色:
a:hover{
color:red;
font-size:22px
}
上面一行代碼就是為 a 標簽鼠標滑過的狀態(tài)設(shè)置字體顏色變紅變大
關(guān)于偽選擇符：
目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合。
分類選擇符
為html中多個標簽元素設(shè)置同一個樣式時，可以使用分組選擇符（，），如下：
h1,span{color:red;}
它相當(dāng)于下面兩行代碼：
h1{color:red;}
span{color:red;}
CSS特性
繼承性
繼承是一種規(guī)則，它允許樣式不僅應(yīng)用于某個特定html標簽元素，而且應(yīng)用于其后代。如某種顏色應(yīng)用于p標簽，這個顏色設(shè)置不僅應(yīng)用p標簽，還應(yīng)用于p標簽中的所有子元素文本，這里子元素為span標簽。
p{color:red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
注意有一些css樣式是不具有繼承性的。如border:1px solid red;
p{border:1px solid red;}
<p>三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
上面例子中它代碼的作用只是給p標簽設(shè)置了邊框為1像素、紅色、實心邊框線，而對于子元素span是沒用起到作用的。
特殊性
有的時候我們?yōu)橥粋€元素設(shè)置了不同的CSS樣式代碼，那么元素會啟用哪一個CSS樣式? 看一下面的代碼：
p{color:red;}
.first{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
green是正確的顏色,因為瀏覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的，權(quán)值高的就使用哪種css樣式。
權(quán)值的規(guī)則：
標簽的權(quán)值為1，類選擇符的權(quán)值為10，ID選擇符的權(quán)值最高為100。例如下面的代碼：
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*/**
還有一個權(quán)值比較特殊--繼承也有權(quán)值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權(quán)值最低。
層疊
如果在html文件中對于同一個元素可以有多個css樣式存在并且這多個css樣式具有相同權(quán)重值怎么辦？
層疊就是在html文件中對于同一個元素可以有多個css樣式存在，當(dāng)有相同權(quán)重的樣式存在時，會根據(jù)這些css樣式的前后順序來決定，處于最后面的css樣式會被應(yīng)用。
p{color:red;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
最后 p 中的文本會設(shè)置為green，這個層疊很好理解，理解為后面的樣式會覆蓋前面的樣式。
所以前面的css樣式優(yōu)先級就不難理解了：
內(nèi)聯(lián)樣式表（標簽內(nèi)部）> 嵌入樣式表（當(dāng)前文件中）> 外部樣式表（外部文件中）。(此處嵌入式跟外部式依據(jù)具體位置而定)
重要性
做網(wǎng)頁代碼的時，有些特殊的情況需要為某些樣式設(shè)置具有最高權(quán)值，這時候我們可以使用!important來解決。
如下代碼：
p{color:red**!important**;}
p{color:green;}
<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
這時 p 段落中的文本會顯示的red紅色。
注意：!important要寫在分號的前面
注意當(dāng)網(wǎng)頁制作者不設(shè)置css樣式時，瀏覽器會按照自己的一套樣式來顯示網(wǎng)頁。并且用戶也可以在瀏覽器中設(shè)置自己習(xí)慣的樣式，比如有的用戶習(xí)慣把字號設(shè)置為大一些，使其查看網(wǎng)頁的文本更加清楚。這時注意樣式優(yōu)先級為：瀏覽器默認的樣式 < 網(wǎng)頁制作者樣式 < 用戶自己設(shè)置的樣式，但記住!important優(yōu)先級樣式是個例外，權(quán)值高于用戶自己設(shè)置的樣式。
