啊啊啊啊啊91,蜜桃一区视讯

本文主要是起筆記的作用，內(nèi)容來自慕課網(wǎng).

認(rèn)識HTML、CSS、JavaScript

學(xué)習(xí)web前端開發(fā)基礎(chǔ)技術(shù)需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術(shù)都是用來實(shí)現(xiàn)什么的：

HTML是網(wǎng)頁內(nèi)容的載體。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS樣式是表現(xiàn)。就像網(wǎng)頁的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)。
JavaScript是用來實(shí)現(xiàn)網(wǎng)頁上的特效效果。如：鼠標(biāo)滑過彈出下拉菜單?；蚴髽?biāo)滑過表格的背景顏色改變。還有焦點(diǎn)新聞（新聞圖片）的輪換?？梢赃@么理解，有動畫的，有交互的一般都是用JavaScript來實(shí)現(xiàn)的。

標(biāo)簽

作用	標(biāo)簽
標(biāo)題標(biāo)簽	`<h1>`這是一個(gè)標(biāo)題`</h1>`
段落標(biāo)簽	`<p>`這是段落`</p>`
圖片標(biāo)簽	`[站外圖片上傳中……(41)]`

標(biāo)簽的語法

標(biāo)簽由英文尖括號<和>括起來，如<html>就是一個(gè)標(biāo)簽。
html中的標(biāo)簽一般都是成對出現(xiàn)的，分開始標(biāo)簽和結(jié)束標(biāo)簽。結(jié)束標(biāo)簽比開始標(biāo)簽多了一個(gè)/。如：
（1） <p> </p>
（2） <div> </div>
（3） <span> </span>

標(biāo)簽嵌套

標(biāo)簽與標(biāo)簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套<p>，那么</p>必須放在</div>的前面。如下圖所示。

標(biāo)簽嵌套
HTML標(biāo)簽不區(qū)分大小寫，<h1>和<H1>是一樣的，但建議小寫，因?yàn)榇蟛糠殖绦騿T都以小寫為準(zhǔn)。

認(rèn)識html文件基本結(jié)構(gòu)

html文件的結(jié)構(gòu)：一個(gè)HTML文件是有自己固定的結(jié)構(gòu)的。

 <html>
    <head>...</head>
    <body>...</body>
 </html>

代碼講解：

<html></html>稱為根標(biāo)簽，所有的網(wǎng)頁標(biāo)簽都在<html></html>中。
<head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標(biāo)簽，頭部標(biāo)簽在下一小節(jié)中會有詳細(xì)介紹。
在<body>和</body>標(biāo)簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標(biāo)簽，在這里的標(biāo)簽中的內(nèi)容會在瀏覽器中顯示出來。

head標(biāo)簽

下面我們來了解一下<head>標(biāo)簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。

下面這些標(biāo)簽可用在 head 部分：

<head>
    <title>...</title>
    <meta>
    <link>
    <style>...</style>
    <script>...</script>
</head>

<title>標(biāo)簽：在<title>和</title>標(biāo)簽之間的文字內(nèi)容是網(wǎng)頁的標(biāo)題信息，它會出現(xiàn)在瀏覽器的標(biāo)題欄中。網(wǎng)頁的title標(biāo)簽用于告訴用戶和搜索引擎這個(gè)網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標(biāo)題，迅速的判斷出網(wǎng)頁的主題。每個(gè)網(wǎng)頁的內(nèi)容都是不同的，每個(gè)網(wǎng)頁都應(yīng)該有一個(gè)獨(dú)一無二的title。

例如：

<head>
    <title>hello world</title>
</head>

<title>標(biāo)簽的內(nèi)容“hello world”會在瀏覽器中的標(biāo)題欄上顯示出來，如下圖所示：

head標(biāo)簽

代碼注釋

語法：

 <!--注釋文字 -->

語義化，讓你的網(wǎng)頁更好的被搜索引擎理解

在這一章節(jié)我們要開始把網(wǎng)頁中常用到的標(biāo)簽一一向大家介紹，學(xué)習(xí)這一章節(jié)的時(shí)候要記住學(xué)習(xí)html標(biāo)簽過程中，主要注意兩個(gè)方面的學(xué)習(xí)：標(biāo)簽的用途、標(biāo)簽在瀏覽器中的默認(rèn)樣式。

標(biāo)簽的用途：我們學(xué)習(xí)網(wǎng)頁制作時(shí)，常常會聽到一個(gè)詞，語義化。那么什么叫做語義化呢，說的通俗點(diǎn)就是：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上的文章的標(biāo)題就可以用標(biāo)題標(biāo)簽，網(wǎng)頁上的各個(gè)欄目的欄目名稱也可以使用標(biāo)題標(biāo)簽。文章中內(nèi)容的段落就得放在段落標(biāo)簽中，在文章中有想強(qiáng)調(diào)的文本，就可以使用 em 標(biāo)簽表示強(qiáng)調(diào)等等。

講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？

更容易被搜索引擎收錄。
更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容。

`<body>`標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里

還記得body標(biāo)簽嗎，在上一章節(jié)我們簡單介紹過：在網(wǎng)頁上要展示出來的頁面內(nèi)容一定要放在body標(biāo)簽中。如下圖是一個(gè)新聞文章的網(wǎng)頁。

在瀏覽器中的顯示效果：

開始學(xué)習(xí)`<p>`標(biāo)簽，添加段落

如果想在網(wǎng)頁上顯示文章，這時(shí)就需要<p>標(biāo)簽了，把文章的段落放到<p>標(biāo)簽中。
語法：

 <p>段落文本</p>

注意一段文字一個(gè)<p>標(biāo)簽，如在一篇新聞文章中有3段文字，就要把這3個(gè)段落分別放到3個(gè)<p>標(biāo)簽中。如下圖所示。

在瀏覽器中顯示的效果：

<p>標(biāo)簽的默認(rèn)樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個(gè)空白，可以用css樣式來刪除或改變它。

了解<hx>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題

文章的段落用<p>標(biāo)簽，那么文章的標(biāo)題用什么標(biāo)簽?zāi)兀吭诒竟?jié)我們將使用<hx>標(biāo)簽來制作文章的標(biāo)題。
標(biāo)題標(biāo)簽一共有6個(gè)，h1、h2、h3、h4、h5、h6分別為一級標(biāo)題、二級標(biāo)題、三級標(biāo)題、四級標(biāo)題、五級標(biāo)題、六級標(biāo)題。并且依據(jù)重要性遞減。<h1>是最高的等級。

語法：

  <hx>標(biāo)題文本</hx> (x為1-6)

文章的標(biāo)題前面已經(jīng)說過了，可以使用標(biāo)題標(biāo)簽，另外網(wǎng)頁上的各個(gè)欄目的標(biāo)題也可使用它們。如下圖為騰訊網(wǎng)站。

注意：因?yàn)閔1標(biāo)簽在網(wǎng)頁中比較重要，所以一般h1標(biāo)簽被用在網(wǎng)站名稱上。騰訊網(wǎng)站就是這樣做的。如：

 <h1>騰訊網(wǎng)</h1>

h1-h6標(biāo)簽的默認(rèn)樣式：
標(biāo)簽代碼：

在瀏覽器中顯示的樣式：

從上面的圖片可以看出標(biāo)題標(biāo)簽的樣式都會加粗，h1標(biāo)簽字號最大，h2標(biāo)簽字號相對h1要小，以此類推h6標(biāo)簽的字號最小。

加入強(qiáng)調(diào)語氣，使用`<strong>`和`<em>`標(biāo)簽

有了段落又有了標(biāo)題，現(xiàn)在如果想在一段話中特別強(qiáng)調(diào)某幾個(gè)文字，這時(shí)候就可以用到<em>或<strong>標(biāo)簽。

但兩者在強(qiáng)調(diào)的語氣上有區(qū)別:<em> 表示強(qiáng)調(diào)，<strong> 表示更強(qiáng)烈的強(qiáng)調(diào)。并且在瀏覽器中<em> 默認(rèn)用斜體表示，<strong>用粗體表示。兩個(gè)標(biāo)簽相比，目前國內(nèi)前端程序員更喜歡使用<strong>表示強(qiáng)調(diào)。

語法：

 <em>需要強(qiáng)調(diào)的文本</em>  
 <strong>需要強(qiáng)調(diào)的文本</strong>

如，在網(wǎng)上商城中，某產(chǎn)品的打折后的價(jià)格是需要強(qiáng)調(diào)的。如下圖。

代碼實(shí)現(xiàn)：

在瀏覽器中默認(rèn)樣式是有區(qū)別的：

原代碼，如下圖。

瀏覽器中的樣子，如下圖。

<em>的內(nèi)容在瀏覽中顯示為斜體，<strong>顯示為加粗。如果不喜歡這種樣式，沒有關(guān)系，以后可以使用css樣式去改變它。

使用`<span>`標(biāo)簽為文字設(shè)置單獨(dú)樣式

這一小節(jié)講解<span>標(biāo)簽，我們對<em>、<strong>、<span>這三個(gè)標(biāo)簽進(jìn)行一下總結(jié)：

<em>和<strong>標(biāo)簽是為了強(qiáng)調(diào)一段話中的關(guān)鍵字時(shí)使用，它們的語義是強(qiáng)調(diào)。
<span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。

如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國夢”三個(gè)字設(shè)置成blue（藍(lán)色），但注意不是為了強(qiáng)調(diào)“美國夢”，而只是想為它設(shè)置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個(gè)字加重音讀出），所以這樣情況下就可以用到<span>標(biāo)簽了。

如下面例子：

 <p>1922年的春天，一個(gè)想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個(gè)道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時(shí)代。為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。
 </p>

語法：

<span>文本</span>

完整代碼：

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>了不起的蓋茨比</title>
 <style>
 span{
  color:blue; <!--為<span>元素設(shè)置文本顏色為藍(lán)色。>  
 }
 </style>
 </head>
 <body>
    <p>1922年的春天，一個(gè)想要成名名叫尼克?卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個(gè)道德感漸失，爵士樂流行，走私為王，股票飛漲的時(shí)代。為了追尋他的 <span>美國夢</span>，<span>他搬入紐</span>約附近一海灣居住。</p>
    <p>菲茨杰拉德，二十世紀(jì)美國文學(xué)巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時(shí)代"吟唱華麗挽歌，其詩人和夢想家的氣質(zhì)亦為那個(gè)奢靡年代的不二注解。</p>
</body>
</html>

`<q>`標(biāo)簽，短文本引用

想在你的html中加一段引用嗎？比如在你的網(wǎng)頁的文章里想引用某個(gè)作家的一句詩，這樣會使你的文章更加出彩，那么<q>標(biāo)簽是你所需要的。

語法：

 <q>引用文本</q>

`<blockquote>`標(biāo)簽，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時(shí)需要這個(gè)標(biāo)簽。

等等，上一節(jié)<q>標(biāo)簽不是也是對文本的引用嗎？不要忘記<q>標(biāo)簽是對簡短文本的引用，比如說引用一句話就用到<q>標(biāo)簽。

如想在我的文章中引用李白《關(guān)山月》中的詩句，因?yàn)橐梦谋颈容^長，所以使用<blockquote>。

語法:

 <blockquote>引用文本</blockquote>

換行

語法：

xhtml1.0寫法：

<br />

html4.01寫法：

<br>

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

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

添加空格

語法：

水平橫線（分割線）

語法：

html4.01版本

 <hr>

xhtml1.0版本

 <hr />

注意：

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

`<address>`標(biāo)簽，為網(wǎng)頁加入地址信息

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

語法：

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

如：

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

 <address>
 本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>
 </address>

使用`<code>`標(biāo)簽加入單行代碼

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

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

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

語法：

 <code>代碼語言</code>

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

使用`<pre>`標(biāo)簽為你的網(wǎng)頁加入大段代碼

語法：

 <pre>語言代碼段</pre>

<pre>標(biāo)簽的主要作用:預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

如下代碼：

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

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

使用ul-li標(biāo)簽實(shí)現(xiàn)無序列表

ul-li是沒有前后順序的信息列表。

語法：

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

舉例：

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

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

使用ol-li標(biāo)簽實(shí)現(xiàn)有序列表

格式與ul-li標(biāo)簽類似，序號從1開始。

認(rèn)識div在排版中的作用

在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。

語法：

 <div>…</div>

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨(dú)立的欄目版塊，就是一個(gè)典型的邏輯部分。如下圖所示：圖中用紅色邊框標(biāo)出的部分就是一個(gè)邏輯部分，就可以使用<div>標(biāo)簽作為容器。

給div命名，使邏輯更加清晰

在上一小節(jié)中，我們把一些標(biāo)簽放進(jìn)<div>里，劃分出一個(gè)獨(dú)立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個(gè)獨(dú)立的邏輯部分設(shè)置一個(gè)名稱，用id屬性來為<div>提供唯一的名稱，這個(gè)就像我們每個(gè)人都有一個(gè)身份證號，這個(gè)身份證號是唯一標(biāo)識我們的身份的，也是必須唯一的。

如下兩圖進(jìn)行比較，如果設(shè)計(jì)師把兩個(gè)圖給你，哪個(gè)圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法：

 <div  id="版塊名稱">…</div>

table標(biāo)簽，認(rèn)識網(wǎng)頁上的表格

有時(shí)候我們需要在網(wǎng)頁上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁上展示公司的庫存清單。如下表：

想在網(wǎng)頁上展示上述表格效果可以使用以下代碼：

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

table、tbody、tr、th、td

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

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

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

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

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

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

上述代碼在瀏覽器中顯示的默認(rèn)的樣式為：

總結(jié)：

1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的

2、表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示

caption標(biāo)簽，為表格添加標(biāo)題和摘要

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

摘要

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

語法：

 <table summary="表格簡介文本">

標(biāo)題

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

語法：

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

使用`<a>`標(biāo)簽，鏈接到另一個(gè)頁面

使用<a>標(biāo)簽可實(shí)現(xiàn)超鏈接，它在網(wǎng)頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個(gè)標(biāo)簽。

語法：

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

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

如下代碼：

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

使用mailto在網(wǎng)頁中鏈接Email地址

<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請看詳細(xì)圖示：

注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。

下面是一個(gè)完整的實(shí)例:

在瀏覽器中顯示的結(jié)果：

發(fā)送

點(diǎn)擊鏈接會打開電子郵件應(yīng)用，并自動填寫收件人等設(shè)置好的信息，如下圖：

認(rèn)識`<img>`標(biāo)簽，為網(wǎng)頁插入圖片

在網(wǎng)頁的制作中為使網(wǎng)頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標(biāo)簽來插入圖片。

語法：

 [站外圖片上傳中……(42)]

舉例：

 <img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

1、src：標(biāo)識圖像的位置；

2、alt：指定圖像的描述性文本，當(dāng)圖像不可見時(shí)（下載不成功時(shí)），可看到該屬性指定的文本；

3、title：提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)；

4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

使用表單標(biāo)簽，與用戶交互

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

語法：

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

講解：

1.<form> ：<form>標(biāo)簽是成對出現(xiàn)的，以<form>開始，以</form>結(jié)束。

2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。

3.method ：數(shù)據(jù)傳送的方式（get/post）。

 <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>

注意:

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

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

文本輸入框、密碼輸入框

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

語法：

 <form>
    <input type="text/password" name="名稱" value="文本" />
 </form>

type：
當(dāng)type="text"時(shí)，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。
name：為文本框命名，以備后臺程序ASP 、PHP使用。
value：為文本輸入框設(shè)置默認(rèn)值。(一般起到提示作用)

文本域，支持多行文本輸入

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

語法：

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

<textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。
cols ：多行輸入域的列數(shù)
rows ：多行輸入域的行數(shù)。
在<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>

在瀏覽器中顯示結(jié)果：

使用單選框、復(fù)選框，讓用戶選擇

在使用表單設(shè)計(jì)調(diào)查表時(shí)，為了減少用戶的操作，使用選擇框是一個(gè)好主意，html中有兩種選擇框，即單選框和復(fù)選框，兩者的區(qū)別是單選框中的選項(xiàng)用戶只能選擇一項(xiàng)，而復(fù)選框中用戶可以任意選擇多項(xiàng)，甚至全選。請看下面的例子:

語法：

 <input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

type:
當(dāng) type="radio" 時(shí)，控件為單選框
當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框
value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）
name：為控件命名，以備后臺程序 ASP、PHP 使用
checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中

如下面代碼：

在瀏覽器中顯示的結(jié)果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個(gè)名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

使用下拉列表框，節(jié)省空間

下拉列表在網(wǎng)頁中也常會用到，它可以有效的節(jié)省網(wǎng)頁空間。既可以單選、又可以多選。如下代碼：

講解：

value：
selected="selected"：
設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。
在瀏覽器中顯示的結(jié)果：

使用下拉列表框進(jìn)行多選

下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性，就可以實(shí)現(xiàn)多選功能，在 widows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)。如下代碼：

在瀏覽器中顯示的結(jié)果：

使用提交按鈕，提交數(shù)據(jù)

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當(dāng)用戶需要提交表單信息到服務(wù)器時(shí)，需要用到提交按鈕。

語法：

 <input   type="submit"   value="提交">

type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：

在瀏覽器中顯示的結(jié)果：

使用重置按鈕，重置表單信息

當(dāng)用戶需要重置表單信息到初始時(shí)的狀態(tài)時(shí)，比如用戶輸入“用戶名”后，發(fā)現(xiàn)書寫有誤，可以使用重置按鈕使輸入框恢復(fù)到初始狀態(tài)。只需要把type設(shè)置為"reset"就可以。

語法：

 <input type="reset" value="重置">

type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：

在瀏覽器中顯示的結(jié)果：

輸入賬號

單擊重置按鈕

form表單中的label標(biāo)簽

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

語法：

<label for="控件id名稱">

注意：標(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>

要求：慢跑、登山和籃球復(fù)選框要與各自的復(fù)選項(xiàng)用for屬性關(guān)聯(lián)。效果圖如下：

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

html&CSS(一)

認(rèn)識HTML、CSS、JavaScript

標(biāo)簽

標(biāo)簽的語法

認(rèn)識html文件基本結(jié)構(gòu)

head標(biāo)簽

代碼注釋

語義化，讓你的網(wǎng)頁更好的被搜索引擎理解

<body>標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里

開始學(xué)習(xí)<p>標(biāo)簽，添加段落

了解<hx>標(biāo)簽，為你的網(wǎng)頁添加標(biāo)題

加入強(qiáng)調(diào)語氣，使用<strong>和<em>標(biāo)簽

使用<span>標(biāo)簽為文字設(shè)置單獨(dú)樣式

<q>標(biāo)簽，短文本引用

<blockquote>標(biāo)簽，長文本引用

換行

添加空格

水平橫線（分割線）

<address>標(biāo)簽，為網(wǎng)頁加入地址信息

使用<code>標(biāo)簽加入單行代碼

使用<pre>標(biāo)簽為你的網(wǎng)頁加入大段代碼

使用ul-li標(biāo)簽實(shí)現(xiàn)無序列表

使用ol-li標(biāo)簽實(shí)現(xiàn)有序列表

認(rèn)識div在排版中的作用

給div命名，使邏輯更加清晰

table標(biāo)簽，認(rèn)識網(wǎng)頁上的表格

caption標(biāo)簽，為表格添加標(biāo)題和摘要

使用<a>標(biāo)簽，鏈接到另一個(gè)頁面

使用mailto在網(wǎng)頁中鏈接Email地址

認(rèn)識<img>標(biāo)簽，為網(wǎng)頁插入圖片

使用表單標(biāo)簽，與用戶交互

文本輸入框、密碼輸入框

文本域，支持多行文本輸入

使用單選框、復(fù)選框，讓用戶選擇

使用下拉列表框，節(jié)省空間

使用下拉列表框進(jìn)行多選

使用提交按鈕，提交數(shù)據(jù)

使用重置按鈕，重置表單信息

form表單中的label標(biāo)簽

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

認(rèn)識HTML、CSS、JavaScript

`<body>`標(biāo)簽，網(wǎng)頁上顯示的內(nèi)容放在這里

開始學(xué)習(xí)`<p>`標(biāo)簽，添加段落

加入強(qiáng)調(diào)語氣，使用`<strong>`和`<em>`標(biāo)簽

使用`<span>`標(biāo)簽為文字設(shè)置單獨(dú)樣式

`<q>`標(biāo)簽，短文本引用

`<blockquote>`標(biāo)簽，長文本引用

`<address>`標(biāo)簽，為網(wǎng)頁加入地址信息

使用`<code>`標(biāo)簽加入單行代碼

使用`<pre>`標(biāo)簽為你的網(wǎng)頁加入大段代碼

table標(biāo)簽，認(rèn)識網(wǎng)頁上的表格

caption標(biāo)簽，為表格添加標(biāo)題和摘要

使用`<a>`標(biāo)簽，鏈接到另一個(gè)頁面

認(rèn)識`<img>`標(biāo)簽，為網(wǎng)頁插入圖片

使用表單標(biāo)簽，與用戶交互

文本輸入框、密碼輸入框

文本域，支持多行文本輸入

使用單選框、復(fù)選框，讓用戶選擇

使用提交按鈕，提交數(shù)據(jù)