【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代码：
<!DOCTYPE html> <!-- 告知浏览器这个文件类型是HTML -->
<html> <!-- 起始标签，表示开始 --><body><h1>一级标题</h1><p>这是第一段话这是第二段话<br>这是第三段话（换行了）</p><h2>二级标题</h2><h3>三级标题</h3><h6>六级标题</h6></body>
</html> <!-- 闭合标签，表示结束 -->
网页显示
解释：
<!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">
网页显示：
相关文章：
【HTML】基础学习【数据分析全栈攻略：爬虫+处理+可视化+报告】
- 第 102 篇 - Date: 2025 - 05 - 31 Author: 郑龙浩/仟墨 文章目录 HTML 基础学习一 了解HTML二 HTML的结构三 HTML标签1 标题2 文本段落3 换行4 加粗、斜体、下划线5 插入图片6 添加链接7 容器8 列表9 表格10 class类 HTML 基础学习 一 了解HTML 一个网页分为为三部分&…...
SAP Business ByDesign：无锡哲讯科技赋能中大型企业云端数字化转型
云端ERP时代，中大型企业的智能化引擎 在数字经济高速发展的今天，中大型企业面临着全球化竞争、供应链复杂化、数据安全等多重挑战。传统的本地化ERP系统已无法满足企业快速响应市场变化的需求，而SAP Business ByDesign（ByD&…...
华为OD机考2025B卷 - 无向图染色（Java Python JS C++ C ）
最新华为OD机试 真题目录：点击查看目录 华为OD面试真题精选：点击立即查看 题目描述 给一个无向图染色，可以填红黑两种颜色，必须保证相邻两个节点不能同时为红色，输出有多少种不同的染色方案？ 输入描述 第一行输入M(图中节点数) N(边数) 后续N行格式为：V1 V2表示…...
计算机网络学习20250528
地址解析协议ARP 实现IP地址和Mac地址的转换 ARP工作原理： 每台主机或路由器都有一个ARP表，表项：<IP地址，Mac地址，TTL>（TTL一般为20分钟） 主机产生ARP查询分组，包含源目的IP地…...
Next.js路由导航完全指南
在前端框架（如 React、Vue 等）或移动端开发中，路由系统是实现页面 / 界面导航的核心机制。Next.js 采用 文件系统路由（File System Routing），即根据项目目录结构自动生成路由。 Next.js 目前有两套路由解决…...
五、web安全--XSS漏洞（1）--XSS漏洞利用全过程
本文章仅供学习交流，如作他用所承受的法律责任一概与作者无关1、XSS漏洞利用全过程 1.1 寻找注入点：攻击者首先需要找到目标网站中可能存在XSS漏洞的注入点。这些注入点通常出现在用户输入能够直接输出到页面，且没有经过适当过滤或编码的地方…...
【C++高级主题】命令空间(六)：重载与命名空间
目录 一、候选函数与命名空间：重载的 “搜索范围” 1.1 重载集的构成规则 1.2 命名空间对候选函数的隔离 二、重载与using声明：精准引入单个函数 2.1 using声明与重载的结合 2.2 using声明的冲突处理 三、重载与using指示：批量引入命名…...
利用 Python 爬虫获取淘宝商品详情
在电商领域，淘宝作为中国最大的在线零售平台，拥有海量的商品信息。对于开发者、市场分析师以及电商研究者来说，能够从淘宝获取商品详情信息，对于市场分析、价格比较、商品推荐等应用场景具有重要价值。本文将详细介绍如何使用 Pyt…...
动态拼接内容
服务器端模板引擎（Server-Side Template Engine） 的特性，比如 JSP（Java Server Pages）、ASP.NET、PHP 等技术中常用的 <% %> 语法。 它的核心作用是： 动态拼接内容：在 HTML 中嵌入编程语…...
Tomcat运行比较卡顿进行参数调优
在Tomcat conf/catalina.bat或catalina.sh中 的最上面增加参数 1. 初步调整参数（缓解问题） set JAVA_OPTS -Xms6g -Xmx6g -Xmn3g # 增大新生代，减少对象过早晋升到老年代 -XX:MetaspaceSize256m -XX:MaxMetaspaceS…...
java直接获取MyBatis将要执行的动态sql命令（不是拦截器方式）
目录 前言 一. 准备数据 1. 传输过来的json条件数据 2. mybatis 配置的动态sql 3. 想要的最终会执行的sql并返回给页面展示 二. 实现方式 三. 最终代码 前言 1.在平常开发过程中，MyBatis使用时非常多的，一般情况下我们只需要在控制台看看MyBatis输出的日志，要不就是实…...
C++四种类型转换方式
const_cast,去掉（指针或引用）常量属性的一个类型转换,但需要保持转换前后类型一致static_cast,提供编译器认为安全的类型转换(最常使用)reinterpret_cast,类似于c语言风格的强制类型转换，不保证安全;dynamic_cast,主要用于继承结构中…...
Canvas: trying to draw too large(256032000bytes) bitmap.
1、错误展示 测试了一下一张图片的显示，发现二个手机上测试的结果不一样，配制好一些的手机，直接就通过，但是屏小一些的测试手机上，直接报下面的错误。 这个意思是图片太大了，直接就崩了。 2、代码编写 lo…...
【深度学习-pytorch篇】5. 卷积神经网络与LLaMA分类模型
卷积神经网络与LLaMA分类模型 一、卷积操作基础 卷积是深度学习中用于提取局部特征的核心操作，特别适用于图像识别任务。 自定义二维卷积函数示例 以下函数实现了一个简化版的二维卷积： def convolve2D(image, kernel, padding0, strides1):kernel …...
matlab全息技术中的菲涅尔仿真成像
matlab全息技术中的菲涅尔仿真成像程序。 傅里叶法（重建距离得大）/Fresnel.m , 545 傅里叶法（重建距离得大）/FresnelB.m , 548 傅里叶法（重建距离得大）/Fresnel_solution.m , 1643 傅里叶法（重…...
基于对比学习的推荐系统开发方案，使用Python在PyCharm中实现
以下是一个基于对比学习的推荐系统开发方案，使用Python在PyCharm中实现。本文将详细阐述技术原理、系统设计和完整代码实现。 基于对比学习的推荐系统开发方案 一、技术背景与原理 1.1 对比学习核心思想 对比学习（Contrastive Learning）通过最大化正样本相似度、最小化负…...
网络协议之办公室网络是怎样的？
写在前面 本文来看下办公室网络怎样的。 1：正文 如果是在一个寝室中组件一个局域网还是比较简单的，只需要一个交换机，然后大家的电脑全部连接到这个交换机上就行了，之后所有的电脑设置CIDR保证在一个局域网就可以了。但是&#…...
鸿蒙OSUniApp PWA开发实践：打造跨平台渐进式应用#三方框架 #Uniapp
UniApp PWA开发实践：打造跨平台渐进式应用 前言 在过去的一年里，我们团队一直在探索如何利用UniApp框架开发高性能的PWA应用。特别是随着鸿蒙系统的普及，我们积累了不少有价值的实践经验。本文将分享我们在开发过程中的技术选型、架构设计和…...
uni-data-picker级联选择器、fastadmin后端api
记录一个部门及部门人员选择的功能，效果如下： 组件用到了uni-ui的级联选择uni-data-picker 开发文档：uni-app官网 组件要求的数据格式如下： 后端使用的是fastadmin，需要用到fastadmin自带的tree类生成部门树 &#x…...
8天Python从入门到精通【itheima】-62~63
目录 第六章开始-62节-数据容器入门 1.学习目标 2.为什么要学习数据容器？ 3.什么是Python中的数据容器 4.小节总结 63节-列表的定义语法 1.学习目标 2.为什么需要列表？ 3.列表定义的基本语法 4.列表定义的基本语法-案例演示 5.列表定义的基本语…...
运维 pgsql 安装完后某次启动不了
pgsql 安装完后某次启动不了 错误 data directory "/usr/local/postgresql/data" has invalid permissions 安装成功后一直可以 后面同事敲了 chmod -R 777 /usr/local 导致不行 改到了 /usr/local/postgresql/data 权限 /usr/local/postgresql/data的权限有限…...
Linux基本指令/下
目录 1.echo、cat与printf 2. > 操作符 与 >> 操作符 3. < 操作符 4.消息传送 linux文件深入 5.文件类型 6.mv命令 7.时间相关指令 8.查找命令 9.grep命令 10.zip/unzip/tar命令 11.scp命令 12.bc命令 13.uname 指令 14.快捷键大全 15.关机/重启/睡…...
matlab中绘图函数plot
MATLAB中的plot函数：数据可视化的强大工具 引言 在科学计算和工程领域，数据可视化是理解和分析数据的关键步骤。MATLAB作为一款强大的数值计算软件，提供了丰富的绘图功能，其中plot函数是最基础、最常用的二维图形绘制工具。本文…...
在线音乐服务器测试报告
1.项目背景 此项目主要用于模拟市面上主流的音乐软件的主要功能，提高自己的开发和测试能力。此项目采用的技术栈是SpringBoot MyBatis SpringMVC Mysql实现的，为了实现简单，方便测试，此项目没有注册功能，数据提前存…...
spark-AQE/Tungsten介绍及其触发条件
目录 1、简介2、AQE（自适应查询优化）触发条件及配置3、Tungsten（钨丝计划）触发条件及配置1、简介 AQE（Adaptive Query Execution） 定义：Spark 3.0引入的自适应查询优化技术，运行时动态调整执行计划。核心能力： 动态分区合并：自动合并小分区以减少Shuffle数据量。自动…...
leetcode-hot-100 (矩阵）
1、矩阵置零 题目链接：矩阵置零 题目描述：给定一个 m x n 的矩阵，如果一个元素为 0 ，则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 解答 方法一：使用一个二维数组 这是我看到这道题目的第一个想法&am…...
深度学习中常见的超参数对系统的影响
目录 一，学习率（Learning Rate） 1.1 学习率的本质：控制模型 “学习步伐” 的核心参数 1.2 学习率高低的具体影响：过犹不及的典型后果 1.3 学习率调整策略：3 个实用技巧 二，批次大小&#x…...
评标专家系统随机抽选 开发 Excel 中使用东方仙盟软件助理——未来之窗——仙盟创梦IDE
评标专家抽取系统是针对建设项目与采购招投标，从专家库中随机抽取参与评标专家，并自动进行语音通知的管理软件。符合《中华人民共和国招标投标法》及发改委颁布的《评标专家和评标专家库管理暂行办法》；操作简便、保密性强。 软件根据设定抽取…...
MySQL、PostgreSQL、Oracle 区别详解
MySQL、PostgreSQL、Oracle 区别详解 一、基础架构对比 1.1 数据库类型 MySQL：关系型数据库（支持NoSQL插件如MySQL Document Store）PostgreSQL：对象-关系型数据库（支持JSON等半结构化数据）Oracle：多模型数据库（关系型+文档+图+空间等）关键结论：PostgreSQL在数据类型…...
【第4章 图像与视频】4.6 结合剪辑区域来绘制图像
文章目录 前言示例 前言 本节将综合运用图像处理、离屏 canvas 以及剪辑区域等技术实现墨镜效果。 示例 主线程代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport&qu…...