HTML day03

列表

table是早期用于做布局，由于加载效率低，所以现在只用于做数据展示
列表现在除了做数据展示外，还做页面布局

1.列表的组成

1.1.列表类型

①有序列表 <ol></ol>   order list
②无序列表 <ul></ul>   unorder list

1.2.列表项

<li></li>   list-item

2.属性

①有序列表

type="" 设置列表项的类型
默认值是1，
a A I i
start="" 指定编号开始的位置

②无序列表

type="disc" 默认值，实心小圆点
circle 空心圆
square 实心小方块
none 没有列表标识

3.列表的嵌套

列表要求，所有被嵌套的内容，必须写在li中

4.定义列表

定义一个名词或者一项事物，以及对这个名词事物的解释说明

结构标记

为了增加代码的可读性，设计了一套功能和div一模一样的标签
让元素拥有语义

<header></header>  定义网页的头部，或者某个区域的头部
<section></section>  定义网页的主体
<footer></footer>   定义网页的底部，或者某个区域的底部
<nav></nav>        定义导航
<aside></aside>     定义侧边栏
<article></article>    定义与文字相关的部分(评论，回帖)

自己写项目时，推荐使用

表单（重点&难点 *****）

1.form功能

1.1.提供了可视化的用户输入控件
1.2.自动收集整理数据，并发送请求（填写参数的控件，必须有name属性）
1.3.form没有接收响应的能力
要使用ajax来发送请求，并接收响应，需要手动收集数据（不使用name）
总结：form和ajax二选一使用
使用form，控件必须有name属性，来自动收集数据
使用ajax，控件需要手动收集数据，不需要name属性，用id
使用场合：如果需要保存处理响应数据，用ajax
如果不需要处理响应数据，用form

2.form的组成

前台，提供表单控件，与用户交互的可视化控件
后台，表单要提交的接口

3.表单

<form></form>

3.1.action="" 定义表单提交是发送的动作(接口url)
如果不写或者没有值，会把请求提交给本页面
3.2.method="" 定义表单提交的方法
get 默认值，明文提交，提交的内容会显示在浏览器的地址栏。
通过查询字符串(querystring) 后台 req.query 接收
提交的数据有大小限制，最大2KB
向服务器要数据的时候，使用get方法
post 隐式提交，提交的内容不会在地址栏显示，
通过请求主体传递参数 后台 req.body
没有数据大小限制
3.3. enctype=" " 设置请求可以传递数据的类型
application/x-www-form-urlencoded 默认值
允许传递任意字符给服务器
text/plain 允许传递普通字符给服务器
普通字符：不许带有= & * # 等符号
multipart/form-data 可以传递文件+任意字符

4.表单控件

在form标签中，能够与用户进行交互的可视化标签
4.1.input元素 基础的9种，新出的10种
4.2.textarea 多行文本域
4.3.select和option 下拉选择框
4.4.其它元素
①input元素
所有input元素都具备的属性

<input type="">

type="" 指定控件类型，默认值是text
name="" 为控件定义名称，提供给服务器获取数据的时候使用
form提交请求， 必须有name属性
ajax提交绝大多数不要name属性，用id属性
value="" 控件中的值，数据提交的时候，等号右侧的数据就是value
特殊情况，所有的按钮value是设置按钮上显示的文本
disabled 无值属性 禁用：不能选中，不能修改，不会提交
①文本框和密码框
文本框 type="text"
密码框 type="password"
属性：readonly 无值属性，只读，只能看不能改，可以提交
maxlength="" 设置输入的最大长度
placeholder=" " 提示占位符
②按钮相关
提交按钮 type="submit" 收集整理用户填入的信息，并发送请求
重置按钮 type="reset" 恢复到表单的初始状态
普通按钮 type="button" 什么作用都没有，专门用来调用js
按钮value是设置按钮上文本
<button></button> 作用等同于submit
③单选按钮/复选按钮
单选 type="radio"
多选 type="checkbox"
1.name属性除了作为控件的值以外，需要使用name属性来做分组
2.必须设置value值，不然提交的时候默认是on
属性，默认选中 checked 无值属性
④隐藏域
提交不给用户看到的数据，使用隐藏域

type="hidden"

⑤文件选择框(上传文件时使用)
使用post方法
把enctype设置为multipart/form-data

type="file"

属性 multiple 无值属性 多选

5.多行文本域

看做有很多行的文本框去操作，项目中基本不用

<textarea name=" " cols="5" rows="3"></textarea>

属性cols在不同电脑硬件中，设置长度判断不同

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

<select name="">
   <option></option>
   ......
</select>

属性 select size 默认值为1，取值为1是下拉选择框
>1，变为滚动条选择框
在滚动条选择框的情况下，设置multiple 无值属性可以多选
option 默认选中 selected 无值属性

7.其它表单元素

①label
作用：1.可以使用label替代form中span
2.可以与控件进行关联

<label for="要绑定控件的id"></label>

点击label中的文本，控件会被选中
②给控件分组

<fieldset>  分组
  <legend>分组名称</legend
</fieldset>