【HTML 基础教程】HTML 元素

news2025/3/31 2:21:17

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 版本中强制使用小写。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2322995.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Element UI实现表格全选、半选

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

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

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

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

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

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

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

如何在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 "请使用…

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

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

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

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

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​…

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…

数据库设计-笔记4

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

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

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

RAG专栏:向量数据库

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

【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…

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

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

HarmonyOs-ArkUI List组件

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

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

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

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

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

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

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

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

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

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

目录 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层序遍历…