无序列表和有序列表的标签组成
-
无序列表
-
整体
- ul
-
每一项
- li
-
-
有序列表
-
整体
- ol
-
每一项
- li
-
表格常用基本标签
-
整体
- table
-
每一行
- tr
-
每一个单元格
- td
一个简单的三行三列的表格如下：
<table border="1" width="400" height="400">
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
</table>
合并单元格的操作
-
1、明确合并哪几个单元格
-
2、通过左上原则，明确保留谁删除谁
-
3、设置跨行还是跨列合并
-
跨行合并
- rowspan=“合并的个数”
-
跨列合并
- colspan=“合并的个数”
-
input标签的3~5个常用的type属性值
-
文本框
- text
-
密码框
- password
-
单选框
- radio
-
多选框
- checkbox
-
文件选择框
- file
-
提交按钮
- submit
-
重置按钮
- reset
-
普通按钮
- button
单选框和复选框默认选中效果
-
默认选择
- checked
一组单选框中只能单选的效果
- 设置相同的name属性值即可
div和span标签的特点
-
div
- 独占一行
-
span
- 一行显示多个
列表标签
-
应用场景
- 网页中以行的方式整齐的展示数据：如数据列表、排行榜
-
无序列表
-
标签
-
整体
- ul
-
每一项
- li
-
-
显示的效果
- 每一项前面默认有小圆点
-
注意点
- 1、每一项是没有顺序的
- 2、ul标签中只能放li标签
- 3、li标签里面可以放任意的标签
-
-
有序列表
-
标签
-
整体
- ol
-
每一项
- li
-
-
显示的效果
- 每一项前面有默认的序号
-
注意点
- 1、每一项都是有顺序的
- 2、ol标签中只能放li标签
- 3、li标签可以放任意的标签
-
-
自定义列表
-
标签
-
整体
- dl
-
小标题
- dt
-
每一项
- dd
-
-
注意点
- 1、dl标签中只能放dt或者dd
- 2、dt或者dd中可以放任意标签
表格
-
-
应用场景
- 以行+列的单元格的方式整齐的展示数据
-
表格的基本标签
-
整体
- table
-
每一行
- tr
-
每一个单元格
- td
-
-
属性
-
border - 添加表格边框
- border="1" -
width
- 宽度
-
height
- 高度
-
-
表格的其他标签
-
caption
- 表格整体的大标题
- 写在：table标签开始标签的下面
-
th
- 表头标签（表格一列的小标题）
- 写在：用来替换td
-
表格的结构标签
-
表格的头部
- thead
-
表格的身体
- tbody
-
表格的底部
- tfoot
-
写在：用来包裹tr
-
-
-
合并单元格
-
应用场景
- 多个单元格展示内容相同时让信息简洁不重复显示
-
合并属性
- rowspan
- colspan
-
实现步骤
-
1、确定合并哪几个单元格
-
2、通过左上原则确定保留谁删除谁
-
如果是上下合并
- 保留最上面的，删除其他
-
如果是左右合并
- 保留最左边的，删除其他
-
-
3、确定是跨行还是跨列
-
如果是跨行合并
-
rowspan=“合并的个数”
- 给保留的单元格设置
-
-
如果是跨列合并
-
colspan=“合并的个数”
- 给保留的单元格设置
-
-
-
-
表单标签
-
应用场景
- 收集用户数据类网页，如：登录页、注册页等
-
input标签
-
可以通过type属性值的不同，表现不同的形态
-
文本框 - text
-
属性
-
1、value
- 用户输入的数据
- 如果提前在代码中设置好了，相当于是内容的默认值
- 最后value属性值会发送给后台
-
2、name
- 告诉后台发送出去的数据是什么含义
-
3、placeholder
- 占位符
-
-
-
密码框
-
password
- 密文输入
-
属性
-
1、value
- 用户输入的数据
- 如果提前在代码中设置好了，相当于是内容的默认值
- 最后value属性值会发送给后台
-
2、name
- 告诉后台发送出去的数据是什么含义
-
-
-
单选框
-
radio
-
属性
-
1、name
- 告诉后台发送过去的数据是什么含义
- 分组：有相同name属性值的单选框为一组，一组中只能同时有一个被选中
-
2、value
- 表示用户选择的数据
-
3、checked
- 默认选中
- 针对于单选框，一组中只能设置一个
-
-
-
多选框
-
checkbox
-
属性
-
1、name
- 告诉后台发送过去的数据是什么含义
-
2、value
- 表示用户选择的数据
-
3、checked
- 默认选中
-
-
-
文件选择框
-
file
-
属性
-
html5新增的属性
-
multiple
- 多文件选择
-
-
-
-
表单按钮
-
提交按钮
- submit
-
重置按钮
- reset
- 让表单恢复成默认值
-
普通按钮
- button
-
注意点：如果需要使用功能：需要配合form标签一起使用（使用form标签把表单标签一起包裹起来即可）
-
-
-
-
button标签
-
默认的功能：提交按钮
-
type
-
提交
- submit
-
重置
- reset
-
普通
- button
-
-
-
下拉菜单
-
标签
-
整体
- select
-
每一项
- option
-
-
属性
-
默认选中
- selected
-
-
-
文本域标签
- textarea
- 作用：用于输入大段文字
-
label标签
-
作用：绑定文本和表单标签的关系
-
使用
-
方法一
- 1、使用label标签把文本包裹起来
- 2、在表单标签上添加id属性
- 3、在label标签的for属性中设置id属性值
-
方法二
- 1、直接使用label标签把文本和表单标签一起包裹起来
- 注意点：需要把label标签的for属性删除
-
-
语义化标签
-
没有语义的布局标签
-
div - 特点
- 1、独占一行 - 2、宽度默认是占满一行，高度默认由内容撑开 -
span - 特点
- 1、一行中可以显示多个 - 2、宽度和高度默认都是由内容撑开
-
实体字符
-
常见实体字符
-
空格 (&+nbsp;)
-
大于号>(&+gt;)
-
小于号<(&+lt；)
-
