人生苦短，要學就只學有用的

【前端教學-Html-4】

串列標簽+表單

1. 串列標簽（重點）

學習目標

• 理解
  • 無序串列的應用場景
  • 自定義串列的應用場景
• 應用
  • 無序串列語法
  • 自定義串列語法

串列， 表格是用來顯示資料的，那么串列就是用來布局的， 因為非常整齊和自由

• 概念：

  容器里面裝載著結構，樣式一致的文字或圖表的一種形式，叫串列

• 特點：

  串列最大的特點就是 整齊 、整潔、 有序，跟表格類似，但是他可組合自由度會更高，

1.1 無序串列 ul （重點）

無序串列的各個串列項之間沒有順序級別之分，是并列的，其基本語法格式如下：

<ul>
  <li>串列項1</li>
  <li>串列項2</li>
  <li>串列項3</li>
  ......
</ul>

比如下面這些，新聞是沒有順序的，不用排隊，先到先得，后發布先顯示，

腳下留心：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的，
 2. <li>與</li>之間相當于一個容器，可以容納所有元素，
 3. 無序串列會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

1.2 有序串列 ol （了解）

有序串列即為有排列順序的串列，其各個串列項按照一定的順序排列定義，有序串列的基本語法格式如下：

<ol>
  <li>串列項1</li>
  <li>串列項2</li>
  <li>串列項3</li>
  ......
</ol>

所有特性基本與ul 一致， 但是實際中比 無序串列 用的少很多，

1.3 自定義串列（理解）

定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，其基本語法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

用的還可以：

1.4 串列總結

我們現在還沒有學布局，現在只要保證2個點：

1. 學會什么時候用無序串列， 學會什么時候用自定義串列
2. 無序串列和自定義串列代碼怎么寫？
3. 具體的我們剛才看的布局，等我們學了css 在來全面布局，

2. 表單標簽(掌握)

目標：

• 能寫出最常用的注冊類表單
• 能說出input表單常見屬性

作用：

表單目的是為了收集用戶資訊，

在我們網頁中， 我們也需要跟用戶進行互動，收集用戶資料，此時也需要表單，

在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成，

**表單控制元件： **

? 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等，

提示資訊：

? 一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作，

表單域：

? 他相當于一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到服務器的方法，如果不定義表單域，表單中的資料就無法傳送到后臺服務器，

2.1 input 控制元件(重點)

• 語法：

  <input type="屬性值" value=https://www.cnblogs.com/BM-laoli/p/"你好">
  

  • input 輸入的意思
  • <input />標簽為單標簽
  • type屬性設定不同的屬性值用來指定不同的控制元件型別
  • 除了type屬性還有別的屬性

• 常用屬性：

1. type 屬性

• 這個屬性通過改變值，可以決定了你屬于那種input表單，
• 比如 type = 'text' 就表示 文本框 可以做 用戶名， 昵稱等，
• 比如 type = 'password' 就是表示密碼框 用戶輸入的內容 是不可見的，

用戶名: <input type="text" /> 
密  碼：<input type="password" />

2. value屬性 值

用戶名:<input type="text"  name="username" value=https://www.cnblogs.com/BM-laoli/p/"請輸入用戶名"> 

• value 默認的文本值， 有些表單想剛打開頁面就默認顯示幾個文字，就可以通過這個value 來設定，

3. name屬性

用戶名:<input type="text"  name=“username” />  

name表單的名字， 這樣，后臺可以通過這個name屬性找到這個表單， 頁面中的表單很多，name主要作用就是用于區別不同的表單，

• name屬性后面的值，是我們自己定義的，

• radio 如果是一組，我們必須給他們命名相同的名字 name 這樣就可以多個選其中的一個啦

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女

• name屬性，我們現在用的較少， 但是，當我們學ajax 和后臺的時候，是必須的，

4. checked屬性

• 表示默認選中狀態， 較常見于 單選按鈕和復選按鈕，

性    別:
<input type="radio" name="sex" value=https://www.cnblogs.com/BM-laoli/p/"男" checked="checked" />男
女 

上面這個，表示就默認選中了 男 這個單選按鈕

5. input 屬性小結

2.2 label標簽(理解)

目標：

label標簽主要目的是為了提高用戶體驗， 為用戶提高最優秀的服務，

概念：

label 標簽為 input 元素定義標注（標簽），

作用：

用于系結一個表單元素, 當點擊label標簽的時候, 被系結的表單元素就會獲得輸入焦點，

如何系結元素呢？

1. 第一種用法就是用label直接包括input表單，

<label> 用戶名： <input type="radio" name="usename" value=https://www.cnblogs.com/BM-laoli/p/"請輸入用戶名">   

適合單個表單選擇

2. 第二種用法 for 屬性規定 label 與哪個表單元素系結，

<label for="sex">男</label>
<input type="radio" name="sex"  id="sex">

當我們滑鼠點擊 label標簽里面的文字時， 游標會定位到指定的表單里面

2.3 textarea控制元件(文本域)

• 語法：

<textarea >
  文本內容
</textarea>

• 作用：

  通過textarea控制元件可以輕松地創建多行文本輸入框.

  cols="每行中的字符數" rows="顯示的行數" 我們實際開發不用

文本框和文本域區別

2.4 select下拉串列

目的：

如果有多個選項讓用戶選擇，為了節約空間，我們可以使用select控制元件定義下拉串列.

語法：

<select>
  <option>選項1</option>
  <option>選項2</option>
  <option>選項3</option>
  ...
</select>

• 注意：

1. <select> 中至少包含一對 option
2. 在option 中定義selected =" selected "時，當前項即為默認選中項，
3. 但是我們實際開發會用的比較少

3. form表單域

• 收集的用戶資訊怎么傳遞給服務器？

  通過form表單域

• 目的：

  在HTML中，form標簽被用于定義表單域，以實作用戶資訊的收集和傳遞，form中的所有內容都會被提交給服務器，

**語法: **

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控制元件
</form>

常用屬性：

注意:

每個表單都應該有自己表單域，我們現在做頁面，不寫看不到效果，但是 如果后面學 ajax 后臺互動的時候，必須需要 form表單域，

2.6 團隊約定

元素屬性

• 元素屬性值使用雙引號語法
• 元素屬性值可以寫上的都寫上

推薦：

<input type="text" />	
<input type="radio" name="name" checked="checked" />

不推薦：

<input type=text  />	
<input type='text' />	
<input type="radio" name="name" checked />

4.綜合案例（注冊頁面）

找一個網站，使用你目前所學到的知識去寫一個注冊頁面

5. 查檔案

經常查閱檔案是一個非常好的學習習慣，

W3C : http://www.w3school.com.cn/

MDN: https://developer.mozilla.org/zh-CN/

我們推薦使用在線的MDN檔案，因為它更加專業，說實話，你用它就比較高大上

標籤：Html/Css

上一篇：CSS3中新增的對文本和字體的設定

下一篇：css3元素如何扭曲、移位或旋轉