菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 巨朝阳-20221011-HTML标签 [打印本页]

作者: 云云 时间: 2022-10-11 23:41
标题: 巨朝阳-20221011-HTML标签

一、表格标签

1.表格的基本语法

必须要在table标签中，tr代表表格的行，td代表每行的具体数据（单元格）

2.基本标签的含义：

2.1 <table></table>来定义表格

2.2 <tr></tr>标签用于定义表格的行（tablerow），必须要放在table标签中

2.3 <td></td>标签用于定义表格中的单元格，必须嵌套在tr标签中

2.4 <th></th>用于定义表格中的表头内容，表头内容会加粗显示并且居中对齐

3.表格标签的属性

属性名	属性值	描述
align	life/right/center	规定表格相对于周围元素的对齐方式
border	1或者””	规定表格单元格是否拥有边框，默认值是""，表示没有边框
cellpadding	像素值	规定单元格边沿和其内容之间的空白距离，默认是1像素
cellspacing	像素值	规定单元格之间的空白距离，默认是2像素
width	像素值	规定表格的宽度
height	像素值	规定表格的高度

3.1 thead和tbody标签

3.2 head和tbody标签是为了更清楚的区分表头和表内容的两个标签，thead代表表头部分，tbody代表内容部分

注意：

thead和tbody中仍然要写tr标签

4.合并单元格

4.1 合并单元格的步骤：

4.1.1 先确定需要跨行还是跨列合并的第一个单元格

4.2.2 在合并的第一个单元格td标签内添加上跨行合并还是跨列合并的属性比例：rowspan=“n”, n代表合并的单元格数目，最小应该是2

5.删除被合并的单元

5.1 跨行合并

利用rowspan来实现

5.2 跨列合并

利用colspan来实现

二、列表标签

1. 有序列表

有序列表是有顺序的列表，各个列表之间会按照一定的顺序进行排列

有序列表使用<ol></ol>标签来定义的，内部使用<li></li>标签来定义列表项

注意：

1.1 <ol></ol>标签中只能嵌套<li></li>，直接在<ol></ol>标签中写其他的标签是不允许的

1.2 <li></li>标签内相当于一个容器，可以容纳所有的元素

2.无序列表

2.1 用<ul></ul>标签来进行声明，一般会用项目符号来呈现列表项，每个列表项默认前方有圆点，ul标签中也只能嵌套li标签

注意：

2.1 无序列表各个列表项之间没有顺序级别之分，是并列

2.2 <ul></ul>标签中只能嵌套<li></li>，直接在<ol></ol>标签中写其他的标签是不允许的

2.3无序列表是有自己的样式的（前面的小圆点），后期可以通过CSS来进行样式调整

3.自定义列表

自定义列表主要的使用场景是在页面的底部

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

注意：

3.1 <dl></dl>标签中只能包含<dt></dt>和<dd></dd>标签

3.2 经常是一个<dt></dt>来对应多个<dd></dd>

三、表单标签

为什么需要表单

使用表单的目的就是为了手机用户的信息

1. 表单域

表单域是一个包含表单元素的区域

在html中表单域用<form></form>来进行声明

表单的作用

1.1收集用户信息

1.2将收集到信息提交给服务器进行处理

表单域的属性

	属性值	作用
action	url地址	用于指定接收并且处理表单数据的服务url地址
method	get/post	用户设置表单数据的提交方式
name	文本	用于指定表单域的名称，因为一个页面可能会有多个表单

2.表单控件

input 输入表单元素

type属性及其属性值

text	定义单行的输入字段，用户可以在其中输入文本，默认宽度是20个字符
button	定义可以点击的按钮（大多数情况下我们会和js在一起进行连用）
radio	定义单选框
checkbox	定义复选框
file	定义输入字段和浏览按钮，来进行文件上传
password	定义密码输入框
reset	定义重置按钮，重置按钮会清除表单中的所有数据
submit	定义提交按钮，提交按钮会将表单中的数据发送至服务器

其他属性

name	定义input元素的名字
value	规定input元素的值
checked	规定了input元素首次加载时应当被选中
maxlength	规定输入字段中的字符最大长度

注意点：

2.1 name和value是每个表单元素都有的属性，主要给后台人员去使用的

2.2 name表单元素，一般还使用在单选按钮和复选框部分，来保证单选按钮和复选框的一致性。

2.3 checked属性主要是针对与单选按钮和复选框的，页面首次加载时，会默认选中指定元素

2.4 maxlength，用户可以在表单元素中输入的最大字符数，一般使用较少

3.lable标签

增加单选按钮或者复选框的可点击范围来增加用户的使用体验

4. select标签

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

注意：

4.1 <select>标签中至少得包含一对<option>

4.2在<option>标签中来定义selected="selected"，可以把当前项设置为默认选项

5. <textarea>文本域

当用户输入比较多的内容的时候，就不能使用文本框来进行输入，要采用<textarea>标签来进行输入。

常见的使用场景一般在留言板，评论区等等。

注意：

5.1 cols=“每行中的字符数”，注意这里是针对于英文字母来说的，汉字的宽度比英文字母大，一个汉字长度等于2个英文字母的长度

5.2 rows=“显示的行数”

这里设置的容纳字符数必须使文本域里面的内容要超出文本域默认的区域才能看到效果。

四、查阅文档的网站

百度、W3C、菜鸟教程、MDN（重要）

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)