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

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

news 2025/7/7 13:48:31

图文教程

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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/7 11:34:25

23-Oracle 23 ai 区块链表（Blockchain Table）

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

编程新知 2025/7/5 20:33:40

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2025/6/17 17:52:51

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/6/16 12:40:21

Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

编程新知 2025/7/7 13:12:28

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2025/7/6 17:42:04

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/7/7 3:50:45

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/6/23 5:12:02

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2025/7/4 2:54:13

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/6/19 20:48:48