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

【HTML 基础教程】HTML 元素

article 2026/2/21 13:32:33

HTML 文档由 HTML 元素定义。

HTML 元素

开始标签 *元素内容结束标签 *
<p>这是一个段落</p>
<a href="default.htm">这是一个链接</a>
<br>换行

*开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

HTML 文档实例

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个 HTML 元素。

HTML 实例解析

<p> 元素:

<p>这是第一个段落。</p>

这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
元素内容是: 这是第一个段落。

<body> 元素:

<body>
<p>这是第一个段落。</p>
</body>

<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。

<html> 元素：

<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
元素内容是另一个 HTML 元素（body 元素）。

不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落

以上实例在浏览器中也能正常显示，因为关闭标签是可选的。

但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

相关文章：

【HTML 基础教程】HTML 元素

HTML 文档由 HTML 元素定义。 HTML 元素 开始标签 *元素内容结束标签 *<p>这是一个段落</p><a href"default.htm">这是一个链接</a><br>换行 *开始标签常被称为起始标签&#xff08;opening tag&#xff09;&#xff0c;结束标签常称…...

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

解锁智能制造新体验：兰亭妙微 UE/UI 设计赋能行业变革

在智能制造时代的滚滚浪潮中&#xff0c;企业的数字化转型不仅是技术的革新&#xff0c;更是用户体验与交互界面的全面升级。然而&#xff0c;许多制造企业在这一转型过程中&#xff0c;面临着一系列 UI/UE 设计难题&#xff0c;严重阻碍了企业的数字化发展进程。兰亭妙微凭借专…...

编程日记 2026/2/15 19:19:11

Element UI实现表格全选、半选

制作如图所示的表格全选、半选&#xff1a; 父组件 <template><div id"app"><SelectHost :hostArray"hostArray" /></div> </template><script> import SelectHost from ./components/SelectHost.vue export default…...

编程日记 2026/2/18 4:36:51

如何使用动作捕捉系统训练人形机器人

随着人形机器人变得越来越先进&#xff0c;使用动作捕捉系统教会它们如何像人类一样移动成为了人形机器人领域正在研究的全新方向。本文探讨了如何使用Xsens技术捕捉精确的人类运动数据&#xff0c;使机器人能够通过人工智能和机器学习安全高效地学习、适应和执行复杂任务。 近…...

编程日记 2026/2/19 5:23:24

Vue.js 和 Vue 3 全面详解指南

1. Vue.js 基础介绍 1.1 什么是 Vue.js Vue.js（简称 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。与其他框架不同，Vue 被设计为可以逐步采用。Vue 的核心库只关注视图层，易于上手，便于与其他库或既有项目整合。 Vue 由尤雨溪（Evan You）在 2014 年创建。尤雨…...

编程日记 2026/2/14 0:51:03

OpenRAND可重复的随机数生成库

OpenRAND 是一个 C++ 库，旨在通过提供强大且可复制的随机数生成解决方案来促进可重复的科学研究。它是一个简单的仅头文件库，性能可移植，统计稳健，并且易于集成到任何 HPC 计算项目中。 特征 跨平台支持：OpenRAND 旨在跨各种平台无缝工作，包括 CPU 和 GPU。其仅标题库设计…...

编程日记 2025/12/26 9:01:39

内网渗透技术 Docker逃逸技术(提权)研究 CSMSF

目录 如何通过上传的webshell判断当前环境是否是物理环境还是Docker环境 方法一&#xff1a;检查文件系统 方法二&#xff1a;查看进程 方法三&#xff1a;检查网络配置 方法四&#xff1a;检查环境变量 方法五&#xff1a;检查挂载点 总结 2. 如果是Docker环境&#x…...

编程日记 2026/2/20 6:38:18

生活电子常识——cmd不能使用anaconda的python环境，导致输入python打开应用商店

前言 电脑已经安装了anaconda,从自带的Anaconda Prompt (Anaconda3)中是可以识别python环境的&#xff0c;然而切换到cmd时&#xff0c;突然发现cmd中无法识别anaconda的python环境&#xff0c;竟然打开了应用商店让我安装Python&#xff0c;这当然是不对的。 解决 这是因为…...

编程日记 2026/2/14 16:34:54

如何在linux中部署dns服务 主备dns （详细全过程）

环境centos 7.9 主DNS&#xff1a;192.168.60.131 备DNS&#xff1a;192.168.60.134 我以 chenxingyu0.com 指向 192.168.60.200为例 首先是主dns #!/bin/bash# 检查是否为 root 用户 if [ "$(id -u)" ! "0" ]; thenecho "请使用…...

编程日记 2026/2/21 7:48:12

Oracle到达梦数据库迁移：技术要点与实践分享

一、达梦数据库简介 达梦数据库（DM，Dameng Database）是国内自主研发的具有自主知识产权的大型通用数据库管理系统，具备以下显著特点： 1.高性能：高效的存储与计算分离架构：达梦数据库采用先进的存储与计算分离架构，能够根据业务需求灵活分配存储和计算资源，大大提高了…...

编程日记 2026/2/14 13:12:09

word写latex-Mathtype安装成功-方法

MathType安装报错 想在word写latexMathtype, 网上搜教程安装&#xff0c; 结果一直报错一直删重来&#xff0c; 一直报错一直删了重来 一直报错一直删了重来来来&#xff0c; 就这么反反复复一直不好 网上的教程都是教你不是删mathtype, 就是删office 时代变了啊&#x…...

编程日记 2026/2/20 15:09:09

【踩坑日记】springboot 打包后实现类无法找到

试过了所有改什么目录 依赖 clean都以失败告终 最后将实现类的文件名从Impl改成impl宣布成功 记得使用idea自带的重构...

编程日记 2026/2/16 20:13:23

deepseek(2)——deepseek 关键技术

1 Multi-Head Latent Attention (MLA) MLA的核心在于通过低秩联合压缩来减少注意力键&#xff08;keys&#xff09;和值&#xff08;values&#xff09;在推理过程中的缓存&#xff0c;从而提高推理效率&#xff1a; c t K V W D K V h t c_t^{KV} W^{DKV}h_t ctKV​WDKVht​…...

编程日记 2026/2/16 7:33:51

Linux (Centos7)安装Mongodb4.0.28

一、官网下载安装包上传到服务器系统 官网&#xff1a;https://www.mongodb.com/try/download/community 放在/opt/software目录下&#xff1a; 二、解压至/usr/local目录下&#xff0c;并重新命名为mongodb [rootlocalhost software]# tar -zxvf mongodb-linux-x86_64-rhel7…...

编程日记 2026/2/17 13:49:43

数据库设计-笔记4

1.操作词汇简介 insert&#xff1a;用于向表中插入新记录。 delete&#xff1a;用于从表中删除记录。 update&#xff1a;用于修改表中已有的记录。 select&#xff1a;用于从表中检索数据。 2.代码基础(增删改&#xff09; -- 修改表中的信息 -- 修改表名 alter table s…...

编程日记 2026/2/17 15:35:47

基于python的图书管理系统设计与实现

摘要 21世纪的今天&#xff0c;随着计算机技术和网络技术的的不断推广发展和应用&#xff0c;图书馆管理方式也应该随之而更新&#xff0c;借由人力进行繁杂重复的图书管理工作已经不再可取&#xff0c;人们对于信息科学化的认识&#xff0c;已由低层次向高层次发展&#xff0…...

编程日记 2026/2/19 4:47:38

10-- 网络攻击防御原理全景解析 | 从单包攻防到DDoS军团作战(包你看一遍全记住)

&#x1f6e1;️ 网络攻击防御原理全景解析 | 从单包攻防到DDoS军团作战 如果你也对网络工程师的内容感兴趣的话&#xff0c;欢迎看我的最新文章9–BGP路由黑洞&#xff08;超万字大解析&#xff09;&#xff1a;网络世界的“百慕大三角“逃生指南(BGP路由配置实验含路由黑洞,…...

编程日记 2025/7/14 7:42:23

RAG专栏：向量数据库

一、数据库分类 键值数据库&#xff08;Key-Value&#xff09;&#xff1a;通常用于简单的数据存储&#xff0c;通过键来快速访问数据。文档数据库&#xff08;Document&#xff09;&#xff1a;用于存储文档结构的数据&#xff0c;如 JSON 格式。图数据库&#xff08;Graph&a…...

编程日记 2026/2/14 12:17:40

【GPUStack】【dify】【RAGflow】：本地部署GPUStack并集成到dify和RAGflow

目录 Nvidia-Driver CUDA NVIDIA Container Toolkit&#xff08;新版本的docker不用安装&#xff0c;自带&#xff09; Docker 部署GPUStack Text Embeddings 部署模型库模型 测试 部署开源模型&#xff08;modelscope&#xff09; dify 集成 RAGflow集成 Nvidia-Dri…...

编程日记 2026/2/20 14:46:49

第12章:优化并发_《C++性能优化指南》notes

优化并发 一、并发基础与优化核心知识点二、关键代码示例与测试三、关键优化策略总结四、性能测试方法论多选题设计题答案与详解多选题答案&#xff1a; 设计题答案示例 一、并发基础与优化核心知识点 线程 vs 异步任务 核心区别&#xff1a;std::thread直接管理线程&#xf…...

编程日记 2026/2/20 8:51:34

逼用户升级Win11，微软开始给Win10限速

随着Windows10的支持时间越来越短&#xff0c;微软也加大了对Win10用户的驱赶力度。 最近&#xff0c;微软官宣了将要在今年6月份降低OneNote for Windows 10的同步速度。软件也将和Windows10在今年的10月14日一同停止支持和维护。 这将影响实时协作和多设备访问。 对OneNote…...

编程日记 2026/2/18 19:42:37

HarmonyOs-ArkUI List组件

列表是一个复杂的容器&#xff0c;当列表项达到一定数量&#xff0c;使得列表内容超出其范围的时候&#xff0c;就会自动变为可以滚动。列表适合用来展现同类数据类型。 List组件支持使用&#xff0c;条件渲染&#xff0c;循环渲染&#xff0c;懒加载等渲染控制方式生成子组件…...

编程日记 2026/2/6 23:32:51

基于YOLOv8深度学习的PCB缺陷检测识别系统【python源码+GUI界面+数据集+训练代码+登录界面】

目录 一、界面全貌展示 二、前言摘要 三、GUI界面演示 &#xff08;一&#xff09;用户加载自定义模型 &#xff08;二&#xff09;单张图像检测 &#xff08;三&#xff09;检测图像文件夹 &#xff08;四&#xff09;检测视频 &#xff08;五&#xff09;摄像头检测 …...

编程日记 2026/2/17 0:21:22

鸿蒙生态圈暗战：数字孪生三强争霸谁将主宰消费电子未来？

IDC数据显示&#xff0c;2025年Q1华为以38.7%份额领跑中国折叠屏市场&#xff0c;Pura X首月销量突破120万台。这款搭载HarmonyOS 5的旗舰&#xff0c;通过灵犀通信技术实现5G A网络下载速率提升30%&#xff0c;并在离线环境下完成厘米级导航。其爆款逻辑背后&#xff0c;是鸿蒙…...

编程日记 2026/2/20 20:42:23

react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析

一、React 15&#xff08;2016&#xff09; 核心架构&#xff1a;Stack Reconciler&#xff08;栈协调器&#xff09; 工作原理&#xff1a; 同步递归渲染&#xff1a;采用深度优先遍历方式递归处理 Virtual DOM&#xff0c;形成不可中断的调用栈渲染流程&#xff1a;1. 触发 …...

编程日记 2026/2/19 12:49:58

计算机网络 --应用层

计算机网络 --应用层 一、应用层概述 1. 功能 应用层为应用程序通信提供直接服务&#xff0c;这种服务是用户能够直接感知到的数据通信服务。核心功能包括&#xff1a; 文件传输&#xff1a;实现不同设备间文件的传输操作。访问管理&#xff1a;对用户访问资源等进行管理。电…...

编程日记 2026/2/14 10:34:32

CMS迁移中SEO优化整合步骤详解

内容概要 在CMS迁移过程中&#xff0c;系统化的规划与执行是保障SEO排名稳定性的核心。首先需明确迁移流程的关键阶段&#xff0c;包括数据备份、URL适配、元数据同步及安全配置等环节。其中&#xff0c;数据备份不仅需覆盖原始数据库与静态资源&#xff0c;还需验证备份文件的…...

编程日记 2026/2/12 9:16:50

数据结构初阶-二叉树链式

目录 1.概念与结构 2.二叉数链式的实现 2.1遍历规则 2.2申请内存空间 2.3手动构建一棵二叉树 2.4二叉树结点的个数 2.5二叉树叶子结点的个数 2.6二叉树第K层结点个数 2.7二叉树的高度 2.8二叉树中查找值为x的结点 2.9二叉树的销毁 3.层序遍历 3.1概念 3.2层序遍历…...

编程日记 2026/2/18 11:03:29

Springboot 集成 Flowable 6.8.0

1. 创建 Spring Boot 项目 通过 Spring Initializr&#xff08;https://start.spring.io/ &#xff09;创建一个基础的 Spring Boot 项目&#xff0c;添加以下依赖&#xff1a; Spring WebSpring Data JPAMySQL DriverLombok&#xff08;可选&#xff0c;用于简化代码&#x…...

编程日记 2026/2/14 5:36:42

协作机械臂需要加安全墙吗？ 安全墙 光栅 干涉区

安全墙是什么 文章目录 安全墙是什么简介1. 物理安全墙1.1 定义&#xff1a;1.2 作用机制&#xff1a;1.3 应用场景&#xff1a; 2. 虚拟安全墙2.2 定义&#xff1a;2.3 作用机制&#xff1a;2.3 应用场景&#xff1a; 3. 安全毛毯3.1 工作原理&#xff1a;3.2 特点3.3 应用场景…...

编程日记 2026/2/14 13:41:16