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

【HTML】第 2 节 - HTML 标签

news 2025/9/11 15:59:16

        欢迎来到博主 Apeiron 的博客，祝您旅程愉快 ！ 时止则止，时行则行。动静不失其时，其道光明。

目录

1、缘起 

2、标题标签

3、段落标签

4、文本格式化标签 

5、图像标签 

5.1、基本作用

5.2、属性 

6、超链接标签

7、音频标签 

8、视频标签 

9、总结

1、缘起 

         HTML 标签是用于描述和定义网页结构的元素。它们用于创建和组织网页内容，并赋予其不同的含义和功能。标签可以定义 文本、图像、链接、表格、表单 等元素，以及 样式、布局 和 交互效果。HTML 标签是构建网页的基础，让内容在浏览器中呈现出美观和有意义的形式。接下来让我们一起来看看 HTML 中都有哪些标签吧 ！

2、标题标签

        一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名：h1~h6（双标签） 

显示特点：

①  文字加粗

②  字号逐渐减小

③  独占一行（换行） 

示例代码：

<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>

注意：h1 标签在一个网页中 只能用一次，用来放 新闻标题 或 网页的 logo，h2 ~ h6 没有使用次数的限制。 

3、段落标签

        一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p（双标签）

显示特点：

①  独占一行

②  段落之间有间隙

示例代码： 

<body><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”</p><p>我与父亲不相见已二年余了，我最不能忘记的是他的背影。那年冬天，祖母死了，父亲的差使也交卸了，正是祸不单行的日子，我从北京到徐州，打算跟着父亲奔丧回家。到徐州见着父亲，看见满院狼藉的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说，“事已如此，不必难过，好在天无绝人之路!”</p>
</body>

4、文本格式化标签 

作用：为文本添加特殊格式，以 突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

        在实际工作中，我们经常使用第一种标签名，因为 strong、em、ins、del 标签自带 强调含义（语义）。 

示例代码： 

<body><strong>这是加粗</strong><em>这是倾斜</em><ins>这是下划线</ins><del>这是删除线</del>
</body>

5、图像标签 

5.1、基本作用

作用：在网页中插入图片

语法：<img src = “图片的 URL”> 

src 用于指定 图像的位置和名称，是 <img> 的 必须属性。 

示例代码：

<body><img src="./Doutu.jpg" >
</body>

5.2、属性 

①  属性名 = “属性值”

②  属性写在 尖括号里面，标签名后面，标签名和属性之间用 空格 隔开，不区分先后顺序。 

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字，没有单位
height图片的高度值为数字，没有单位

①  属性 alt 示例 

示例代码： 

<body><img src="./Doutu1.jpg" alt = "这是一个表情包" >
</body>

        从上述代码和图片中可以看出，Doutu1.jpg 这张图片在目录找不到，所以就在屏幕上显示 alt 属性的内容。 

②  title 属性示例

示例代码： 

<body><img src="./Doutu.jpg" title = "这是一个表情包" >
</body>

        在 HTML 中，常用的图像属性只有 alt 和 title ，至于图片的 height 和 width 属性专门在 CSS 中进行设置。

6、超链接标签

作用：点击跳转到其他页面 

< a href = "https://www.baidu.com"  target = "_blank" >跳转到百度</a>

①  href 属性值是 跳转地址，是超链接的 必须属性 

②  target = "_blank 属性的作用是在新窗口打开页面

示例代码：

<body><a href="https://www.baidu.com" target = "_blank">跳转到百度</a>
</body>

7、音频标签 

作用：在网页中插入音频

<audio  src = "音频的 URL"></audio>

音频标签的常见属性如下：

属性作用特殊说明
src（必须属性）音频 URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放为了提升用户体验，浏览器一般会禁用自动播放功能

示例代码： 

<body><audio src="./media/万物生.mp3" controls loop></audio>
</body>

8、视频标签 

作用：在网页中插入视频

<video src = "视频的 URL"></video>

视频标签的常见属性如下：

属性作用特殊说明
src（必须属性）视频URL支持格式：MP4、WebM、Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放为了提升用户体验，浏览器支持在静音状态自动播放

示例代码： 

<body><video src="./video/婉儿十连胜.mp4" controls loop muted autoplay></video>
</body>

注意：在浏览器中，要想自动播放，必须要有 muted 属性，否则无法自动播放。

9、总结

        本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦 ！

相关文章：

【HTML】第 2 节 - HTML 标签

欢迎来到博主 Apeiron 的博客&#xff0c;祝您旅程愉快 &#xff01; 时止则止&#xff0c;时行则行。动静不失其时&#xff0c;其道光明。 目录 1、缘起 2、标题标签 3、段落标签 4、文本格式化标签 5、图像标签 5.1、基本作用 5.2、属性 6、超链接标签 7、音频标…...

编程日记 2023/6/5 18:32:15

MATLAB算法实战应用案例精讲-【数模应用】残差检验(附Java、python和MATLAB代码)

目录 几个高频面试题目 线性回归残差是否一定满足正态分布？ 一般情况 特殊情况...

编程日记 2023/6/5 18:27:12

初学Qt(Day03)

今天概览 今天的目标是写一个动态的彩虹灯 一开始是有思路的。只是写的过程中有太多小bug了&#xff0c;真的是防不胜防 我的思路是&#xff1a; 主界面是一个开始界面&#xff0c;点击开始按钮之后&#xff0c;有一个子界面出现&#xff0c;显示出彩虹灯转动的效果。 内部的执…...

编程日记 2023/6/5 18:22:11

皮卡丘xss之htmlspecialchars、xss之href输出、xss之js输出

1.xss之htmlspecialchars htmlspecialchars()函数的功能如下&#xff1a; htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。 预定义的字符是&#xff1a; &#xff08;1&#xff09;& &#xff08;和号&#xff09;成为 &amp; &#xff08;2&#xff09;…...

编程日记 2023/6/5 18:17:10

ArrayList和LinkedList的区别

ArrayList和Vector使用了数组的实现&#xff0c;可以认为ArrayList或者Vector封装了对内部数组的操作&#xff0c;比如向数组中添加&#xff0c;删除&#xff0c;插入新的元素或者数据的扩展和重定向。 LinkedList使用了循环双向链表数据结构。与基于数组ArrayList相比&#xf…...

编程日记 2023/6/5 18:12:09

记录 vue3 webpack 使用 iframe 遇到的坑

需求 我尝试用Vue3写一个自己的主页&#xff0c;把常用的功能集中到主页中&#xff0c;如下图 后发现一个好玩的东西&#xff0c;js实现的在网页底部出现鱼和波浪&#xff0c;如下图&#xff0c;就像想也放到自己的主页中&#xff0c;搜索后发现可以在Vue中用iframe标签直接引…...

编程日记 2023/6/5 18:07:08

华为OD机试真题 Java 实现【去除多余空格】【2023Q1 100分】

一、题目描述 去除文本多余空格，但不去除配对单引号之间的多余空格。给出关键词的起始和结束下标，去除多余空格后刷新关键词的起始和结束下标。 条件约束： 不考虑关键词起始和结束位置为空格的场景；单词的的开始和结束下标保证涵盖一个完整的单词，即一个坐标对开始和结束…...

编程日记 2023/6/5 18:02:07

SAP-MM 条件类型字段解析

01、“定价类型”&#xff1a;定义此条件类型的代码和描述&#xff0c;代码不能重复&#xff0c;描述可更改&#xff0c;根据实际需要&#xff0c;条件类型可定制&#xff1b; 02、“存取顺序”&#xff1a;表示此条件类型在定价时&#xff0c;要到存取顺序号定义的条件表中读…...

编程日记 2023/6/5 17:57:05

C#，码海拾贝（28）——求解“对称正定方程组”的“平方根法”之C#源代码

using System; namespace Zhou.CSharp.Algorithm { /// <summary> /// 求解线性方程组的类 LEquations /// 原作 周长发 /// 改编 深度混淆 /// </summary> public static partial class LEquations { /// <summary> /…...

编程日记 2023/6/5 17:52:04

碳纤维单丝外径测试中的纳米分辨率激光衍射法解决方案

摘要&#xff1a;碳纤维单丝热膨胀系数是碳纤维复合材料设计、生产与可靠性和寿命评估的重要参数&#xff0c;本文针对单丝径向高温热膨胀系数测试这一难题提出了相应的解决方案。解决方案的核心内容是基于激光衍射法和高温辐射加热&#xff0c;并采用衍射轮廓拟合技术以及相应…...

编程日记 2023/6/5 17:47:02

服务（第三十二篇）nginx做缓存服务器

nginx作为缓存服务配置语法 1、proxy_cache_path 配置语法&#xff08;即缓存路径配置语法&#xff09; Syntax&#xff1a;proxy_cache_path path [levelslevels] [use_temp_pathon|off] keys_zonename:size [inactivetime] [max_sizesize] [manager_filesnumber] [manager_s…...

编程日记 2023/6/5 17:42:01

Java 集合、数组、字符串的相互转换（关于list.toArray(new String[0])的源码分析）

在 Java 中&#xff0c;可以通过以下方式实现集合、数组和字符串之间的相互转换。 一、集合和数组的相互转化 ①、将集合转为数组&#xff1a;&#xff08;toArray 方法&#xff09; List<String> list new ArrayList<>(); list.add("apple"); lis…...

编程日记 2023/6/5 17:37:00

Redis的全局命令及相关误区

Redis中所说的数据结构是针对key-value中的value而言的。主要的结构包括String、哈希表、列表、集合等等在redis中存在16个库&#xff0c;涉及到后期的集群搭建只能使用0号库最为方便 查看所有键&#xff08;支持通配符&#xff09; keys * keys S*返回当前数据库中的键总数 …...

编程日记 2023/6/5 17:31:58

C++核心编程—类和对象，类的三大特性——封装、继承、多态

纵有疾风起&#xff0c;人生不言弃。本文篇幅较长&#xff0c;如有错误请不吝赐教&#xff0c;感谢支持。 &#x1f4ac;文章目录 一.类和对象的概念①什么是对象&#xff1f;②抽象和类1.类的基本概念2.类的声明与定义&#xff1a;3.对象的创建与使用 二.类的封装①为什么有封…...

编程日记 2023/6/5 17:26:55

keep-alive 是 Vue 内置的一个组件，被用来缓存组件实例。

文章目录 简介注意点使用 keep-alive 有以下优缺点优点缺点 简介 keep-alive 是 Vue 内置的一个组件&#xff0c;被用来缓存组件实例。 使用 keep-alive 包裹动态组件时&#xff0c;被包裹的组件实例将会被缓存起来&#xff0c;而不会被销毁&#xff0c;直到 keep-alive 组件…...

编程日记 2023/6/5 17:21:53

（八）Spring之IOC控制反转、DI依赖注入介绍和使用（详解）

文章目录 前言SpringSpring IOC 简介BeanIOC 概述IOC 本质理解 Spring IOC 应用IOC xml装配IOC 依赖注入IOC Bean的作用域 IoC 自动装配Bean 的自动装配注解实现自动装配 IoC 使用注解开发模拟实现Spring IoC 前言 “Spring”在不同的上下文中表示不同的事物。它可以用来引用 …...

编程日记 2023/6/5 17:16:52

凸缺陷 convexityDefects

获取凸包&#xff0c;可以参考我的这篇文章&#xff1a; 凸包&#xff08;Convex Hull&#xff09;代码实现案例 获取了凸包之后&#xff0c;可以干什么呢&#xff1f; 凸缺陷凸包与轮廓之间的部分称为凸缺陷。凸缺陷可用来处理手势识别等问题。 通常情况下&#xff0c;使用如…...

编程日记 2023/6/5 17:11:50

c语言编程练习题：7-43 Shuffling Machine

Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techniques are seen as weak, and in order to avoid “inside jobs” where employees collaborate with gamblers by performing inadequate shuffles, many casinos empl…...

编程日记 2023/6/5 17:06:48

ffmpeg enum AVChannel枚举解析

AVChannel枚举是在2022-12-20的提交中添加的&#xff0c;对应的版本号是5.1. 这个提交的描述是"avutil/channel_layout: add AVChannel enum and related functions"。 原型 typedef struct AVChannelCustom {enum AVChannel id;char name[16];void *opaque; } AVCh…...

编程日记 2023/6/5 17:01:47

invest模型教程

详情点击链接&#xff1a;invest模型教程——建议收藏 1.生态系统服务 2.InVEST模型 3.InVEST所需数据&#xff08;分辨率、格式、投影系统等&#xff09;、获取及标准化预处理 4.InVEST运行 5.ArcGIS工具支撑InVEST模型 5.1ArcGIS数据形式与数据格式、数据格式之间的相互转换…...

编程日记 2023/6/5 16:56:46

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/9/5 23:10:53

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台&#xff0c;以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中&#xff0c;Producer&#xff08;生产者&#xff09; 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/9/9 15:02:26

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/6/26 20:21:28

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/7/15 0:42:05

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/8/19 16:14:29

return this；返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...

编程新知 2025/7/6 12:42:16

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/9/1 13:30:26

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/8/11 2:57:01

【Linux系统】Linux环境变量：系统配置的隐形指挥官

。# Linux系列 文章目录 前言一、环境变量的概念二、常见的环境变量三、环境变量特点及其相关指令3.1 环境变量的全局性3.2、环境变量的生命周期 四、环境变量的组织方式五、C语言对环境变量的操作5.1 设置环境变量&#xff1a;setenv5.2 删除环境变量:unsetenv5.3 遍历所有环境…...

编程新知 2025/9/3 18:06:27