「这是我参与2022首次更文挑战的第8天,活动详情查看:2022首次更文挑战」。
HTML 列表标签
无序列表:
<ul><li></li></ul> (ul是无序列表,li是列表项,ul里只能嵌套li,li里面可以嵌套任意)
有序列表:
<ol><li></li></ol> (ol是有序列表,li是列表项,ul里只能嵌套li,li里面可以嵌套任意)
自定义列表:
<dl><dt></dt><dd></dd></dl>
- dl是自定义列表
- dt是列表的小标题
- dd是小标题的解释项
- dl里只能嵌套dt和dd,dt和dd里面可以嵌套任意)
HTML 表格标签
<table></table>
表格基本结构
table (表格)> tr (行)> td (单元格)
表格属性
- border 边框
- width 宽
- height 高
- cellspacing 单元格间的距离
表格的结构标签
- caption 表格大标题,在表格整体顶部居中位置,紧挨着
<table>写 - thead 表格头部,通常只放第一行
- tbody 表格主体,除第一行以外的其他行
- th 表头单元格
表格的单元格合并
- 先确定跨行还是跨列
- 在代码中找到要合并单元格的位置
- 跨列 在第一个单元格输入 colspan = "单元格数量"
- 跨行 在第一个单元格输入 rowspan = "单元格数量"
HTML 表单标签
<form></form>
input 标签系列: input type=""
- text (默认项)单行文本输入框
- password 密码输入框
- radio 单选框,设置相同的 name 属性实现单选效果,添加 checked属性,设置默认选中项
- checkbox 多选框,添加 checked 属性设置默认选中项
- file 文件域,文件上传控件。设置 multiple 属性,实现多文件上传 按钮系列
- submit 提交按钮
- button 普通按钮(不能提交 后期配合js使用)
- reset 重置按钮 回复初始值
- value属性 值 修改文字按钮 常用属性 : placeholder 占位符提示信息,hidden 隐藏标签属性(一般搭配 file 使用)
用户名: <input type="text" placeholder="请输入用户名">
密码: <input type="password" placeholder="请输入6位密码">
<button> 按钮系列
button type =""
- submit 提交按钮 可以省略
- reset 重置按钮 恢复到初始值
- button 普通按钮 不能提交
select 标签,下拉菜单控件
- option 标签,设置下拉菜单选项
- 添加 selected 设置下拉菜单默认选中项
- 添加 multiple 属性,设置下拉菜单多选
textarea 标签,文本域(多行文本输入框)
常用属性 :
- cols ="每行可输入的字符"
- rows ="可输入行数"
- placeholder ="" 占位符提示信息
lable标签,绑定内容和元素
label标签 绑定内容和表单元素,点击label里边内容的时候,绑定的表单元素获取光标焦点
方法一:
<input type="radio" id="nan"> <label for="nan"> 男 </label>
注意 : input 标签的 id 属性,和 label 标签的 for 属性 相对应。
方法二: <label><input type="radio">男</label>
注意 : 把 for 属性删除掉
表单常用属性 :
-
action 收集的信息提交给那个页面处理
<form action="http://www.163.com"> -
name 名称,作用是用来区分不同的表单元素
-
value 值,设置表单内容
HTML 没有语义的标签(实际开发中常用)
div 标签 :
嵌套任意标签独占一行
span 标签 :
一行显示多个
字符实体
: 空格 : 一个字符串大小的空格<: 小于号 <>: 大于号 >¥: 中文 ¥ 符号