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

发布于：2025-06-01 ⋅ 阅读:(27) ⋅ 点赞:(0)

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

文章目录

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.pngHTML示例

解释：

<!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>
    123456789
    abcdefghi
    都在一行显示，只是多了空格
</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>
    <img
    src=https://i-blog.csdnimg.cn/direct/77052f9b73644c2c99a3339706d72b2f.png
    >
</p>
  • 如果控制长宽
<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，表示在新窗口跳转链接

代码示例：

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

网页显示：
class类

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布