当前位置： 首页 > article >正文

【视频+图文详解】HTML基础3-html常用标签

article 2026/5/9 9:54:44

图文教程

html常用标签

常用标签

1. 文档结构

  1. <!DOCTYPE html>：声明HTML文档类型。
  2. <html>：定义HTML文档的根元素。
  3. <head>：定义文档头部，包含元数据。
  4. <title>：设置网页标题，浏览器标签页显示。
  5. <body>：定义网页的主体内容。

2. 文本格式化

     1.<h1> ~ <h6>：定义标题，<h1>是最高级，<h6>是最低级。

-注意：标题系列标签有助于浏览器搜索的优化，搜索引擎抓取标题的内容，h1标签的权重最大，但一个页面只能使用一个h1标签，如果使用多个h1标签那么搜索优先级会降低

     2.<p>：定义段落。

     3.<br>：换行。

     4.<strong>：加粗文本，语义上表示强调。

     5.<em>：斜体文本，语义上表示强调。

     6.<b>：加粗文本（只是样式，语义不如<strong>）。

     7.<i>：斜体文本（只是样式，语义不如<em>）。

     8.<u>：下划线文本。

3. 链接与图片

  1. <a>：定义超链接。
  2. <img>：插入图片，需设置 src 属性指向图片地址。
    格式： <img src="hello/ma.jpg" alt="">

-src属性：图片源；

-alt属性：图片替换文本（当图片不显示的时候会显示我们写上去的文本）

注意：hello文件和ma.jpg要放在此源代码文件夹下才会显示出来

<img src="images/1.jpg" title="鸟巢的远景">

其中title属性的作用是设置鼠标悬在图片上时看到的文本

  1. <link>：连接外部资源，通常用于外部样式表。
  2. <meta>：定义网页的元数据，如字符集、描述、关键字等。

4. 列表

  1. <ul>：无序列表。
  2. <ol>：有序列表。
  3. <li>：列表项。
  4. <dl>：定义定义列表。
  5. <dt>：定义定义列表项的标题。
  6. <dd>：定义定义列表项的描述。

5. 表格

  1. <table>：定义表格。
  2. <tr>：定义表格的行。
  3. <td>：定义表格的单元格。
  4. <th>：定义表格头部单元格，通常为加粗居中的文本。
  5. <caption>：定义表格的标题。

相对路径和绝对路径

（还是以上边的图片嵌入为例）

--相对路径：从当前文件或目录的位置出发，指定目标文件或目录的路径。

--绝对路径：从文件系统的根目录开始，完整指定文件或目录的位置路径。

比如相对hello文件夹（文件路径为F:\hello），ma.jpg的相对路径为hello/ma.jpg，ma.jpg的绝对路径为F:\hello\ma.jpg

--html源代码文件：就是包括这行代码的源代码文件

锚点

锚点：HTML中的一种标记，用于在同一页面内或不同页面之间创建可跳转的链接位置。

<a></a>（在指定位置添加一个超级链接）；需要注意的是锚点中的锚和点的使用方法不同，后面会做出详细讲解。

--a标签的几个属性：

1.href：可以跳转链接；也可以跳转html文件

2.target属性（要搭配_blank关键词）：是否在新标签页打开链接（点击链接后会打开一个新标签页然后加载内容）

【页面内跳转锚点的设置有两种方法】

关于页面内锚点的概述：如下图所示，就是我们看一些网页上面的索引

【方法一】：通过设置标签a的name属性达到页面跳转锚点的方法

锚，href属性，后面一定要加#号

<a href="#jbxx">基本信息</a>

锚点的点，name属性设置成跳转的链接

<a name="jbxx"></a>

【方法二】：设置锚点的点为标签的id属性

锚

<a href="#jbxx">基本信息</a>

锚点的点：由原来的a标签的name属性变为了其他标签id属性，使用方法跟href一致

<h3 id="jbxx">基本信息</h3>

这种方法是直接在我们的<h3>标签标题中直接引入id属性（id属性适配所有html标签）

视频教程

哔哩哔哩（B站）搜索框中输入“uid=3546393096489381”即可

用户：star010_

相关文章：

【视频+图文详解】HTML基础3-html常用标签

图文教程 html常用标签 常用标签 1. 文档结构 <!DOCTYPE html>&#xff1a;声明HTML文档类型。<html>&#xff1a;定义HTML文档的根元素。<head>&#xff1a;定义文档头部&#xff0c;包含元数据。<title>&#xff1a;设置网页标题&#xff0c;浏览…...

编程日记 2026/5/9 9:54:44

【B站保姆级视频教程：Jetson配置YOLOv11环境（五）Miniconda安装与配置】

Jetson配置YOLOv11环境&#xff08;5&#xff09;Miniconda安装与配置 文章目录 0. Anaconda vs Miniconda in Jetson1. 下载Miniconda32. 安装Miniconda33. 换源3.1 conda 换源3.2 pip 换源 4. 创建环境5. 设置默认启动环境 0. Anaconda vs Miniconda in Jetson Jetson 设备资…...

编程日记 2026/4/22 15:58:22

【PLL】杂散生成和调制

时钟生成 --》 数字系统 --》峰值抖动频率生成 --》无线系统 --》 频谱纯度、 周期信号的相位不确定性 随机抖动&#xff08;random jitter, RJ&#xff09;确定性抖动&#xff08;deterministic jitter,DJ&#xff09; 时域频域随机抖动积分相位噪声确定性抖动边带 杂散生成和…...

编程日记 2026/5/6 19:42:38

游戏引擎 Unity - Unity 启动（下载 Unity Editor、生成 Unity Personal Edition 许可证）

Unity Unity 首次发布于 2005 年&#xff0c;属于 Unity Technologies Unity 使用的开发技术有&#xff1a;C# Unity 的适用平台&#xff1a;PC、主机、移动设备、VR / AR、Web 等 Unity 的适用领域&#xff1a;开发中等画质中小型项目 Unity 适合初学者或需要快速上手的开…...

编程日记 2026/5/9 8:43:14

侯捷 C++ 课程学习笔记：深入理解 C++ 核心技术与实战应用

目录 引言 第一章&#xff1a;C 基础回顾 1.1 C 的历史与发展 1.2 C 的核心特性 1.3 C 的编译与执行 第二章&#xff1a;面向对象编程 2.1 类与对象 2.2 构造函数与析构函数 2.3 继承与多态 第三章&#xff1a;泛型编程与模板 3.1 函数模板 3.2 类模板 3.3 STL 容器…...

编程日记 2026/5/5 8:07:29

Java的Integer缓存池

Java的Integer缓冲池&#xff1f; Integer 缓存池主要为了提升性能和节省内存。根据实践发现大部分的数据操作都集中在值比较小的范围&#xff0c;因此缓存这些对象可以减少内存分配和垃圾回收的负担&#xff0c;提升性能。 在-128到 127范围内的 Integer 对象会被缓存和复用…...

编程日记 2026/2/16 13:05:09

【C++动态规划 离散化】1626. 无矛盾的最佳球队|2027

本文涉及知识点 C动态规划 离散化 LeetCode1626. 无矛盾的最佳球队 假设你是球队的经理。对于即将到来的锦标赛&#xff0c;你想组合一支总体得分最高的球队。球队的得分是球队中所有球员的分数 总和 。 然而&#xff0c;球队中的矛盾会限制球员的发挥&#xff0c;所以必须选…...

编程日记 2026/4/22 21:57:10

python 判断复杂包含

目录 python 判断复杂包含 a和b都是拍好序的&#xff1a; python 判断复杂包含 a[10,13,15] b[[9,11],[11,13],[13,16]] b的子项是区间&#xff0c;返回b中子区间包含a其中元素的子项 if __name__ __main__:a [10, 11, 15]b [[9, 11], [11, 13], [13, 16]]# 筛选出包含…...

编程日记 2026/2/16 10:10:21

Teleporters（ Educational Codeforces Round 126 (Rated for Div. 2) ）

Teleporters&#xff08; Educational Codeforces Round 126 (Rated for Div. 2) &#xff09; There are n 1 n1 n1 teleporters on a straight line, located in points 0 0 0, a 1 a_1 a1​, a 2 a_2 a2​, a 3 a_3 a3​, …, a n a_n an​. It’s possible to tele…...

编程日记 2026/4/2 22:56:21

css-设置元素的溢出行为为可见overflow: visible；

1.前言 overflow 属性用于设置当元素的内容溢出其框时如何处理。 2. overflow overflow 属性的一些常见值&#xff1a; 1 visible&#xff1a;默认值。内容不会被剪裁&#xff0c;会溢出元素的框。 2 hidden&#xff1a;内容会被剪裁&#xff0c;不会显示溢出的部分。 3 sc…...

编程日记 2025/10/11 22:47:08

python-leetcode-从中序与后序遍历序列构造二叉树

106. 从中序与后序遍历序列构造二叉树 - 力扣&#xff08;LeetCode&#xff09; # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right r…...

编程日记 2026/4/22 14:12:48

绝对值线性化

函数中的绝对值线性化有多种方法&#xff0c;包括我之前的一篇博文. 前几天在小红书刷到一个帖子&#xff0c;一位网友提供了另外一种巧妙的方式&#xff0c;记录如下。 假如有一个绝对值表达式&#xff1a; y ∣ a x − b ∣ (1) y|ax-b|\tag{1} y∣ax−b∣(1) 令&#x…...

编程日记 2026/2/18 5:49:27

Java实战：图像浏览器

文章目录 1. 实战概述2. 知识准备3. 实现步骤3.1 创建Java项目3.2 创建图像浏览器类3.2.1 声明变量与常量3.2.2 创建构造方法3.2.3 创建初始化界面方法3.2.4 创建处理事件方法3.2.5 创建主方法3.2.6 查看完整代码 3.3 运行程序&#xff0c;查看结果 4. 实战小结5. 扩展练习 1. …...

编程日记 2026/5/1 20:24:50

SARIMA介绍

SARIMA模型&#xff0c;即季节性自回归积分移动平均模型&#xff08;Seasonal Autoregressive Integrated Moving Average Model&#xff09;&#xff0c;是一种用于处理和预测具有明显季节性变化的时间序列数据的统计模型。它是ARIMA模型的一种扩展&#xff0c;通过引入额外的…...

编程日记 2025/5/18 2:26:01

I.MX6ULL 中断介绍上

i.MX6ULL是NXP&#xff08;原Freescale&#xff09;推出的一款基于ARM Cortex-A7内核的微处理器&#xff0c;广泛应用于嵌入式系统。在i.MX6ULL中&#xff0c;中断&#xff08;Interrupt&#xff09;是一种重要的机制&#xff0c;用于处理外部或内部事件&#xff0c;允许微处理…...

编程日记 2026/4/22 7:44:56

Spring Boot WebMvcConfigurer：定制你的 Web 应用

在构建基于Spring Boot的Web应用程序时&#xff0c;WebMvcConfigurer接口扮演着至关重要的角色。它允许开发者以一种简洁且非侵入的方式自定义Spring MVC的功能&#xff0c;而无需直接扩展框架的核心组件。本文将深入探讨WebMvcConfigurer的作用、如何实现其方法以及在实际项目…...

编程日记 2026/2/3 23:31:50

(即插即用模块-特征处理部分) 十九、(NeurIPS 2023) Prompt Block 提示生成 / 交互模块

文章目录 1、Prompt Block2、代码实现 paper&#xff1a;PromptIR: Prompting for All-in-One Blind Image Restoration Code&#xff1a;https://github.com/va1shn9v/PromptIR 1、Prompt Block 在解决现有图像恢复模型时&#xff0c;现有研究存在一些局限性&#xff1a; 现有…...

编程日记 2026/5/6 18:01:21

单链表专题（中）

我们接着上一篇文章&#xff0c;继续对单链表的实现进行扩充 链表的头删 我们在进行头删的时候&#xff0c;不能先释放掉头节点再将头节点传到第二节点上&#xff0c;这样会导致找不到第二个节点了 void SLTPopFront(SLTNode** pphead) {assert(pphead && *pphead);…...

编程日记 2026/4/4 9:04:44

表格结构标签

<!-- thead表示表格的头部 tbody表示表格的主体 --> <thead></thead> <tbody></tbody> <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&q…...

编程日记 2026/4/2 15:45:26

A星算法两元障碍物矩阵转化为rrt算法四元障碍物矩阵

对于a星算法obstacle所表示的障碍物障碍物信息&#xff0c;每行表示一个障碍物的坐标&#xff0c;例如2 , 3; % 第一个障碍物在第二行第三列&#xff0c;也就是边长为1的正方形障碍物右上角横坐标是2&#xff0c;纵坐标为3&#xff0c;障碍物的宽度和高度始终为1.在rrt路径规划…...

编程日记 2026/5/6 19:58:54

MySQL数据库（二）- SQL

目录 ​编辑 一 DDL (一 数据库操作 1 查询-数据库&#xff08;所有/当前&#xff09; 2 创建-数据库 3 删除-数据库 4 使用-数据库 (二 表操作 1 创建-表结构 2 查询-所有表结构名称 3 查询-表结构内容 4 查询-建表语句 5 添加-字段名数据类型 6 修改-字段数据类…...

编程日记 2026/5/5 11:13:52

数据分析系列--⑦RapidMiner模型评价(基于泰坦尼克号案例含数据集)

一、前提 二、模型评估 1.改造⑥ 2.Cross Validation算子说明 2.1Cross Validation 的作用 2.1.1 模型评估 2.1.2 减少过拟合 2.1.3 数据利用 2.2 Cross Validation 的工作原理 2.2.1 数据分割 2.2.2 迭代训练与测试 ​​​​​​​ 2.2.3 结果汇总 ​​​​​​​ …...

编程日记 2026/4/24 23:44:17

19 压测和常用的接口优化方案

高并发的平台应用&#xff0c;项目上线前离不开一个重要步骤就是压测&#xff0c;压测对于编码中的资源是否问题的排查&#xff0c;性能的调优都是离不开的。测试还要做测试报告&#xff0c;出具了测试报告给到运维团队才能上线。 压测的测试报告主要有以下几个方面:1.响应时间…...

编程日记 2026/4/24 19:38:36

gentoo中利用ollama运行DeepSeek-R1

一、安装ollama gentoo linux中 1.安装步骤&#xff1a; Step1. #cd /usr/local/src Step2. #wget2 -o -V https://ollama.com/install.sh Setp3. #sh ./install.sh 2.ollama完成安装。查看ollama版本&#xff1a; 3.查看ollama服务运行状态&#xff1a; 二、安装&#xf…...

编程日记 2026/4/23 21:34:19

远程连接-简化登录

vscode通过ssh连接远程服务器免密登录&#xff08;图文&#xff09;_vscode ssh-CSDN博客...

编程日记 2025/5/20 1:15:28

PHP中配置 variables_order详解

variables_order 是 PHP 配置文件 php.ini 中的一项配置指令&#xff0c;决定了 PHP 在处理请求时&#xff0c;哪些类型的变量将被注册到全局变量空间&#xff08;如 $GLOBALS&#xff09;中&#xff0c;以及这些变量的顺序。理解和正确配置 variables_order 对于开发和维护安全…...

编程日记 2026/5/5 19:34:11

为什么推荐将静态资源放在CDN上？

1. CDN 是什么&#xff1f; CDN&#xff08;Content Delivery Network&#xff09;是一种分布式网络&#xff0c;由地理上分散的服务器节点组成。其主要功能是将静态资源缓存到各地的边缘服务器上&#xff0c;从而将内容更快地传递给用户。当用户请求资源时&#xff0c;CDN 会…...

编程日记 2026/4/25 16:52:03

【NEXT】网络编程——上传文件（不限于jpg/png/pdf/txt/doc等），或请求参数值是file类型时，调用在线服务接口

最近在使用华为AI平台ModelArts训练自己的图像识别模型&#xff0c;并部署了在线服务接口。供给客户端&#xff08;如&#xff1a;鸿蒙APP/元服务&#xff09;调用。 import核心能力&#xff1a; import { http } from kit.NetworkKit; import { fileIo } from kit.CoreFileK…...

编程日记 2026/4/30 21:00:34

工作总结：压测篇

前言 压测是测试需要会的一项技能&#xff0c;作为开发&#xff0c;有点时候也要会一点压测。也是被逼着现学现卖的。 一、压测是什么&#xff0c;以及压测工具的选择 压测&#xff0c;即压力测试&#xff0c;是一种性能测试手段&#xff0c;通过模拟大量用户同时访问系统&am…...

编程日记 2026/2/16 21:51:16

MySQL基本架构SQL语句在数据库框架中的执行流程数据库的三范式

MySQL基本架构图&#xff1a; MySQL主要分为Server层和存储引擎层 Server层&#xff1a; 连接器&#xff1a;连接客户端&#xff0c;获取权限&#xff0c;管理连接 查询缓存&#xff08;可选&#xff09;&#xff1a;在执行查询语句之前会先到查询缓存中查看是否执行过这条语…...

编程日记 2026/4/26 20:51:04