【HTML】第 2 节 - HTML 标签
欢迎来到博主 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、音频标…...
)
MATLAB算法实战应用案例精讲-【数模应用】残差检验(附Java、python和MATLAB代码)
目录 几个高频面试题目 线性回归残差是否一定满足正态分布？ 一般情况 特殊情况...
)
初学Qt(Day03)
今天概览 今天的目标是写一个动态的彩虹灯 一开始是有思路的。只是写的过程中有太多小bug了，真的是防不胜防 我的思路是： 主界面是一个开始界面，点击开始按钮之后，有一个子界面出现，显示出彩虹灯转动的效果。 内部的执…...
皮卡丘xss之htmlspecialchars、xss之href输出、xss之js输出
1.xss之htmlspecialchars htmlspecialchars()函数的功能如下： htmlspecialchars() 函数把预定义的字符转换为 HTML 实体。 预定义的字符是： （1）& （和号）成为 & （2）…...
ArrayList和LinkedList的区别
ArrayList和Vector使用了数组的实现，可以认为ArrayList或者Vector封装了对内部数组的操作，比如向数组中添加，删除，插入新的元素或者数据的扩展和重定向。 LinkedList使用了循环双向链表数据结构。与基于数组ArrayList相比…...
记录 vue3 webpack 使用 iframe 遇到的坑
需求 我尝试用Vue3写一个自己的主页，把常用的功能集中到主页中，如下图 后发现一个好玩的东西，js实现的在网页底部出现鱼和波浪，如下图，就像想也放到自己的主页中，搜索后发现可以在Vue中用iframe标签直接引…...
华为OD机试真题 Java 实现【去除多余空格】【2023Q1 100分】
一、题目描述 去除文本多余空格，但不去除配对单引号之间的多余空格。给出关键词的起始和结束下标，去除多余空格后刷新关键词的起始和结束下标。 条件约束： 不考虑关键词起始和结束位置为空格的场景；单词的的开始和结束下标保证涵盖一个完整的单词，即一个坐标对开始和结束…...
SAP-MM 条件类型字段解析
01、“定价类型”：定义此条件类型的代码和描述，代码不能重复，描述可更改，根据实际需要，条件类型可定制； 02、“存取顺序”：表示此条件类型在定价时，要到存取顺序号定义的条件表中读…...
C#，码海拾贝（28）——求解“对称正定方程组”的“平方根法”之C#源代码
using System; namespace Zhou.CSharp.Algorithm { /// <summary> /// 求解线性方程组的类 LEquations /// 原作 周长发 /// 改编 深度混淆 /// </summary> public static partial class LEquations { /// <summary> /…...
碳纤维单丝外径测试中的纳米分辨率激光衍射法解决方案
摘要：碳纤维单丝热膨胀系数是碳纤维复合材料设计、生产与可靠性和寿命评估的重要参数，本文针对单丝径向高温热膨胀系数测试这一难题提出了相应的解决方案。解决方案的核心内容是基于激光衍射法和高温辐射加热，并采用衍射轮廓拟合技术以及相应…...
服务（第三十二篇）nginx做缓存服务器
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…...
Java 集合、数组、字符串的相互转换（关于list.toArray(new String[0])的源码分析）
在 Java 中，可以通过以下方式实现集合、数组和字符串之间的相互转换。 一、集合和数组的相互转化 ①、将集合转为数组：（toArray 方法） List<String> list new ArrayList<>(); list.add("apple"); lis…...
Redis的全局命令及相关误区
Redis中所说的数据结构是针对key-value中的value而言的。主要的结构包括String、哈希表、列表、集合等等在redis中存在16个库，涉及到后期的集群搭建只能使用0号库最为方便 查看所有键（支持通配符） keys * keys S*返回当前数据库中的键总数 …...
C++核心编程—类和对象，类的三大特性——封装、继承、多态
纵有疾风起，人生不言弃。本文篇幅较长，如有错误请不吝赐教，感谢支持。 💬文章目录 一.类和对象的概念①什么是对象？②抽象和类1.类的基本概念2.类的声明与定义：3.对象的创建与使用 二.类的封装①为什么有封…...
keep-alive 是 Vue 内置的一个组件，被用来缓存组件实例。
文章目录 简介注意点使用 keep-alive 有以下优缺点优点缺点 简介 keep-alive 是 Vue 内置的一个组件，被用来缓存组件实例。 使用 keep-alive 包裹动态组件时，被包裹的组件实例将会被缓存起来，而不会被销毁，直到 keep-alive 组件…...
（八）Spring之IOC控制反转、DI依赖注入介绍和使用（详解）
文章目录 前言SpringSpring IOC 简介BeanIOC 概述IOC 本质理解 Spring IOC 应用IOC xml装配IOC 依赖注入IOC Bean的作用域 IoC 自动装配Bean 的自动装配注解实现自动装配 IoC 使用注解开发模拟实现Spring IoC 前言 “Spring”在不同的上下文中表示不同的事物。它可以用来引用 …...
凸缺陷 convexityDefects
获取凸包，可以参考我的这篇文章： 凸包（Convex Hull）代码实现案例 获取了凸包之后，可以干什么呢？ 凸缺陷凸包与轮廓之间的部分称为凸缺陷。凸缺陷可用来处理手势识别等问题。 通常情况下，使用如…...
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…...
ffmpeg enum AVChannel枚举解析
AVChannel枚举是在2022-12-20的提交中添加的，对应的版本号是5.1. 这个提交的描述是"avutil/channel_layout: add AVChannel enum and related functions"。 原型 typedef struct AVChannelCustom {enum AVChannel id;char name[16];void *opaque; } AVCh…...
invest模型教程
详情点击链接：invest模型教程——建议收藏 1.生态系统服务 2.InVEST模型 3.InVEST所需数据（分辨率、格式、投影系统等）、获取及标准化预处理 4.InVEST运行 5.ArcGIS工具支撑InVEST模型 5.1ArcGIS数据形式与数据格式、数据格式之间的相互转换…...
wordpress后台更新后 前端没变化的解决方法
使用siteground主机的wordpress网站，会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后，网站没有变化的情况。 不熟悉siteground主机的新手，遇到这个问题，就很抓狂，明明是哪都没操作错误&#x…...
rknn优化教程（二）
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK，开始写第二篇的内容了。这篇博客主要能写一下： 如何给一些三方库按照xmake方式进行封装，供调用如何按…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程：（白话解释） 我们将原始待发送的消息称为 M M M，依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)（意思就是 G （ x ) G（x) G（x) 是已知的）࿰…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
ETLCloud可能遇到的问题有哪些？常见坑位解析
数据集成平台ETLCloud，主要用于支持数据的抽取（Extract）、转换（Transform）和加载（Load）过程。提供了一个简洁直观的界面，以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
如何在最短时间内提升打ctf（web)的水平？
刚刚刷完2遍 bugku 的 web 题，前来答题。 每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...
html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码
目录 一、👨🎓网站题目 二、✍️网站描述 三、📚网站介绍 四、🌐网站效果 五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目 七、🎁更多干货 一、👨…...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案
在大数据时代，海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构，在处理大规模数据抓取任务时展现出强大的能力。然而，随着业务规模的不断扩大和数据抓取需求的日益复杂，传统…...