10.表格标签:用来展示数据的
- 基本语法:
table:用于定义表格
tr:定义表格中的行
td:定义表格中的单元格(td指table data,即单元格的内容)
th:表头单元格标签,table head 表格第一行,加粗居中
11.表格结构标签
为了更好地表示表格的语义,将表格分割为表格头部和表格主体两大部分
-
基本语法:
thead:表格头部区域
tbody:表格主体区域 -
表格属性(不提倡 一般用css来设置):这些属性要写到table里
属性名 属性值 描述 align left\center\right 规定表格相对周围元素的对齐方式 border 1\"" 规定表格单元是否拥有边框,默认为“”,表示没有边框 cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素 cellspacing 像素值 规定单元格之间的空白,默认2像素 width 像素值或百分比 规定表格的宽度 -
合并单元格:把多个单元格合并为一个单元格
-
方式:
跨行合并:rowspan=“合并单元格的个数
跨列合并:colspan=“合并单元格的个数” -
目标单元格:(写合并代码)
跨行:最上侧单元格为目标单元格,写合并代码
跨列:最左侧单元格为目标单元格,写合并代码 -
三步曲:
- 跨行/跨列
- 找到目标单元格
- 删除多余单元格
-
12.列表标签:用来布局的 整齐整洁有序
-
无序列表
无序列表有自己的样式属性,用css来设置
- li相当于一个容器,可以容纳所有元素
- ul中只能放li,不能放其他标签或者文字
<ul> <li>列表项</li> </ul>
-
有序列表
有序列表有自己的样式属性,用css来设置
- ol中只能放li,不能放其他标签或者文字
- 选项间有一定顺序
<ol> <li>列表项</li> </ol>
-
自定义列表
常用对术语或者名词进行解释和描述,定义列表项前没有任何项目符号
- dl只能包含dt dd
- dt dd个数没有限制,一般是一个dt对多个dd
- dt dd可以放任何标签
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl>
13.表单标签:收集用户信息
-
组成:表单域(包含表单元素的区域 )+表单控件+提示信息
form会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单控件 </form>
-
表单控件:input / select / textarea
-
input:输入表单元素,用于收集用户信息
属性 描述 type 可以指定不同表单控件 name 是表单元素的名字,单选按钮必须有相同的名字才能实现多选一,复选框要有相同的name值 value 规定input元素的值 checked 单选按钮或复选框可以设置,当页面打开时默认选中这个按钮 maxlength 用得少,规定输入字段中的字符的最大长度 其中type:
属性type的值 描述 text 文本,默认宽度为20个字符 password 密码 radio 单选按钮,可以实现多选一 checkbox 复选框,可以实现多选 submit 提交按钮,把表单域里的表单数据发送到服务器 reset 重置按钮,清除表单中的所有数据 button 可点击按钮,多数情况用于通过javascript启动脚本 file 供文件上传 label标签:用于绑定一个表单元素,当点击label标签内文本时,浏览器会自动将光标转到/选择对应的表单元素上,用来增加用户体验
<label for="sex">男</label> <input type="radio" name="sex" id="sex">
核心:label标签的for属性应当与相关元素的id属性相同
-
select表单元素:下拉列表,有多个选项,并且想节省页面空间
<select> <option selected="selected">选项1</option> <option>选项2</option> <option>选项3</option> </select>
属性:selected=“selected” 默认为选中
-
textarea文本域元素:输入内容较多,用于定义多行文本输入的控件,如留言板,评论区
<textarea row="3" cols="20"> 文本内容 </textarea>
属性:cols=“每行中的字符数” rows=“显示的行数” 在实际开发不会使用,都是用css来改变大小
-
传送门:D
HTML标签语义(上):https://blog.csdn.net/Y_ooo/article/details/121111270