HTML列表 表单 button

列表

1.1无序列表

<ul>unorderedlist:定义一个自定义列表。

<li>listitem:定义列表项。

Ctrl+d:复制当前行，li*3+tab键，生成三个列表项。（这里的快捷键是WebStorm的快捷键）

 type属性指定无序列表的符号，取值有：

disc：实心的圆点；

circle：空心圆圈；

square：实心的正方形。

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

1.2有序列表

<ol>orderedlist：定义一个无序列表。

type属性指定序号的类型，可以取值：

1：序号为1.2.3.4.······，默认值；

A:序号为A.B.C.D.······；

a:序号为a.b.c.d······；

I:序号为I.II.III.IV；

i:序号为i.ii.iii.iv。

start属性指定从第几个开始，是整数，可为0或负值，如果type为a，start为-2，序号为-2，-1,0，a。

reversed属性指定列表顺序为降序，如果type为a，start为1，序号为a，0，-1，-2。

<ol start="5">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ol>

1.3自定义列表

<dl>definedlist：自定义一个列表。

<dt> d efined t itle列表项的标题。

<dd> defineddescription列表项的描述。

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

有时候自定义列表显得更为有效，dt与dd都可以是多项。

1.4列表的嵌套

    列表是可以嵌套的，无论是无序列表里嵌套有序列表，还是自定义列表里嵌套无序列表，它们之间可以相互嵌套。

表单

2.1表单

什么是表单？收集用户填写的信息并将其提交到后台服务器。

<form>

action属性：指定提交的地址；

method属性：指定提交的方式，get/post。

get和post方式的区别：

（1）长度的限制，get方式限制为2kb以内；

（2）安全性，get方式提交的数据会直接呈现在地址栏，敏感数据容易被截获；

(3) get是从服务器上获取数据，post是向服务器传送数据。get 和 post只是一种传递数据的方式，get也可以把数据传到服务器，他们的本质都是发送请求和接收结果。只是组织格式和数据量上面有差别，http协议里面有介绍。

(4) 可见性，get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。 因为get设计成传输小数据，而且最好是不修改服务器的数据，所以浏览器一般都在地址栏里面可以看到，但post一般都用来传递大数据，或比较隐私的数据，所以在地址栏看不到，能不能看到不是协议规定，是浏览器规定的。

(5)获取信息的方式，对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。 没明白，怎么获得变量和你的服务器有关，和get或post无关，服务器都对这些请求做了封装。

name属性：规定表单的名称。

2.2文本框

提供给用户的可以输入数据的一个控件。

maxlength：指定文本框能接收的最大字符个数；

size：指定文本框的大小（宽度）；

value：指定初始值（用户输入数据后，也可以通过该属性获取）；

disabled：禁用文本框（它会变成灰色，并且获取不到焦点，不能输入）。

    

<input type="text" name="fname" />

2.3密码框

密码框和文本框是一样的，文本框的属性同样适用于密码框，唯一不同的是密码框是以掩码的形式显示内容，保证安全性。

<input type="password" />

2.4label标签

<label>的作用

（1)可以单独对其应用相应的颜色

（2）for属性可以通过id使之和某个<input>关联，即但单击文本会激活对应的<input>。

<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

2.5单选按钮

如果需要将若干个单选按钮编为一组（一组最多只有一个被选中），需要设置相同的name属性。

如果需要默认选中某个选项，需加上checked属性，设置了多个的话，最后一个有效。

标签属性的表示形式：

（1）键值对：属性名=属性值

type=“text”、maxlength=“6”

（2）一些取值为布尔类型的属性直接使用属性名

checked、readonly

<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female

2.6复选框

<input type="checkbox" /> 定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike
<input type="checkbox" name="vehicle" value="Car" /> I have a car

2.7提交按钮

（1）点击按钮之后跳转到form表单指定的action。

（2）value属性：value对应的之就是按键上显示的文字。

（3）点击按钮，将form表单中的input中name属性值（键）和用户输入的值组成键值对（或input标签value属性对应的值）。并拼接到form表单action属性值的后面。

<form action="form_action.asp" method="get">
Email: <input type="text" name="email" />
<input type="submit" />
</form>

2.8重置按钮

（1）点击按钮，重置表单内部的输入框（单选按钮）

（2）value属性：value对应的之就是按键上显示的文字。

<input type="reset" />

2.9普通按钮

（1）点击按钮，没有任何反应，只有添加对应的点击事件，配合JavaScript才有效。

（2）value属性：value对应的之就是按键上显示的文字。

<input type="button" value="Click me" />

2.10图片按钮

（1）作用和submit按钮是一样的。

（2）需要设置src属性的值，（如果src对应的路径没有找到图片，并且没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性则线下alt的值，设置value属性的值，效果和alt相同。（类似img标签））

<input type="image" src="submit.gif" alt="Submit" />

2.11隐藏的表单控件

 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。当需要向服务器传递参数，且该参数无须用户输入，甚至都不想让用户看见，可以使用隐藏域来实现。

<input type="hidden" name="country" value="Norway" />

2.12文件上传控件

用于文件上传。

（1）accept属性指定可选择的文件类型（如JPEG，*）。

（2）上传文件需指定对应表单的属性

<form enctype="multipart/form-data">
<input type="file" name="pic" accept="image/jpeg" />
</form>

2.13button标签

（1）内容可以是任意资源（eg:图片、段落、视频...）。

（2）当button放置在form内部，作用和submit一样。

<button type="button">Click Me!</button>

disabled属性：设置该属性后，按钮将被禁用；

name属性：指定按钮的名称；

type属性：可以取值为：submit、reset及button，需指定type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

value属性：规定按钮的初始值，可由脚本进行修改。