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

【HTML】第 2 节 - HTML 标签

news 2026/2/7 22:48:22

欢迎来到博主 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 的博客，祝您旅程愉快 ！ 时止则止，时行则行。动静不失其时，其道光明。目录 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了，真的是防不胜防我的思路是： 主界面是一个开始界面，点击开始按钮之后，有一个子界面出现，显示出彩虹灯转动的效果。内部的执…...

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

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

1.xss之htmlspecialchars htmlspecialchars()函数的功能如下： htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。预定义的字符是： （1）& （和号）成为 & （2）…...

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

ArrayList和LinkedList的区别

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

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

记录 vue3 webpack 使用 iframe 遇到的坑

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

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

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

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

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

SAP-MM 条件类型字段解析

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

编程日记 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

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

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

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

nginx作为缓存服务配置语法 1、proxy_cache_path 配置语法（即缓存路径配置语法） Syntax：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 中，可以通过以下方式实现集合、数组和字符串之间的相互转换。一、集合和数组的相互转化 ①、将集合转为数组：（toArray 方法） List<String> list new ArrayList<>(); list.add("apple"); lis…...

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

Redis的全局命令及相关误区

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

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

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

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

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

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

文章目录简介注意点使用 keep-alive 有以下优缺点优点缺点简介 keep-alive 是 Vue 内置的一个组件，被用来缓存组件实例。使用 keep-alive 包裹动态组件时，被包裹的组件实例将会被缓存起来，而不会被销毁，直到 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

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

编程日记 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

1、缘起

2、标题标签

3、段落标签

4、文本格式化标签

5、图像标签

5.1、基本作用

5.2、属性

6、超链接标签

7、音频标签

8、视频标签

9、总结

相关文章：