引言

在日常開發Android中，很多時候會遇到和WebView打交道，對CSS HTML JS不是很清楚的話是完不成一些功能的，本篇開始學習HTML，文章的主要內容是總結了慕課網中，HTML+CSS基礎課程中筆記的總結。

1、瞭解HTML、CSS、JavaScript

學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的：

HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視訊等。
CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉選單。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。

認識html檔案基本結構

這一節中我們來學習html檔案的結構：一個HTML檔案是有自己固定的結構的。

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

程式碼講解：

<html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。

<head> 標籤用於定義文件的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。
在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。

認識head標籤
接下來通過一個網頁的學習，來對html標籤有一個初步理解。平常大家說的上網就是瀏覽各種各式各樣的網頁，這些網頁都是由html標籤

組成的。下面就是一個簡單的網頁。效果圖如下：

我們來分析一下，這個網頁由哪些html標籤組成：
“勇氣”是網頁內容文章的標題，<h1></h1>
就是標題標籤，它在網頁上的程式碼寫成<h1>勇氣</h1>
。
“三年級時...我也沒勇氣參加。” 是網頁中文章的段落，<p></p>
是段落標籤。它在網頁上的程式碼寫成 <p>三年級時...我也沒勇氣參加。</p>

網頁上那張小女生的圖片，由img

標籤來完成的，它在網頁上的程式碼寫成

網頁的完整程式碼如下圖：

總結一下，可以這麼說，網頁中每一個內容在瀏覽器中的顯示，都要存放到各種標籤中，是不是SO EASY~

標籤的語法

標籤由英文尖括號<和>括起來，如<html>就是一個標籤。
html中的標籤一般都是成對出現的，分開始標籤和結束標籤。結束標籤比開始標籤多了一個/。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
標籤與標籤之間是可以巢狀的，但先後順序必須保持一致，如：<div>裡巢狀<p>，那麼</p>必須放在</div>的前面。如下圖所示。
HTML標籤不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式設計師都以小寫為準。

認識<head>標籤

<head>標籤的作用。文件的頭部描述了文件的各種屬性和資訊，包括文件的標題等。絕大多數文件頭部包含的資料都不會真正作為內容顯示給讀者。
下面這些標籤可用在 head 部分：

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

<title>標籤：在<title>和</title>標籤之間的文字內容是網頁的標題資訊，它會出現在瀏覽器的標題欄中。網頁的title標籤用於告訴使用者和搜尋引擎這個網頁的主要內容是什麼，搜尋引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：

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

<title>標籤的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示：

<head>標籤中的其它標籤內容的講解，會在以後的章節中一一講解。

2 、語義化，讓你的網頁更好的被搜尋引擎理解

現在要開始把網頁中常用到的標籤一一向大家介紹，學習這一章節的時候要記住學習html標籤過程中，主要注意兩個方面的學習：標籤的用途、標籤在瀏覽器中的預設樣式。
標籤的用途：我們學習網頁製作時，常常會聽到一個詞，語義化。那麼什麼叫做語義化呢，說的通俗點就是：明白每個標籤的用途（在什麼情況下使用此標籤合理）比如，網頁上的文章的標題就可以用標題標籤，網頁上的各個欄目的欄目名稱也可以使用標題標籤。文章中內容的段落就得放在段落標籤中，在文章中有想強調的文字，就可以使用 em 標籤表示強調等等。

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

更容易被搜尋引擎收錄。
更容易讓螢幕閱讀器讀出網頁內容。

<body>標籤，網頁上顯示的內容放在這裡

在網頁上要展示出來的頁面內容一定要放在body標籤中。如下圖是一個新聞文章的網頁。

在瀏覽器中的顯示效果：

2.1 <p>標籤，新增段落

如果想在網頁上顯示文章，這時就需要<p>標籤了，把文章的段落放到<p>標籤中。
語法：

<p>段落文字</p>

如下圖所示。

在瀏覽器中顯示的效果：

<p>標籤的預設樣式，可以在上圖中看出來，段前段後都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它
注意一段文字一個<p>標籤，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標籤中。

2.2 瞭解<hx>標籤，為你的網頁新增標題

使用<hx>標籤來製作文章的標題。
標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。並且依據重要性遞減。<h1>是最高的等級。
如下圖為騰訊網站。

注意：因為h1標籤在網頁中比較重要，所以一般h1
標籤被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>

語法：
<hx>標題文字</hx> (x為1-6)
文章的標題前面已經說過了，可以使用標題標籤，另外網頁上的各個欄目的標題也可使用它們.

2.3 加入強調語氣，使用<strong>和<em>標籤

有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標籤。
但兩者在強調的語氣上有區別:<em> 表示強調，<strong> 表示更強烈的強調。並且在瀏覽器中<em> 預設用斜體表示，<strong> 用粗體表示。兩個標籤相比，目前國內前端程式設計師更喜歡使用<strong>表示強調。
在瀏覽器中預設樣式是有區別的：
原始碼，如下圖。

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

<em>的內容在瀏覽中顯示為斜體，<strong>顯示為加粗。如果不喜歡這種樣式，沒有關係，以後可以使用css樣式去改變它

2.4 使用<span>標籤為文字設定單獨樣式

我們對<em>、<strong>、<span>這三個標籤進行一下總結：

<em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標籤是沒有語義的，它的作用就是為了設定單獨的樣式用的。

如果現在我們想把上一小節的第一段話“美國夢”三個字設定成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設定和其它文字不同的樣式（並不想讓螢幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標籤了。

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

2.5 <q>標籤，短文字引用

想在你的html中加一段引用嗎？比如在你的網頁的文章裡想引用某個作家的一句詩，這樣會使你的文章更加出彩，那麼<q>標籤是你所需要的。
語法：
<q>引用文字</q>
如下面例子：

<p>最初知道莊子，是從一首詩
<q>莊生曉夢迷蝴蝶。望帝春心託杜鵑.</q>
開始的。雖然當時不知道是什麼意思，只是覺得詩句挺特別。
後來才明白這個典故出自是莊子的《逍遙遊》，
《逍遙遊》代表了莊子思想的最高境界，
是對世俗社會的功名利祿及自己的捨棄。</p>

講解：

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心託杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》。因為不是作者自己的文字，所以需要使用<q></q>實現引用。
注意要引用的文字不用加雙引號，瀏覽器會對q標籤自動新增雙引號。

2.6 <blockquote>標籤，長文字引用

<blockquote>的作用也是引用別人的文字。但它是對長文字的引用，如在文章中引入大段某知名作家的文字，這時需要這個標籤。
等等，上一節<q>標籤不是也是對文字的引用嗎？不要忘記<q>標籤是對簡短文字的引用，比如說引用一句話就用到<q>標籤。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文字比較長，所以使用<blockquote>。

語法:
<blockquote>引用文字</blockquote>

2.7 使用 `<br>`標籤分行顯示文字

與以前我們學過的標籤不一樣，<br />標籤是一個空標籤，沒有HTML內容的標籤就是空標籤，空標籤只需要寫一個開始標籤，這樣的標籤有<br />、<hr />和<img />。
在 html 程式碼中輸入回車、空格都是沒有作用的。在html文字中想輸入回車換行，就必須輸入<br />。
語法：
xhtml1.0寫法：
<br />
html4.01寫法：
<br>

2.8為你的網頁中新增一些空格

在html程式碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入。注意，後面一定要有分號才行。

2.9認識`<hr />`標籤，新增水平橫線

在資訊展示時，有時會需要加一些用於分隔的橫線，這樣會使文章看起來整齊些。

語法：

html4.01版本 <hr>
xhtml1.0版本 <hr />

注意：

<hr />標籤和<br />標籤一樣也是一個空標籤，所以只有一個開始標籤，沒有結束標籤。
<hr />標籤的在瀏覽器中的預設樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關係，這些外在樣式在我們以後學習了css樣式表之後，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標籤也是），這種版本比較規範。

2.10`<address>`標籤，為網頁加入地址資訊

一般網頁中會有一些網站的聯絡地址資訊需要在網頁中展示出來，這些聯絡地址資訊如公司的地址就可以<address>標籤。也可以定義一個地址（比如電子郵件地址）、簽名或者文件的作者身份。

語法：
<address>聯絡地址資訊</address>

2.11 想加入一行程式碼嗎？使用<code>標籤

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的程式設計程式碼，當代碼為一行程式碼時，你就可以使用<code>標籤了，如下面例子：
<code>var i=i+300;</code>
注意：在文章中一般如果要插入多行程式碼時不能使用<code>標籤了。

語法：
<code>程式碼語言</code>
注：如果是多行程式碼，可以使用<pre>標籤。

2.11使用<pre>標籤為你的網頁加入大段程式碼

語法：
<pre>語言程式碼段</pre>
<pre> 標籤的主要作用:預格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。
如下程式碼：
<pre> var message="歡迎"; for(var i=1;i<=10;i++) { alert(message); }</pre>
在瀏覽器中的顯示結果為：

在上面的例子中可以看到程式碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>籤，空格需要輸入&nbsp;

注意：
<pre>標籤不只是為顯示計算機的原始碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標籤的一個常見應用就是用來展示計算機的原始碼。

2.12 使用ul，新增新聞資訊列表

語法：

<ul> 
  <li>[資訊]</li> 
  <li>[資訊]</li> 
....
</ul>

舉例：

<ul> 
  <li>[精彩少年]</li> 
  <li>[美麗突然出現]</li>
  <li>[觸動心靈的旋律]</li>
</ul>

ul-li在網頁中顯示的預設樣式一般為：每項li前都自帶一個圓點，如下圖所示：

2.13 使用ol，新增圖書銷售排行榜 (ordered list)

如果想在網頁中展示有前後順序的資訊列表，怎麼辦呢？如，噹噹網上的書籍熱賣排行榜，如下圖所示。這類資訊展示就可以使用<ol>標籤來製作有序列表來展示。

語法：

<ol>
   <li>[資訊]</li>
   <li>[資訊]</li> 
......
</ol>

舉例：
下面是一個熱點課程下載排行榜：

<ol> 
<li>前端開發面試心法 </li> 
<li>[零基礎學習html]</li> <li>JavaScript全攻略</li>
</ol>

<ol>在網頁中顯示的預設樣式一般為：每項<li>
前都自帶一個序號，序號預設從1開始，如下圖所示：

2.14 認識div在排版中的作用

在網頁製作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>
標籤中，這個<div>標籤的作用就相當於一個容器。
語法：
<div>…</div>

確定邏輯部分：
什麼是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>
標籤作為容器。

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

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

為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設定一個名稱，用id
屬性來為<div>
提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

2.15 table標籤，認識網頁上的表格

有時候我們需要在網頁上展示一些資料，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下程式碼：

建立表格的四個元素：
table、tbody、tr、th、td
1、<table>…</table>：整個表格以<table>
標記開始、</table>
標記結束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格載入完後才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，不必等待表格結束後在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格載入完後顯示。）
3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>
，說明一行中就有幾列。
tr是“table row（表格行）”的縮寫，用於表示一行的開始和結束。這也容易理解。
td是“table data（表格資料）”的縮寫，用於表示行中各個單元格（cell）的開始和結束。
5、<th>…</th>：表格的頭部的一個單元格，表格表頭。
6、表格中列的個數，取決於一行中資料單元格的個數。

上述程式碼在瀏覽器中顯示的預設的樣式為：

總結：
1、table表格在沒有新增css樣式之前，在瀏覽器中顯示是沒有表格線的
2、表頭，也就是th標籤中的文字預設為粗體並且居中顯示

2.16 用css樣式，為表格加入邊框

Table 表格在沒有新增 css 樣式之前，是沒有邊框的。這樣不便於我們後期合併單元格知識點的講解，所以在這一節中我們為表格新增一些樣式，為它新增邊框。
在右側程式碼編輯器中新增如下程式碼：

<style type="text/css">table tr td,th{border:1px solid #000;}</style>

上述程式碼是用 css 樣式程式碼（後面章節會詳細講解），為th
，t單元格新增粗細為一個畫素的黑色邊框。
結果視窗顯示出結果樣式：

2.17 caption標籤，為表格新增標題和摘要
表格還是需要新增一些標籤進行優化，可以新增標題和摘要。程式碼如下：

摘要
摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜尋引擎更好的讀懂表格內容，還可以使螢幕閱讀器更好的幫助特殊使用者讀取表格內容。
語法：<table summary="表格簡介文字">
標題
用以描述表格內容，標題的顯示位置：表格上方。
語法：
<table> <caption>****標題文字</caption> <tr> <td>…</td> <td>…</td> … </tr>…</table>

2.18 使用<a>標籤，連結到另一個頁面

href：Hypertext Reference的縮寫。意思是超文字引用。
使用<a>標籤可實現超連結，它在網頁製作中可以說是無處不在，只要有連結的地方，就會有這個標籤。

語法：
<a href="目標網址" title="滑鼠滑過顯示的文字">連結顯示的文字</a>
例如：
<a href="http://www.imooc.com" title="點選進入慕課網">click here!</a>
上面例子作用是單擊click here!文字，網頁連結到http://www.imooc.com這個網頁。

title屬性的作用，滑鼠滑過連結文字時會顯示這個屬性的文字內容。這個屬性在實際網頁開發中作用很大，主要方便搜尋引擎瞭解連結地址的內容（語義化更友好），如右側案例程式碼（8-12行）。

注意：還有一個有趣的現象不知道小夥伴們發現了沒有，只要為文字加入a標籤後，文字的顏色就會自動變為藍色（被點選過的文字顏色為紫色），顏色很難看吧，不過沒有關係後面我們學習了css樣子就可以設定過來（a{color:#000}),後面會詳細講解。

在新建瀏覽器視窗中開啟連結
<a>標籤在預設情況下，連結的網頁是在當前瀏覽器視窗中開啟，有時我們需要在新的瀏覽器視窗中開啟。

如下程式碼：
<a href="目標網址" target="_blank">click here!</a>
target之前一定要加空格！
擴充套件：
_blank -- 在新視窗中開啟連結
_parent -- 在父窗體中開啟連結
_self -- 在當前窗體開啟連結,此為預設值
_top -- 在當前窗體開啟連結，並替換當前的整個窗體(框架頁)

2.19 使用mailto在網頁中連結Email地址

<a>標籤還有一個作用是可以連結Email地址，使用mailto能讓訪問者便捷向網站管理者傳送電子郵件。我們還可以利用mailto
做許多其它事情。下面一一進行講解，請看詳細圖示：

注意：如果mailto後面同時有多個引數的話，第一個引數必須以“?
”開頭，後面的引數每一個都以“&
”分隔。
下面是一個完整的例項:

在瀏覽器中顯示的結果：
傳送
點選連結會開啟電子郵件應用，並自動填寫收件人等設定好的資訊，如下圖：

舉個栗子：
1、傳送人郵箱地址：[email protected]。
2、郵件主題：觀了不起的蓋茨比有感。
3、郵件內容：你好，對此評論有些想法。

<a href="mailto:[email protected]
?subject=觀了了不起的蓋茨比有感
&body=你好,對此評論有些想法">
對此影評有何感想，傳送郵件給我</a>

2.20 認識<img>標籤，為網頁插入圖片

在網頁的製作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標籤來插入圖片。
語法：

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

講解：

src：標識影象的位置；
alt：指定影象的描述性文字，當影象不可見時（下載不成功時），可看到該屬性指定的文字；
title：提供在影象可見時對影象的描述(滑鼠滑過圖片時顯示的文字)；
影象可以是GIF，PNG，JPEG格式的影象檔案。

3 與瀏覽者互動，表單標籤

3.1使用表單標籤，與使用者互動

網站怎樣與使用者進行互動？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。

語法：
<form method="傳送方式" action="伺服器檔案">
講解：
1.<form> ：<form>標籤是成對出現的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的資料被傳送到的地方,比如一個PHP頁面(save.php)。
3.method ：資料傳送的方式（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、所有表單控制元件（文字框、文字域、按鈕、單選框、複選框等）都必須放在 <form></form> 標籤之間（否則使用者輸入的資訊可提交不到伺服器上哦！）。
2、method : post/get 的區別這一部分內容屬於後端程式設計師考慮的問題。感興趣的小夥伴可以檢視本小節的 wiki，裡面有詳細介紹。
擴充套件：
hidden 定義隱藏輸入欄位
image 定義影象作為提交按鈕
number 定義帶有 spinner 控制元件的數字欄位
password 定義密碼欄位。欄位中的字元會被遮蔽
radio 定義單選按鈕
range 定義帶有 slider 控制元件的數字欄位
reset 定義重置按鈕。重置按鈕會將所有表單欄位重置為初始值
search 定義用於搜尋的文字欄位
submit 定義提交按鈕。提交按鈕向伺服器傳送資料
text 預設。定義單行輸入欄位，使用者可在其中輸入文字。預設是 20 個字元
url 定義用於 URL 的文字欄位

文字輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文字輸入框。文字框也可以轉化為密碼輸入框。
語法：
<form> <input type="text/password" name="名稱" value="文字" /></form>
1、type：
當type="text"時，輸入框為文字輸入框
當type="password"時, 輸入框為密碼輸入框
2、name：
為文字框命名，以備後臺程式ASP 、PHP使用。
3、value：
為文字輸入框設定預設值。(一般起到提示作用)
舉例：

<form> 
  姓名： <input type="text" name="myName"> <br/>
  密碼： <input type="password" name="pass">
</form>

在瀏覽器中顯示的結果：

3.2 文字域，支援多行文字輸入

當用戶需要在表單中輸入大段文字時，需要用到文字輸入域。
語法：

<textarea  rows="行數"  cols="列數">文字
</textarea>

1 <textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。
2、cols ：
多行輸入域的列數。
3、rows ：
多行輸入域的行數。
4、在<textarea></textarea>標籤之間可以輸入預設值。

舉例：


<form method="post" action="save.php">
<label>聯絡我們</label>
<textarea cols="50" rows="10" >
在這裡輸入內容...
</textarea>
</form>

在瀏覽器中顯示結果：

3.3 使用單選框、複選框，讓使用者選擇

在使用表單設計調查表時，為了減少使用者的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和複選框，兩者的區別是單選框中的選項使用者只能選擇一項，而複選框中使用者可以任意選擇多項，甚至全選。
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控制元件為單選框
當 type="checkbox" 時，控制元件為複選框
2、value：提交資料到伺服器的值（後臺程式PHP使用）
3、name：為控制元件命名，以備後臺程式 ASP、PHP 使用
注意：為單選框的時候，name一定要名字相同才行
4、checked：當設定 checked="checked" 時，該選項被預設選中
如下面程式碼：

在瀏覽器中顯示的結果：

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

3.4 使用下拉列表框，節省空間

下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下程式碼：

講解：
1、value：

2、selected="selected"：
設定selected="selected"屬性，則該選項就被預設選中。
在瀏覽器中顯示的結果：

3.5 使用下拉列表框進行多選

下拉列表也可以進行多選操作，在<select>標籤中設定multiple="multiple"屬性，就可以實現多選功能，在 windows 作業系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下程式碼：

在瀏覽器中顯示的結果：

3.6 使用提交按鈕，提交資料

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單資訊到伺服器時，需要用到提交按鈕。

語法：
<input type="submit" value="提交">
type：只有當type值設定為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：

在瀏覽器中顯示的結果：

3.7 使用重置按鈕，重置表單資訊

當用戶需要重置表單資訊到初始時的狀態時，比如使用者輸入“使用者名稱”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設定為"reset"就可以。
語法：
<input type="reset" value="重置">
type：只有當type值設定為reset時，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：

在瀏覽器中顯示的結果：

輸入賬號

單擊重置按鈕

3.8 form表單中的label標籤

label標籤不會向用戶呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點選文字，就會觸發此控制元件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上（就自動選中和該label標籤相關連的表單控制元件上）。
語法：
<label for="控制元件id名稱">
注意：標籤的 for 屬性中的值應當與相關控制元件的 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>

最後

至此HTML基礎部分就已經完畢了，接下來分析CSS層疊樣式表 (Cascading Style Sheets)

HTML+CSS基礎(HTML篇)

引言

1、瞭解HTML、CSS、JavaScript

認識html檔案基本結構

標籤的語法

認識<head>標籤

2 、語義化，讓你的網頁更好的被搜尋引擎理解

<body>標籤，網頁上顯示的內容放在這裡

2.1 <p>標籤，新增段落

2.2 瞭解<hx>標籤，為你的網頁新增標題

2.3 加入強調語氣，使用<strong>和<em>標籤

2.4 使用<span>標籤為文字設定單獨樣式

2.5 <q>標籤，短文字引用

2.6 <blockquote>標籤，長文字引用

2.7 使用 <br>標籤分行顯示文字

2.8為你的網頁中新增一些空格

2.9認識<hr />標籤，新增水平橫線

2.10<address>標籤，為網頁加入地址資訊

2.11 想加入一行程式碼嗎？使用<code>標籤

2.11使用<pre>標籤為你的網頁加入大段程式碼

2.12 使用ul，新增新聞資訊列表

2.13 使用ol，新增圖書銷售排行榜 (ordered list)

2.14 認識div在排版中的作用

2.15 table標籤，認識網頁上的表格

2.16 用css樣式，為表格加入邊框

2.18 使用<a>標籤，連結到另一個頁面

2.19 使用mailto在網頁中連結Email地址

2.20 認識<img>標籤，為網頁插入圖片

3 與瀏覽者互動，表單標籤

3.1使用表單標籤，與使用者互動

3.3 使用單選框、複選框，讓使用者選擇

3.4 使用下拉列表框，節省空間

3.5 使用下拉列表框進行多選

3.6 使用提交按鈕，提交資料

3.7 使用重置按鈕，重置表單資訊

3.8 form表單中的label標籤

最後

相關推薦

2.7 使用 `<br>`標籤分行顯示文字

2.9認識`<hr />`標籤，新增水平橫線

2.10`<address>`標籤，為網頁加入地址資訊