【HTML】基础学习【数据分析全栈攻略：爬虫+处理+可视化+报告】
- 第 102 篇 -
Date: 2025 - 05 - 31
Author: 郑龙浩/仟墨
文章目录
- HTML 基础学习
- 一 了解HTML
- 二 HTML的结构
- 三 HTML标签
- 1 标题
- 2 文本段落
- 3 换行
- 4 加粗、斜体、下划线
- 5 插入图片
- 6 添加链接
- 7 容器
- 8 列表
- 9 表格
- 10 class类
HTML 基础学习
一 了解HTML
一个网页分为为三部分：
- HTML：定义网页的结构和信息
- CSS：定义网页的样式
- JavaScript：定义用户和网页交互逻辑
而爬虫的时候，最关心的是网页上的信息，也就是最关心的是HTML
二 HTML的结构
HTML代码：
一级标题
这是第一段话 这是第二段话
这是第三段话（换行了）二级标题
三级标题
六级标题
网页显示
解释：
必须要写
...- HTML起始标签、闭合标签、他们之间的内容，加起来是一个HTML元素
- HTML标签是HTML文档的根，其他的元素必须放在这个HTML元素里边
...
与 以及之间的内容加起来是文档的主体内容
一级标题
二级标题
三级标题
六级标题
- 上面代码表示的是一级标题到六级标题，最多为六级，加入说写了七级标签默认为普通文本，那么中间的内容默认为普通文本，而非标题
- 如果没有CSS的参与，从以及标题到六级标题，文字的大小是依次递减的
- 因为标写在了body起始与闭合标签里边，所以这些标题元素都是body的子元素
- 而h标题元素和p元素位于同一层级，所以他们的级别是相同的
这是第一段话 这是第二段话
这是第三段话（换行了）- 因为标写在了body起始与闭合标签里边，所以这些标题元素都是body的子元素
- 而h标题元素和p元素位于同一层级，所以他们的级别是相同的
- 虽然在p标签中写了两行文字，但是在网页显示的时候，中间其实只有一个空格，如果想换行，需要加
- 因为第二行结尾写了
，所以第三行的内容在下一行三 HTML标签
1 标题
- 段落标签是
一级标题
- 有六个级别的标题，从h1到h6，数字越小，级别越高，如果没有CSS的参与，默认高级别的标题比低级别的标题字号要大
- 只有6种标题，没有级别为7的标题，如果写了级别为7的标题，也只是以普通文本的形式显示
代码示例：
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
普通文本网页显示：
2 文本段落
- 文本段落标签是
文本
- 每个文本段落元素（
文本
）都会自动换行，表示不同的段落 - 如果文本段落中写了两行文字，在网页显示的时候不会换行，而是在两行的文字中间多加了一个空格
代码示例：
123456789 abcdefghi 都在一行显示，只是多了空格
网页显示：
3 换行
换行有两种方式
- 再写一个标签
每次写一对段落文本标签（
文本 ），都会自动换行
- 使用
换行想要在一个文本段落内换行，可以在结尾写上
- 两者换行还是有区别的，再写一个文本标签明显中间的空格比较大（在CSS不参与的情况下）
代码示例：
第一种方法（写多个文本标签）
第一行 第一行
第二行
第三行
第二种方法（使用 \ 换行）
第一行
第二行
第三行网页显示：
4 加粗、斜体、下划线
使用方法：
- 加粗 加粗
- 斜体 斜体
- 下划线 下划线
代码示例：
加粗：这是加粗
斜体：这是斜体
下划线：这是下划线网页显示：
5 插入图片
- src 表示图片的路径或者链接
- width 设置图片宽度
- height 设置图片高度
代码示例：
- 如果不控制长宽
- 如果控制长宽
网页显示：
- 如果不控制长宽
- 如果控制长宽
6 添加链接
- 添加链接 我的主页
- href 设置链接
- target 指定链接页面的打开方式
默认为_self，表示在当前窗口跳转链接
还可写_blank，表示在新窗口跳转链接
代码示例：
当前窗口跳转链接
> 我的主页（在当前窗口中打开链接）新建窗口跳转链接
> 我的主页（在新建窗口中打开链接）网页显示：
将该文件在浏览器打开，显示如下
-
文本提示
当光标放在链接上，但是不点击时：
-
点击第一个链接，会在当前窗口中跳转
-
点击第二个链接，会在新的窗口中跳转
7 容器
基本介绍
有两种容器： 和
- 他们本身并没有任何内容，一般让其他的子元素包含在容器中。
- 作用：用容器将其他子元素包含在内以后，可以一次性对多个元素添加CSS样式，比如直接对容器添加CSS样式（就不用挨个将CSS样式添加到元素上了）
两者区别
- 块级容器
- 默认独占一行，适合布局分组
- 简单点说就是，如果一行内写了多个容器，每个容器都会换行
- 行内容器
- 不换行，用于包裹行内元素或文本
- 简单点说就是，如果一行内写了多个容器，会在一行当中显示
代码示例：
div容器:
显示多行
用户名
邮箱：user@163.com
我在下一行我在下一行span容器:
显示一行
价格：99元（限时优惠） 限购一次
网页显示：
8 列表
列表有两种：有序列表、无序列表
代码示例：
有序列表:
- aaa
- bbb
- ccc
- ddd
- eee
无序列表:
- aaa
- bbb
- ccc
- ddd
- eee
其他序列（多种编号类型之一）:
- aaa
- bbb
- ccc
- ddd
- eee
网页显示：
9 表格
表格标签：
表格
表头单元格（自带加粗） 普通单元格（没有加粗） - 表格头部
- border="1" 边框粗细1（如果不写，则无边框）
- 表格主体
表格的行 表头单元格（自带加粗） 普通单元格（不带加粗） 代码示例：
姓名 性别 学号(不加粗) 小明 男 000001 小红 女 000002 网页显示：
-
无边框
-
加边框
10 class类
基本介绍
- clsss 是HTML元素的分类标识，用来给元素分组（分类标识自由命名）
- 同一个 class 可以分配给多个元素；一个元素可以有多个 class
作用：
- 批量控制样式：通过 CSS 同时修改所有同类元素的样式
- JavaScript 操作：方便用 JS 批量选取或操作同类元素
代码示例：
举例1
举例2
这是重点内容
这是普通内容
举例3
网页显示：
- 块级容器
-
- 添加链接 我的主页
- 如果不控制长宽
- 如果控制长宽
- 如果不控制长宽
- 再写一个标签
- 文本段落标签是
- 段落标签是
