当前位置：首页 > news >正文

【HTML】基础学习【数据分析全栈攻略：爬虫+处理+可视化+报告】

news 来源：原创 2025/6/2 17:55:05

- 第 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代码：

<!DOCTYPE html> <!-- 告知浏览器这个文件类型是HTML -->
<html> <!-- 起始标签，表示开始 --><body><h1>一级标题</h1><p>这是第一段话这是第二段话<br>这是第三段话（换行了）</p><h2>二级标题</h2><h3>三级标题</h3><h6>六级标题</h6></body>
</html> <!-- 闭合标签，表示结束 -->

网页显示
![HTML示例1](https://i-blog.csdnimg.cn/direct/163e84f17f5846db9a955c7c596ae0c6.png

解释：

<!DOCTYPE HTML> <!-- 告知浏览器这个文件类型是HTML -->

必须要写

<html> <!-- HTML起始标签，表示开始 -->...
</html> <!-- HTML闭合标签，表示结束 -->

HTML起始标签、闭合标签、他们之间的内容，加起来是一个HTML元素
HTML标签是HTML文档的根，其他的元素必须放在这个HTML元素里边

<body>...
<body>

<body> 与 <body> 以及之间的内容加起来是文档的主体内容

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h6>六级标题</h6>

上面代码表示的是一级标题到六级标题，最多为六级，加入说写了七级标签<h7>默认为普通文本</h7>，那么中间的内容默认为普通文本，而非标题
如果没有CSS的参与，从以及标题到六级标题，文字的大小是依次递减的
因为标写在了body起始与闭合标签里边，所以这些标题元素都是body的子元素
而h标题元素和p元素位于同一层级，所以他们的级别是相同的

<p>这是第一段话这是第二段话<br>这是第三段话（换行了）
</p>

因为标写在了body起始与闭合标签里边，所以这些标题元素都是body的子元素
而h标题元素和p元素位于同一层级，所以他们的级别是相同的
虽然在p标签中写了两行文字，但是在网页显示的时候，中间其实只有一个空格，如果想换行，需要加<br>
因为第二行结尾写了<br>，所以第三行的内容在下一行

三 HTML标签

1 标题

段落标签是 <h1>一级标题</h1>
有六个级别的标题，从h1到h6，数字越小，级别越高，如果没有CSS的参与，默认高级别的标题比低级别的标题字号要大
只有6种标题，没有级别为7的标题，如果写了级别为7的标题，也只是以普通文本的形式显示

代码示例：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h7>普通文本</h7>

网页显示：
标题显示

2 文本段落

文本段落标签是 <p>文本</p>
每个文本段落元素（ <p>文本</p>）都会自动换行，表示不同的段落
如果文本段落中写了两行文字，在网页显示的时候不会换行，而是在两行的文字中间多加了一个空格

代码示例：

<p>123456789abcdefghi都在一行显示，只是多了空格
</p>

网页显示：
文本段落

3 换行

换行有两种方式

再写一个标签

每次写一对段落文本标签（<p>文本<\p> ），都会自动换行
使用 <br>换行

想要在一个文本段落内换行，可以在结尾写上<br>
两者换行还是有区别的，再写一个文本标签明显中间的空格比较大（在CSS不参与的情况下）

代码示例：

<h1>第一种方法（写多个文本标签）</h1>
<p>第一行第一行 <!--（直接写在第二行，在网页中显示的时候不是换行，而是在第一行与第二行之间多了一个空格） -->
</p>
<p>第二行</p>
<p>第三行</p><h1>第二种方法（使用 \<br\> 换行）</h1>
<p>第一行<br>第二行<br>第三行
</p>

网页显示：
换行显示

4 加粗、斜体、下划线

使用方法：

加粗 <b>加粗</b>
斜体 <i>斜体</i>
下划线 <u>下划线</u>

代码示例：

<p>加粗：这是<b>加粗</b><br>斜体：这是<i>斜体</i><br>下划线：这是<u>下划线</u><br>
</p>

网页显示：
加粗斜体下划线

5 插入图片

<img src=图片的路径（或是链接, width="500px", height="400px">

src 表示图片的路径或者链接
width 设置图片宽度
height 设置图片高度

代码示例：

如果不控制长宽

<p><imgsrc=https://i-blog.csdnimg.cn/direct/77052f9b73644c2c99a3339706d72b2f.png>
</p>

如果控制长宽

<p><imgsrc=https://i-blog.csdnimg.cn/direct/77052f9b73644c2c99a3339706d72b2f.pngwidth="5000px"height="2000px">
</p>

网页显示：

如果不控制长宽
如果控制长宽

6 添加链接

添加链接 <a href="URL" target="_self" title=“文本提示”> 我的主页 </a>

href 设置链接
target 指定链接页面的打开方式
默认为_self，表示在当前窗口跳转链接
还可写_blank，表示在新窗口跳转链接

代码示例：

<h1>当前窗口跳转链接</h1>
<a href="https://blog.csdn.net/m0_60605989?ops_request_misc=%7B%22request%5Fid%22%3A%22edf403af96c974cf4fca8118eae2ce05%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=edf403af96c974cf4fca8118eae2ce05&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-142427396-null-null.nonecase&utm_term=%E4%BB%9F%E5%A2%A8&spm=1018.2226.3001.4351" target="_self"title="提示文本">>我的主页（在当前窗口中打开链接）
</a><h1>新建窗口跳转链接</h1>
<a href="https://blog.csdn.net/m0_60605989?ops_request_misc=%7B%22request%5Fid%22%3A%22edf403af96c974cf4fca8118eae2ce05%22%2C%22scm%22%3A%2220140713.130064515..%22%7D&request_id=edf403af96c974cf4fca8118eae2ce05&biz_id=206&utm_medium=distribute.pc_search_result.none-task-user-null-1-142427396-null-null.nonecase&utm_term=%E4%BB%9F%E5%A2%A8&spm=1018.2226.3001.4351" target="_blank"title="提示文本">>我的主页（在新建窗口中打开链接）
</a>

网页显示：
将该文件在浏览器打开，显示如下
跳转链接

文本提示
当光标放在链接上，但是不点击时：
点击第一个链接，会在当前窗口中跳转
点击第二个链接，会在新的窗口中跳转

7 容器

基本介绍
有两种容器：<div> 和 <span>

他们本身并没有任何内容，一般让其他的子元素包含在容器中。
作用：用容器将其他子元素包含在内以后，可以一次性对多个元素添加CSS样式，比如直接对容器添加CSS样式（就不用挨个将CSS样式添加到元素上了）

两者区别

<div> 块级容器
- 默认独占一行，适合布局分组
- 简单点说就是，如果一行内写了多个<div>容器，每个容器都会换行
<span> 行内容器
- 不换行，用于包裹行内元素或文本
- 简单点说就是，如果一行内写了多个<span>容器，会在一行当中显示

代码示例：

<!DOCTYPE html>
<html>
<body><h1>div容器:</h1><p>显示多行</p><div style="background-color: lightblue;"><h3>用户名</h3><p>邮箱：user@163.com</p></div><!-- 一定会换行 --><div style="background-color: lightgreen;">我在下一行</div><div style="background-color: lightyellow;">我在下一行</div><h1>span容器:</h1><p>显示一行</p><p>价格：<span style="background-color: pink;">99元</span>（限时优惠）<!-- 不会换行 --><span style="background-color: lightgray;">限购一次</span></p>
</body>
</html>

网页显示：
两中容器

8 列表

列表有两种：有序列表、无序列表

代码示例：

<h3>有序列表: </h3>
<ol><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ol><h3>无序列表: </h3>
<ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ul><h3>其他序列（多种编号类型之一）: </h3>
<ol type = "A"><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li>
</ol>

网页显示：
三列表

9 表格

表格标签： <table>表格</table>

<table border="1"><thead><tr><th>表头单元格（自带加粗）</th><td>普通单元格（没有加粗）</td></tr></thead><tbody><tr><td></td></tr></tbody>
</table>

<thead> 表格头部
border="1" 边框粗细1（如果不写，则无边框）
<tbody> 表格主体
<tr> 表格的行
<th> 表头单元格（自带加粗）
<td> 普通单元格（不带加粗）

代码示例：

<table border="1"><thead><tr><th>姓名</th><th>性别</th><td>学号(不加粗)</td></tr></thead><tbody><tr><td>小明</td><td>男</td><td>000001</td></tr><tr><td>小红</td><td>女</td><td>000002</td></tr></tbody>
</table>

网页显示：

无边框
加边框

10 class类

基本介绍

clsss 是HTML元素的分类标识，用来给元素分组（分类标识自由命名）
同一个 class 可以分配给多个元素；一个元素可以有多个 class
作用：
批量控制样式：通过 CSS 同时修改所有同类元素的样式
JavaScript 操作：方便用 JS 批量选取或操作同类元素

代码示例：

<h3>举例1</h3>
<ul class="nav"><li class="nav-item active">首页</li><li class="nav-item">产品</li><li class="nav-item">关于</li>
</ul><h3>举例2</h3>
<p class="highlight">这是重点内容</p>
<p class="normal">这是普通内容</p><h3>举例3</h3>
<!-- 圆角图像 -->
<img class="round-img" src="a.jpg" alt="示例图片1">
<!-- 边框图像 -->
<img class="border-img" src="b.jpg" alt="示例图片2">