列表

列表的作用

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

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

使用列表

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

<ol type="列表類型" start="起始編號(hào)">
   <li>....</li>
   <li>....</li>
   <li>....</li>
</ol>

type屬性值:
1 數(shù)字(默認(rèn)值)
a 小寫(xiě)字母
A 大些字母
i 小寫(xiě)羅馬數(shù)字
I 大些羅馬數(shù)字
start表示列表項(xiàng)前的標(biāo)識(shí)，從第幾個(gè)字符開(kāi)始顯示

• 無(wú)序列表<ul>
  ul : Unorder List

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

type屬性:
disc 實(shí)心圓(默認(rèn))
circle 空心圓
square 實(shí)心矩形
none 不顯示列表項(xiàng)

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

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

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

<dl>
   <dt>計(jì)算機(jī)</dt>
   <dd>用來(lái)計(jì)算的儀器</dd>
   <dt>顯示器</dt>
   <dd>以視覺(jué)方式顯示信息的設(shè)備</dd>
</dl>

表單

表單概述

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

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

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

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

表單控件

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

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

1. 文本框與密碼框

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

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

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

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

 <br/><br/>

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

2. 單選框和復(fù)選框

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

復(fù)選框<input type="checkbox"/>

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

您的性別：<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"/>廈門(mén)

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

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

3. 按鈕

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

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

4. 隱藏域和文本選擇框

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

1.表單中包含不希望用戶看見(jiàn)的信息
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>選項(xiàng)框

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

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

<option>選項(xiàng)

主要屬性：
value 選項(xiàng)的值
selected 預(yù)選中

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

6. 為控件分組

<fieldset>元素：為控件分組
<legend>元素：為分組指定一個(gè)標(biāo)題

<fieldset>
   <legend>請(qǐng)?zhí)顚?xiě)地址信息</legend>
   地址：<input type="text"/><br/>
   郵編：<input type="text"/>
</fieldset>

7. <label>元素

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

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

其他常用標(biāo)記

浮動(dòng)框架

作用：可以在一個(gè)瀏覽器窗口同時(shí)顯示多個(gè)頁(yè)面文檔

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

語(yǔ)法：雙標(biāo)記 ，當(dāng)瀏覽器不支持的時(shí)候會(huì)顯示標(biāo)記中間描述的信息

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

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

摘要與細(xì)節(jié)

目前只有谷歌支持,網(wǎng)頁(yè)上需要將信息進(jìn)行展開(kāi)和收縮

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

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

<summary>元素用來(lái)包含<detail>元素的標(biāo)題

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

<detail>

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

   <div>

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

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

   </div>

</detail>

度量元素<meter>

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

語(yǔ)法：雙標(biāo)記<meter></meter>

主要屬性：
min: 范圍的最小值，默認(rèn)為0
max:范圍的最大值，默認(rèn)為1
value:度量值，默認(rèn)為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>%

時(shí)間元素<time>

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

語(yǔ)法：雙標(biāo)記<time>文本</time>

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

<time datatime="2011-7-12T0:35">凌晨0點(diǎn)35分</time>

高亮文本顯示<mark>元素

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

<mark>杭州電子科技大學(xué)</mark>