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.rhkb.cn/news/27184.html

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

相关文章

JAVA实战开源项目:安康旅游网站(Vue+SpringBoot) 附源码

本文项目编号 T 098 &#xff0c;文末自助获取源码 \color{red}{T098&#xff0c;文末自助获取源码} T098&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

三数之和_算法

1.题目描述 首先我们分析下这道题目:假设给我们一个数组,让数组某三个不同下标的数相加最终得0,那么我就返回这三个数.但是如果返回的多个数组中的元素相同,那么我们还要删掉其中一个保留一个. 注意:这道题的重点是三个数的下标不能相等并且返回的数组中的元素也不能相等,通过…

关于Deepseek本地部署硬件环境检查教程

要在电脑上本地部署DeepSeek&#xff0c;需要关注以下硬件和软件配置&#xff1a; 硬件配置 CPU&#xff1a;至少4核CPU&#xff0c;推荐Intel i5/i7或AMD Ryzen 5/7系列处理器。内存&#xff1a;至少8GB DDR4内存&#xff0c;推荐16GB DDR4内存&#xff0c;对于大型模型建议…

一周一个Unity小游戏2D反弹球游戏 - 移动的弹板(鼠标版)

前言 本文将实现控制弹板移动,通过Unity的New Input System,可以支持鼠标移动弹板跟随移动,触控点击跟随移动,并且当弹板移动到边界时,弹板不会移动超过边界之外。 创建移动相关的InputAction 项目模版创建的时候默认会有一个InputAction类型的文件,名字为InputSystem_Ac…

250302-绿联NAS通过Docker配置SearXNG及适配Open-WebUI的yaml配置

A. 配置Docker中的代理 绿联NAS简单解决docker无法获取镜像-不用软路由 - 哔哩哔哩 B. 下载官网对应的镜像 群晖NAS用docker搭建SearXNG元搜索引擎_哔哩哔哩_bilibili C. 修改默认省略的参数&#xff0c;只配置Base_URL&#xff0c;删除其它默认的空缺项 searxng-docker/REA…

C++-第十九章:异常

目录 第一节&#xff1a;异常有哪些 第二节&#xff1a;异常相关关键字 2-1.抛出异常 2-2.捕获异常 2-3.异常的捕获规则 2-3-1.异常被最近的catch捕获 2-3-2.catch捕获的是异常的拷贝 2-3-3.异常为子类时&#xff0c;可以用父类引用接收 2-4.捕获任意异常 第三节&#xff1…

Redis详解(实战 + 面试)

目录 Redis 是单线程的&#xff01;为什么 Redis-Key(操作redis的key命令) String 扩展字符串操作命令 数字增长命令 字符串范围range命令 设置过期时间命令 批量设置值 string设置对象,但最好使用hash来存储对象 组合命令getset,先get然后在set Hash hash命令: h…

‘ts-node‘ 不是内部或外部命令,也不是可运行的程序

新建一个test.ts文件 let message: string = Hello World; console.log(message);如果没有任何配置的前提下,会报错’ts-node’ 不是内部或外部命令,也不是可运行的程序。 此时需要安装一下ts-node。 npm install

(十 五)趣学设计模式 之 命令模式!

目录 一、 啥是命令模式&#xff1f;二、 为什么要用命令模式&#xff1f;三、 策略模式的实现方式四、 命令模式的优缺点五、 命令模式的应用场景六、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢博主的讲解方式&#xff0c;可以多多支…

基于单片机的智能扫地机器人

1 电路设计 1.1 电源电路 本电源采用两块LM7805作为稳压电源&#xff0c;一块为控制电路和传感器电路供电&#xff0c;另一块单独为电机供电。分开供电这样做的好处&#xff0c;有利于减小干扰&#xff0c;提高系统稳定性。 LM7805是常用的三端稳压器件&#xff0c;顾名思义0…

【Redis学习】Redis Docker安装,自定义config文件(包括RDB\AOF setup)以及与Spring Boot项目集成

【本文内容】 第1章&#xff1a;通过Docker安装Redis&#xff0c;并自定义config文件以及mount data目录。第2章&#xff1a;介绍Redis持久化到磁盘&#xff0c;有4种方式&#xff1a;RDB / AOF / NONE / RDB AOF。第3章&#xff1a;使用Server自带的redis-cli工具连接。第4章…

【3天快速入门WPF】13-MVVM进阶

目录 1. 窗体设置2. 字体图标3. 控件模板4. 页面逻辑4.1. 不使用MVVM4.2. MVVM模式实现本篇我们开发一个基于MVVM的登录页面,用来回顾下之前学习的内容 登录页面如下: 窗体取消了默认的标题栏,调整为带阴影的圆角窗体,左侧放一张登录背景图,右边自绘了一个关闭按钮,文本框…

PHP实现登录和注册(附源码)

前言 本博客主要讲述利用php环境实现一个简单的前后端结合的用户登录和注册功能。phpstudy是PHP调试环境的集成包&#xff0c;该程序包集成了 ApachePHPMySQLphpMyAdmin 等多个工具&#xff0c;是很好用的调试环境的程序集成包。 目录 前言 1. 准备工作 1.1 工具 1.2 php…

Redis数据结构-List列表

1.List列表 列表类型适用于存储多个有序的字符串&#xff08;这里的有序指的是强调数据排列顺序的重要&#xff0c;不是升序降序的意思&#xff09;&#xff0c;列表中的每个字符串称为元素&#xff08;element&#xff09;&#xff0c;一个列表最多可以存储2^32-1个元素。在R…

Redis 实战篇 ——《黑马点评》(下)

《引言》 &#xff08;下&#xff09;篇将记录 Redis 实战篇 最后的一些学习内容&#xff0c;希望大家能够点赞、收藏支持一下 Thanks♪ (&#xff65;ω&#xff65;)&#xff89;&#xff0c;谢谢大家。 传送门&#xff08;上&#xff09;&#xff1a;Redis 实战篇 ——《黑马…

WordPress二次开发实现用户注册审核功能

WordPress默认直接注册登录了&#xff0c;不需要任何验证&#xff0c;如果被批量注册就麻烦了&#xff0c;所以添加一个审核功能比较好。 注册用户默认需要手动审核&#xff0c;审核以后才能登陆&#xff0c;开启审核&#xff0c;可以有效防止用户批量注册。 这儿讲解一下如何…

基于SpringBoot的“青少年心理健康教育网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“青少年心理健康教育网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统总体结构图 实体属性图 系统首页界…

湖仓一体概述

湖仓一体之前&#xff0c;数据分析经历了数据库、数据仓库和数据湖分析三个时代。 首先是数据库&#xff0c;它是一个最基础的概念&#xff0c;主要负责联机事务处理&#xff0c;也提供基本的数据分析能力。 随着数据量的增长&#xff0c;出现了数据仓库&#xff0c;它存储的是…

React:B站评论demo,实现列表渲染、删除按钮显示和功能实现、导航栏渲染切换及高亮显示、评论区的排序

功能要求&#xff1a; 1、渲染评论列表 2、删除评论功能&#xff1a;只显示自己评论的删除按钮&#xff1b;点击删除按钮&#xff0c;删除当前评论&#xff0c;列表中不再显示。 3、渲染导航Tab&#xff08;最新 | 最热&#xff09;和其 高亮实现 4、评论排序功能实现&…

springboot系列教程(三十一):springboot整合Nacos组件,环境搭建和入门案例详解

一、Nacos基础简介 1、概念简介 Nacos 是构建以“服务”为中心的现代应用架构&#xff0c;如微服务范式、云原生范式等服务基础设施。聚焦于发现、配置和管理微服务。Nacos提供一组简单易用的特性集&#xff0c;帮助开发者快速实现动态服务发现、服务配置、服务元数据及流量管…