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

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

news 2025/11/6 18:56:30

图文教程

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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/10/31 0:43:35

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/10/22 23:35:38

无法与IP建立连接，未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

编程新知 2025/11/2 17:07:38

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/11/4 13:37:05

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/7/28 21:04:40

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/11/2 21:51:45

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2025/11/4 19:16:49

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/10/29 6:13:18

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/11/2 23:44:31