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

【HTML】第 2 节 - HTML 标签

news 2025/12/15 11:40:31

        欢迎来到博主 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

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/12/10 19:13:55

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/9/8 13:50:07

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/12/14 14:27:59

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/12/3 20:41:57

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2025/12/12 4:15:39

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域&#xff0c;无损检测&#xff08;NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统&#xff0c;以非接触式光学麦克风技术为核心&#xff0c;打破传统检测瓶颈&#xff0c;为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2025/12/7 20:44:17

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/11/22 6:37:27