HTML-03

列表

列表的作用

列表指的是有相似特征或者有先后顺序的几行文字进行对奇的排列

由列表类型和列表项组成
前者：<ol>或者<ul>
后者：<li>用于表示具体的内容

使用列表

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

<ol type="列表类型" start="起始编号">
   <li>....</li>
   <li>....</li>
   <li>....</li>
</ol>

type属性值:
1 数字(默认值)
a 小写字母
A 大些字母
i 小写罗马数字
I 大些罗马数字
start表示列表项前的标识，从第几个字符开始显示

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

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

type属性:
disc 实心圆(默认)
circle 空心圆
square 实心矩形
none 不显示列表项

• 列表嵌套
  列表嵌套使用可以创建多层列表
  （常用于创建文档的大纲、导航菜单）

<ul>
  <li>
      第一章 html入门
     <ul>
         <li>第一节
         </li>
      </ul>
  </li>
</ul>

• 定义列表
  定义列表往往用于要给出一类事物的定义（如名词解释,字典）
  显示效果就是术语写在左上角，解释在下一行缩进
  <dl>标记定义了一个定义列表Definition List
  <dt>标记了一个术语Definition Term
  <dd>标记了对术语中描述Definition Desscription

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的设备</dd>
</dl>

表单

表单概述

• 表单作用
  1.用于显示、收集信息、并提交信息到服务器
  2.界面元素
  2.1 使用<form>元素创建表单
  2.2在<form>元素中添加其他表单可以包含的其他控件元素

• 表单元素<form>
  定义表单：用成对的<form></form>标记
  主要属性：
  action 定义表单被提交时发生的动作，通常包含服务方法的脚本的URL（如PHP JSP）,默认值为提交给本页
  method 指出表单数据提交的方式。取值为get或者post，默认值为get
  enctype 表单数据的编码方式

取值：
application/x-www-form-urlencoded 允许将普通字符和特殊字符提交给服务器，文件不行。为默认值
multipart/form-data 允许提交文件，会影响普通上传数据
text/plain 只允许进行普通字符的提交，特殊字符无法提交，如? = &
name 表单名称

• 表单控件
  表单控件元素是具有可视化外观的html元素，用于访问者输入信息
  表单控件元素:
  input 文本输入控件、按钮、单选和复选按钮、选项框、文件选择框、隐藏控件等等
  textarea
  select和option
  其他

表单控件

作用：
接受用户数据，与用户交互
提供可视化外观

• <input>元素,用于收集用户信息（单标记）
  语法：<input>
  主要属性：
  type: 可以创建出各种类型的输入字段比如文本框，复选框等(如果不写type值或是写错则默认为文本框)
  value:控件的数据，提交给服务器的值
  name:控件的名称，给服务器使用
  disabled:禁用控件

1. 文本框与密码框

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

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

主要属性：
name 名称由控件缩写+控件作用组成
value 控件的值，以及默认显示的默认值
maxlength 限制输入的字符数
readonly 设置文本控件只读

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

 <br/><br/>

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

2. 单选框和复选框

单选框<input type="radio"/>（一组中，只能有一个被选中，name值相同则为一组）

复选框<input type="checkbox"/>

主要属性：
name 设置名称，并用来分组，一组单选框或复选框的名称必须相同
value 文本，当提交form时，如果选中了此单选按钮，那么value就被发送到服务器中
checked 设置默认被选中

您的性别：<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"/>（传送表单数据给服务器或者其他程序处理）
重置按钮：<input type="reset"/> 清空表单的内容并把所有的表单控件设置为最初的默认值
普通按钮：<input type="button"/>用于执行客户端脚本

主要属性：
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 指定文本区域的列数
rows 指定文本区域的行数
readonly 只读

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

5.2<select>和<option>选项框

<select>创建选项框

主要属性：
name 选项框名称
size 大于1，则为滚动列表，否则为下拉下拉选项框
multiple:设置多选

<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>请填写地址信息</legend>
   地址：<input type="text"/><br/>
   邮编：<input type="text"/>
</fieldset>

7. <label>元素

用于想把文本和控件联系在一起，单击文本效果等同于单击控件一样
注：双标记<label>文本</label>(用for表示与该元素相联系的控件的ID值)

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

其他常用标记

浮动框架

作用：可以在一个浏览器窗口同时显示多个页面文档

1.使用<iframe>元素
2.设置<iframe>元素的src属性，执行其他页面的URL

语法：双标记 ，当浏览器不支持的时候会显示标记中间描述的信息

主要属性：
src 浮动框架中的网页url
height 高度
width 宽度
frameborder浮动框架边框

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

摘要与细节

目前只有谷歌支持,网页上需要将信息进行展开和收缩

<detail>用于定义细节

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

<summary>元素用来包含<detail>元素的标题

1.必须包含在<detail>元素中
2.作为<detail>元素中的第一个子元素

<detail>

   <summary>发票信息</summary>

   <div>

      发票抬头：<input/><br/>

      发票内容：<input/>

   </div>

</detail>

度量元素<meter>

用于定义的度量衡,（比如表示投票人数比例，磁盘的使用量或者统计比例等）,（常用于静态比例的显示，已知最大值和最小值）

语法：双标记<meter></meter>

主要属性：
min: 范围的最小值，默认为0
max:范围的最大值，默认为1
value:度量值，默认为0

剩余电量

设备1：

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

设备2：

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

设备3：

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

时间元素<time>

用来定义时间和日期、（并不能为页面带来页面显示效果上的变化，常用于对网页添加与时间相关的附加信息）

语法：双标记<time>文本</time>

主要属性：
datatime 规定时间/日期，时间和日期之间用T分割

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

高亮文本显示<mark>元素

用于定义页面中带有记号的文本（常用于需要突出显示的文本被<mark>元素包围的文本会显示额外的背景色）

<mark>杭州电子科技大学</mark>