[Web] HTML（2）

body子标签（2）

标签列表

无论是使用有序列表，还是无序列表，都是用 li 标签，来表示列表中的一行数据

1、有序列表 —— ol 标签

属性：
type属性：描述前置的有序编码类型

可选值：

• 1 ： 默认，阿拉伯数字编号
• a ： 小写字母编号
• A ： 大写字母编号
• i ： 小写罗马数字
• l ： 大写罗马数字

start 属性：取值为数字，描述的是序列的起始值

2、无序列表 —— ul 标签

属性：
type 属性：前置的图标类型：disc （默认的实心圆）、square（实心方块）、circle（空心圆）

表格标签 —— table

表格的组成，至少使用三个标签：

• table标签：是表格本身，是表格中行的容器
• 行标签 tr ：是表格中的一行，是表格中列的容器
• 列标签 td ：是表格中一行中的一列，时显示数据的容器

可选标签：th 标签，表头标签，使用方式与 td 相同

属性：

• width ：设置 table/td 标签的宽度
• height ：设置 table/td 标签的高度
• border ：取值为数字，表示边框的宽度
• brodercolor ：边框的颜色
• bgcolor：设置 table/td 标签的背景颜色
• background ：设置 table/td 标签的背景图片

合并单元格：（属性设置给 td）

• colspan：取值为数字，表示当前 td 横向跨越的单元格数量
• rowspan：取值为数字，表示当前 td 垂直跨越的单元格数量

form表单标签

作用：用于显示和收集用户的信息，并将信息发送给服务器

常见用途：
用户注册、用户登录、搜索内容，商品检索

常用属性：

• action ：提交的服务器地址

• method ：提交数据时的方式，可供选择的：（GET/POST）
  —— GET请求：表单中的数据，在网址中拼接显示
  —— POST 请求：表单中的数据，存储在单独的请求体中，不会显示到网页中

• enctype ：数据提交时的编码类型，默认值为 meta 中的编码

表单常用子标签（input标签）

属性：

• name : 用于在提交数据到服务器时, 给每段数据 添加key
• value : 输入组件提交给服务器的值, 可以通过用户的输入改变 !
• placeholder : HTML5版本的新属性, 用于在输入框中 提示输入
• checked : 用于单选复选框, 表示选项默认选中HTML5boolean类型属性
• disabled: 输入框不可输入 HTML5boolean类型属性
• readonly: 输入框内容不可修改 HTML5boolean类型属性

type属性: 更改输入框的输入类型:

• text : 默认, 表示文本输入框
• password: 密码输入框, 输入的内容,在显示时会被*号或·代替
• radio : 单选框 , value属性值不会显示出来 , 一组单选框, name属性值必须相同,才可以实现单选效果 !
• checkbox: 复选框 , value属性值不会显示
• hidden : 隐藏的输入框
• file : 文件上传选择框
• button : 普通的按钮 value属性为按钮的文字
• submit : 提交按钮 , 点击后表单中的所有数据会发送给服务器
• reset : 重置按钮
• image : 图片提交按钮, 点击后表单中的所有数据会发送给服务器 , 并会多出两个数据 x,y (x与y的含义是: 鼠标点击按钮的坐标点)

表单常用子标签 select 与 option 标签

select标签：下拉选择框标签
name属性：数据提交时的key
multiple：是否支持多选boolean类型属性

option标签：选项标签
标签内容部分，显示出的选项文本
value属性：数据提交时的值，不会显示

label标签

用于传递事件的标签

传递事件的步骤：
（1）给接受事件的标签添加任意的id属性值
（2）给产生事件的标签外层镶嵌一个label标签，给label标签添加for属性，属性值为第一步的id值

网页的碎片化开发

iframe框架标签

用于将一个网页嵌入到另一个网页中

属性：

• src：引入的网页地址
• height：占用的高度
• width：占用的宽度