[note] HTML list|table|form

一. HTML-列表元素

列表元素

有序列表：ol、li
- ol（ordered list）有序列表，直接子元素只能是li
- li（list item）列表中的每一项
无序列表：ul、li
- ul（unordered list）无序列表，直接子元素只能是li
- li（list item）列表中的每一项
li一定要是ul或者ol的直接子元素
定义列表：dl、dt、dd
- dl（definition list）定义列表，直接子元素只能是dt、dd
- dt（definition term）列表中每一项的项目名
- dd（definition description）列表中每一项的具体描述，是对 dt 的描述、解释、补充
dt和dd是兄弟元素
- 一个dt后面一般紧跟着1个或者多个dd
- dt、dd常见的组合
  事物的名称、事物的描述
  问题、答案
  类别名、归属于这类的各种事物

元素CSS属性

列表相关的常见CSS属性有4个：list-style-type、list-style-image、list-style-position、list-style，它们都可以继承，所以设置给ol、ul元素，默认也会应用到li元素

list-style-type：设置li元素前面标记的样式（很少用到）
- disc：实心圆、circle：空心圆、square：实心方块
- none：什么也没有（用得最多）
list-style-image：设置某张图片为li元素前面的标记，会覆盖list-style-type的设置（很少用到）
list-style-position：设置li元素前面标记的位置，可以取outside、inside2个值
- 前面标记的样式是算在内容内还是内容外
list-style: none（用得最多）缩写属性

二. HTML-表格元素

table常见的元素

table
- 属性（很少用到）
tr 表格中的行 -> table row
- 属性
td 行中的单元格 -> table description
- 属性

单元格边框的合并：细线表格（很常用）

合并单元格的边框 table{ border-collapse: collapse }
表格居中：margin auto

其他元素（很少用到）

caption
tbody
thead
th
tfoot

单元格的合并

合并要领
- 合并方向是向右、向下
- 删掉被覆盖掉的td元素
colspan
rowspan

border-spacing

border-spacing用于设置单元格之间的水平、垂直间距，比如
table {border-spacing: 10px 20px }
2个值分别是cell之间的水平、垂直间距
如果只设置1个值，同时代表水平、垂直间距

三. HTML-表单元素

form表单常用元素

form表单一般情况下，其他表单相关元素都是它的后代元素
input 单行文本输入框、单选框、复选框、按钮等元素
textarea 多行文本框
select、option 下拉选择框
button 按钮
label 表单元素的标题
fieldset 表单元素组
legend fieldset的标题

input的常用属性

input是一个行内替换元素（和img一样），基本上所有替换元素都是行内元素

input是一个单标签

input的type属性：

1 单行文本输入框
- text：文本输入框（明文输入）
- password：文本输入框（密文输入）
2 单选复选框
- radio：单选框
```
男
女
```
- checkbox：复选框
3 button 按钮重置提交
- 1. 普通按钮（type=button）：使用value属性设置按钮文字
  按钮的两种实现方法：
  1. 用
  2. 用标签，type为button（常用）
- 1. 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
```
    
        必填信息
    

    
        选填信息
    
    
    
        
        
    
    
```
  - 前提1：type必须是reset类型（value值可以不写，默认是“重置”）
  - 前提2：所有的内容都必须在同一个表单中
- 1. 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
4 file：文件上传

input的其他属性

注意：【当属性名和值相等的时候可以只写属性名】，例：

，可以简写为：

maxlength：允许输入的最大字数
placeholder：占位文字
readonly：只读（很少用到）
disabled：禁用
- 例如禁用获取验证码
checked：默认被选中
- 只有当type为radio或checkbox时可用
- 男
autofocus：当页面加载时，自动聚焦
- 通常给第一个输入框添加autofocus
name：名字
- 在提交数据给服务器时，可用于区分数据类型（作为key）
- 单选框互斥必须设置name
value：取值
- button不设置name，不会上传value
form：设置所属的form元素（填写form元素的id）（很少用到）
- 一旦使用了此属性，input元素即使不写在form元素内部，它的数据也能够提交给服务器

textarea 多行文本输入框

textarea的常用属性
- cols：列数
- rows：（显示的）行数
缩放的CSS设置
- 禁止缩放：resize: none;
- 水平缩放：resize: horizontal;
- 垂直缩放：resize: vertical;
- 水平垂直缩放：resize: both;

select、option 下拉选择框

option是select的子元素，一个option代表一个选项

select常用属性
- multiple：可以多选
- size：显示多少项
option常用属性
- selected：默认被选中
- value：上传到服务器的键

fieldset和legend 域方框和域标题

fieldset：表单元素组（一个专门的div，把表单包裹起来）
legend：fieldset的标题

四. 补充要点

布尔属性（boolean attributes）

布尔属性可以没有属性值，写上属性名就代表使用这个属性
常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected
如果要给布尔属性设值，值就是属性名本身

按钮的两种标签的实现

用input元素实现：
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
button元素：使用button元素也能实现按钮，功能效果跟input一样
- button默认的type是submit

input和label

label元素一般跟input配合使用，用来表示input的标题
labe可以跟某个input绑定，点击label就可以激活对应的input

input的外边框outline

通常会设置为none，然后自定义border

input :focus { 1px solid blue }

五. 表单提交：form常用属性

传统的表单提交
- 1 将所有的input包裹到一个form中，要上传的input需要有name和value
- 2 form设置action
- input/button类型是submit
action：用于提交表单数据的请求URL
method：请求方法（get和post），默认是get
target：在什么地方打开URL（参考a元素的target）
enctype：规定了在向服务器发送表单数据之前如何对数据进行编码，取值有3种：
- application/x-www-form-urlencoded：默认的编码方式
- multipart/form-data：文件上传时必须为这个值，并且method必须是post
- text/plain：普通文本传输
accept-charset：规定表单提交时使用的字符编码

get和post

提交表单数据时，浏览器发送的是http请求，有2种请求方法可以选择

get
- 在请求URL后面以?的形式跟上发给服务器的参数，多个参数之间用&隔开，比如
  http://ww.test.com/login?phone=123&password=234&sex=1
- 由于浏览器和服务器对URL长度有限制，因此在URL后面附带的参数是有限制的，通常不能超过1KB
post
- 发给服务器的参数全部放在请求体中
- 理论上，post传递的数据量没有限制（具体还得看服务器的处理能力）