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

【HTML5】01-HTML摆放内容

article 2026/3/9 18:48:32

本文介绍HTML5摆放标签的知识点。

目录

1. HTML概念

2. HTML骨架

3. 标签的关系

4. 标题标签

5. 段落标签

6. 换行和水平线

7. 文本格式化标签

8. 图像标签

图像 - 属性

9. 路径

相对路径

绝对路径

10. 超链接标签

11. 音频标签

12. 视频标签

1. HTML概念

HTML 超文本标记语言

超文本 —— 链接

标记 —— 标签、带尖括号的文本

标签成对出现 开始标签和结束标签

< >XX</ >

绝大部分都是双标签，但也有单标签：

<br> 换行

<hr> 水平线

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><strong>文本内容</strong><hr>
</body>
</html>

2. HTML骨架

HTML基本骨架是网页模板

html 是整个网页

head 是网页头部，存放给浏览器看的代码

body 是网页主体，存放给用户看的代码

title  是网页标题

快速生成HTML骨架：英文 ! + Enter / Tab

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页标题</title>
</head>
<body>给用户看的
</body>
</html>

3. 标签的关系

明确代码的书写位置

有两种关系：父子 / 嵌套、兄弟 / 并列

<html><head></head><body></body>
</html>

4. 标题标签

标签名：h1 ~ h6 双标签

文字加粗，字号逐渐减小、自占一行

h1 一般只用一次

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

5. 段落标签

标签名：p 双标签

独占一行、段落之间存在间隙

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p><p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p><p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p><p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAAAAAAAAAAAAAAAAAAAAAAAAA，AAAAA  AAAAAAA  AAAAAAAA  AAAAAAAAAA  AA。</p>
</body>
</html>

6. 换行和水平线

换行 br 和水平线 hr 都是单标签

<body>文本1<br>文本2<!-- 如果没有br，仅敲换行键实际网页中是没有换行效果的 --><hr>文本3<hr>
</body>

7. 文本格式化标签

包括：

加粗  strong

倾斜  em

下划线  ins

删除线  del

不会换行，若没有br则都在一行显示

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

8. 图像标签

在网页中插入图片

img 是单标签

<img src = " 图片的URL ">

src 指定图片的位置和名称

图片和html最好放到同一路径下

图像 - 属性

1. alt  替换文本

图片无法显示时出现的文字

2. title 提示文本

鼠标悬停时显示的文字

9. 路径

路径是指在查找文件时，从起点到终点经历的路线

分类

相对路径

从当前文件位置出发查找目标文件

/ 代表进入某文件夹

如 images/ 是进入image文件夹

. 表示当前文件所在文件夹  ./ 

.. 表示当前文件夹的上一级  ../

绝对路径

从盘符出发查找目标文件

                     windows电脑是从盘符出发

                     Mac是从根目录出发

以windows为例

<body><!-- 绝对路径 --><img src="D:\5.webp"><img src="D:/5.webp"><!-- / 和 \ 都行--><!-- 链接百度图片 --><img src="https://search-operate.cdn.bcebos.com/7e85570b817e17e8f3ae93134cc78451.gif">
</body>

绝对路径应用：友情链接

在本页面放一些其他网页的原链接

10. 超链接标签

a 双标签 中间可以加文字

href 属性是跳转地址

输入a 有提示文字直接回车即可

<body><a href="http://baidu.com">跳转到百度</a>
</body>

还可以跳到自己的文件

复制要跳的文件的相对地址

<a href="01-标签的写法.html">01-标签的写法</a>

若要打开一个新的页面

<body><a href="http://baidu.com" target="_blank">跳转到百度</a><a href="01-标签的写法.html" target="_blank">01-标签的写法</a>
</body>

开发初期不知道跳转的地址，href写：# 表示空链接

    <!-- 空链接 --><a href="#">空链接</a>

11. 音频标签

audio 双标签

src 保存音频的URL  支持MP3  Ogg Wav

controls 属性显示音频控制面板 点击后还能播放

loop 循环播放

autoplay  自动播放 一般浏览器都禁用

注：属性名和属性值一样时，只写一遍就行

    <audio src="./XXXX/XXX.mps" controls loop autoplay></audio>

12. 视频标签

video 双标签

src 保存音频的URL  支持MP4 WebM Ogg

controls 属性显示音频控制面板 点击后还能播放

loop 循环播放

muted  静音播放

autoplay  自动播放 一般浏览器支持在静音状态下自动播放

注：如果没有静音就不能自动播放

    <video src="./XX/XX.MP4" controls loop muted autoplay></video>

本文介绍HTML5摆放标签的知识点。

相关文章：

【HTML5】01-HTML摆放内容

本文介绍HTML5摆放标签的知识点。 目录 1. HTML概念 2. HTML骨架 3. 标签的关系 4. 标题标签 5. 段落标签 6. 换行和水平线 7. 文本格式化标签 8. 图像标签 图像 - 属性 9. 路径 相对路径 绝对路径 10. 超链接标签 11. 音频标签 12. 视频标签 1. HTML概念 HTM…...

编程日记 2026/2/14 8:44:22

内存管理：

我们今天来学习一下内存管理&#xff1a; 1. 内存分布&#xff1a; 我们先来看一下我们下面的图片&#xff1a; 这个就是我们的内存&#xff0c;我们的内存分为栈区&#xff0c;堆区&#xff0c;静态区&#xff0c;常量区&#xff1b; 我们的函数栈帧开辟消耗的内存就是我们…...

编程日记 2026/2/20 7:11:12

设计模式使用Java案例

代码设计要有可维护性&#xff0c;可复用性&#xff0c;可扩展性&#xff0c;灵活性&#xff0c;所有要使用设计模式进行灵活设计代码 创建型 简单工厂模式&#xff08;Simple Factory&#xff09; 简单工厂模式&#xff08;Simple Factory Pattern&#xff09;是一种创建型…...

编程日记 2026/2/25 21:08:51

Spring Boot拦截器（Interceptor）与过滤器（Filter）深度解析：区别、实现与实战指南

Spring Boot拦截器&#xff08;Interceptor&#xff09;与过滤器&#xff08;Filter&#xff09;深度解析&#xff1a;区别、实现与实战指南 一、核心概念对比 1. 本质区别 维度过滤器&#xff08;Filter&#xff09;拦截器&#xff08;Interceptor&#xff09;规范层级Serv…...

编程日记 2026/2/15 16:15:45

模运算的艺术：从基础到高阶的算法竞赛应用

在算法竞赛中&#xff0c;模运算&#xff08;取模运算&#xff09;是一个非常重要的概念&#xff0c;尤其在处理大数、防止溢出、以及解决与周期性相关的问题时。C 中的模运算使用 % 运算符&#xff0c;但它的行为和使用场景需要特别注意。 1. 模运算的基本概念 模运算是指求一…...

编程日记 2026/2/28 5:17:50

Java 并发编程——Java BIO NIO Socket编程

参考Java 并发编程——Java BIO NIO Socket编程 BIO&#xff1a;阻塞式编程模型 Socket 服务端编程Socket 客户端编程 NIO&#xff1a;非阻塞式编程模型 NIO 介绍Java 中 NIO 非阻塞式与前面 BIO 阻塞式的区别Java NIO类库包含以下三个核心组件ServerSocketChannel 服务端编程…...

编程日记 2026/3/3 14:39:28

ST电机库电流采样 三电阻单ADC

一、概述 下图是三电阻采样的电路结构 其中流过三相系统的电流I1、I2、I3遵循以下关系： 因此，为了重建流过普通三相负载的电流，在我们可以用以上公式计算的情况下，只需要对三相中的两相进行采样即可。 STM32的ADC可以很灵活的配置成同步采集两路ADC数据，…...

编程日记 2026/2/14 7:43:28

【网络】什么是 IHL（Internet Header Length，首部长度）TTL（Time To Live，生存时间）？

在 IPv4 数据报文中&#xff0c;IHL&#xff08;Internet Header Length&#xff0c;首部长度&#xff09;、TTL&#xff08;Time To Live&#xff0c;生存时间&#xff09; 和 TIL 涉及到 IP 数据包的结构和生命周期。以下是对它们的详细解释&#xff1a; &#x1f4cc; 1. IH…...

编程日记 2026/2/15 5:50:15

现代密码学 | 具有保密和认证功能的安全方案

1.案例背景 1.1 2023年6月&#xff0c;微软云电子邮件泄露 事件描述&#xff1a; 2023年6月&#xff0c;属于多家美国政府机构的微软云电子邮件账户遭到非法入侵&#xff0c;其中包括了多位高级政府官员的电子邮件。据报道&#xff0c;美国国务院的10个邮件账户中共有6万封电…...

编程日记 2026/2/19 5:33:14

一款基于Python的从常规文档里提取图片的简单工具开发方案

一款基于Python的从常规文档里提取图片的简单工具开发方案 1. 环境准备 安装必需库 pip install python-docx PyMuPDF openpyxl beautifulsoup4 pillow pip install pdfplumber # PDF解析备用方案 pip install tk # Python自带&#xff0c;无需安装工具选择 开发环…...

编程日记 2026/2/28 10:10:18

JetBrains（全家桶: IDEA、WebStorm、GoLand、PyCharm） 2024.3+ 2025 版免费体验方案

JetBrains&#xff08;全家桶: IDEA、WebStorm、GoLand、PyCharm&#xff09; 2024.3 2025 版免费体验方案 前言 JetBrains IDE 是许多开发者的主力工具&#xff0c;但从 2024.02 版本起&#xff0c;JetBrains 调整了试用政策&#xff0c;新用户不再享有默认的 30 天免费试用…...

编程日记 2026/2/20 14:53:40

Pytorch实现之BCGAN实现双生成器架构的人脸面部生成

简介 简介：通过双生成器架构与重建损失进行循环的生成训练，实现人脸面部表情合成。 论文题目：BCGAN: Facial Expression Synthesis by Bottleneck-Layered Conditional Generative Adversarial Networks （基于瓶颈分层条件生成对抗网络的面部表情合成） 会议：2021 15th…...

编程日记 2026/2/19 23:42:35

智慧加油站小程序数据库设计文档

智慧加油站系统 - 数据库与API设计文档 1. 数据库设计 1.1 ER模型 系统的核心实体关系如下&#xff1a; 用户(User) ---< 订单(Order) ---< 加油记录(RefuelRecord)| | || | vv v …...

编程日记 2026/2/14 23:17:20

Docker生存手册：安装到服务一本通

文章目录 一. Docker 容器介绍1.1 什么是Docker容器&#xff1f;1.2 为什么需要Docker容器&#xff1f;1.3 Docker架构1.4 Docker 相关概念1.5 Docker特点 二. Docker 安装2.1 查看Linux内核版本2.2 卸载老版本docker&#xff0c;避免产生影响2.3 升级yum 和配置源2.4 安装Dock…...

编程日记 2026/2/15 20:13:40

Linux内核传输层UDP源码分析

一、用户数据包协议&#xff08;UDP&#xff09; 1.UDP数据报头 UDP 提供面向消息的不可靠传输&#xff0c;但没有拥塞控制功能。很多协议都使用 UDP&#xff0c;如用于 IP 网络传输音频和视频的实时传输协议 (Real-time Transport Protocol&#xff0c;RTP)&#xff0c;此类型…...

编程日记 2026/2/27 13:20:37

FPGA学习(二)——实现LED流水灯

FPGA学习(二)——实现LED流水灯 目录 FPGA学习(二)——实现LED流水灯一、DE2-115时钟源二、控制6个LED灯实现流水灯1、核心逻辑2、代码实现3、引脚配置4、实现效果 三、模块化代码1、分频模块2、复位暂停模块3、顶层模块 四、总结 一、DE2-115时钟源 DE2-115板子包含一个50MHz…...

编程日记 2026/3/3 17:46:58

E1-最远距离(stl使用)

题目描述 给定一个数组&#xff0c;请你找出数组中相同元素之间的最远距离。若数组中不存在相同元素&#xff0c;则输出 null。 输入描述 输入一个数组&#xff0c;数组长度不超过 10000。格式请见用例。 输出描述 输出数组中相同元素的最远距离。 用例 输入 [3, 2, 3,…...

编程日记 2026/3/5 12:19:57

Linux如何在设备树中表示和引用设备信息

DTS基本知识 dts 硬件的相应信息都会写在.dts为后缀的文件中&#xff0c;每一款硬件可以单独写一份xxxx.dts&#xff0c;一般在Linux源码中存在大量的dts文件&#xff0c;对于arm架构可以在arch/arm/boot/dts找到相应的dts&#xff0c;一个dts文件对应一个ARM的machie。 dtsi 值…...

编程日记 2026/3/8 13:56:32

Matlab 汽车振动多自由度非线性悬挂系统和参数研究

1、内容简介 略 Matlab 169-汽车振动多自由度非线性悬挂系统和参数研究 可以交流、咨询、答疑 2、内容说明 略 第二章 汽车模型建立 2.1 汽车悬架系统概述 2.1.1 悬架系统的结构和功能 2.1.2 悬架分类 2.2 四分之一车辆模型 对于车辆动力学&#xff0c;一般都是研究其悬…...

编程日记 2026/3/8 1:06:05

Maven核心包：maven-resolver-api

在阅读 nexus-pubic 开源项目过程中&#xff0c;使用了大量的核心组件进行轻量化集成。它的这种构建方式&#xff0c;在阅读过程中不得不感概&#xff0c;节省成本从构建项目的方式上就遥遥领先了。但是 maven核心包&#xff0c;依然使用前几年的aether-spi&#xff0c;却没有更…...

编程日记 2026/3/7 22:07:44

生活中的可靠性小案例11：窗户把手断裂

窗户把手又断了&#xff0c;之前也断过一次&#xff0c;使用次数并没有特别多。上方的图是正常的把手状态&#xff0c;断的形状如下方图所示。 这种悬臂梁结构&#xff0c;没有一个良好的圆角过渡&#xff0c;导致应力集中。窗户的开关&#xff0c;对应的是把手的推拉&#xff…...

编程日记 2026/3/5 21:51:40

[oeasy]python074_ai辅助编程_水果程序_fruits_apple_banana_加法_python之禅

074_ai辅助编程_水果程序_fruits_加法 回忆上次内容 上次直接从模块中导入变量、函数 from my_file import pi 导入my_file.pi 并作为 pi 使用 from my_file import pi as my_pi 导入变量 并 重命名 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; …...

编程日记 2026/3/1 0:30:08

【图论】并查集的学习和使用

目录 并查集是什么&#xff1f; 举个例子 组成 父亲数组&#xff1a; find函数&#xff1a; union函数&#xff1a; 代码实现&#xff1a; fa[] 初始化code: find code&#xff1a; 递归实现: 非递归实现: union code : 画图模拟&#xff1a; 路径压缩&#xff1a…...

编程日记 2026/2/27 19:45:00

欢乐力扣：反转链表

文章目录 1、题目描述2、思路 1、题目描述 反转链表。  给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 2、思路 借助cur指针和pre双指针来调整链表的前后指向。 # Definition for singly-linked list. # class ListNode: # def __i…...

编程日记 2026/2/19 6:17:01

1.8PageTable

页表的作用 虚拟地址空间映射&#xff1a;页表记录了进程的虚拟页号到物理页号的映射关系。每个进程都有自己的页表&#xff0c;操作系统为每个进程维护一个独立的页表。内存管理&#xff1a;页表用于实现虚拟内存管理&#xff0c;支持进程的虚拟地址空间和物理地址空间之间的…...

编程日记 2026/2/25 20:01:47

什么是大带宽服务器

什么是大带宽服务器&#xff1f; 在深入探讨大带宽之前&#xff0c;让我们先明确带宽的概念。带宽与我们日常所说的宽带有所不同&#xff0c;宽带是运营商为满足家庭或商业上网需求所提供的服务&#xff0c;而带宽则特指数据的传输速度&#xff0c;尤其是上行速度。大带宽服务…...

编程日记 2026/2/25 19:07:45

【TCP】三次挥手，四次挥手详解--UDP和TCP协议详解

活动发起人小虚竹 想对你说&#xff1a; 这是一个以写作博客为目的的创作活动&#xff0c;旨在鼓励大学生博主们挖掘自己的创作潜能&#xff0c;展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴&#xff0c;那么&#xff0c;快来参加吧&#xff01…...

编程日记 2026/3/8 21:37:09

Compose 实践与探索十二 —— 附带效应

1、SideEffect Google 官方文档对 side effect 有两种翻译&#xff0c;简体中文翻译为附带效应&#xff0c;繁体中文翻译为副作用。这两个翻译我们用哪个都行&#xff0c;关键是如何理解它的含义。 1.1 什么是副作用 我们在日常生活中听到的副作用大多是医学领域中的&#x…...

编程日记 2026/2/14 14:09:26

Kubernetes 控制平面详解 —— 探秘 API Server、Controller Manager、Scheduler 与 etcd

文章目录 Kubernetes 控制平面详解 —— 探秘 API Server、Controller Manager、Scheduler 与 etcd控制平面概述API Server角色与职责工作原理 etcd角色与职责工作原理 Scheduler角色与职责工作原理 Controller Manager角色与职责工作原理 总结 Kubernetes 控制平面详解 —— 探…...

编程日记 2026/2/14 6:40:37

SSM基础专项复习4——Maven项目管理工具（1）

系列文章 1、SSM基础专项复习1——SSM项目整合-CSDN博客 2、SSM基础专项复习2——Spring 框架&#xff08;1&#xff09;-CSDN博客 3、SSM基础专项复习3——Spring框架&#xff08;2&#xff09;-CSDN博客 文章目录 系列文章 1. Maven 的概念 1.1. 什么是 Maven 1.2. 什…...

编程日记 2026/2/20 17:15:23