HTML+CSS基礎課程(上)

1、HTML介紹

1

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>制作我的第一個網頁</title>
    </head>
    <body>
        <h1>
            Hello World
        </h1>
    </body>
</html>

2、Html和CSS的關系

  • HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
  • CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
  • JavaScript是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的一般都是用JavaScript來實現的。
<title>Html和CSS的關系</title>
        <style type="text/css">
        h1{
            font-size:12px;
            color:#930;
            text-align:center;
        }
        </style>

3、認識html標簽
4、標簽的語法

  • 標簽由英文尖括號<和>括起來，如<html>就是一個標簽。
  • html中的標簽一般都是成對出現的，分開始標簽和結束標簽。結束標簽比開始標簽多了一個/。
    如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
  • 標簽與標簽之間是可以嵌套的，但先后順序必須保持一致，如：<div>里嵌套< p>，那么</p >必須放在</div>的前面。
  • HTML標簽不區(qū)分大小寫，<h1和<H1>是一樣的，但建議小寫，因為大部分程序員都以小寫為準。

5、認識html文件基本結構
這一節(jié)中我們來學習html文件的結構：一個HTML文件是有自己固定的結構的。
<html> <head>...</head> <body>...</body></html>
代碼講解：

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

6、認識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”會在瀏覽器中的標題欄上顯示出來

7、了解HTML的代碼注釋
語法：
****

2、認識標簽（一）

1、語義化，讓你的網頁更好的被搜索引擎理解
標簽的用途：我們學習網頁制作時，常常會聽到一個詞，語義化。那么什么叫做語義化呢，說的通俗點就是：明白每個標簽的用途（在什么情況下使用此標簽合理）比如，網頁上的文章的標題就可以用標題標簽，網頁上的各個欄目的欄目名稱也可以使用標題標簽。文章中內容的段落就得放在段落標簽中，在文章中有想強調的文本，就可以使用 em 標簽表示強調等等。
講了這么多語義化，但是語義化可以給我們帶來什么樣的好處呢？

  • 更容易被搜索引擎收錄。
  • 更容易讓屏幕閱讀器讀出網頁內容。
    在后面的章節(jié)會帶領大家學習了解html中每個標簽的語義（用途）。

2、<body>標簽，網頁上顯示的內容放在這里

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

3、開始學習<p>標簽，添加段落
如果想在網頁上顯示文章，這時就需要< p>標簽了，把文章的段落放到< p>標簽中。
語法：
< p >段落文本< /p>
注意一段文字一個< p >標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個< p>標簽中。
< p>標簽的默認樣式，可以在上圖中看出來，段前段后都會有空白，如果不喜歡這個空白，可以用css樣式來刪除或改變它。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> p標簽</title>
</head>
<body>
<p>我的第一個段落</p>
<p>我的第二個段落</p>
</body>
</html>

4、了解<hx>標簽，為你的網頁添加標題
文章的段落用< p>標簽，那么文章的標題用什么標簽呢？在本節(jié)我們將使用<hx>標簽來制作文章的標題。標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。< h1>是最高的等級。語法：<hx>標題文本</hx> (x為1-6)文章的標題前面已經說過了，可以使用標題標簽，另外網頁上的各個欄目的標題也可使用它們。
注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：< h1>騰訊網</h1>

5、加入強調語氣，使用< strong>和< em>標簽
有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到< em>或< strong>標簽。
但兩者在強調的語氣上有區(qū)別:< em> 表示強調，< strong> 表示更強烈的強調。并且在瀏覽器中< em> 默認用斜體表示，< strong> 用粗體表示。兩個標簽相比，目前國內前端程序員更喜歡使用< strong>表示強調。
語法：
< em>需要強調的文本< /em>
< strong>需要強調的文本< /strong>
6、使用<span>標簽為文字設置單獨樣式
這一小節(jié)講解<span>標簽，我們對< em>、< strong>、<span>
這三個標簽進行一下總結：

  • < em>和< strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。
  • <span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。
    如果現在我們想把上一小節(jié)的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。
    語法：
    <span>文本</span>
    span{ color:blue; }顏色設置

7、< q>標簽，短文本引用
語法：
< q>引用文本< /q>
講解：

  • 在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用< q>< /q>
    實現引用。
  • 注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
    注意這里用< q>標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

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

9、使用< br>標簽分行顯示文本
怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到< br />
標簽了，在需要加回車換行的地方加入 < br />，< br />標簽作用相當于word文檔中的回車。
語法：
xhtml1.0寫法：
< br />
html4.01寫法：
< br>
大家注意，現在一般使用 xhtml1.0 的版本的寫法（其它標簽也是），這種版本比較規(guī)范。
與以前我們學過的標簽不一樣，< br />標簽是一個空標簽，沒有HTML內容的標簽就是空標簽，空標簽只需要寫一個開始標簽，這樣的標簽有< br />、<hr />和< img />。
講到這里，你是不是有個疑問，想折行還不好說嘛，就像在 word 文件檔或記事本中，在想要折行的前面輸入回車不就行了嗎？很遺憾，在 html 中是忽略回車和空格的，你輸入的再多回車和空格也是顯示不出來的。
總結：在 html 代碼中輸入回車、空格都是沒有作用的。在html文本中想輸入回車換行，就必須輸入< br />。

10、為你的網頁中添加一些空格
在上一節(jié)的例子，我們已經講解過在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入& nbsp;。
語法：
& nbsp;
在html代碼中輸入空格是不起作用的，在瀏覽中顯示，還是沒有空格效果。

11、認識

標簽，添加水平橫線
在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。
語法：
html4.01版本** **

xhtml1.0版本 <hr />
注意：

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

12、<address>標簽，為網頁加入地址信息
一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。
語法：
<address>聯系地址信息</address>
如：
<address>文檔編寫：lilian 北京市西城區(qū)德外大街10號</address>
<address>本文的作者：< a href="mailto:lilian@imooc.com">lilian</a></address>
在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在后面的課程中使用 css 樣式來修改它<address>
標簽的默認樣式。

13、使用< code>標簽
< code>var i=i+300;< /code>
注意：在文章中一般如果要插入多行代碼時不能使用< code>標簽了。
語法：
< code>代碼語言< /code>
注：如果是多行代碼，可以使用< pre>標簽。

14、使用< pre>標簽為你的網頁加入大段代碼
語法：
< pre>語言代碼段< /pre>
< pre> 標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
如下代碼：
< pre> var message="歡迎";
for(var i=1;i<=10;i++) {
alert(message);
}< /pre>
<pre> var message="歡迎";
for(var i=1;i<=10;i++) {
alert(message);
}</pre>

3、 認識標簽(第二部分)

1、使用ul，添加新聞信息列表
語法：
< ul>
< li>信息< /li>
< li>信息< /li>
......
< /ul>
舉例：
< ul>
< li>精彩少年< /li>
< li>美麗突然出現< /li>
< li>觸動心靈的旋律< /li>
< /ul>
<ul>
<li>精彩少年</li>
<li>美麗突然出現</li>
<li>觸動心靈的旋律</li>
</ul>
ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點

2、使用ol，添加圖書銷售排行榜
語法：
< ol>
< li>信息< /li>
< li>信息< /li>
......
< /ol>
舉例：
下面是一個熱點課程下載排行榜：
< ol>
< li>前端開發(fā)面試心法 < /li>
< li>零基礎學習html< /li>
< li>JavaScript全攻略< /li>
< /ol>
<ol>
<li>前端開發(fā)面試心法 </li>
<li>零基礎學習html</li>
<li>JavaScript全攻略</li>
</ol>
< ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始

3、認識div在排版中的作用
在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。

語法：
<div>…</div>

確定邏輯部分：

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>div標簽</title>
</head>
<body>
    <h2>熱門課程排行榜</h2>
    <ol>
        <li>前端開發(fā)面試心法 </li>
        <li>零基礎學習html</li>
        <li>javascript全攻略</li>
    </ol>
    <h2>最新課程排行</h2>
    <ol>
        <li>版本管理工具介紹—Git篇 </li>
        <li>Canvas繪圖詳解</li>
        <li>QQ5.0側滑菜單</li>
    </ol>
</body>
</html>

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

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


image.png

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

5、table標簽，認識網頁上的表格
創(chuàng)建表格的四個元素：
table、tbody、tr、th、td

  • <table>…</table>：整個表格以<table>標記開始、</table>標記結束。
  • <tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。
  • <tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
  • <td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
  • <th>…</th>：表格的頭部的一個單元格，表格表頭。
  • 表格中列的個數，取決于一行中數據單元格的個數。

總結：

  • table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
  • 表頭，也就是th標簽中的文本默認為粗體并且居中顯示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>認識table表標簽</title>
</head>
<body>
<table>
  <tbody>
    <tr>
      <th>班級</th>
      <th>學生數</th>
      <th>平均成績</th>
    </tr>
    <tr>
      <td>一班</td>
      <td>30</td>
      <td>89</td>
    </tr>
    <tr>
      <td>二班</td>
      <td>35</td>
      <td>85</td>
    </tr>
<tr>
    <td>三班</td>
    <td>32</td>
    <td>80</td>
</tr>
  </tbody>
</table>
</body>
</html>

6、用css樣式，為表格加入邊框
Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮剑瑸樗砑舆吙颉?/p>

在右側代碼編輯器中添加如下代碼：

<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
上述代碼是用 css 樣式代碼（后面章節(jié)會詳細講解），為th，td單元格添加粗細為一個像素的黑色邊框。

7、caption標簽，為表格添加標題和摘要
表格還是需要添加一些標簽進行優(yōu)化，可以添加標題和摘要。
摘要

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

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

標題

用以描述表格內容，標題的顯示位置：表格上方。
語法：

<table>
    <caption>標題文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>認識table表標簽</title>
<style type="text/css">
table tr td,th{
    border:1px solid #000;
}
</style>
</head>
<body>
<table summary="本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量">
  <caption>2012年到2013年庫存記錄</caption>
  <tr>
    <th>產品名稱 </th>
    <th>品牌 </th>
    <th>庫存量（個） </th>
    <th>入庫時間 </th>
  </tr>
  <tr>
    <td>耳機 </td>
    <td>聯想 </td>
    <td>500</td>
    <td>2013-1-2</td>
  </tr>
  <tr>
    <td>U盤 </td>
    <td>金士頓 </td>
    <td>120</td>
    <td>2013-8-10</td>
  </tr>
  <tr>
    <td>U盤 </td>
    <td>愛國者 </td>
    <td>133</td>
    <td>2013-3-25</td>
  </tr>
</table>
</body>
</html>

4、認識標簽(三)

1、使用< a>標簽，鏈接到另一個頁面
使用< a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。

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

title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發(fā)中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好），如右側案例代碼（8-12行）。

注意：還有一個有趣的現象不知道小伙伴們發(fā)現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變?yōu)樗{色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。

2、在新建瀏覽器窗口中打開鏈接
< a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。

如下代碼：
< a href="目標網址" target="_blank">click here!< /a>

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

3、使用mailto在網頁中鏈接Email地址
< a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。
注意：如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>mailto</title>
</head>
<body>
<p>1922年的春天，一個想要成名名叫卡拉威（馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
    <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p>
<a href="mailto:yy@imooc.com?subject=觀了不起的蓋茨比有感&body=你好,對此評論有些想法">對此影評有何感想，發(fā)送郵件給我</a>
</body>
</html>

4、認識< img>標簽，為網頁插入圖片
在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用< img>標簽來插入圖片。

語法：
< img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

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

講解：

  • src：標識圖像的位置；
  • alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
  • title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
  • 圖像可以是GIF，PNG，JPEG格式的圖像文件。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的蓋茨比</title>
</head>
<body>
    <p>1922年的春天，一個想要成名名叫尼克?卡拉威（<a >托比?馬奎爾Tobey Maguire </a>飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
  <p>菲茨杰拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士樂時代"吟唱華麗挽歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二注解。</p>
  ![電影介紹](http://upload-images.jianshu.io/upload_images/2957076-1126256b42978ffb.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 
</body>
</html

5、與瀏覽者交互，表單標簽

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

語法：
<form method="傳送方式" action="服務器文件">
講解：

  • <form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。
  • action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
  • 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>
    注意:
  • 所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
  • method:post/get的區(qū)別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以查看本小節(jié)的wiki，里面有詳細介紹。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表單標簽</title>
</head>
<body>
<form method="post" action="save.php">
      <label for="username">用戶名:</label>
      <input type="text"  name="username" id="username" value="" />
      <label for="pass">密碼:</label>
      <input type="password"  name="pass" id="pass" value="" />    
      <input type="submit" value="確定"  name="submit" />
      <input type="reset" value="重置" name="reset" />
</form>  
</body>
</html>

2、文本輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：
<form> <input type="text/password" name="名稱" value="文本" /></form>

  • type：

    當type="text"時，輸入框為文本****輸入框****;
    當type="password"時,輸入框為密碼輸入框。

  • name：
    為文本框命名，以備后臺程序ASP 、PHP使用。

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

舉例：

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

3、文本域，支持多行文本輸入
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：

<textarea rows=" 行數" cols="列數">文本
</textarea>
  • <textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
  • cols ：多行輸入域的列數。
  • rows ：多行輸入域的行數。
  • 在<textarea></textarea>標簽之間可以輸入默認值。

舉例

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

注意：代碼中的<label>標簽在本章5-9中講解。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文本域</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>個人簡介：</label>
    <textarea cols="50" rows="10">在這里輸入內容...</textarea>
    <input type="submit" value="確定"  name="submit" />
    <input type="reset" value="重置"  name="reset" />
</form> 
</body>
</html>

4、使用單選框、復選框，讓用戶選擇
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區(qū)別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:

語法：

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

  • type:
    當 type="radio" 時，控件為單選框
    當 type="checkbox" 時，控件為復選框
  • value：提交數據到服務器的值（后臺程序PHP使用）
  • name：為控件命名，以備后臺程序 ASP、PHP 使用
  • checked：當設置 checked="checked" 時，該選項被默認選中

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

5、使用下拉列表框，節(jié)省空間
下拉列表在網頁中也常會用到，它可以有效的節(jié)省網頁空間。既可以單選、又可以多選。
講解：

  • value：
Paste_Image.png
  • selected="selected"：
    設置selected="selected"屬性，則該選項就被默認選中。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉列表框</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>愛好:</label>
    <select>
      <option value="看書">看書</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>
</form>
</body>
</html>
Paste_Image.png

6、使用下拉列表框進行多選
下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"
屬性，就可以實現多選功能，在 widows 操作系統(tǒng)下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用Command +單擊），可以選擇多個選項。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用下拉列表框進行多選</title>
</head>
<body>
<form action="save.php" method="post" >
    <label>愛好:</label>
    <select multiple="multiple">
      <option value="看書">看書</option>
      <option value="旅游">旅游</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
    </select>
</form>
</body>
</html>

7、使用提交按鈕，提交數據
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法：
<input type="submit" value="提交">
type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

8、使用重置按鈕，重置表單信息
當用戶需要重置表單信息到初始時的狀態(tài)時，比如用戶輸入“用戶名”后，發(fā)現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態(tài)。只需要把type設置為"reset"就可以。
語法：
<input type="reset" value="重置">
type：只有當type值設置為reset時，按鈕才有重置作用
value：按鈕上顯示的文字

9、form表單中的label標簽
小伙伴們，你們在前面學習表單各種控件的時候，有沒有發(fā)現一個標簽--label，這一小節(jié)就來揭曉它的作用。
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發(fā)此控件。就是說，當用戶單擊選中該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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 引言 在日常開發(fā)Android中，很多時候會遇到和WebView打交道，對CSS HTML JS不是很清楚的話是完...
    張文靖同學閱讀 2,878評論 0贊 11
  • HTML基礎 本文包括 HTML基本知識與結構 HTML常見標簽 標簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,121評論 2贊 21
  • 本文主要是起筆記的作用，內容來自慕課網. 認識HTML、CSS、JavaScript 學習web前端開發(fā)基礎技術需...
    0o凍僵的企鵝o0閱讀 690評論 3贊 7
  • 1: 查看Python版本，系統(tǒng)默認會安裝一個python版本2.6.6，升級python只需重新下載一個新版本安...
    idealfeng閱讀 801評論 0贊 1
  • 感謝同住的小伙伴C小姐帶我去健身中心，這還是回長春后第一次去，先聲明我以前也沒有去過的哈。 第一次來健身中心 今天...
    舒涵vivian閱讀 1,095評論 0贊 5