- 表格标签
- 表格的基本语法
- 必须要在table标签中,tr代表表格的行,td代表每行的具体数据(单元格)
- 例

- 基本标签的含义:
- <tr></tr>标签用于定义表格的行(table row),必须要放在table标签中
- <td></td>标签用于定义表格中的单元格,必须嵌套在tr标签中
- <th></th>用于定义表格中的表头内容,表头内容会加粗显示并且居中对齐
- 表格标签的属性

- thead和tbody标签
- thead和tbody标签是为了更清楚的区分表头和表内容的两个标签,thead代表表头部分,tbody代表内容部分
- 例

- 合并单元格
- 合并单元格的步骤:
- 2、在合并的第一个单元格td标签内添加上跨行合并还是跨列合并的属性 比例:rowspan=“n”, n代表合并的单元格数目,最小应该是2
- 跨行合并
- 利用rowspan来实现
 
- 跨列合并
- 利用colspan来实现
 
- 列表标签
- 有序列表
- 有序列表是有顺序的列表,各个列表之间会按照一定的顺序进行排列
- 有序列表使用<ol></ol>标签来定义的,内部使用<li></li>标签来定义列表项
- 基本语法

- 注意:
- 1、<ol></ol>标签中只能嵌套<li></li>,直接在<ol></ol>标签中写其他的标签是不允许的
- 2、<li></li>标签内相当于一个容器,可以容纳所有的元素
- 无序列表
- 用<ul></ul>标签来进行声明,一般会用项目符号来呈现列表项,每个列表项默认前方有圆点,ul标签中也只能嵌套li标签
- 例

- 注意:
- 1、无序列表各个列表项之间没有顺序级别之分,是并列
- 2、<ul></ul>标签中只能嵌套<li></li>,直接在<ol></ol>标签中写其他的标签是不允许的
- 3、无序列表是有自己的样式的(前面的小圆点),后期可以通过CSS来进行样式调整
- 自定义列表
- 自定义列表主要的使用场景是在页面的底部

- 自定义列表是用<dl></dl>标签来声明的,其中嵌套的<dt></dt>标签代表列表项的名词,<dd></dd>标签代表列表项的名词解释
- 例

- 注意:
- 1、<dl></dl>标签中只能包含<dt></dt>和<dd></dd>标签
- 2、经常是一个<dt></dt>来对应多个<dd></dd>
- 表单标签
- 表单域
- 在html中表单域用<form></form>来进行声明
- 语法

- 表单域属性

- 表单控件
- input 输入表单元素
- type属性及其属性值

- 其他属性

- 注意点:
- 1、name和value是每个表单元素都有的属性,主要给后台人员去使用的
- 2、name表单元素,一般还使用在单选按钮和复选框部分,来保证单选按钮和复选框的一致性。
- 3、checked属性主要是针对与单选按钮和复选框的,页面首次加载时,会默认选中指定元素
- 4、maxlength,用户可以在表单元素中输入的最大字符数,一般使用较少
- lable标签
- 增加单选按钮或者复选框的可点击范围来增加用户的使用体验
- 例

- select标签
- 在页面中,如果想设置多个选项供用户来进行选择,可以使用<select></select>来实现
- 例

- 注意:
- 1、<select>标签中至少得包含一对<option>
- 2、在<option>标签中来定义selected="selected",可以把当前项设置为默认选项
- <textarea>文本域
- 当用户输入比较多的内容的时候,就不能使用文本框来进行输入,要采用<textarea>标签来进行输入。
- 例

- 注意:
- cols=“每行中的字符数”,注意这里是针对于英文字母来说的,汉字的宽度比英文字母大,一个汉字长度等于2个英文字母的长度
- 这里设置的容纳字符数必须使文本域里面的内容要超出文本域默认的区域才能看到效果。
- 查阅文档的网站
|