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

- 第 102 篇 -
Date: 2025 - 05 - 31
Author: 郑龙浩/仟墨

文章目录

[HTML 基础学习](#HTML 基础学习)
[一了解HTML](#一了解HTML)
[二 HTML的结构](#二 HTML的结构)
[三 HTML标签](#三 HTML标签)
- [1 标题](#1 标题)
- [2 文本段落](#2 文本段落)
- [3 换行](#3 换行)
- [4 加粗、斜体、下划线](#4 加粗、斜体、下划线)
- [5 插入图片](#5 插入图片)
- [6 添加链接](#6 添加链接)
- [7 容器](#7 容器)
- [8 列表](#8 列表)
- [9 表格](#9 表格)
- [10 class类](#10 class类)

HTML 基础学习

一了解HTML

一个网页分为为三部分：

HTML：定义网页的结构和信息
CSS：定义网页的样式
JavaScript：定义用户和网页交互逻辑

而爬虫的时候，最关心的是网页上的信息，也就是最关心的是HTML

二 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![HTML示例](https://i-blog.csdnimg.cn/direct/70b18d88117b42b1a02745fa62ed81d2.png)

解释：

html 复制代码

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

必须要写

html 复制代码

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

HTML起始标签、闭合标签、他们之间的内容，加起来是一个HTML元素

HTML标签是HTML文档的根，其他的元素必须放在 这个HTML元素里边

html 复制代码

<body>
	...
<body>

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

html 复制代码

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

上面代码表示的是一级标题到六级标题，最多为六级，加入说写了七级标签<h7>默认为普通文本</h7>，那么中间的内容默认为普通文本，而非标题

如果没有CSS的参与，从以及标题到六级标题，文字的大小是依次递减的

因为标写在了body起始与闭合标签里边，所以这些标题元素都是body的子元素

而h标题元素和p元素位于同一层级，所以他们的级别是相同的

html 复制代码

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

因为标写在了body起始与闭合标签里边，所以这些标题元素都是body的子元素

而h标题元素和p元素位于同一层级，所以他们的级别是相同的

虽然在p标签中写了两行文字，但是在网页显示的时候，中间其实只有一个空格 ，如果想换行，需要加<br>

因为第二行结尾写了<br>，所以第三行的内容在下一行

三 HTML标签

1 标题

段落标签是 <h1>一级标题</h1>

有六个级别的标题，从h1到h6，数字越小，级别越高，如果没有CSS的参与，默认高级别的标题比低级别的标题字号要大

只有6种标题 ，没有级别为7的标题，如果写了级别为7的标题，也只是以普通文本的形式显示

代码示例：

html 复制代码

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

网页显示：

2 文本段落

文本段落标签是 <p>文本</p>

每个文本段落元素（ <p>文本</p>）都会自动换行，表示不同的段落

如果文本段落中写了两行文字，在网页显示的时候不会换行，而是在两行的文字中间多加了一个空格

代码示例：

html 复制代码

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

网页显示：

3 换行

换行有两种方式

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

代码示例：

html 复制代码

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

<h1>第二种方法（使用 \<br\> 换行）</h1>
<p>
    第一行<br>第二行<br>第三行
</p>

网页显示：

4 加粗、斜体、下划线

使用方法：

加粗 <b>加粗</b>

斜体 <i>斜体</i>

下划线 <u>下划线</u>

代码示例：

html 复制代码

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

网页显示：

5 插入图片

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

src 表示图片的路径或者链接

width 设置图片宽度

height 设置图片高度

代码示例：

如果不控制长宽

html 复制代码

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

如果控制长宽

html 复制代码

<p>
    <img
    src=https://i-blog.csdnimg.cn/direct/77052f9b73644c2c99a3339706d72b2f.png
    width="5000px"
    height="2000px"
    >
</p>

网页显示：

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

6 添加链接

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

href 设置链接

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

代码示例：

html 复制代码

<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>容器，会在一行当中显示

代码示例：

html 复制代码

<!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 列表

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

代码示例：

html 复制代码

<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>

html 复制代码

<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> 普通单元格（不带加粗）

代码示例：

html 复制代码

<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 批量选取或操作同类元素

代码示例：

html 复制代码

<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">

网页显示：

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

文章目录