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

news2025/7/21 22:25:43

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2395769.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Next.js路由导航完全指南

Next.js路由导航完全指南

在前端框架&#xff08;如 React、Vue 等&#xff09;或移动端开发中&#xff0c;路由系统是实现页面 / 界面导航的核心机制。Next.js 采用 文件系统路由&#xff08;File System Routing&#xff09;&#xff0c;即根据项目目录结构自动生成路由。 Next.js 目前有两套路由解决…
阅读更多...
五、web安全--XSS漏洞（1）--XSS漏洞利用全过程

五、web安全--XSS漏洞（1）--XSS漏洞利用全过程

本文章仅供学习交流&#xff0c;如作他用所承受的法律责任一概与作者无关1、XSS漏洞利用全过程 1.1 寻找注入点&#xff1a;攻击者首先需要找到目标网站中可能存在XSS漏洞的注入点。这些注入点通常出现在用户输入能够直接输出到页面&#xff0c;且没有经过适当过滤或编码的地方…
阅读更多...
【C++高级主题】命令空间(六)：重载与命名空间

【C++高级主题】命令空间(六)：重载与命名空间

目录 一、候选函数与命名空间&#xff1a;重载的 “搜索范围” 1.1 重载集的构成规则 1.2 命名空间对候选函数的隔离 二、重载与using声明&#xff1a;精准引入单个函数 2.1 using声明与重载的结合 2.2 using声明的冲突处理 三、重载与using指示&#xff1a;批量引入命名…
阅读更多...
Tomcat运行比较卡顿进行参数调优

Tomcat运行比较卡顿进行参数调优

在Tomcat conf/catalina.bat或catalina.sh中 的最上面增加参数 1. 初步调整参数&#xff08;缓解问题&#xff09; set JAVA_OPTS -Xms6g -Xmx6g -Xmn3g # 增大新生代&#xff0c;减少对象过早晋升到老年代 -XX:MetaspaceSize256m -XX:MaxMetaspaceS…
阅读更多...
C++四种类型转换方式

C++四种类型转换方式

const_cast,去掉&#xff08;指针或引用&#xff09;常量属性的一个类型转换,但需要保持转换前后类型一致static_cast,提供编译器认为安全的类型转换(最常使用)reinterpret_cast,类似于c语言风格的强制类型转换&#xff0c;不保证安全;dynamic_cast,主要用于继承结构中&#xf…
阅读更多...
Canvas: trying to draw too large(256032000bytes) bitmap.

Canvas: trying to draw too large(256032000bytes) bitmap.

1、错误展示 测试了一下一张图片的显示&#xff0c;发现二个手机上测试的结果不一样&#xff0c;配制好一些的手机&#xff0c;直接就通过&#xff0c;但是屏小一些的测试手机上&#xff0c;直接报下面的错误。 这个意思是图片太大了&#xff0c;直接就崩了。 2、代码编写 lo…
阅读更多...
网络协议之办公室网络是怎样的？

网络协议之办公室网络是怎样的？

写在前面 本文来看下办公室网络怎样的。 1&#xff1a;正文 如果是在一个寝室中组件一个局域网还是比较简单的&#xff0c;只需要一个交换机&#xff0c;然后大家的电脑全部连接到这个交换机上就行了&#xff0c;之后所有的电脑设置CIDR保证在一个局域网就可以了。但是&#…
阅读更多...
uni-data-picker级联选择器、fastadmin后端api

uni-data-picker级联选择器、fastadmin后端api

记录一个部门及部门人员选择的功能&#xff0c;效果如下&#xff1a; 组件用到了uni-ui的级联选择uni-data-picker 开发文档&#xff1a;uni-app官网 组件要求的数据格式如下&#xff1a; 后端使用的是fastadmin&#xff0c;需要用到fastadmin自带的tree类生成部门树 &#x…
阅读更多...
8天Python从入门到精通【itheima】-62~63

8天Python从入门到精通【itheima】-62~63

目录 第六章开始-62节-数据容器入门 1.学习目标 2.为什么要学习数据容器&#xff1f; 3.什么是Python中的数据容器 4.小节总结 63节-列表的定义语法 1.学习目标 2.为什么需要列表&#xff1f; 3.列表定义的基本语法 4.列表定义的基本语法-案例演示 5.列表定义的基本语…
阅读更多...
Linux基本指令/下

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函数&#xff1a;数据可视化的强大工具 引言 在科学计算和工程领域&#xff0c;数据可视化是理解和分析数据的关键步骤。MATLAB作为一款强大的数值计算软件&#xff0c;提供了丰富的绘图功能&#xff0c;其中plot函数是最基础、最常用的二维图形绘制工具。本文…
阅读更多...
在线音乐服务器测试报告

在线音乐服务器测试报告

1.项目背景 此项目主要用于模拟市面上主流的音乐软件的主要功能&#xff0c;提高自己的开发和测试能力。此项目采用的技术栈是SpringBoot MyBatis SpringMVC Mysql实现的&#xff0c;为了实现简单&#xff0c;方便测试&#xff0c;此项目没有注册功能&#xff0c;数据提前存…
阅读更多...
leetcode-hot-100 (矩阵）

leetcode-hot-100 (矩阵）

1、矩阵置零 题目链接&#xff1a;矩阵置零 题目描述&#xff1a;给定一个 m x n 的矩阵&#xff0c;如果一个元素为 0 &#xff0c;则将其所在行和列的所有元素都设为 0 。请使用 原地 算法。 解答 方法一&#xff1a;使用一个二维数组 这是我看到这道题目的第一个想法&am…
阅读更多...
评标专家系统随机抽选 开发 Excel 中使用东方仙盟软件助理——未来之窗——仙盟创梦IDE

评标专家系统随机抽选 开发 Excel 中使用东方仙盟软件助理——未来之窗——仙盟创梦IDE

评标专家抽取系统是针对建设项目与采购招投标&#xff0c;从专家库中随机抽取参与评标专家&#xff0c;并自动进行语音通知的管理软件。符合《中华人民共和国招标投标法》及发改委颁布的《评标专家和评标专家库管理暂行办法》&#xff1b;操作简便、保密性强。 软件根据设定抽取…
阅读更多...
【第4章 图像与视频】4.6 结合剪辑区域来绘制图像

【第4章 图像与视频】4.6 结合剪辑区域来绘制图像

文章目录 前言示例 前言 本节将综合运用图像处理、离屏 canvas 以及剪辑区域等技术实现墨镜效果。 示例 主线程代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport&qu…
阅读更多...
【Linux】Linux文件系统详解

【Linux】Linux文件系统详解

目录 Linux系统简介 Linux常见发行版&#xff1a; Linux/windows文件系统区别 Linux文件系统各个目录用途 Linux系统核心文件 系统核心配置文件 用户与环境配置文件 系统运行与日志文件 Linux文件名颜色含义 Linux文件关键信息解析 &#x1f525;个人主页 &#x1f52…
阅读更多...
IDEA使用Git进行commit提交到本地git空间后撤回到commit版本之前

IDEA使用Git进行commit提交到本地git空间后撤回到commit版本之前

一、前言 Git作为最流行和最全面的版本控制工具&#xff0c;非常好用&#xff0c;但是操作也会比SVN复杂一些。毕竟有得有失嘛&#xff0c;所以我选择Git&#xff0c;最近在工作中&#xff0c;一不小心吧一些无关紧要的文件commit了。还好在Push之前看到&#xff0c;不过就算P…
阅读更多...
LangChain完全指南：从入门到精通，打造AI应用开发新范式

LangChain完全指南：从入门到精通，打造AI应用开发新范式

目录 1. 引言2. LangChain 框架概述3. 架构设计与模块划分4. 核心原理深度解析5. 工作流程与执行过程6. 扩展与定制7. 性能优化策略8. 实际应用案例9. 常见问题与解决方案10. 未来发展与展望11. 总结12. 参考文献与资源 1. 引言 1.1 LangChain 简介 LangChain 是一个开源的…
阅读更多...
VS Code / Cursor 将默认终端设置为 CMD 完整指南

VS Code / Cursor 将默认终端设置为 CMD 完整指南

文章目录 &#x1f9ed; 适用范围&#x1f4cc; 背景与问题分析&#x1f6e0; 配置步骤1. 打开设置&#xff08;settings.json&#xff09;2. 添加或更新配置3. 重启终端与编辑器 &#x1f4a1; 补充&#xff1a;支持多个终端配置&#x1f9ef; 常见问题排查✅ 总结 在 Windows…
阅读更多...
mybatis plus的源码无法在idea里 “download source“

mybatis plus的源码无法在idea里 “download source“

下载不了源码 如下&#xff1a; Souces not found for com.baomidou:mybatis-plus-extension 解决方案 运行 mvn dependency:resolve -Dclassifiersources 不知道啥作用&#xff0c;总之对我管用&#xff0c;在项目根目录运行即可&#xff0c;即根pom.xml的位置。
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023