HTML元素,标签到底指的哪块部分?单双标签何时使用?

1. 标签(Tag) vs 元素(Element)

  • 标签(Tag)
    标签是 HTML 中用于定义元素的符号,用尖括号 < > 包裹。例如 <img> 是标签。
  • 元素(Element)
    元素是由 标签 + 内容 + 属性 组成的完整结构。例如 <img src="image.jpg" alt="图片"> 是一个完整的元素,包含标签 <img> 和属性 srcalt

总结

  • <img> 是标签,但完整的 <img src="image.jpg" alt="图片"> 是一个元素。
  • 元素可以理解为一个逻辑上的“对象”,而标签是元素的语法标记。

2. 何时用一对标签(双标签),何时用一个标签(单标签)

(1) 双标签(一对标签)

双标签由 开始标签 + 内容 + 结束标签 组成,用于包裹内容。
语法<tag>内容</tag>
适用场景:需要包裹文本或其他元素时使用。
示例

html复制代码

<!-- 包裹文本 -->
<p>这是一个段落</p><!-- 包裹子元素 -->
<div><h1>标题</h1><span>内联内容</span>
</div>
(2) 单标签(自闭合标签)

单标签不需要包裹内容,直接通过自身完成功能。
语法<tag> 或 <tag />(在 XHTML 中必须闭合,如 <img />,但 HTML5 允许省略 /)。
适用场景:元素没有内容,仅通过属性定义行为。
常见单标签元素

  • <img>:嵌入图片(通过 src 属性指定图片路径)。
  • <br>:换行。
  • <input>:输入框。
  • <meta>:元数据(如页面编码、SEO 信息)。
  • <link>:链接外部资源(如 CSS 文件)。

示例

html复制代码

<!-- 单标签不需要内容 -->
<img src="cat.jpg" alt="一只猫">
<input type="text" placeholder="请输入">

3. <img> 的特殊性

  • <img> 是单标签元素,因为它没有内容,所有功能通过属性(srcalt)实现。
  • 关键属性
    • src:指定图片路径(必填)。
    • alt:图片的替代文本(必填,用于图片无法加载时显示,或辅助技术读取)。

示例

html复制代码

<!-- 正确的 img 元素 -->
<img src="logo.png" alt="网站Logo">

4. 常见误区

  • 误区 1:认为“标签”和“元素”是同一概念。
    纠正:标签是语法符号(如 <img>),元素是逻辑实体(标签 + 属性 + 可能的子内容)。
  • 误区 2:单标签需要包裹内容。
    纠正:单标签(如 <img>)不需要内容,通过属性即可完成功能。

总结表格

类型语法示例适用场景
双标签元素<tag>内容</tag><p>文本</p>包裹文本或子元素
单标签元素<tag> 或 <tag /><img src="..." alt="...">无内容,通过属性定义行为

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

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

相关文章

Android APK组成编译打包流程详解

Android APK&#xff08;Android Package&#xff09;是 Android 应用的安装包文件&#xff0c;其组成和打包流程涉及多个步骤和文件结构。以下是详细的说明&#xff1a; 一、APK 的组成 APK 是一个 ZIP 格式的压缩包&#xff0c;包含应用运行所需的所有文件。解压后主要包含以…

Token相关设计

文章目录 1. 双Token 机制概述1.1 访问令牌&#xff08;Access Token&#xff09;1.2 刷新令牌&#xff08;Refresh Token&#xff09; 2. 双Token 认证流程3. Spring Boot 具体实现3.1 生成 Token&#xff08;使用 JWT&#xff09;3.2 解析 Token3.3 登录接口&#xff08;返回…

HTTP 请求时传递多部分表单数据

HTTP 请求时传递多部分表单数据&#xff08;multipart/form-data&#xff09; --data-raw $------demo11111\r\nContent-Disposition: form-data; name"Filedata"; filename"截屏2025-02-27 15.45.46.png"\r\nContent-Type: image/png\r\n\r\n\r\n------d…

Java基础关键_013_日期处理

目 录 一、传统 API 1.System.currentTimeMillis() &#xff08;1&#xff09;说明 &#xff08;2&#xff09;实例 2.构造方法 &#xff08;1&#xff09;说明 &#xff08;2&#xff09;无参构造 &#xff08;3&#xff09;有参构造 3.日期格式化 &#xff08;1&am…

51单片机中reg52.h与regx52.h在进行位操作时的不同

reg52.h中不能使用例如 P2_0;这样的定义 而只能使用 P2^0;这样的定义 但是都不可以对位进行直接赋值操作&#xff1b; 而 regx52.h中可以使用 P2_0和P2^0&#xff1b;但是只有使用下划线的才可以对位进行赋值操作 例如P2_0 1; 但不可以是P2^0 1; 在 C 语言中&#xff0c;…

基于Rook的Ceph云原生存储部署与实践指南(上)

#作者&#xff1a;任少近 文章目录 1 Ceph环境准备2 rook部署ceph群集2.1 Rook 帮助地址2.2 安装ceph2.3 获取csi镜像2.4 Master参加到osd2.5 设置默认存储 3 Rook部署云原生RBD块存储3.1 部署storageclass资源3.2 部署WordPress使用RBD3.3 WordPress访问 4 Rook部署云原生RGW…

FastExcel与Reactor响应式编程深度集成技术解析

一、技术融合背景与核心价值 在2025年企业级应用开发中&#xff0c;大规模异步Excel处理与响应式系统架构的结合已成为技术刚需。FastExcel与Reactor的整合方案&#xff0c;通过以下技术协同实现突破性性能&#xff1a; 内存效率革命&#xff1a;FastExcel的流式字节操作与Re…

DeepSeek R1/V3满血版——在线体验与API调用

前言&#xff1a;在人工智能的大模型发展进程中&#xff0c;每一次新模型的亮相都宛如一颗投入湖面的石子&#xff0c;激起层层波澜。如今&#xff0c;DeepSeek R1/V3 满血版强势登场&#xff0c;为大模型应用领域带来了全新的活力与变革。 本文不但介绍在线体验 DeepSeek R1/…

Spring Data JPA 中的分页实现:从 BasePage 到 Pageable

文章目录 Spring Data JPA 中的分页实现&#xff1a;从 BasePage 到 Pageable背景&#xff1a;为什么需要分页&#xff1f;认识 BasePage 类深入 toPageable() 方法1. 处理页码和页面大小2. 处理排序方向3. 处理排序字段4. 生成 Pageable 对象 实战&#xff1a;如何使用 BasePa…

Android Studio 新版本Gradle发布本地Maven仓库示例

发布代码到JitPack示例&#xff1a;https://blog.csdn.net/loutengyuan/article/details/145938967 以下是基于 Android Studio 24.2.2&#xff08;Gradle 8.10.2 AGP 8.8.0 JDK17&#xff09; 的本地 Maven 仓库发布示例&#xff0c;包含aar和jar的不同配置&#xff1a; 1.…

python量化交易——金融数据管理最佳实践——qteasy创建本地数据源

文章目录 qteasy金融历史数据管理总体介绍本地数据源——DataSource对象默认数据源查看数据表查看数据源的整体信息最重要的数据表其他的数据表 从数据表中获取数据向数据表中添加数据删除数据表 —— 请尽量小心&#xff0c;删除后无法恢复&#xff01;&#xff01;总结 qteas…

Android中使用Robolectric测试点击事件(不需要手机)

文章目录 一、前言二、简单示例三、参考文档 一、前言 Robolectric 是一个由 Google 维护的开源 Android 测试框架&#xff0c;它允许你以 Android 运行时环境运行单元测试。 Robolectric 提供了一个模拟 Android 运行时环境&#xff0c;允许你测试你的代码是否正确地使用 And…

Spring Boot 接口 JSON 序列化优化:忽略 Null 值的九种解决方案详解

一、针对特定接口null的处理&#xff1a; 方法一&#xff1a;使用 JsonInclude 注解 1.1 类级别&#xff1a;在接口返回的 ‌DTO 类或字段‌ 上添加 JsonInclude 注解&#xff0c;强制忽略 null 值&#xff1a; 类级别&#xff1a;所有字段为 null 时不返回 JsonInclude(Js…

ds回答-开源llm应用开发平台

以下是几个著名的开源 LLM 应用开发平台&#xff0c;涵盖不同场景和技术特点&#xff1a; 1. Dify 特点&#xff1a;低代码 / 无代码开发、支持 RAG 检索、Agent 智能体、模型管理、LLMOps 全流程优化。核心功能&#xff1a;可视化工作流编排、数百种模型兼容&#xff08;如 GP…

LDR6020 PD3.1 协议芯片在特定设备中的应用

在电子设备互联互通的时代&#xff0c;芯片技术成为提升设备性能与功能的关键驱动力。LDR6020 PD3.1 协议芯片以其出色的性能&#xff0c;在 TYPE-C 台式显示器 / 便携显示器、一拖二快充线以及手机电脑转接器等设备中展现出独特价值&#xff0c;为用户带来更便捷、高效的使用体…

wzl-django学习

####################################################总的urls.py from django.contrib import admin from django.urls import path,include, re_path from django.views.static import serve from django.conf import settings from drf_yasg import openapi from drf_yas…

python -ssh学习

def exe_sshcmd(ip,username,userpswd,port,cmd): """ 功能&#xff1a;SSH登录到指定设备&#xff0c;并执行对应的命令 入参&#xff1a;前四项为ssh登录shell的ip和port&#xff0c;具备管理员权限的用户名和密码&#xff0c; cmd可以…

PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 TIFF

TIFF文件是高质量图像的首选。它们广泛用于印刷、存档和图形设计。企业通常需要转换PDF文档以获得更好的兼容性。了解如何以编程方式执行此转换可以节省时间和资源。在这篇教程中&#xff0c;我们将探讨如何使用 Python 将 PDF 转换为 TIFF。 本文涵盖以下主题&#xff1a; P…

服务器IPMI用户名、密码批量检查

背景 大规模服务器部署的时候&#xff0c;少不了较多的网管和监测平台&#xff0c;这些平台会去监控服务器的性能、硬件等指标参数&#xff0c;为了便于管理和控制&#xff0c;则需要给服务器IPMI带外管理添加较多的用户&#xff0c;这就需要对较多的服务器检查所对应的IPMI用…

< 自用文儿 > Gobuster 暴力扫描工具与 SecLists 安全测试词表集合

Ethice 道德问题 GFW 的保护下&#xff0c;很多的设备操作系统是停留在更老的版本&#xff0c;应用软件也是&#xff0c;因此很多的漏洞没有被修复。通讯没有使用加密&#xff0c;例如网页没有使用 HTTPS 网站很多。几乎是半裸的在网络上等着被食。 不做恶是下限。 环境&…