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

【HTML】第 2 节 - HTML 标签

news 2026/2/9 3:18:11

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

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/8 4:37:22

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2026/2/8 20:41:49

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

编程新知 2026/2/2 21:52:33

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2026/1/23 7:15:40

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/2/5 3:29:13

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/11/20 14:26:29

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30