2021-02-08至2021-02-14复习HTML的笔记

表格

一、总览

1.表格是用来显示数据的，不是用来布局页面的。（列表才是用来布局页面的）

2.表格的相关标签

【1】table 表格标签 【2】tr 行标签 【3】td 单元格标签 【4】th 单元格标签 【5】thead 表格头部区域标签 【6】tbody 表格主体区域标签

3.表格的相关属性（写于table里面的、应用于表格整体的属性）

属性名	要填入的属性值	描述
align	left、center、right	规定表格整体相对于周围元素的对齐方式
border	像素值或不填	规定单元格是否拥有边框和边框的粗细大小（不填表示没有边框）
cellpadding	像素值	规定单元格与其内容之间的空白大小（默认为1像素）
cellspacing	像素值	规定单元格与单元格之间的空白大小（默认为2像素）
width	像素值或百分比	规定表格整体的宽度
height	像素值或百分比	规定表格整体的高度

二、细讲

一、表格标签

1.表格不是用来布局页面的（虽然可以做出布局页面的效果），而是用来展示数据的。

2.table标签的基本格式:

< table>
< tr> < td>< /td> < td>< /td> < td>< /td> < /tr>
< /table>

3.每一行同级别的单元格的内容的开头会自动对齐

4.部分标签的英文全称：td：table data

二、表头单元格标签

1.表头单元格里面的文本内容的两个特点：加粗；居中

2.示例：

如下：
< table>
< tr> < th>表格头部单元格一< /th> < th>表格头部单元格二< /th> < th>表格头部单元格三< /th> < /tr>
< /table>

即用< th>替换掉< td>

三、表头结构标签

< thead>< /thead>表示表格的头部区域
< tbody>< /tbody>表示表格的主体区域

1.标签内部必须拥有标签

四、合并单元格 属性

跨行合并：rowspan=“要合并的单元格的个数”
跨列合并：colspan=“要合并的单元格的个数”

1.写在td中

2.合并单元格的操作步骤

【1】先确定是要跨行合并还是跨列合并

【2】找到目标单元格，在其单元格标签中加上“合并单元格”的属性（跨行合并时最上面的单元格为目标单元格，跨列合并是最左边的单元格为目标单元格）

示例：目标单元格

【3】删除被合并的单元格的标签及里面的内容（合并起来的单元格中除了目标单元格都删掉）

列表

一、总览

1.列表是用来布局页面的，不是用来显示数据的。（表格才是用来显示数据的）

2.列表的相关标签

【1】ul 无序列表标签
【2】li
【3】ol 有序列表标签
【4】dl 自定义列表标签
【5】dt
【6】dd

3.各列表类型及其标签用法

类型	标签	定义	说明
无序列表		无序列表标签	里面只能嵌套li 没有顺序，使用频率较高，li里面可以包含任何标签
有序列表		有序列表标签	里面只能嵌套li 有顺序，使用频率较低，li里面可以包含任何标签
自定义列表		自定义列表标签	里面只能嵌套dt和dd，dt和dd里面可以包含任何标签

一、细讲

一、无序列表标签< ul>< /ul>

1.ul标签的基本格式：

< ul>
< li>第一行< /li>
< li>第二行< /li>
< /ul>

效果如下：

• 第一行
• 第二行

2.无序列表的几个注意点

【1】无序列表的各个列表项之间没有顺序之分，是并列的

【2】ul 里面只能嵌套 li 标签，不能放其他的标签或者文字，但 li 标签里面可以放任意的东西，li 相当于一个容器。

【3】无序列表会带有自己的样式属性（比如每一行前面的那个小黑点），但我们不需要过度关注它们，因为在实际使用中可以用css来随意调整。

二、有序列表标签< ol>< /ol>

1.ol标签的基本格式：

< ol>
< li>第一行< /li>
< li>第二行< /li>
< /ol>

效果如下：

1. 第一行
2. 第二行

2.无序列表的几个注意点

【1】ol 里面只能嵌套 li 标签，不能放其他的标签或者文字，但 li 标签里面可以放任意的东西，li 相当于一个容器。

【2】有序列表会带有自己的样式属性（比如每一行前面的1，2，3，4，5），但我们不需要过度关注它们，因为在实际使用中可以用css来随意调整。

三、自定义列表标签

1.dl标签的基本格式：

< dl>
< dt>我是自定义列表的第一行，也是列表头< /dt>
< dd>我是列表主体第一行，是列表头的第一个解释< /dd>
< dd>我是列表主体第二行，是列表头的第二个解释< /dd>
< dt>< /dt>
< dd>< /dd>
< dt>< /dt>
< dd>< /dd>
< /dl>

效果如下：

我是自定义列表的第一行，也是列表头

我是列表主体第一行

我是列表主体第二行

2.自定义列表的几个注意点

【1】dl 里面只能嵌套 dt和dd 标签，不能放其他的标签或者文字，但 dt和dd 标签里面可以放任意的东西，dt和dd 相当于容器。

【2】一个 dl 里面 < dt>和< dd> 的个数都没有限制，但经常使用的是一个< dt>和多个< dd>

【3】< dt>和< dd>是平行关系，不是包含关系。

表单

一、总览

1.表单是用来收集用户信息的。

2.表单的三个组成部分：
【1】表单域
【2】表单控件（也称为表单元素）
【3】提示信息

3.输入表单元素的type属性的各种属性值及其作用

属性值	描述
text	定义单行的输入字段（用户可在其中输入文本）（默认可输入宽度为20个字符）
password	定义密码字段。（在其中输入的字符被掩码）
file（叫“文件域”）	定义“浏览”按钮，用于选择文件来上传。
radio	定义单选按钮。
checkbox	定义复选框。
submit	定义提交按钮。
reset	定义重置按钮。（重置按钮会清除其所属表单中的所有数据）
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
button	定义可点击按钮。（多数情况下，用于通过JavaScript启动脚本）

二、细讲

一、表单域（标签就是表单域）

1.表单域是一个包含表单元素（表单控件）的区域。

2.语法示例：

< form>
用户名：< input type=“text”/> < !- -会生成一个能输入文本的区域- ->
< /form>

二、表单控件（表单元素）

1.表单元素是允许用户在表单中 输入或者选择 的控件。

2.表单元素的种类：
【1】input 输入表单元素
【2】select 下拉表单元素
【3】textarea 文本域元素

3.< input/> 输入表单元素

【1】< input/>标签为单标签。

【2】type属性是input的必需属性，为type属性赋不同的属性值可以用来表示不同的控件类型。

【3】示例：< input type=“属性值”/>

【4】除type属性外，标签还有很多其他属性，其常用属性如下：

属性	属性值	描述
name	由用户自定义	规定input元素的名称
value	由用户自定义	规定input元素的值（value的值在文本、提交input区域会显示出来）
checked	checked	规定此input元素在首次加载时应当被选中（主要用于默认勾选单选按钮或复选框）（单选按钮里面只能checked一个，多选框可以checked多个）
maxlength	正整数	规定输入字段中的字符的最大长度（较少使用）

[1]name和value是每个表单都应该要有的属性值，主要给后台人员使用。

[2]单选按钮的每个input里面的name值都应该相等，复选框的也是。

[3]name可以用来区分不同的表单元素。

【5】< lable>< /lable>标签

[1]< lable>标签给input元素定义标注。

[2]< lable>标签用于绑定一个表单元素，当点击< lable>标签的文本时，浏览器就会自动把光标转到对应表单处或者勾选对应的表单元素，用来增加用户体验。

[3]语法示例：

< lable for=“nan”>男< /lable>
< input type=“radio” name=“sex” id=“nan”/> < !- -此时点“男”这个字也会选上“男”所属的单选按钮- ->

此示例说明：< lable>标签的for属性应当与目标元素的id属性相同

4.< select>< /select>下拉表单元素

【1】< select>的使用场景：有多个选项让用户选择，并且想要节约页面空间时。

【2】语法示例：

< form>
下拉表单：
< select>
< option>选项一< /option>
< option>选项二< /option>
< option>选项三< /option>
…
< /select>
< /form>

【3】< select>中至少要包含一对< option>。

【4】在< option>中加上selected="selected"这个键值对时，该项即为默认选中项。

5.< textarea>< /textarea>文本域元素

【1】使用场景：当需要输入的内容较多的情况下，就不能用文本框表单了，而应该使用< textarea>标签。

【2】作用：可以定义多行文本输入。

【3】常见于：留言板；评论区。

【4】语法示例：

< form>
今日反馈：
< textarea>
在这里输入您的反馈
< /textarea>
< /form>

【5】可以在textarea里面加上 cols=“每行能写的字符数”，rows=“能写的行数” 这些元素可以定义相关格式。（但不用记，知道就行，因为在实际开发中不会使用它们，都是用css来做）