Web前端之HTML基础（3）——列表、表单

一.列表(重点*****)

1.列表的作用
有条理的显示数据
用于布局

2.列表的组成
列表类型
列表项
（1）列表类型
有序列表 <ol></ol> order list
无序列表 <ul></ul> unorder list
（2）列表项

<ol>
  <li></li>    list item 专门盛放列表中的数据
  <li></li>
  ...
</ol>

练习
01_ex按顺序列出你喜欢的5部电影
使用无序列表，列出你喜欢5部动画片

3.列表属性
（1）有序列表
type 指定标识项的类型
1：默认值，数字
a/A 大小写的英文字母
i/I 罗马数字
start 指定起始编号，无单位的数字

（2）无序列表
type 设置标识项的类型
disc 默认值 实心圆
circle 空心圆
square 实心方块
none 不显示标识

4.列表的嵌套
所有的嵌套，必须写在li中
（1）li 中嵌套其它标签 a img span b i
（2）li 中嵌套其它的列表

   <ul>
			<li>精华
				<ul>
					<li>SKII神仙水</li>
					<li>兰蔻</li>
				</ul>
			</li>
			<li>面膜
				<ul>
					<li>SKII前男友</li>
					<li>雅诗兰黛钢铁侠</li>
					<li>养生堂</li>
				</ul>
			</li>
			<li>口红
				<ul>
					<li>圣罗兰</li>
					<li>Dior</li>
					<li>纪梵希</li>
				</ul>
			</li>
	</ul>

5.定义列表
常用于给一类事物名字做出解释说明

<dl>
  <dt>杨树林</dt>
  <dd>
  杨树林是圣罗兰的中式读法
  </dd>
</dl>

二.结构标记

由于描述整个网页的结构，取代div做布局，提升标记的语义性

1.常用结构标签
（1）<header></header>
定义网页或者某个区域的头部内容

（2）<nav></nav>
定义网页的导航栏

（3）<section></section>
定义页面的主体内容

（4）<aside></aside>
定义页面的侧边栏信息

（5）<footer></footer>
定义网页或者某个区域的底部的内容

（6）<article></article>
定义与文字相关的内容
论坛，帖子，微博条目

三.表单(重点&难点********)

1.作用
提供可视化的输入控件
收集用户信息并提交给服务器

2.表单的组成部分
前端部分
提供表单控件，与用户交互的可视化控件
后端部分
对提交数据进行处理的接口(user.js)

3.表单标签

<form></form>

属性
（1）action
定义表单被提交时动作，通常定义的是服务器处理程序的地址(url/接口)
默认提交给本页

（2）method
指定表单数据提交方式
1° get 默认值
明文提交，提交的内容会显示在浏览器地址栏上
提交数据大小有限制，不能超过2kb
向服务器要数据的时候，使用get
2° post
隐式提交，提交的数据不会显示在地址栏中
提交数据没有大小限制
要传递数据给服务器的时候，使用post
3° delete
4° put

（3）enctype
指定表单数据的编码方式，允许将什么样的数据提交给服务器
1° 默认值
application/x-www-form-urlencoded
可以提交任意字符给服务器，不能提交文件

2° text/plain 只能提交普通字符(不包含特殊符号，比如&)

3° multipart/form-data
允许将文件提交给服务器

4.表单控件
能够与用户交互的可视化元素

分类
（1）input元素
（2）textarea 多行文本域
（3）select和option 下拉选择框
（4）其它元素
input元素
在页面中提供了各种各样的输入控件
如，文本框，密码框，单选，多选，按钮等等

<input>或者<input/>

input属性
1° type 指定input控件的类型
2° name 为控件定义名称，提供给服务器端使用，如果想提交本控件的值，就必须写
3° value 控件值，提交给服务器使用
4° disabled 无值属性 禁用控件，不能操作控件，而且不能提交了

5.input详解
（1）文本框和密码框
文本框 type=“text”
密码框 type=“password”
属性
maxlength 指定限制输入的最大字符数
readonly 无值属性，只能看不能写，但是可以提交
placeholder 占位符，默认显示在控件上文本，做提示用，不会被提交

（2）按钮
1° 提交按钮 type=“submit”
将表单中的数据提交给服务器

2° 重置按钮 type=“reset”
将表单内容恢复初始化状态

3° 普通按钮 type=“button”
没有任何特殊功能
value：定义按钮上的文字

（3） 单选按钮和复选框
单选按钮 type=“radio”
复选框 type=“checkbox”
属性：
name:除了定义控件名称以外，还起到分组的作用
复选框的name,必须定义为数组
必须添加value属性，才能正确的提交值
checked 无值属性，设置默认被选中项

（4）隐藏域
type=“hidden”
想提交给服务器，但是不想给用户看的数据，可以放在隐藏域中

（5）文件选择框
type=“file”
注意:需要把form的method设置为post，enctype设置为multipart/form-data
属性 multiple 无值属性，设置多文件上传 (按住ctrl选择)

6.文本域
允许录入多行数据的文本框

<textarea name="" readonly value="123"></textarea>

cols 指定文本域的列数
rows 指定文本域的行数
超出部分会显示滚动条

7.下拉选择框(下拉选)

<select>
   <option></option>
    .......
</select>

select属性:
name 定义下拉选的名称
value 下拉选的值
size 定义显示选项的数量，默认1
如果取值大于1，元素表现为滚动列表
multiple 设置多选，无值属性
只要设置multiple.下拉列表会变成滚动列表。
注意name要写数组

option属性:
value 定义选项的值，如果定了选项的值，提交的时候select的value就是选项的value
selected 无值属性 设置默认选中

8.其他的元素
（1）label 关联文本与表单控件

<label></label>

属性: for 用于绑定要与label关联的表单元素的id值

（2）控件分组
<fieldset></fieldset> 为form表单分组
<legend></legend> 为分组指定标题

（3）浮动框架
允许在一个网页中，再引入另外一个网页。
增加代码的重用性

<iframe></iframe>

属性：
src 要引入的网页路径
width/height 尺寸
frameborder 浮动框架的边框，0是无边框