- 第 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.pswp.cn/news/907719.shtml
繁体地址，请注明出处：http://hk.pswp.cn/news/907719.shtml
英文地址，请注明出处：http://en.pswp.cn/news/907719.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ansible中的inventory.ini 文件详解

ansible中的inventory.ini 文件详解

1. 主机定义 主机是 Ansible 管理的最小单元&#xff0c;可以是 IP 或域名&#xff0c;支持直接定义或附加参数。 基础语法 # 直接定义主机&#xff08;IP 或域名&#xff09; 192.168.1.10 example.com# 定义主机并指定连接参数&#xff08;如端口、用户等&#xff09; web…
阅读更多...
SpringBoot整合MyBatis完整实践指南

SpringBoot整合MyBatis完整实践指南

在Java企业级应用开发中&#xff0c;SpringBoot和MyBatis的组合已经成为主流的技术选型方案之一。本文将详细介绍如何从零开始搭建一个基于SpringBoot和MyBatis的项目&#xff0c;包括环境配置、数据库设计、实体类创建、Mapper接口编写以及实际应用等完整流程。 一、环境准备…
阅读更多...
【Rust 轻松构建轻量级多端桌面应用】

【Rust 轻松构建轻量级多端桌面应用】

使用 Tauri 框架构建跨平台应用 Tauri 是一个基于 Rust 的轻量级框架&#xff0c;可替代 Electron&#xff0c;用于构建高性能、低资源占用的桌面应用。其核心优势在于利用系统原生 WebView 而非捆绑 Chromium&#xff0c;显著减小应用体积。 安装 Tauri 需要先配置 Rust 环境…
阅读更多...
【Linux】shell脚本的常用命令

【Linux】shell脚本的常用命令

目录 简介 一.设置主机名称 1.1通过文件修改 1.2通过命令修改 二.网络管理命令nmcli 2.1查看网卡 2.2设置网卡 三.简单处理字符 3.1seq打印连续字符 3.2printf,echo打印字符 3.3sort排序 3.4uniq冗余处理 3.5cut对字符的截取 四.xargs输入转参 简介 以下命令都是…
阅读更多...
解决访问网站提示“405 很抱歉，由于您访问的URL有可能对网站造成安全威胁，您的访问被阻断”问题

解决访问网站提示“405 很抱歉，由于您访问的URL有可能对网站造成安全威胁，您的访问被阻断”问题

一、问题描述 本来前几天都可以正常访问的网站&#xff0c;但是今天当我们访问网站的时候会显示“405 很抱歉&#xff0c;由于您访问的URL有可能对网站造成安全威胁&#xff0c;您的访问被阻断。您的请求ID是&#xff1a;XXXX”&#xff0c;而不能正常的访问网站&#xff0c;如…
阅读更多...
页面输入数据的表格字段（如 Web 表单或表格控件）与后台数据库进行交互时常用的两种方式

页面输入数据的表格字段（如 Web 表单或表格控件）与后台数据库进行交互时常用的两种方式

“从页面输入数据的表格字段（如 Web 表单或表格控件）在与后台数据库进行交互时，常用的有两种方式：” 🎯 两种方式（操作调用数据库、绑定数据） 🚀 方式1：前端代码提交数据到后端，再由后端调用数据库 💡 原理和逻辑： 用户在页面上（比如输入表单、表格）输入数据…
阅读更多...
非阻塞套接字编程详解

非阻塞套接字编程详解

阻塞与非阻塞套接字对比 传统阻塞式套接字编程使用ServerSocket和Socket类时，关键方法如connect()、accept()、read()、write()都会导致调用线程阻塞，直到操作完成。这种模式存在两个主要问题： 客户端线程在等待数据时会被完全阻塞服务端需要为每个客户端连接创建独立线程，…
阅读更多...
电子电路：初步认识CMOS技术

电子电路：初步认识CMOS技术

CMOS&#xff08;Complementary Metal-Oxide-Semiconductor&#xff0c;互补金属氧化物半导体&#xff09;是一种半导体技术&#xff0c;广泛应用于集成电路&#xff08;IC&#xff09;的设计和制造中。以下是关于CMOS的详细说明&#xff1a; 1. 基本概念 技术原理&#xff1a…
阅读更多...
【11408学习记录】考研英语写作提分秘籍：2013真题邀请信精讲+万能模板套用技巧

【11408学习记录】考研英语写作提分秘籍：2013真题邀请信精讲+万能模板套用技巧

邀请信 英语写作2013年考研英语&#xff08;一&#xff09;真题小作文题目分析写作思路第一段&#xff1a;第二段&#xff1a;锦囊妙句1&#xff1a;锦囊妙句2&#xff1a;锦囊妙句3&#xff1a;锦囊妙句5&#xff1a;锦囊妙句6&#xff1a;锦囊妙句9&#xff1a;锦囊妙句14&am…
阅读更多...
Java 注解与反射（超详细！！！）

Java 注解与反射（超详细！！！）

Java 注解与反射&#xff08;超详细&#xff01;&#xff01;&#xff01;&#xff09; 文章目录 Java 注解与反射&#xff08;超详细&#xff01;&#xff01;&#xff01;&#xff09;1.注解1.1内置注解1.1.1 SuppressWarnings注解用法 1.2 元注解1.3自定义注解 2.反射2.1 反…
阅读更多...
用nz-tabel写一个合并表格

用nz-tabel写一个合并表格

用nz-tabel写一个合并表格 <nz-table #basicTable [nzData]"tableSearchStatus.dataList" nzBordered><thead><tr><th>班级</th><th>姓名</th><th>年龄</th><th>电话</th></tr></thead&…
阅读更多...
第6章 放大电路的反馈

第6章 放大电路的反馈

本章基本要求 会判&#xff1a;判断电路中有无反馈及反馈的性质 会算&#xff1a;估算深度负反馈条件下的放大倍数 会引&#xff1a;根据需求引入合适的反馈 会判振消振&#xff1a;判断电路是否能稳定工作&#xff0c;会消除自激振荡。 6.1 反馈的概念及判断 一、反馈的…
阅读更多...
ansible template 文件中如果包含{{}} 等非ansible 变量处理

ansible template 文件中如果包含{{}} 等非ansible 变量处理

在 Ansible 模板中&#xff0c;如果你的 Python 脚本里有大量 {}、f""、或者其他 Jinja 会误解析的语法&#xff0c;就需要用 {% raw %}…{% endraw %} 把它们包起来&#xff0c;只在需要替换变量的那一行单独“放行”。例如&#xff1a; {% raw %} #!/usr/bin/env …
阅读更多...
STM32G4 电机外设篇（一） GPIO+UART

STM32G4 电机外设篇（一） GPIO+UART

目录 一、STM32G4 电机外设篇&#xff08;一&#xff09; GPIOUART1 GPIO1.1 STM32CUBEMX 配置以及Keil代码1.2 代码和实验现象 2 UART2.1 STM32CUBEMX 配置以及Keil代码2.2 代码和实验现象 附学习参考网址欢迎大家有问题评论交流 (* ^ ω ^) 一、STM32G4 电机外设篇&#xff0…
阅读更多...
Kotlin 中集合遍历有哪几种方式？

Kotlin 中集合遍历有哪几种方式？

1 for-in 循环&#xff08;最常用&#xff09; val list listOf("A", "B", "C") for (item in list) {print("$item ") }// A B C 2 forEach 高阶函数 val list listOf("A", "B", "C") list.forEac…
阅读更多...
尚硅谷redis7 99 springboot整合redis之连接集群

尚硅谷redis7 99 springboot整合redis之连接集群

6381宕机&#xff0c;手动shutdown后在redis中&#xff0c;634自动上位变成master结点。 但是在springboot中却没有动态感知道redisCluster的最新集群消息&#xff0c;所以找不到我们要检索的数据。原因是&#xff1a;SpringBoot 2.X版本,Redis默认的连接池采用 Lettuce&#…
阅读更多...
AI 的早期萌芽？用 Swift 演绎约翰·康威的「生命游戏」

AI 的早期萌芽？用 Swift 演绎约翰·康威的「生命游戏」

文章目录 摘要描述题解答案题解代码分析示例测试及结果时间复杂度空间复杂度总结 摘要 你有没有想过&#xff0c;能不能通过简单的规则模拟出生与死亡&#xff1f;「生命游戏」正是这样一种充满魅力的数学模拟系统。这篇文章我们来聊聊它的规则到底有多神奇&#xff0c;并用 S…
阅读更多...
web ui自动化工具playwright

web ui自动化工具playwright

playwright是微软开源的一款web ui自动化工具&#xff0c;该工具有很多亮点&#xff0c;解决以前困扰web UI自动化测试的很多难点。这篇博客将介绍playwright主要特点。 playwright支持录制减少了编写成本 如果要使用playwright的录制功能&#xff0c;有两种途径&#xff0c;途…
阅读更多...
移动安全Android——客户端静态安全

移动安全Android——客户端静态安全

一、反编译保护 测试工具 Jadx GitHub - skylot/jadx: Dex to Java decompiler PKID [下载]PKID-APP查壳工具-Android安全-看雪-安全社区|安全招聘|kanxue.com 测试流程 &#xff08;1&#xff09;通过Jadx对客户端APK文件进行反编译&#xff0c;观察是否进行代码混淆 &…
阅读更多...
04-redis-分布式锁-edisson

04-redis-分布式锁-edisson

1 基本概念 百度百科&#xff1a;控制分布式系统之间同步访问共享资源方式。 在分布式系统中&#xff0c;常常需要协调他们的动作。如果不同的系统或是同一个系统的不同主机之间共享了一个或一组资源&#xff0c;那么访问这些资源的时候&#xff0c;往往需要互斥来防止…
阅读更多...
最新文章

Copyright @ 2022~2023