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

article/2025/6/24 11:15:09

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

网页显示：
class类


http://www.hkcw.cn/article/yWKHpPRxuL.shtml

相关文章

吴恩达MCP课程（2）：research_server

吴恩达MCP课程（2）：research_server

目录 代码代码解释导入模块常量定义MCP服务器初始化工具函数定义1. search_papers 函数2. extract_info 函数 主程序总结 运行示例 代码 import arxiv import json import os from typing import List from mcp.server.fastmcp import FastMCPPAPER_DIR "papers"mc…
阅读更多...
【数据结构】——二叉树--链式结构

【数据结构】——二叉树--链式结构

一、实现链式结构二叉树 二叉树的链式结构&#xff0c;那么从名字上我们就知道我们这个二叉树的底层是使用链表来实现的&#xff0c;前面我们的二叉树是通过数组来实现的&#xff0c;那么在其是完全二叉树的情况下&#xff0c;此时我们使用数组来实现就会使得其空间浪费较少&a…
阅读更多...
netty中的EventLoop原理解析

netty中的EventLoop原理解析

一起来学netty 1. EventLoop的基本概念2. EventLoop的核心组件3. EventLoop的工作流程4. EventLoop与Channel的关系5. EventLoop的实现类6. EventLoop的线程模型7. EventLoop的优点8. EventLoop的注意事项9. 示例代码10.异步编程模型解析异步编程的定义异步编程的核心特点异步编…
阅读更多...
使用Java实现简单的计算机案例

使用Java实现简单的计算机案例

第一个案例我决定做一个简单的“简易计算器”&#xff0c;来开启编程之旅。为什么我会选择这个案例来作为第一个Java案例呢&#xff1f;大家可别小看这个小小的计算器&#xff0c;它既简单又实用。通过这个案例&#xff0c;大家可以学会或着练习如何处理用户输入、如何实现基本…
阅读更多...
流媒体基础分析：延迟分析与安全性保障

流媒体基础分析：延迟分析与安全性保障

在流媒体传输过程中&#xff0c;延迟和安全性是两个至关重要的方面。它们直接影响着用户的观看体验和内容的版权保护。本文将深入分析延迟的来源与追赶技术&#xff0c;并探讨流媒体传输的安全性保障手段。 1. 延迟分析 1.1 延迟说明 延迟是流媒体传输中不可避免的问题&#…
阅读更多...
S32K3 工具篇9：如何在无源码情况下灵活调试elf文件

S32K3 工具篇9：如何在无源码情况下灵活调试elf文件

S32K3 工具篇9&#xff1a;如何在无源码情况下灵活调试elf文件 一&#xff0c;文档简介二&#xff0c; 功能实现2.1 代码工具准备2.2 elf修改功能实现&#xff1a;Fun2功能跳过2.2.1 PC越过Fun22.2.2 Fun2替换为nop 2.3 elf修改功能实现&#xff1a;Fun4替换Fun2入口2.3.1 link…
阅读更多...
树莓派PWM控制LED灯

树莓派PWM控制LED灯

目录 一、什么是PWM二、树莓派引脚图三、命令行控制LED灯四、PWM控制LED呼吸灯 一、什么是PWM PWM&#xff08;Pulse Width Modulation&#xff0c;脉冲宽度调制&#xff09;是一种通过调节数字信号的占空比&#xff08;Duty Cycle&#xff09;来模拟模拟信号的技术。它通过快…
阅读更多...
第十四章 MQTT订阅

第十四章 MQTT订阅

系列文章目录 系列文章目录 第一章 总体概述 第二章 在实体机上安装ubuntu 第三章 Windows远程连接ubuntu 第四章 使用Docker安装和运行EMQX 第五章 Docker卸载EMQX 第六章 EMQX客户端MQTTX Desktop的安装与使用 第七章 EMQX客户端MQTTX CLI的安装与使用 第八章 Wireshark工具…
阅读更多...
六.MySQL增删查改

六.MySQL增删查改

CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; 一.增 insert 1.单行数据 全列插入 语法特点&#xff1a;不指定字段名&#xff0c;按表结构字段顺序依次提供所有值。 注意&#xff1a;字段顺序必须与表定义一…
阅读更多...
TKernel模块--自定义RTTI，对象句柄，引用计数

TKernel模块--自定义RTTI，对象句柄，引用计数

TKernel模块–RTTI&#xff0c;对象句柄&#xff0c;引用计数 1.DEFINE_STANDARD_HANDLE(x1, x2) #define DEFINE_STANDARD_HANDLE(C1,C2) DEFINE_STANDARD_HANDLECLASS(C1,C2,Standard_Transient)其中&#xff1a; #define DEFINE_STANDARD_HANDLECLASS(C1,C2,BC) class C1…
阅读更多...
关于TongWeb数据源兼容mysql驱动的注意事项

关于TongWeb数据源兼容mysql驱动的注意事项

问题现象&#xff1a; TongWeb数据源在采用mysql驱动的国产数据库时&#xff0c;因数据库慢报超时为数据源配置参数的 validation-query-timeout值5秒&#xff0c;而不是期望的maxwait、connectiontimeout值。 The last packet successfully received from the server was 5,0…
阅读更多...
CSS专题之水平垂直居中

CSS专题之水平垂直居中

前言 石匠敲击石头的第 16 次 在日常开发中&#xff0c;经常会遇到水平垂直居中的布局&#xff0c;虽然现在基本上都用 Flex 可以轻松实现&#xff0c;但是在某些无法使用 Flex 的情况下&#xff0c;又应该如何让元素水平垂直居中呢&#xff1f;这也是一道面试的必考题&#xf…
阅读更多...
（新）MQ高级-MQ的可靠性

（新）MQ高级-MQ的可靠性

消息到达MQ以后&#xff0c;如果MQ不能及时保存&#xff0c;也会导致消息丢失&#xff0c;所以MQ的可靠性也非常重要。 一、数据持久化 为了提升性能&#xff0c;默认情况下MQ的数据都是在内存存储的临时数据&#xff0c;重启后就会消失。为了保证数据的可靠性&#xff0c;必须…
阅读更多...
Microsoft Word使用技巧分享（本科毕业论文版）

Microsoft Word使用技巧分享（本科毕业论文版）

小铃铛最近终于完成了毕业答辩后空闲下来了&#xff0c;但是由于学校没有给出准确地参考模板&#xff0c;相信诸位朋友们也在调整排版时感到头疼&#xff0c;接下来小铃铛就自己使用到的一些排版技巧分享给大家。 注&#xff1a;以下某些设置是根据哈尔滨工业大学&#xff08;威…
阅读更多...
Linux 基础IO（上）

Linux 基础IO（上）

目录 前言 重谈文件 文件操作 1.打开和关闭 2.对文件打开之后操作 理解文件fd 1.文件fd的分配规则与重定向 2.理解shell中的重定向 3.关于Linux下一切皆文件 关于缓冲区 1.为什么要有缓冲区 2.缓冲区刷新策略的问题 3.缓冲区的位置 前言 本篇到了我们linux中的文件…
阅读更多...
单板机8088C语言计划

单板机8088C语言计划

计划将原来用汇编写的小程序&#xff0c;用C语言重新写一遍 计划2个月能完成 然后再试试&#xff0c;能不能用C写一下固件BootLoad 和一个类似Dos时代的Debug调试器
阅读更多...
C++11 语法特性一文详解

C++11 语法特性一文详解

文章目录 1. C11 的发展史2. 列表初始化2.1 C98 中使用 {} 的初始化2.2 C11 中使用 {} 进行初始化2.3 std::initializer_list &#xff08;初始化列表&#xff09; 3. 右值引用与移动语义3.1 左值与右值3.1.1 右值分类 3.2 左值引用与右值引用3.2.1 const 左值引用为什么可以绑…
阅读更多...
linux基础

linux基础

参考视频 文章目录 1.网络的三种链接方式2. 目录结构详解3. 远程登陆和远程文件传输4. vi和vim4.1 vi和vim的三种模式4.2 vim快捷键 5. 关机重启和登录注销5.1 关机重启5.2 登录注销 6. 用户管理6.1 添加和删除用户6.2 用户信息6.3 用户组 7. 实用指令7.1 运行级别7.2 找回root…
阅读更多...
【MLLM】多模态LLM 2025上半年技术发展（Better、Faster、Stronger）

【MLLM】多模态LLM 2025上半年技术发展（Better、Faster、Stronger）

note 文章目录 note一、新模型趋势任意模态模型推理模型小巧但功能强大的模型专家混合解码器视觉-语言-行动模型 VLA 二、特殊能力视觉语言模型中的目标检测、分割和计数多模态安全模型多模态RAG&#xff1a;检索器和重排器 三、多模态代理四、视频语言模型五、视觉语言模型的新…
阅读更多...
python从零开始实现四极场离子轨迹仿真——框架

python从零开始实现四极场离子轨迹仿真——框架

本篇将主要讲解程序的框架部分。 该程序主要分为三个部分&#xff0c;首先是初始化部分&#xff0c;主要为设置离子质荷比、初始位置、速度。 其次为求解轨迹部分&#xff0c;通过离子位置获取对应位置的电场&#xff0c;并经由空间电荷效应修改电场后&#xff0c;通过数值求解…
阅读更多...
推荐文章

Copyright @ 2022~2023