HTML+CSS基礎(HTML篇)

引言

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

1、了解HTML、CSS、JavaScript

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

  1. HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。

  2. CSS樣式是表現(xiàn)。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現(xiàn)。

  3. JavaScript是用來實現(xiàn)網頁上的特效效果。如：鼠標滑過彈出下拉菜單?；蚴髽嘶^表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換?？梢赃@么理解，有動畫的，有交互的一般都是用JavaScript來實現(xiàn)的。

認識html文件基本結構

這一節(jié)中我們來學習html文件的結構：一個HTML文件是有自己固定的結構的。

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

代碼講解：

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

認識head標簽
接下來通過一個網頁的學習，來對html標簽有一個初步理解。平常大家說的上網就是瀏覽各種各式各樣的網頁，這些網頁都是由html標簽組成的。下面就是一個簡單的網頁。效果圖如下：

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

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

標簽來完成的，它在網頁上的代碼寫成

網頁的完整代碼如下圖：



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

標簽的語法

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

認識<head>標簽

<head>標簽的作用。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內容顯示給讀者。
下面這些標簽可用在 head 部分：

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

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

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

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

<head>標簽中的其它標簽內容的講解，會在以后的章節(jié)中一一講解。

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

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

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

  1. 更容易被搜索引擎收錄。
  2. 更容易讓屏幕閱讀器讀出網頁內容。

<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分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據(jù)重要性遞減。<h1>是最高的等級。
如下圖為騰訊網站。

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

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

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

有了段落又有了標題，現(xiàn)在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽。
但兩者在強調的語氣上有區(qū)別:<em> 表示強調，<strong> 表示更強烈的強調。并且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
在瀏覽器中默認樣式是有區(qū)別的：
原代碼，如下圖。

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

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

2.4 使用<span>標簽為文字設置單獨樣式

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

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

如果現(xiàn)在我們想把上一小節(jié)的第一段話“美國夢”三個字設置成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>

講解：

  1. 在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑?！?這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用<q></q>實現(xiàn)引用。
  2. 注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。

2.6 <blockquote>標簽，長文本引用

<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。
等等，上一節(jié)<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 />

注意：

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

2.10<address>標簽，為網頁加入地址信息

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

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

2.11 想加入一行代碼嗎？使用<code>標簽

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業(yè)的編程代碼，當代碼為一行代碼時，你就可以使用<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>[美麗突然出現(xiàn)]</li>
  <li>[觸動心靈的旋律]</li>
</ul>

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


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

如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。

語法：

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

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

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

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

2.14 認識div在排版中的作用

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

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

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

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

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

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

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

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

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

上述代碼在瀏覽器中顯示的默認的樣式為：

總結：
1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
2、表頭，也就是th標簽中的文本默認為粗體并且居中顯示

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

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節(jié)中我們?yōu)楸砀裉砑右恍邮?，為它添加邊框?br> 在右側代碼編輯器中添加如下代碼：

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

上述代碼是用 css 樣式代碼（后面章節(jié)會詳細講解），為th
，t單元格添加粗細為一個像素的黑色邊框。
結果窗口顯示出結果樣式：

2.17 caption標簽，為表格添加標題和摘要
表格還是需要添加一些標簽進行優(yōu)化，可以添加標題和摘要。代碼如下：

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

2.18 使用<a>標簽，鏈接到另一個頁面

href：Hypertext Reference的縮寫。意思是超文本引用。
使用<a>標簽可實現(xiàn)超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。

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

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

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

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

如下代碼：
<a href="目標網址" target="_blank">click here!</a>
target之前一定要加空格！
擴展：
_blank -- 在新窗口中打開鏈接
_parent -- 在父窗體中打開鏈接
_self -- 在當前窗體打開鏈接,此為默認值
_top -- 在當前窗體打開鏈接，并替換當前的整個窗體(框架頁)

2.19 使用mailto在網頁中鏈接Email地址

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

注意：如果mailto后面同時有多個參數(shù)的話，第一個參數(shù)必須以“?
”開頭，后面的參數(shù)每一個都以“&
”分隔。
下面是一個完整的實例:

在瀏覽器中顯示的結果：
發(fā)送
點擊鏈接會打開電子郵件應用，并自動填寫收件人等設置好的信息，如下圖：

舉個栗子：
1、發(fā)送人郵箱地址：yy@imooc.com。
2、郵件主題：觀了不起的蓋茨比有感。
3、郵件內容：你好，對此評論有些想法。

<a href="mailto:yy@imooc.com
?subject=觀了了不起的蓋茨比有感
&body=你好,對此評論有些想法">
對此影評有何感想，發(fā)送郵件給我</a>

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

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



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

講解：

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

3 與瀏覽者交互，表單標簽

3.1使用表單標簽，與用戶交互

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

語法：
<form method="傳送方式" action="服務器文件">
講解：
1.<form> ：<form>標簽是成對出現(xiàn)的，以<form>開始，以</form>結束。
2.action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個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、所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 <form></form> 標簽之間（否則用戶輸入的信息可提交不到服務器上哦?。?br> 2、method : post/get 的區(qū)別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以查看本小節(jié)的 wiki，里面有詳細介紹。
擴展：
hidden 定義隱藏輸入字段
image 定義圖像作為提交按鈕
number 定義帶有 spinner 控件的數(shù)字字段
password 定義密碼字段。字段中的字符會被遮蔽
radio 定義單選按鈕
range 定義帶有 slider 控件的數(shù)字字段
reset 定義重置按鈕。重置按鈕會將所有表單字段重置為初始值
search 定義用于搜索的文本字段
submit 定義提交按鈕。提交按鈕向服務器發(fā)送數(shù)據(jù)
text 默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符
url 定義用于 URL 的文本字段

文本輸入框、密碼輸入框
當用戶要在表單中鍵入字母、數(shù)字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：
<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="行數(shù)"  cols="列數(shù)">文本
</textarea>

1 <textarea>標簽是成對出現(xiàn)的，以<textarea>開始，以</textarea>結束。
2、cols ：
多行輸入域的列數(shù)。
3、rows ：
多行輸入域的行數(shù)。
4、在<textarea></textarea>標簽之間可以輸入默認值。

舉例：


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

在瀏覽器中顯示結果：

3.3 使用單選框、復選框，讓用戶選擇

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區(qū)別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。
語法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框
2、value：提交數(shù)據(jù)到服務器的值（后臺程序PHP使用）
3、name：為控件命名，以備后臺程序 ASP、PHP 使用
注意：為單選框的時候，name一定要名字相同才行
4、checked：當設置 checked="checked" 時，該選項被默認選中
如下面代碼：

在瀏覽器中顯示的結果：

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

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

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

講解：
1、value：

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

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

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

在瀏覽器中顯示的結果：

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

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

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

在瀏覽器中顯示的結果：

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

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

在瀏覽器中顯示的結果：

輸入賬號

單擊重置按鈕

3.8 form表單中的label標簽

label標簽不會向用戶呈現(xiàn)任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 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>

最后

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 1、HTML介紹 1 2、Html和CSS的關系 HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶...
    夏沫xx閱讀 1,670評論 0贊 8
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 14,090評論 1贊 92
  • 一、Html和CSS的關系 學習web前端開發(fā)基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我...
    空指針的空閱讀 1,035評論 0贊 2
  • 本文主要是起筆記的作用，內容來自慕課網. 認識HTML、CSS、JavaScript 學習web前端開發(fā)基礎技術需...
    0o凍僵的企鵝o0閱讀 707評論 3贊 7
  • 自愛 沉穩(wěn) 而后愛人
    9988ulia閱讀 293評論 0贊 0

友情鏈接更多精彩內容