Web前端

当前版本号[20230919]。

本课程的笔记已经更新完毕，各位可以通过点击《黑马程序员2023新版前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选》学习笔记总目录查看所有知识点，同时也能免费下载学习笔记和配套资料。

目标：掌握嵌套关系标签的写法，使用列表标签布局网页

作用：布局内容排列整齐的区域。

列表分类：无序列表、有序列表、定义列表。

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

注意事项：

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

注意事项：

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

注意事项：

网页中的表格与 Excel 表格类似，用来展示数据。

标签：table 嵌套 tr，tr 嵌套 td / th。

提示：在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线。

得出的结果如下：

作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

提示：表格结构标签可以省略。

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

跨行合并演示：

示例如下：

跨列合并演示：

示例如下：

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

作用：收集用户信息。

使用场景：

input 标签 type 属性值不同，则功能不同。

占位文本：提示信息，文本框和密码框都可以使用。

常用属性

提示：name 属性值自定义。

输出的页面如此：

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

示例：

多选框也叫复选框，默认选中：checked。

示例：

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

默认显示第一项，selected 属性实现默认选中功能。

作用：多行输入文本的表单控件。

注意点：

示例代码：

输出如下：（右下角的两根斜线是表示可以随意地把这个框拉大拉小）

作用：网页中，某个标签的说明文本。

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。

作用：布局网页（划分网页区域，摆放内容）

示例代码：

输出如下：

示例代码：

输出如下：

可以根据自己所需，修改好对应代码，做出自己想做的网页，如示例代码：

输出如下：

示例代码如下：