目中有時(shí)候會(huì)遇到這個(gè)問(wèn)題：一行有3個(gè)div，希望這3個(gè)div平分屏幕寬度，并且高度等于寬度。

第一個(gè)問(wèn)題：平分屏幕寬度

可以對(duì)div設(shè)置百分比寬度，而不是直接用px寬度，這里用到了響應(yīng)式設(shè)計(jì)的思想，可以參考這篇文章：自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）

第二個(gè)問(wèn)題：動(dòng)態(tài)設(shè)置高度和寬度一致

有兩種方法，一種是用js動(dòng)態(tài)設(shè)置，一種是直接用CSS設(shè)置

先看下html代碼

<ul>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

公用的CSS

ul,li{

list-style: none;

}

* {

margin: 0;

padding: 0;

outline: 0

}

body {

margin: 0;

padding: 0;

-webkit-appearance: none;

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

font-size: 16px;

}

ul{

margin:10px;

}

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

用js動(dòng)態(tài)設(shè)置

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

$(window).resize(function() {

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

});

• 1
• 2
• 3
• 4
• 5
• 6

用CSS設(shè)置

.dummy {

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background: #333333;

}

• 1
• 2
• 3
• 4
• 5

CSS設(shè)置padding-top的原理：Use CSS to Specify the Aspect Ratio of a Fluid Element

/———————————————————

然后嘗試對(duì)圖片設(shè)置高度等于動(dòng)態(tài)寬度

js方法很簡(jiǎn)單，跟上面的方法基本相同

<ul>

<li class="container">

<img src="images/test_1.jpg"/>

<div class="element">

some text

</div>

</li>

<li class="container">

<img src="images/test_2.jpg"/>

<div class="element">

some text

</div>

</li>

<li class="container">

<img src="images/test_3.jpg"/>

<div class="element">

some text

</div>

</li>

</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.container img{

width: 100%;

height:100%;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

$(window).resize(function() {

var cw = $('.dummy').width();

$('.dummy').css({'height':cw+'px'});

});

• 1
• 2
• 3
• 4
• 5
• 6

CSS方法

<ul>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

<li class="container">

<div class="dummy">

</div>

<div class="element">

some text

</div>

</li>

</ul>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23

.container {

display: inline-block;

position: relative;

width: 32%;

text-align: center;

}

.dummy{

padding-top: 100%; /* 1:1 aspect ratio */

width: 100%;

background:url(images/test_3.jpg) no-repeat;

-webkit-background-size: 100%;

background-size: 100%;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

通過(guò)設(shè)置background可以實(shí)現(xiàn)。

div包含img的方法沒(méi)有試驗(yàn)成功，以后繼續(xù)嘗試

/————————————-

還有一個(gè)問(wèn)題，怎么設(shè)置div和img之間的padding，又能保證div寬度是屏幕寬度的三分之一？

見(jiàn)標(biāo)簽

1.段落標(biāo)簽<p>

• <p>標(biāo)簽的默認(rèn)樣式，段前段后都會(huì)有空白，如果不喜歡這個(gè)空白，可以用css樣式來(lái)刪除或改變它。
• 改變CSS樣式刪除段前段后空白處。

<style> 
 p{margin:0px;} 
</style>

2.斜體標(biāo)簽<em>

 <em>斜體</em>

3.粗體標(biāo)簽<strong>

 <strong>加粗</strong>

4.<span>標(biāo)簽

被用來(lái)組合文檔中的行內(nèi)元素。使用 <span> 來(lái)組合行內(nèi)元素，以便通過(guò)樣式來(lái)格式化它們。

• <span> 在CSS定義中屬于一個(gè)行內(nèi)元素,在行內(nèi)定義一個(gè)區(qū)域，也就是一行內(nèi)可以被 <span>劃分成好幾個(gè)區(qū)域，從而實(shí)現(xiàn)某種特定效果。
• <span>本身沒(méi)有任何屬性。
• <div>在CSS定義中屬于一個(gè)塊級(jí)元素<div>可以包含段落、標(biāo)題、表格甚至其它部分。這使DIV便于建立不同集成的類(lèi)，如章節(jié)、摘要或備注。在頁(yè)面效果上，使用<div> 會(huì)自動(dòng)換行，使用<span> 就會(huì)保持同行。

例如：

 <style> 
 span{ color:blue; } 
 </style>

這樣，<span>標(biāo)簽包含的文本就變成了藍(lán)色的字體。

5.<q>標(biāo)簽

作用：段文本引用

例如：

<p>最初知道莊子，是從一首詩(shī)<q>莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。</q>開(kāi)始的。雖然當(dāng)時(shí)不知道是什么意思，只是覺(jué)得詩(shī)句挺特別。后來(lái)才明白這個(gè)典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對(duì)世俗社會(huì)的功名利祿及自己的舍棄。</p>
在上面的例子中，“莊生曉夢(mèng)迷蝴蝶。望帝春心托杜鵑。” 這是一句詩(shī)歌，出自晚唐詩(shī)人李商隱的《錦瑟》 。因?yàn)椴皇亲髡咦约旱奈淖郑孕枰褂?lt;q></q>實(shí)現(xiàn)引用。
注意要引用的文本不用加雙引號(hào)，瀏覽器會(huì)對(duì)q標(biāo)簽自動(dòng)添加雙引號(hào)。
這里用<q>標(biāo)簽的真正關(guān)鍵點(diǎn)不是它的默認(rèn)樣式雙引號(hào)（如果這樣我們不如自己在鍵盤(pán)上輸入雙引號(hào)就行了），而是它的語(yǔ)義：引用別人的話。
補(bǔ)充知識(shí)：語(yǔ)義化網(wǎng)頁(yè)結(jié)構(gòu)有助于搜索引擎的收錄。同一個(gè)效果可以用很多鐘方式實(shí)現(xiàn)，但這只方便了瀏覽者，而搜索引擎不知道這里到底是什么內(nèi)容，這里如果你使用標(biāo)簽，那么就告訴瀏覽器這里是引用的話。而且在手持設(shè)備或移動(dòng)設(shè)備不能很好支持css的基礎(chǔ)上，瀏覽器會(huì)使用默認(rèn)的效果，因而提供較好可讀性。

6.<blockquote>標(biāo)簽

作用：長(zhǎng)文本引用

例如：

<blockquote>明月出天山，蒼茫云海間。長(zhǎng)風(fēng)幾萬(wàn)里，吹度玉門(mén)關(guān)。漢下白登道，胡窺青海灣。由來(lái)征戰(zhàn)地，不見(jiàn)有人還。 戍客望邊色，思?xì)w多苦顏。高樓當(dāng)此夜，嘆息未應(yīng)閑。</blockquote>

注意：瀏覽器對(duì)<blockquote>標(biāo)簽的解析是縮進(jìn)樣式

7.<br>標(biāo)簽

怎么可以讓每一句詩(shī)詞后面加入一個(gè)折行呢？那就可以用到<br />標(biāo)簽了，在需要加回車(chē)換行的地方加入<br />，<br />標(biāo)簽作用相當(dāng)于word文檔中的回車(chē)。

語(yǔ)法：

xhtml1.0寫(xiě)法：

 <br/>

html4.01寫(xiě)法：

 <br>

現(xiàn)在一般使用 xhtml1.0 的版本的寫(xiě)法（其它標(biāo)簽也是），這種版本比較規(guī)范。

與以前我們學(xué)過(guò)的標(biāo)簽不一樣，<br />標(biāo)簽是一個(gè)空標(biāo)簽，沒(méi)有HTML內(nèi)容的標(biāo)簽就是空標(biāo)簽，空標(biāo)簽只需要寫(xiě)一個(gè)開(kāi)始標(biāo)簽，這樣的標(biāo)簽有<br />、<hr />和<img />。

講到這里，你是不是有個(gè)疑問(wèn)，想折行還不好說(shuō)嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車(chē)不就行了嗎？ 不好意思，在 html 中是忽略回車(chē)和空格的，你輸入的再多回車(chē)和空格也是顯示不出來(lái)的。

8.<hr>標(biāo)簽

在信息展示時(shí)，有時(shí)會(huì)需要加一些用于分隔的橫線，這樣會(huì)使文章看起來(lái)整齊些。

語(yǔ)法：

html4.01版本

<hr>

xhtml1.0版本

<hr/>

注意：

• <hr />標(biāo)簽和<br />標(biāo)簽一樣也是一個(gè)空標(biāo)簽，所以只有一個(gè)開(kāi)始標(biāo)簽，沒(méi)有結(jié)束標(biāo)簽。
• <hr />標(biāo)簽的在瀏覽器中的默認(rèn)樣式線條比較粗，顏色為灰色，可能有些人覺(jué)得這種樣式不美觀，沒(méi)有關(guān)系，這些外在樣式在我們以后學(xué)習(xí)了css樣式表之后，都可以對(duì)其修改。
• 大家注意，現(xiàn)在一般使用 xhtml1.0 的版本（其它標(biāo)簽也是），這種版本比較規(guī)范。

9.<address>標(biāo)簽

一般網(wǎng)頁(yè)中會(huì)有一些網(wǎng)站的聯(lián)系地址信息需要在網(wǎng)頁(yè)中展示出來(lái)，這些聯(lián)系地址信息如公司的地址就可以<address>標(biāo)簽。也可以定義一個(gè)地址（比如電子郵件地址）、簽名或者文檔的作者身份。

語(yǔ)法：

 <address>聯(lián)系地址信息</address>

如：

<address>文檔編寫(xiě)：lilian 北京市西城區(qū)德外大街10號(hào)</address>

10.<code>標(biāo)簽

在介紹語(yǔ)言技術(shù)的網(wǎng)站中，避免不了在網(wǎng)頁(yè)中顯示一些計(jì)算機(jī)專(zhuān)業(yè)的編程代碼，當(dāng)代碼為一行代碼時(shí)，你就可以使用<code>標(biāo)簽了，如下面例子：

<code>var i=i+300;</code>

注意：在文章中一般如果要插入多行代碼時(shí)不能使用<code>標(biāo)簽了。

語(yǔ)法：

<code>代碼語(yǔ)言</code>

注：如果是多行代碼，可以使用<pre>標(biāo)簽。

11.<pre>標(biāo)簽

主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會(huì)保留空格和換行符。

語(yǔ)法：

<pre>語(yǔ)言代碼段</pre>

如下代碼：

<pre> 
 var message="歡迎"; 
 for(var i=1;i<=10;i++) { 
 alert(message); 
 } 
</pre>

效果如下：

注意：<pre> 標(biāo)簽不只是為顯示計(jì)算機(jī)的源代碼時(shí)用的，在你需要在網(wǎng)頁(yè)中預(yù)顯示格式時(shí)都可以使用它，只是<pre>標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)展示計(jì)算機(jī)的源代碼。

12.<ul>標(biāo)簽

ul-li是沒(méi)有前后順序的信息列表。

• 這樣是空心圓，

ul{ list-style:circle; }

• 這個(gè)就是去除前面的點(diǎn)

ul{ list-style:none }

• 語(yǔ)法：

<ul> 
 <li>信息</li> 
 <li>信息</li> 
 ...... 
</ul>

• 舉例：

<ul> 
 <li>精彩少年</li> 
 <li>美麗突然出現(xiàn)</li> 
 <li>觸動(dòng)心靈的旋律</li> 
</ul>

• ul-li在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為：每項(xiàng)li前都自帶一個(gè)圓點(diǎn)

13.<ol>標(biāo)簽

ol-li是有前后順序的信息列表

• 語(yǔ)法：

<ol> 
 <li>信息</li> 
 <li>信息</li> 
 ...... 
</ol>

• 舉例：

 <ol> 
 <li>前端開(kāi)發(fā)面試心法 </li> 
 <li>零基礎(chǔ)學(xué)習(xí)html</li>
 <li>JavaScript全攻略</li> 
</ol>

<ol>在網(wǎng)頁(yè)中顯示的默認(rèn)樣式一般為：每項(xiàng)<li>前都自帶一個(gè)序號(hào)，序號(hào)默認(rèn)從1開(kāi)始。

14.<div>標(biāo)簽

• <div> 可定義文檔中的分區(qū)或節(jié)（division/section）。
• <div>標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。
• 如果用 id 或 class 來(lái)標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。
• <div>是一個(gè)塊級(jí)元素。這意味著它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。實(shí)際上，換行是 <div>固有的唯一格式表現(xiàn)。可以通過(guò)<div> 的 class 或 id 應(yīng)用額外的樣式。不必為每一個(gè) <div> 都加上類(lèi)或 id，雖然這樣做也有一定的好處。
• 可以對(duì)同一個(gè) <div>元素應(yīng)用 class 或 id 屬性，但是更常見(jiàn)的情況是只應(yīng)用其中一種。這兩者的主要差異是，class 用于元素組（類(lèi)似的元素，或者可以理解為某一類(lèi)元素），而id 用于標(biāo)識(shí)單獨(dú)的唯一的元素。

15.<table>標(biāo)簽

• 常用屬性

1）屬性：border

作用：規(guī)定表格邊框的寬度

2）屬性：cellpadding

作用：?jiǎn)卧裰械奈谋九c單元格邊框的間距

3）屬性：cellspacing

作用：?jiǎn)卧裰g的間距

• 創(chuàng)建表格的四個(gè)元素：

table、tbody、tr、th、td

1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開(kāi)始、</table>標(biāo)記結(jié)束。

2、<tbody>…</tbody>：當(dāng)表格內(nèi)容非常多時(shí)，表格會(huì)下載一點(diǎn)顯示一點(diǎn)，但如果加上<tbody>標(biāo)簽后，這個(gè)表格就要等表格內(nèi)容全部下載完才會(huì)顯示。如右側(cè)代碼編輯器中的代碼。

3、<tr>…</tr>：表格的一行，所以有幾對(duì)tr 表格就有幾行。

4、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對(duì)<td>...</td>，說(shuō)明一行中就有幾列。

- 常用屬性： colspan：規(guī)定單元格可橫跨的列數(shù)，值為數(shù)字 rowspan：規(guī)定單元格可橫跨的行數(shù)，值為數(shù)字

5、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。

6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。

總結(jié)：

• 1、表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
• 2、table表格在沒(méi)有添加css樣式之前，在瀏覽器中顯示是沒(méi)有表格線的
• 3、用css樣式，為表格加入邊框Table 表格在沒(méi)有添加 css 樣式之前，是沒(méi)有邊框的。

16.<caption>標(biāo)簽

表格還是需要添加一些標(biāo)簽進(jìn)行優(yōu)化，可以添加標(biāo)題和摘要。

• 摘要

摘要的內(nèi)容是不會(huì)在瀏覽器中顯示出來(lái)的。它的作用是增加表格的可讀性(語(yǔ)義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶(hù)讀取表格內(nèi)容。語(yǔ)法：

<table summary="表格簡(jiǎn)介文本">

• 標(biāo)題

用以描述表格內(nèi)容，標(biāo)題的顯示位置：表格上方。語(yǔ)法：

<table> 
 <caption>標(biāo)題文本</caption> 
 <tr> 
 <td>…</td> 
 <td>…</td> 
 … 
 </tr> 
 … 
</table>

17.<a>標(biāo)簽

• _blank --在新窗口中打開(kāi)鏈接
• _parent --在父窗體中打開(kāi)鏈接
• _self --在當(dāng)前窗體打開(kāi)鏈接,此為默認(rèn)值
• _top --在當(dāng)前窗體打開(kāi)鏈接，并替換當(dāng)前的整個(gè)窗體(框架頁(yè))
• 一個(gè)對(duì)應(yīng)的框架頁(yè)的名稱(chēng) -在對(duì)應(yīng)框架頁(yè)中打開(kāi)
• href：Hypertext Reference的縮寫(xiě)。意思是超文本引用。
• 使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁(yè)制作中可以說(shuō)是無(wú)處不在，只要有鏈接的地方，就會(huì)有這個(gè)標(biāo)簽。語(yǔ)法：

 <a href="目標(biāo)網(wǎng)址" title="鼠標(biāo)滑過(guò)顯示的文本">鏈接顯示的文本</a>

例如：

 <a  title="點(diǎn)擊進(jìn)入慕課網(wǎng)">click here!</a>

上面例子作用是單擊click here!文字，網(wǎng)頁(yè)鏈接跳轉(zhuǎn)到http://www.imooc.com這個(gè)網(wǎng)頁(yè)。

• <a>標(biāo)簽在默認(rèn)情況下，鏈接的網(wǎng)頁(yè)是在當(dāng)前瀏覽器窗口中打開(kāi)，有時(shí)我們需要在新的瀏覽器窗口中打開(kāi)。如下代碼：

 <a href="目標(biāo)網(wǎng)址" target="_blank">click here!</a>

• title屬性的作用，鼠標(biāo)滑過(guò)鏈接文字時(shí)會(huì)顯示這個(gè)屬性的文本內(nèi)容。這個(gè)屬性在實(shí)際網(wǎng)頁(yè)開(kāi)發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內(nèi)容（語(yǔ)義化更友好）。
• 注意：還有一個(gè)有趣的現(xiàn)象不知道小伙伴們發(fā)現(xiàn)了沒(méi)有，只要為文本加入a標(biāo)簽后，文字的顏色就會(huì)自動(dòng)變?yōu)樗{(lán)色（被點(diǎn)擊過(guò)的文本顏色為紫色），顏色很難看吧，不過(guò)沒(méi)有關(guān)系后面我們學(xué)習(xí)了css樣子就可以設(shè)置過(guò)來(lái)（a{color:#000}),下面會(huì)詳細(xì)講解。
• 使用mailto在網(wǎng)頁(yè)中鏈接Email地址

<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問(wèn)者便捷向網(wǎng)站管理者發(fā)送電子郵件。

注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開(kāi)頭，后面的參數(shù)每一個(gè)都以“&”分隔。引號(hào)只有一對(duì)！

例子：
<a href="mailto:yy@qq.com? cc=xx@qq.com & bcc=aa@qq.com & subject=郵件主題 & body=郵件內(nèi)容">

• 如果：A 發(fā)送郵件給B1、B2、B3，抄送給C1、C2、C3，密送給D1、D2、D3。

那么：
1）A知道自己發(fā)送郵件給了B1、B2、B3，并且抄送給了C1、C2、C3，密送給了D1、D2、D3。
2）B1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
3）C1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，但不知道密送給了D1、D2、D3。
4）D1知道這封是A發(fā)送給B1、B2、B3的郵件，并且抄送給了C1、C2、C3，而且密送給了自己，但不知道密送給了D2、D3。
5）郵箱地址
 mailto: <a href="mailto:qiujie@staff.weibo.com">發(fā)送</a>
6）抄送地址
cc: <a href="mailto:qiujie@staff.weibo.com?cc=zz@sina.com">發(fā)送</a>
7）密件抄送地址
用分號(hào)分隔: <a href="mailto:qiujie@staff.weibo.com?bcc=zz@sina.com">發(fā)送</a>
8）多個(gè)收件人、抄送人、密送人 ;
bcc: <a href="mailto:qiujie@staff.weibo.com;zz@sina.com">發(fā)送</a>
9）郵件主題
subject: <a href="mailto:qiujie@staff.weibo.com？subject=郵件主題">發(fā)送</a>
10）郵件內(nèi)容
body: <a href="mailto:qiujie@staff.weibo.com？body=郵件正文">發(fā)送</a>
例子：
<a href="mailto:yy@imooc.com;10001@qq.com?cc=10002@qq.com&bbc=madanteng@qqhelp.com&subject=觀了不起的蓋茨比有感。&body=你好，對(duì)此評(píng)論有些想法。">對(duì)此影評(píng)有何感想，發(fā)送郵件給我</a>

18.<img>標(biāo)簽

在網(wǎng)頁(yè)的制作中為使網(wǎng)頁(yè)炫麗美觀，肯定是缺少不了圖片，可以使用

標(biāo)簽來(lái)插入圖片。

• 語(yǔ)法：

 [站外圖片上傳中……(2)] <img src = "myimage.gif" alt = "My Image" title = "My Image" />

• 講解：

src：標(biāo)識(shí)圖像的位置；
alt：指定圖像的描述性文本，當(dāng)圖像不可見(jiàn)時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；
title：提供在圖像可見(jiàn)時(shí)對(duì)圖像的描述(鼠標(biāo)滑過(guò)圖片時(shí)顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
路徑有兩種填寫(xiě)方式：絕對(duì)路徑、相對(duì)路徑
相對(duì)路徑：相對(duì)于我們當(dāng)前 html 文件的位置來(lái)寫(xiě)路徑即可！
./表示當(dāng)前目錄，../表示上一級(jí)目錄

19.<form>標(biāo)簽

注意:

1、所有表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在<form></form>標(biāo)簽之間（否則用戶(hù)輸入的信息可提交不到服務(wù)器上哦！）。

2、method:post/get的區(qū)別這一部分內(nèi)容屬于后端程序員考慮的問(wèn)題。

• 網(wǎng)站怎樣與用戶(hù)進(jìn)行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過(guò)來(lái)的數(shù)據(jù)。

語(yǔ)法：

<form method="傳送方式" action="服務(wù)器文件">

• 講解：

<form> ：<form>標(biāo)簽是成對(duì)出現(xiàn)的，以<form>開(kāi)始，以</form>結(jié)束。
action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁(yè)面(save.php)。
method ： 數(shù)據(jù)傳送的方式（get/post）。
 <form method="post" action="save.php"> 
 <label for="username">用戶(hù)名:</label> 
 <input type="text" name="username" /> 
 <label for="pass">密碼:</label> 
 <input type="password" name="pass" /> 
 </form>

20.<input>標(biāo)簽

• 當(dāng)用戶(hù)要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會(huì)用到文本輸入框。文本框也可以轉(zhuǎn)化為密碼輸入框。

語(yǔ)法：

 <form> 
 <input type="text/password" name="名稱(chēng)" value="文本" /> 
 </form>

• 屬性：

舉例：
 <form> 
 姓名： <input type="text" name="myName"/><br/> 
 密碼： <input type="password" name="pass"/> 
 </form>
 value="xxx" 替換為 placeholder="xxx" 的體驗(yàn)更好一些，placeholder屬性為 HTML 5 的新屬性。placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。該提示會(huì)在輸入字段為空時(shí)顯示，并會(huì)在字段獲得焦點(diǎn)時(shí)消失。

語(yǔ)法：

<input placeholder="text"/>
注釋?zhuān)簆laceholder 屬性適用于以下的 <input> 類(lèi)型：text, search, url, telephone, email 以及 password。

注意:同一組的單選按鈕，name 取值一定要一致，比如上同一個(gè)名稱(chēng)“gender”，這樣同一組的單選按鈕才可以起到單選的作用！

type：

• 當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
• 當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。
• hidden 定義隱藏輸入字段
• image 定義圖像作為提交按鈕
• number 定義帶有 spinner 控件的數(shù)字字段
• password 定義密碼字段。字段中的字符會(huì)被遮蔽
• radio 定義單選按鈕
• checkbox 定義復(fù)選框按鈕
• range 定義帶有 slider 控件的數(shù)字字段
• reset 定義重置按鈕。重置按鈕會(huì)將所有表單字段重置為初始值
• search 定義用于搜索的文本字段
• submit 定義提交按鈕。提交按鈕向服務(wù)器發(fā)送數(shù)據(jù)
• text 默認(rèn)。定義單行輸入字段，用戶(hù)可在其中輸入文本。默認(rèn)是 20 個(gè)字符
• url 定義用于 URL 的文本字段

name：為文本框命名，以備后臺(tái)程序ASP 、PHP使用。

value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)

21.<textarea>標(biāo)簽

• 當(dāng)用戶(hù)需要在表單中輸入大段文字時(shí)，需要用到文本輸入域。

語(yǔ)法：

 <textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>

1. <textarea>標(biāo)簽是成對(duì)出現(xiàn)的，以<textarea>開(kāi)始，以</textarea>結(jié)束。
2. cols ：多行輸入域的列數(shù)。
3. rows ：多行輸入域的行數(shù)。
4. 在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。

舉例：

 <form method="post" action="save.php"> 
 <label>聯(lián)系我們</label> 
 <textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea> 
 </form>

22.<select>標(biāo)簽

• 使用下拉列表框，節(jié)省空間。下拉列表在網(wǎng)頁(yè)中也常會(huì)用到，它可以有效的節(jié)省網(wǎng)頁(yè)空間。既可以單選、又可以多選。

語(yǔ)法：

 <select> 
 <option value="提交的值">顯示的值</option> ... 
 </select>
 設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。 
 selected="selected"

• 若想實(shí)現(xiàn)多選

<select multiple="multiple"> 然后選擇時(shí)候按ctrl點(diǎn)鼠標(biāo)選中

• 若想讓某個(gè)選項(xiàng)不可選

<option disabled="disabled">

• optgroup 標(biāo)簽

把相關(guān)的選項(xiàng)組合在一起

屬性 label：給選項(xiàng)組命名

屬性 disabled：禁用該選項(xiàng)組

23.<label>標(biāo)簽

• label標(biāo)簽不會(huì)向用戶(hù)呈現(xiàn)任何特殊效果，它的作用是為鼠標(biāo)用戶(hù)改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本，就會(huì)觸發(fā)此控件。就是說(shuō)，當(dāng)用戶(hù)單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）。
• 語(yǔ)法：

 <label for="控件id名稱(chēng)">

注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同。

• 例子：

 <form> 
 <label for="male">男</label> 
 <input type="radio" name="gender" id="male" /> <br /> 
 <label for="female">女</label> 
 <input type="radio" name="gender" id="female" /> 
 <label for="email">輸入你的郵箱地址</label> 
 <input type="email" id="email" placeholder="Enter email"> 
 </form>

24.<map>標(biāo)簽

使用 map 標(biāo)簽可以給圖片某塊區(qū)域加超鏈接

使用方法：

1）為 map 標(biāo)簽首先加上 id 屬性用來(lái)為 map 標(biāo)簽定義一個(gè)唯一的名稱(chēng)

2）為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同

3）為 map 標(biāo)簽所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱(chēng)

4）在 map 標(biāo)簽內(nèi)嵌套 area 標(biāo)簽來(lái)實(shí)現(xiàn)給指定區(qū)域加鏈接

 <area shape="" coords="" href ="" alt="" />
 shape 屬性：定義鏈接區(qū)域的形狀，常用值 rect、circle
 coords 屬性：確定區(qū)域的精確位置。填寫(xiě)坐標(biāo)即可，以父元素左上角為原點(diǎn)，可借助qq截圖來(lái)得到想要的坐標(biāo)
 href 屬性：填寫(xiě)鏈接地址即可
 alt 屬性：給鏈接加一些說(shuō)明信息

例子：

 <map id="img1" name="img1"> 
 <area shape="rect" coords="184,33,391,258" href="http:www.baidu.com" alt="百度一下" target="_blank" /> 
 <area shape="circle" coords="507,287,20"  alt="私房庫(kù)我的博客" target="_blank" /> 
 </map>

注意：

1. 第一個(gè)coords的四個(gè)參數(shù)中，前兩個(gè)參數(shù)為矩形的接近原點(diǎn)的頂角的坐標(biāo)，后兩個(gè)參數(shù)為對(duì)角的坐標(biāo)。
2. 第二個(gè)coords的三個(gè)參數(shù)中，前兩個(gè)為圓心坐標(biāo)，第三個(gè)參數(shù)為圓的半徑。

25.<iframe>標(biāo)簽

創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）

屬性：

• frameborder

值：1、0

作用：規(guī)定是否顯示框架周?chē)倪吙颉?/p>

• width值：以像素計(jì)的寬度值、以包含元素百分比計(jì)的寬度值

作用：定義 iframe 的寬度

• height

作用：定義高度

• name

作用：給 iframe 命名

• scrolling

值：yes、no、auto

作用：規(guī)定是否在 iframe 中顯示滾動(dòng)條

• src

作用：規(guī)定在 iframe 中顯示的文檔的 URL

可以是本地的 html 文件，也可以是遠(yuǎn)程的 html 文件

標(biāo)簽寫(xiě)法與嵌套的討論

標(biāo)簽寫(xiě)法

• 元素標(biāo)記的省略（在 html5 里面有的標(biāo)記是可以省略不寫(xiě)的）

1）不允許寫(xiě)結(jié)束標(biāo)簽的元素

area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。這些標(biāo)簽都是單標(biāo)簽例如：br 標(biāo)簽，不可以這樣<br></br>，只能<br />這樣來(lái)關(guān)閉標(biāo)簽。

2）可以省略結(jié)束標(biāo)記的元素有：

 li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。

3）可以省略全部標(biāo)記的元素有

 html,head,body,colgroup,tbody

• 具有 boolean 值得屬性

 例如：disabled,readonly，checked 等只寫(xiě)屬性而不寫(xiě)屬性值得時(shí)候當(dāng)做 ture
 不寫(xiě)屬性表示 false

• 屬性值的引號(hào)可以省略

 要求：屬性值不包含 空字符串，<，>，=， ‘

標(biāo)簽嵌套探討

1.html 規(guī)定我們必須要嵌套著寫(xiě)的標(biāo)簽

例如：頁(yè)面頭部是嵌套在 head 標(biāo)簽里面的，主體內(nèi)容都是嵌套在 body 標(biāo)簽里面的表單的內(nèi)容是嵌套在 form 標(biāo)簽里面的，dt、dd 是嵌套在 dl 標(biāo)簽里面的，li 是嵌套到ul 標(biāo)簽里面的，等等...

2.塊級(jí)元素可以嵌套內(nèi)聯(lián)元素，但是內(nèi)聯(lián)元素不能包含塊元素

<div>
 <span>我是一個(gè) span 元素</span>
 </div> —— 對(duì) 
<span>
 <div>div 元素</div>
</span> —— 錯(cuò)

3.內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素

<a href="#">
 <span></span>
</a> —— 對(duì)

4.塊級(jí)元素與塊級(jí)元素嵌套注意點(diǎn)

• div 塊級(jí)元素是一個(gè)容器，幾乎可以存放任何常用標(biāo)簽，包括自己，我們?yōu)槭裁匆褂?div 來(lái)嵌套標(biāo)簽？這個(gè)問(wèn)題可以用用我們國(guó)家的省份劃分來(lái)解釋?zhuān)瑖?guó)家需要?jiǎng)澐植煌氖》輥?lái)利于管理，那么我們 html 頁(yè)面也是的，整個(gè) html 文檔元素太多，我們需要使用 div 標(biāo)簽將頁(yè)面劃分成不同的塊，這樣可以對(duì)每塊進(jìn)行分開(kāi)管理，學(xué)完 css 我們就知道怎么進(jìn)行管理了。
• 塊級(jí)元素不能放在 p 標(biāo)簽里面

<p><ol><li></li></ol></p> —— 錯(cuò) <p><div></div></p> —— 錯(cuò)

• li 內(nèi)可以包含 div 標(biāo)簽，li 和 div 標(biāo)簽都是裝載內(nèi)容的容器，地位平等，沒(méi)有級(jí)別之分（例如：h1、h2 這樣森嚴(yán)的等級(jí)制度） ，要知道 li 標(biāo)簽連它的父級(jí) ul 或者是 ol 都可以容納的

喜歡前端的小伙伴們可以在評(píng)論區(qū)留言，尋找和小馮童鞋一樣熱愛(ài)前端的友人，讓我們一起玩轉(zhuǎn)前端的世界！