1、

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

使用<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}),后面會詳細講解。

2、

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

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

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

下面是一個完整的實例:

在瀏覽器中顯示的結果：

3

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

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

語法：

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

舉例：

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

講解：

1、src：標識圖像的位置；

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

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

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

4、

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

網站怎樣與用戶進行交互？答案是使用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，里面有詳細介紹。

method="get/post",兩種方式的區別

Form中的get和post方法，在數據傳輸過程中分別對應了GET和POST方法。
二者主要區別如下：

1、Get將表單中數據的按照variable=value的形式，添加到action所指向的URL后面，并且兩者使用“?”連接，而各個變量之間使用“&”連接；Post是將表單中的數據放在form的數據體中，按照變量和值相對應的方式，傳遞到action所指向URL。
如下形式：
htt...

5、

文本輸入框、密碼輸入框

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

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

在瀏覽器中顯示的結果：

6、

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

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

語法：

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

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

在瀏覽器中顯示結果：

注意這兩個屬性可用css樣式的width和height來代替：col用width、row用height來代替。（這兩個css樣式在以后的章節會講解）

7、

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

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

?

語法：

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

1、type:

?? 當type="radio"時，控件為單選框

?? 當type="checkbox"時，控件為復選框

2、value：提交數據到服務器的值（后臺程序PHP使用）

3、name：為控件命名，以備后臺程序ASP、PHP使用

4、checked：當設置checked="checked"時，該選項被默認選中

如下面代碼：

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

在瀏覽器中顯示的結果：

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

8、

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

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

講解：

1、value：

2、selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

在瀏覽器中顯示的結果：

使用下拉列表框進行多選

下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，進行多選時按下Ctrl鍵同時進行單擊，可以選擇多個選項。如下代碼：

在瀏覽器中顯示的結果：

9、

使用提交按鈕，提交數據

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

語法：

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

type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

10、

form表單中的label標簽

小伙們，你們在前面學習表單各種控件的時候有沒有發現一個標簽--label，這一小節就來揭曉它的作用。

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

語法：

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

注意：標簽的?for 屬性中的值應當與相關控件的?id 屬性值一定要相同。

例子：

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

11、

轉載于:https://blog.51cto.com/1433189426/1565591

總結

以上是生活随笔為你收集整理的HTML学习（2）（摘抄自慕课）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。