列表

列表的作用

列表指的是有相似特征或者有先后順序的幾行文字進行對奇的排列

由列表類型和列表項組成
前者：<ol>或者<ul>
后者：<li>用于表示具體的內(nèi)容

使用列表

• 有序列表<ol>
  ol : Order List
  li : List Item

<ol type="列表類型" start="起始編號">
   <li>....</li>
   <li>....</li>
   <li>....</li>
</ol>

type屬性值:
1 數(shù)字(默認值)
a 小寫字母
A 大些字母
i 小寫羅馬數(shù)字
I 大些羅馬數(shù)字
start表示列表項前的標識，從第幾個字符開始顯示

• 無序列表<ul>
  ul : Unorder List

<ul type="列表類型">
     <li>...<li>
     <li>...<li>
 </ul>

type屬性:
disc 實心圓(默認)
circle 空心圓
square 實心矩形
none 不顯示列表項

• 列表嵌套
  列表嵌套使用可以創(chuàng)建多層列表
  （常用于創(chuàng)建文檔的大綱、導航菜單）

<ul>
  <li>
      第一章 html入門
     <ul>
         <li>第一節(jié)
         </li>
      </ul>
  </li>
</ul>

• 定義列表
  定義列表往往用于要給出一類事物的定義（如名詞解釋,字典）
  顯示效果就是術(shù)語寫在左上角，解釋在下一行縮進
  <dl>標記定義了一個定義列表Definition List
  <dt>標記了一個術(shù)語Definition Term
  <dd>標記了對術(shù)語中描述Definition Desscription

<dl>
   <dt>計算機</dt>
   <dd>用來計算的儀器</dd>
   <dt>顯示器</dt>
   <dd>以視覺方式顯示信息的設(shè)備</dd>
</dl>

表單

表單概述

• 表單作用
  1.用于顯示、收集信息、并提交信息到服務器
  2.界面元素
  2.1 使用<form>元素創(chuàng)建表單
  2.2在<form>元素中添加其他表單可以包含的其他控件元素

• 表單元素<form>
  定義表單：用成對的<form></form>標記
  主要屬性：
  action 定義表單被提交時發(fā)生的動作，通常包含服務方法的腳本的URL（如PHP JSP）,默認值為提交給本頁
  method 指出表單數(shù)據(jù)提交的方式。取值為get或者post，默認值為get
  enctype 表單數(shù)據(jù)的編碼方式

取值：
application/x-www-form-urlencoded 允許將普通字符和特殊字符提交給服務器，文件不行。為默認值
multipart/form-data 允許提交文件，會影響普通上傳數(shù)據(jù)
text/plain 只允許進行普通字符的提交，特殊字符無法提交，如? = &
name 表單名稱

• 表單控件
  表單控件元素是具有可視化外觀的html元素，用于訪問者輸入信息
  表單控件元素:
  input 文本輸入控件、按鈕、單選和復選按鈕、選項框、文件選擇框、隱藏控件等等
  textarea
  select和option
  其他

表單控件

作用：
接受用戶數(shù)據(jù)，與用戶交互
提供可視化外觀

• <input>元素,用于收集用戶信息（單標記）
  語法：<input>
  主要屬性：
  type: 可以創(chuàng)建出各種類型的輸入字段比如文本框，復選框等(如果不寫type值或是寫錯則默認為文本框)
  value:控件的數(shù)據(jù)，提交給服務器的值
  name:控件的名稱，給服務器使用
  disabled:禁用控件

1. 文本框與密碼框

文本框 <input type="text"/>

密碼框 <input type="password"/>

主要屬性：
name 名稱由控件縮寫+控件作用組成
value 控件的值，以及默認顯示的默認值
maxlength 限制輸入的字符數(shù)
readonly 設(shè)置文本控件只讀

 姓名：<input type="text" name="username" value="張三" maxlength="10"/>

 <br/><br/>

 密碼：<input type="password" name="psw"/>

2. 單選框和復選框

單選框<input type="radio"/>（一組中，只能有一個被選中，name值相同則為一組）

復選框<input type="checkbox"/>

主要屬性：
name 設(shè)置名稱，并用來分組，一組單選框或復選框的名稱必須相同
value 文本，當提交form時，如果選中了此單選按鈕，那么value就被發(fā)送到服務器中
checked 設(shè)置默認被選中

您的性別：<input type="radio" name="sex" value="man"/>男

<input type="radio" name="sex" value="women">女

<br/><br/>

喜歡的城市：

<input type="checkbox" name="cities" value="beijing"/>北京

<input type="checkbox" name="cities" value="xiameng"/>廈門

<input type="checkbox" name="cities" value="nanjing"/>南京

<input type="checkbox" name="cities" value="hangzhou " checked="checked"/>杭州

3. 按鈕

提交按鈕：<input type="submit"/>（傳送表單數(shù)據(jù)給服務器或者其他程序處理）
重置按鈕：<input type="reset"/> 清空表單的內(nèi)容并把所有的表單控件設(shè)置為最初的默認值
普通按鈕：<input type="button"/>用于執(zhí)行客戶端腳本

主要屬性：
name 名稱
value 按鈕的上顯示的文字

4. 隱藏域和文本選擇框

隱藏域：<input type="hidden"/>

1.表單中包含不希望用戶看見的信息
2.name 名稱
3.value 值

文件選擇框 <input type="file"/>

name 名稱 不可少

注：
method必須為post
enctype必須為multipart/form-data

5. 其他控件

5.1<textarea>元素多行文本域

多行文本輸入框<textarea></taxtarea>

主要屬性：
name 名稱
cols 指定文本區(qū)域的列數(shù)
rows 指定文本區(qū)域的行數(shù)
readonly 只讀

輸入你的留言：<br/>
<textarea name="txtinfo" rows="4" cols="20">
</textarea>

5.2<select>和<option>選項框

<select>創(chuàng)建選項框

主要屬性：
name 選項框名稱
size 大于1，則為滾動列表，否則為下拉下拉選項框
multiple:設(shè)置多選

<option>選項

主要屬性：
value 選項的值
selected 預選中

<select>
    <option value="C++">C++</option>
    <option value="PHP">PHP</option>
    <option value="JAVA">JAVA</option>
</select>

6. 為控件分組

<fieldset>元素：為控件分組
<legend>元素：為分組指定一個標題

<fieldset>
   <legend>請?zhí)顚懙刂沸畔?lt;/legend>
   地址：<input type="text"/><br/>
   郵編：<input type="text"/>
</fieldset>

7. <label>元素

用于想把文本和控件聯(lián)系在一起，單擊文本效果等同于單擊控件一樣
注：雙標記<label>文本</label>(用for表示與該元素相聯(lián)系的控件的ID值)

<input type="checked" name="secret" id="secret"/>
<label for="secret">不用公開我的信息</label>

其他常用標記

浮動框架

作用：可以在一個瀏覽器窗口同時顯示多個頁面文檔

1.使用<iframe>元素
2.設(shè)置<iframe>元素的src屬性，執(zhí)行其他頁面的URL

語法：雙標記 ，當瀏覽器不支持的時候會顯示標記中間描述的信息

主要屬性：
src 浮動框架中的網(wǎng)頁url
height 高度
width 寬度
frameborder浮動框架邊框

<iframe src="frame1.html"></iframe>

摘要與細節(jié)

目前只有谷歌支持,網(wǎng)頁上需要將信息進行展開和收縮

<detail>用于定義細節(jié)

1，可以在此元素中添加文本和圖像等
2.需要與<summary>元素配合使用

<summary>元素用來包含<detail>元素的標題

1.必須包含在<detail>元素中
2.作為<detail>元素中的第一個子元素

<detail>

   <summary>發(fā)票信息</summary>

   <div>

      發(fā)票抬頭：<input/><br/>

      發(fā)票內(nèi)容：<input/>

   </div>

</detail>

度量元素<meter>

用于定義的度量衡,（比如表示投票人數(shù)比例，磁盤的使用量或者統(tǒng)計比例等）,（常用于靜態(tài)比例的顯示，已知最大值和最小值）

語法：雙標記<meter></meter>

主要屬性：
min: 范圍的最小值，默認為0
max:范圍的最大值，默認為1
value:度量值，默認為0

剩余電量

設(shè)備1：

<meter value="50" min="0" max="100" title="50%"></meter>%

設(shè)備2：

<meter value="10" min="0" max="100" title="10%"></meter>%

設(shè)備3：

<meter value="90" min="0" max="100" title="90%"></meter>%

時間元素<time>

用來定義時間和日期、（并不能為頁面帶來頁面顯示效果上的變化，常用于對網(wǎng)頁添加與時間相關(guān)的附加信息）

語法：雙標記<time>文本</time>

主要屬性：
datatime 規(guī)定時間/日期，時間和日期之間用T分割

<time datatime="2011-7-12T0:35">凌晨0點35分</time>

高亮文本顯示<mark>元素

用于定義頁面中帶有記號的文本（常用于需要突出顯示的文本被<mark>元素包圍的文本會顯示額外的背景色）

<mark>杭州電子科技大學</mark>