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

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

news 2026/4/1 12:29:36

图文教程

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;浏览…...

编程日记 2025/2/3 16:22:15

FreeRTOS学习 --- 消息队列

队列简介 队列是任务到任务、任务到中断、中断到任务数据交流的一种机制&#xff08;消息传递&#xff09; 全局变量的弊端&#xff1a;数据无保护&#xff0c;导致数据不安全&#xff0c;当多个任务同时对该变量操作时&#xff0c;数据易受损 使用队列的情况如下&#xff1a;…...

编程日记 2025/2/3 16:21:13

PHP If...Else 语句详解

PHP If...Else 语句详解 引言 在PHP编程中&#xff0c;if...else语句是流程控制的重要组成部分&#xff0c;它允许程序根据条件判断执行不同的代码块。本文将详细解析PHP中的if...else语句&#xff0c;包括其基本用法、高级技巧以及注意事项。 一、基本用法 if...else语句的…...

编程日记 2025/2/3 16:18:10

pytorch使用SVM实现文本分类

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 完整代码&#xff1a; import torch import torch.nn as nn import torch.optim as optim import jieba import numpy as np from sklearn.model_selection import train_test_split from sklearn.feature_extract…...

编程日记 2025/2/3 16:12:03

安卓(android)读取手机通讯录【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的&#xff08;如果代码有错漏&#xff0c;可在代码地址查看&#xff09; 1.熟悉内容提供者(Content Provider)的概念和作用。 2.掌握内容提供者的创建和使用方法。 4.掌握内容URI的结构和用途。 二、实验条件 1.熟悉内容提供者的工作原理。 2.掌握内容提供者访问其…...

编程日记 2025/2/3 16:11:01

【Qt】常用的容器

Qt提供了多个基于模板的容器类&#xff0c;这些容器类可用于存储指定类型的数据项。例如常用的字符串列表类 QStringList 可用来操作一个 QList<QString>列表。 Qt的容器类比标准模板库(standard template library&#xff0c;STL)中的容器类更轻巧、使用更安全且更易于使…...

编程日记 2025/2/3 16:08:58

基于UKF-IMM无迹卡尔曼滤波与交互式多模型的轨迹跟踪算法matlab仿真,对比EKF-IMM和UKF

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于UKF-IMM无迹卡尔曼滤波与交互式多模型的轨迹跟踪算法matlab仿真,对比EKF-IMM和UKF。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 3.核心程序 .…...

编程日记 2025/2/3 16:07:55

分布式事务组件Seata简介与使用，搭配Nacos统一管理服务端和客户端配置

文章目录 一. Seata简介二. 官方文档三. Seata分布式事务代码实现0. 环境简介1. 添加undo_log表2. 添加依赖3. 添加配置4. 开启Seata事务管理5. 启动演示 四. Seata Server配置Nacos1. 修改配置类型2. 创建Nacos配置 五. Seata Client配置Nacos1. 增加Seata关联Nacos的配置2. 在…...

编程日记 2025/2/3 16:05:49

JavaScript常用的内置构造函数

JavaScript作为一种广泛应用的编程语言&#xff0c;提供了丰富的内置构造函数&#xff0c;帮助开发者处理不同类型的数据和操作。这些内置构造函数在创建和操作对象时非常有用。本文将详细介绍JavaScript中常用的内置构造函数及其用途。 常用内置构造函数概述 1. Object Obj…...

编程日记 2025/2/3 16:04:46

25寒假算法刷题 | Day1 | LeetCode 240. 搜索二维矩阵 II，148. 排序链表

目录 240. 搜索二维矩阵 II题目描述题解 148. 排序链表题目描述题解 240. 搜索二维矩阵 II 点此跳转题目链接 题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到…...

编程日记 2025/2/3 16:03:43

MQTT知识

MQTT协议 MQTT 是一种基于发布/订阅模式的轻量级消息传输协议&#xff0c;专门针对低带宽和不稳定网络环境的物联网应用而设计&#xff0c;可以用极少的代码为联网设备提供实时可靠的消息服务。MQTT 协议广泛应用于物联网、移动互联网、智能硬件、车联网、智慧城市、远程医疗、…...

编程日记 2025/2/3 16:00:38

【机器学习与数据挖掘实战】案例11：基于灰色预测和SVR的企业所得税预测分析

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈机器学习与数据挖掘实战 ⌋ ⌋ ⌋ 机器学习是人工智能的一个分支，专注于让计算机系统通过数据学习和改进。它利用统计和计算方法，使模型能够从数据中自动提取特征并做出预测或决策。数据挖掘则是从大型数据集中发现模式、关联…...

编程日记 2025/2/3 15:53:15

新一代搜索引擎，是 ES 的15倍？

Manticore Search介绍 Manticore Search 是一个使用 C 开发的高性能搜索引擎&#xff0c;创建于 2017 年&#xff0c;其前身是 Sphinx Search 。Manticore Search 充分利用了 Sphinx&#xff0c;显着改进了它的功能&#xff0c;修复了数百个错误&#xff0c;几乎完全重写了代码…...

编程日记 2025/2/3 15:50:12

使用 Context API 管理临时状态，避免 Redux/Zustand 的持久化陷阱

在开发 React Native 应用时&#xff0c;我们经常需要管理全局状态&#xff0c;比如用户信息、主题设置、网络状态等。而对于某些临时状态&#xff0c;例如 数据同步进行中的状态 (isSyncing)&#xff0c;我们应该选择什么方式来管理它&#xff1f; 在项目开发过程中&#xff…...

编程日记 2025/2/3 15:47:06

PyTorch框架——基于深度学习YOLOv8神经网络学生课堂行为检测识别系统

基于YOLOv8深度学习的学生课堂行为检测识别系统&#xff0c;其能识别三种学生课堂行为&#xff1a;names: [举手, 读书, 写字] 具体图片见如下&#xff1a; 第一步&#xff1a;YOLOv8介绍 YOLOv8 是 ultralytics 公司在 2023 年 1月 10 号开源的 YOLOv5 的下一个重大更新版本…...

编程日记 2025/2/3 15:41:00

word2vec 实战应用介绍

Word2Vec 是一种由 Google 在 2013 年推出的重要词嵌入模型，通过将单词映射为低维向量，实现了对自然语言处理任务的高效支持。其核心思想是利用深度学习技术，通过训练大量文本数据，将单词表示为稠密的向量形式，从而捕捉单词之间的语义和语法关系。以下是关于 Word2Vec 实战…...

编程日记 2025/2/3 15:35:54

C# 操作符重载对象详解

.NET学习资料 .NET学习资料 .NET学习资料 一、操作符重载的概念 在 C# 中&#xff0c;操作符重载允许我们为自定义的类或结构体定义操作符的行为。通常&#xff0c;我们熟悉的操作符&#xff0c;如加法&#xff08;&#xff09;、减法&#xff08;-&#xff09;、乘法&#…...

编程日记 2025/2/3 15:30:47

python学opencv|读取图像（五十四）使用cv2.blur()函数实现图像像素均值处理

【1】引言 前序学习进程中&#xff0c;对图像的操作均基于各个像素点上的BGR值不同而展开。 对于彩色图像&#xff0c;每个像素点上的BGR值为三个整数&#xff0c;因为是三通道图像&#xff1b;对于灰度图像&#xff0c;各个像素上的BGR值是一个整数&#xff0c;因为这是单通…...

编程日记 2025/2/3 15:28:45

CNN的各种知识点（四）： 非极大值抑制（Non-Maximum Suppression, NMS）

非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09; 1. 非极大值抑制&#xff08;Non-Maximum Suppression, NMS&#xff09;概念&#xff1a;算法步骤&#xff1a;具体例子&#xff1a;PyTorch实现&#xff1a; 总结&#xff1a; 1. 非极大值抑制&#xff08;…...

编程日记 2025/2/3 15:25:39

虚幻基础16：locomotion direction

locomotion locomotion&#xff1a;角色运动系统的总称&#xff1a;包含移动、奔跑、跳跃、转向等。 locomotion direction 玩家输入 玩家输入&#xff1a;通常代表玩家想要的移动方向。 direction 可以计算当前朝向与移动方向的Δ。从而实现朝向与移动(玩家输入)方向的分…...

编程日记 2025/2/3 15:23:36

C语言实战：构建嵌入式eMMC RPMB安全读写组件

1. eMMC RPMB分区基础解析 我第一次接触RPMB分区是在开发智能门锁项目时&#xff0c;需要存储指纹特征码等敏感数据。传统存储方式容易被篡改&#xff0c;而RPMB完美解决了这个问题。RPMB&#xff08;Replay Protected Memory Block&#xff09;是eMMC芯片中的特殊安全存储区域…...

编程新知 2026/4/1 12:26:15

Llama-3.2V-11B-cot开源大模型案例：科研论文插图数据真实性初筛

Llama-3.2V-11B-cot开源大模型案例&#xff1a;科研论文插图数据真实性初筛 1. 项目背景与价值 科研论文插图的真实性核查是学术出版领域的重要环节。传统人工检查方式存在效率低、主观性强等问题。Llama-3.2V-11B-cot多模态大模型为解决这一问题提供了创新方案。 这款基于M…...

编程新知 2026/4/1 12:04:07

Syncthing中继服务器搭建全攻略：解决公共服务器速度慢的问题（附详细配置步骤）

Syncthing中继服务器搭建实战&#xff1a;突破公共服务器速度瓶颈 周末团队协作时&#xff0c;Syncthing公共中继服务器的龟速让人抓狂——跨国传输一个设计稿居然要两小时。这促使我探索自建中继服务器的方案&#xff0c;实测将同步速度提升8倍。本文将分享从服务器选型到客户…...

编程新知 2026/4/1 11:55:50

深入浅出MIPI D-PHY：对比HS高速模式与LP低功耗模式，揭秘手机摄像头省电又流畅的底层原理

解密MIPI D-PHY&#xff1a;手机摄像头如何实现高速与低功耗的完美平衡 当你用手机拍摄4K视频时&#xff0c;是否想过为什么画面如此流畅&#xff0c;而电量消耗却相对可控&#xff1f;这背后隐藏着一项关键技术——MIPI D-PHY物理层协议。作为现代移动设备图像传输的核心通道&…...

编程新知 2026/4/1 11:43:43

基于计算机网络原理优化DeepSeek-OCR 2的分布式部署

基于计算机网络原理优化DeepSeek-OCR 2的分布式部署 最近在帮一个客户做文档智能处理系统&#xff0c;他们每天要处理几十万份PDF文档&#xff0c;包括合同、报告、发票等各种格式。单机版的DeepSeek-OCR 2虽然效果不错&#xff0c;但处理速度完全跟不上业务需求。客户那边催得…...

编程新知 2026/4/1 11:33:41

瑞芯微RK3399固件急救指南：用upgrade_tool搞定系统崩溃后的快速还原

RK3399固件灾难恢复实战&#xff1a;从分区表重建到全系统还原 当一块搭载RK3399的开发板因固件损坏而变砖时&#xff0c;那种面对黑屏的无力感&#xff0c;相信每个嵌入式开发者都深有体会。去年我们产线就遭遇过因批量升级失败导致30台设备集体罢工的紧急状况&#xff0c;正…...

编程新知 2026/4/1 11:29:40

为什么选择Drawflow：5大优势让你爱上这个流程图库

为什么选择Drawflow&#xff1a;5大优势让你爱上这个流程图库 【免费下载链接】Drawflow Simple flow library &#x1f5a5;️&#x1f5b1;️ 项目地址: https://gitcode.com/gh_mirrors/dr/Drawflow Drawflow是一个简单而强大的JavaScript流程图库&#xff0c;专为创…...

编程新知 2026/4/1 11:11:28

dockerc故障排除终极指南：10个常见错误和解决方案清单

dockerc故障排除终极指南&#xff1a;10个常见错误和解决方案清单 【免费下载链接】dockerc container image to single executable compiler 项目地址: https://gitcode.com/gh_mirrors/do/dockerc dockerc作为一款container image to single executable compiler工具&…...

编程新知 2026/4/1 10:45:10

告别Putty和串口助手：这款LVGL开发的LCOM，如何成为我的嵌入式开发调试新宠？

告别Putty和串口助手&#xff1a;这款LVGL开发的LCOM&#xff0c;如何成为我的嵌入式开发调试新宠&#xff1f; 作为一名嵌入式开发者&#xff0c;每天与各种开发板、单片机打交道是家常便饭。调试过程中&#xff0c;串口通信工具就像我们的"第三只手"&#xff0c;从…...

编程新知 2026/4/1 10:14:36

StructBERT中文语义匹配实战：一键部署+可视化进度条，小白也能用

StructBERT中文语义匹配实战&#xff1a;一键部署可视化进度条&#xff0c;小白也能用 1. 工具概览&#xff1a;你的中文句子"CT扫描仪" 想象一下&#xff0c;你手上有两份用户反馈&#xff1a;"这个手机电池很耐用"和"这款设备续航能力超强"。…...

编程新知 2026/4/1 9:58:27