标签和表单

列表标签：

1.无序列表

<ul>:unorderedlist,定义一个无序列表

<li>:list item,定义一个列表项

Ctrl+D:复制当前行（duplicate）

输入li*3，按tab键：产生3个li;

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

disc:实心的圆点，默认值；

circle:空心的圆圈；

square:实心的正方形。

<ul type="circle">
    <li>浙江</li>
    <li>江苏</li>
    <li>河北</li>
    <li>江西</li>
</ul>

2.有序列表

<ol> orderedlist,有序列表：即列表项带有序号。

Type属性指定序号的类型，其取值：

1:序号为1,2,3,4……,默认值；

A:序号为A,B,C,D……,

I:序号为I,II,III,IV……,

I:序号为i,ii,iii,iv…….

start 属性指定从第几个开始，当取值为0或负数时是从负数到0再到指定类型的序号。如：-2，-1,0,A,B……

3.自定义列表

<dl>defined list 定义一个自定义列表

<dt>defined title 列表项的标题

<dd>defined description 列表项的描述

<dl>
    <h3>中国各省市介绍</h3>
    <dt>西安</dt>
    <dd>古称长安、镐京，陕西省省会、副省级市、国家区域中心城市（西北），是国务院批复确定的中国西部地区重要的中心城市</dd>
    <dt>宝鸡</dt>
    <dd>古称“陈仓”、“雍城”，誉称“炎帝故里、青铜器之乡”，公元757年因“石鸡啼鸣”之祥瑞改称宝鸡</dd>
</dl>

 

4.表单

4.1表单

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

<form>

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

mthod 属性：指定提交的方式，get/post.

get和post方式的区别：

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

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

4.2 文本框

<input type="text">

maxlength:指定文本框能接受的最大字符数；

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

value:指定初始值。

4.3密码框
<input type="password"maxlength="6">

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

4.4 label

<label>的作用

（1）   可以单独对其应用相应的样式

（2）   For属性可以使之和某个<input>关联，即当单击文本会激活对应的
<form action="#" method="post">
    <label for="userId"> 账号：</label>
    <input  id="userId" type="text"maxlength="10" size="30"value="abc"><br>
    <labelfor="password"> 密码：</label>
    <input id="password"type="password" maxlength="6">
</form>

4.5 单选按钮

<input type="radio" name="role">学生
<input type="radio" name="role"checked>教师
<input type="radio" name="role">管理员

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

如果需要默认选中某个选项，需加上checked属性
标签属性的表示形式：
（1）键值对：属性名=属性值
type=text  maxlength=6
（2）一些取值为布尔类型的属性直接使用属性名

Checked,readonly

4.6多选按钮

<form>
    你的兴趣爱好是：
    <input type="checkbox" checked>音乐
    <input type="checkbox" checked>阅读
    <input type="checkbox">游戏
    <input type="checkbox">电影
    <input type="checkbox">睡觉
</form>

4.7提交按钮

<inputtype="submit">
（1）点击按钮之后跳转到form表单指定的Action;
（2）value属性：value对应的值就是按键上显示的文字。

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

http://localhost:63342/xiexin/HTML/chapter4/result.html?name=huadian&password=123456

4.8重置按钮

<input type="reset" value="刷新">

（1）点击按钮，重置表单内部的输入框（单选按钮）
（2）value属性：value对应的值就是按键上显示的文字。
4.9 普通按钮

<input type="button" value="校验">

（1）  点击按钮。没有任何反应。

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

4.10图片按钮
<input  type="image" src="logo.jpg"alt="登录">

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

（2）需要设置src属性的值，如果src对应的路径没有找到图片（并且又没有设置alt属性，按钮显示默认值“提交”，如果设置了alt属性则显示alt的值。（类似img标签））
4.11 <button>标签

（1）内容可以是任意资源（eg:图片，段落，视频…）；
（2）当button标签放置在form内部，作用和submit一样。