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

HTML三叉戟，标签、元素、属性各个的意义是什么？

news 2026/4/4 21:10:45

🌟🌟🌟 专栏详解 🎉 🎉 🎉

欢迎来到前端开发之旅专栏！ 不管你是完全小白，还是有一点经验的开发者，在这里你会了解到最简单易懂的语言，与你分享有关前端技术和实用技巧的内容。此专栏的目标是提供易于理解且实用的内容，通过深入浅出的方式让大家掌握前端开发的核心概念和技能。我也相信，通过这个专栏，各位开发者们将更好地理解Web开发的本质，从而掌握更深层次的技术。Are you ready? 各位开发者们你们准备好了吗？
在这里插入图片描述

文章目录

  • 一、HTML（标签）
  • 二、HTML（元素）
  • 三、HTML（属性）
    • 结语

一、HTML（标签）

在HTML中，标签是用于表示不同类型内容的关键词或代码。它们通常被尖括号包围，例如<tag>。标签可以用于定义文本、图像、链接、段落、标题等。HTML标签通常成对出现，包括开始标签和结束标签，例如<p>我是一个粉刷匠</p>。开始标签用于标记内容的开始，结束标签用于标记内容的结束。

<!DOCTYPE html>
<html>
<head><title>归来巨星</title>
</head>
<body><h1>欢迎来到巨星的网页</h1><p>这是一个p标签，我代表是一个段落。</p><h2>我是一个h2标签，我可以是从h1-h6哦！</h2><ul><li>list1</li><li>list2</li><li>list3</li></ul><h2>链接</h2><a href="https://www.csdn.net/">点击这里</a>访问csdn网站。<h2>图片</h2><img src="aaaa.jpg" alt="图片"><h2>表格</h2><table><tr><th>姓名</th><th>年龄</th></tr><tr><td>小明</td><td>15</td></tr><tr><td>小红</td><td>16</td></tr></table>
</body>
</html>

说明

标签说明
html根元素，包含了整个HTML文档的内容。
head头部元素，用于定义文档的元数据，例如标题（<title>标签）
body主体元素，包含了网页的可见内容。
h1~h6标题标签，用于定义不同级别的标题。
p段落标签，用于定义段落内容。
ul无序列表标签，用于创建项目符号列表。
li列表项标签，用于定义列表中的每个项目。
a链接标签，用于创建超链接。
img图像标签，用于插入图像。
table表格标签，用于创建表格。
tr表格行标签，用于定义表格中的行。
th表头单元格标签，用于定义表头单元格。
td表格数据单元格标签，用于定义表格中的数据单元格。

二、HTML（元素）

元素是标签及其包含的内容的总称。它由开始标签、结束标签和它们之间的内容组成。在HTML中，元素由标签以及标签之间的内容组成，例如<div>元素</div>。元素表示了文档的结构和语义。

<div>我是一个dom元素</div>

简单的讲元素其实就是标签的使用，也就是标签连带着里面的内容，我们将其看做是一个整体，也就是当成了一个元素，当然后续我们也会讲解这样使用的作用以及意义等

三、HTML（属性）

HTML属性用于提供关于HTML元素的附加信息，可以对元素进行设置和配置。属性以键值对的形式出现，位于元素的开始标签中。

  1. id属性：用于为元素指定唯一的标识符。
 <h1 id="title">这是标题</h1>
  1. class属性：用于为元素指定一个或多个样式类。
<div class="box"><p class="box-red">这是一个带样式的段落。</p>
</div>
  1. style属性：用于为元素指定内联样式，包含CSS属性和值。
<p style="color: red; font-size: 16px;">这是红色且字体大小为16像素的段落。</p>
  1. src属性：用于指定图像、音频、视频等外部资源的URL。
<img src="image.jpg" alt="图片">
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
  1. href属性：用于指定链接的URL。
<a href="https://www.example.com">点击这里访问示例网站</a>
  1. target属性：用于指定链接打开的目标窗口或框架。
<a href="https://www.example.com" target="_blank">在新窗口中打开链接</a>
  1. alt属性：用于为图像元素提供替代文本，当图像无法显示时显示该文本。
<img src="image.jpg" alt="替代文本">
  1. disabled属性：用于禁用表单元素的交互功能。
<input type="text" disabled>
  1. required属性：用于指示表单元素必须填写或选择。
<input type="text" required>

最后至此也是希望大家能够简单的理解html的三要素

结语

✨ 每天创作一点点
✨ 开心快乐一整天
✨ 点赞关注加收藏
✨ 美好一天又一天

铁铁们 感谢支持 我需要你们的三连 👍👍👍
请添加图片描述

相关文章：

HTML三叉戟，标签、元素、属性各个的意义是什么？

&#x1f31f;&#x1f31f;&#x1f31f; 专栏详解 &#x1f389; &#x1f389; &#x1f389; 欢迎来到前端开发之旅专栏&#xff01; 不管你是完全小白&#xff0c;还是有一点经验的开发者&#xff0c;在这里你会了解到最简单易懂的语言&#xff0c;与你分享有关前端技术和…...

编程日记 2023/10/19 18:21:35

prometheus获取kubelet接口监控数据

一、前言 k8s集群的kubelet服务内部有自带的cadvisor服务用于收集k8s集群的监控数据&#xff0c;所以可以通过调用kubelet的接口就能获取pod的资源监控数据&#xff0c;在新版本的k8s中&#xff0c;kubelet的监控数据获取端口为10250端口&#xff0c;老版本的是10255端口 二、…...

编程日记 2023/10/19 18:20:34

国产主控应用案例：汉王电子血压计-君正开发板

2023春季新品发布会上汉王科技发布柯氏音法电子血压计产品—汉王电子血压计&#xff0c;继嗅觉检测盒之后再次深度布局大健康领域。 不同于当前市面上使用示波法原理的电子血压计&#xff0c;汉王电子血压计采用血压测量金标准中的柯氏音法&#xff0c;由此引领一场电子血压计领…...

编程日记 2023/10/19 18:19:34

万宾科技智能井盖传感器特点介绍

当谈论城市基础设施的管理和安全时&#xff0c;井盖通常不是第一项引人注目的话题。然而&#xff0c;传统井盖和智能井盖传感器之间的差异已经引起了城市规划者和工程师的广泛关注。这两种技术在功能、管理、安全和成本等多个方面存在着显著的差异。 WITBEE万宾智能井盖传感器E…...

编程日记 2023/10/19 18:18:33

YoloV8改进策略：SwiftFormer，全网首发，独家改进的高效加性注意力用于实时移动视觉应用的模型，重构YoloV8

文章目录 摘要论文：《SwiftFormer：基于Transformer的高效加性注意力用于实时移动视觉应用的模型》1、简介2、相关研究3、方法3.1、注意力模块概述3.2、高效的加性注意力3.3、SwiftFormer 架构4、实验4.1、实现细节4.2、基线比较4.3、图像分类4.4、目标检测和实例分割4.5、语义…...

编程日记 2023/10/19 18:17:32

Jupyter Notebook在指定位置打开

1、在Jupyter Notebook设置文件中修改默认路径 anconda prompt输入&#xff1a; jupyter notebook --generate-config 找到配置文件路径&#xff1a;C:\Users\Lenovo.jupyter 打开文件&#xff0c;修改默认路径&#xff1a; ## The directory to use for notebooks and kernel…...

编程日记 2023/10/19 18:16:31

树控件的使用

目录 1、修改树控件的基础属性&#xff1a; 2、准备图标 &#xff1a; &#xff08;1&#xff09;、ico后缀的图片放入当前文件路径的rc中 &#xff08;2&#xff09;、在Icon中添加资源&#xff0c;导入图片 &#xff08;3&#xff09;、准备HICON图标 &#xff08;4&am…...

编程日记 2023/10/19 18:15:30

C++实现顺序栈类的定义，编写main ()函数验证顺序栈类设计的合理性

C实现顺序栈类的定义&#xff0c;编写main ()函数验证顺序栈类设计的合理性 以下是一个简单的C代码示例&#xff0c;用于实现顺序栈类的定义并编写main()函数来验证其合理性&#xff1a; #include <iostream> using namespace std;const int MAX_SIZE 100; // 定义栈的…...

编程日记 2023/10/19 18:14:28

手机直播助手软件app哪个好用？

手机直播助手软件现在可谓是多如牛毛&#xff0c;从上半年魔棒手机自动直播软件上线以来。几乎全国所有的科技公司都效仿魔棒手机自动直播软件兴起手机直播助手开发热。相对来说&#xff0c;简单的手机直播助手软件没什么技术门槛。但是手机无人直播助手软件要做精做全则很难。…...

编程日记 2023/10/19 18:13:27

腾讯待办宣布关停，哪款待办事项提醒APP好？

如果你之前一直使用微信中的“腾讯待办”小程序来记录待办事项并设置定时提醒&#xff0c;那么你就会发现腾讯待办在2023年10月16日通过其官方微信公众号、小程序发布了业务关停公告&#xff0c;将于2023年12月20日全面停止运营并下架&#xff0c;并且有导出数据的提示。 腾讯…...

编程日记 2023/10/19 18:12:26

【单片机毕业设计】【hj-006-7】CO、有害混合气体检测 | 空气质量检测 | 有害气体检测

一、基本介绍 项目名&#xff1a; 基于单片机的CO、有害混合气体检测系统设计 基于单片机的空气质量检测系统设计 基于单片机的有害气体检测系统设计 项目编号&#xff1a;mcuclub-hj-006-7 单片机类型&#xff1a;STC89C52 具体功能&#xff1a; 1、通过MQ-7检测CO值&#x…...

编程日记 2023/10/19 18:11:25

wpf主页面解析

1、 开头的网址作用 1和2都是引入命名空间的&#xff0c;每一个字符串代表一系列的命名空间&#xff0c;这样就可以不用一个一个引用了。wpf中规定有一个名称空间是可以不加名字的&#xff0c;xmlns不加名字是默认命名空间。 "http://schemas.microsoft.com/winfx/2006/x…...

编程日记 2023/10/19 18:10:24

三相交错LLC软启动控制程序算法实现---充电桩电源设计实战细节

简介 充电桩充电终端是一款单枪最大功率达到600kW的充电桩。它具有以下特点： 充电枪线长3.5米，重量小于90kg，额定电压1000V，最大电流600A，最大功率600kW。 高宽深为1700340295mm。 该充电桩采用模块化设计，具有较高的可靠性和可维护性。 充电时间大约在30分钟左右，…...

编程日记 2023/10/19 18:09:24

Chrome 115之后的版本，安装和使用chromedriver

在Python中使用selenium 时报如下错误&#xff1a; 1. 老版本chrome对应的chromedriver 下载地址&#xff1a;CNPM Binaries Mirror 2. 新版本chrome对应的chromedriver 下载地址&#xff1a;Chrome for Testing availability...

编程日记 2023/10/19 18:08:23

潮玩宇宙：收藏、交流与竞技的数字乐园

最近爆火的新项目潮玩宇宙&#xff0c;想必有很多人入场了&#xff0c;代理商宣传投资147一个月回本&#xff0c;确实是现在做到了&#xff0c;现在平台一颗宝石的价格已经超过美金了&#xff0c;还有一大部分人在等待进场&#xff0c;潮玩宇宙旗下奖券世界和养猪农场已经做了有…...

编程日记 2023/10/19 18:07:22

企拓客app骗局为不实信息，企拓客保持正常经营状态

网络运营软件盛行,带来了一些混乱的现状,造成企业不同程度的损失,也让运营单位在选择软件时心有余悸。真真假假的信息,扰乱了运营软件的市场环境,热门的拓客软件不慎躺枪。企拓客就是其中之一。 笔者通过网上检索的方式,最终查证企拓客软件官方保持着正常运营,企拓客app骗局不攻…...

编程日记 2023/10/19 18:06:21

【性能】JDK和Jmeter的安装与配置

一、JDK环境配置 1. 下载JDK 官网下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/java-archive-downloads-javase7-521261.html 选择对应系统的安装包&#xff0c;下载后安装&#xff0c;安装中记录JDK安装的地址&#xff0c;之后一直点击下一…...

编程日记 2023/10/19 18:05:20

02_单片机及开发板介绍

单片机简介 单片机&#xff0c;又称为微控制器&#xff08;Microcontroller&#xff09;&#xff0c;是一种集成了微处理器核心、存储器、输入/输出接口及各种功能模块的集成电路芯片。它通常由中央处理器&#xff08;CPU&#xff09;、存储器、输入/输出接口以及各种外设组成&…...

编程日记 2023/10/19 18:04:19

华测监测预警系统 2.2---任意文件读取漏洞

目录 1. 资产搜集 2. 漏洞复现 3. 实战总结 1. 资产搜集 直接上fofa 和 hunter 个人推荐hunter可以看到icp备案公司直接提交盒子就行了 FOFA语法 app”华测监测预警系统2.2” Hunter语法 web.body”华测监测预警系统2.2” 2. 漏洞复现 这里手动复现的&#xff0c;目录是/…...

编程日记 2023/10/19 18:03:18

新版多功能去水印工具微信小程序源码下载+带流量主功能

新版多功能去水印工具微信小程序源码下载&#xff0c;带流量主功能。自带去水印接口的多功能小程序&#xff0c;支持各大平台短视频去水印。 支持保存封面、图集、标题等等&#xff1b;支持本地图片去水印&#xff1b;支持图片拼接&#xff1b;支持九宫格切图&#xff1b;支持修…...

编程日记 2023/10/19 18:01:14

跨境支付风控难？查IP归属地如何识别交易风险与合规隐患

凌晨两点&#xff0c;某跨境支付平台的风控系统突然告警&#xff1a;一笔从东南亚IP发起的交易&#xff0c;试图从一张欧洲信用卡向非洲账户转账。系统立即拦截&#xff0c;事后确认这是一起典型的跨境洗钱行为。这不是偶然&#xff0c;而是查IP归属地技术在交易风控中的日常应…...

编程新知 2026/4/4 20:49:31

适配新的gps模块，在Android系统中注意哪些问题

首先理解Android LocationManager与GNSS硬件适配深度涵盖LocationManager功能、GNSS芯片适配接口、文件系统依赖、调试实战四大模块&#xff0c;“LocationManager是Android定位服务的总入口&#xff0c;GNSS HAL层适配&#xff0c;从芯片驱动到Framework层回调&#xff0c;完整…...

编程新知 2026/4/4 18:34:13

xArm机械臂电气接口全解析：从末端法兰到RS485的实战避坑指南

xArm机械臂电气接口全解析&#xff1a;从末端法兰到RS485的实战避坑指南 在工业自动化领域&#xff0c;机械臂的电气接口设计往往是决定系统稳定性的关键因素。作为国内领先的协作机器人品牌&#xff0c;xArm以其出色的性价比和开放性接口设计赢得了众多工程师的青睐。但当我们…...

编程新知 2026/4/4 17:07:03

掌握VESC Tool：从零到精通的电机控制调试指南

掌握VESC Tool&#xff1a;从零到精通的电机控制调试指南 【免费下载链接】vesc_tool The source code for VESC Tool. See vesc-project.com 项目地址: https://gitcode.com/gh_mirrors/ve/vesc_tool 想要轻松驾驭无刷电机&#xff0c;实现电动滑板、平衡车或机器人项目…...

编程新知 2026/4/4 17:01:01

2025届毕业生推荐的五大AI科研工具推荐

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 为能切实有效地把知网针对于人工智能创作出来的内容之检测概率降低下来&#xff0c;给出如下…...

编程新知 2026/4/4 16:18:23

Vue大屏自适应实战指南：v-scale-screen深度解析与完整方案

Vue大屏自适应实战指南&#xff1a;v-scale-screen深度解析与完整方案 【免费下载链接】v-scale-screen Vue large screen adaptive component vue大屏自适应组件 项目地址: https://gitcode.com/gh_mirrors/vs/v-scale-screen 在当今数据驱动的时代&#xff0c;大屏数据…...

编程新知 2026/4/4 15:59:55

哥伦比亚AI中心四项教师研究奖

机器学习 哥伦比亚人工智能技术中心宣布四项新教师研究奖 第三轮年度奖项表彰探索人工智能领域一系列挑战的创新研究。 作者&#xff1a;Staff writer 2023年7月25日 4分钟阅读 哥伦比亚工程学院与某机构宣布了哥伦比亚人工智能技术中心&#xff08;CAIT&#xff09;的四项…...

编程新知 2026/4/4 15:31:37

Topit窗口置顶效率引擎：重新定义Mac多任务工作流

Topit窗口置顶效率引擎&#xff1a;重新定义Mac多任务工作流 【免费下载链接】Topit Pin any window to the top of your screen / 在Mac上将你的任何窗口强制置顶 项目地址: https://gitcode.com/gh_mirrors/to/Topit 在信息爆炸的时代&#xff0c;我们每天需要处理的窗…...

编程新知 2026/4/4 15:09:14

猫抓：网页资源提取工具的全场景应用指南

猫抓&#xff1a;网页资源提取工具的全场景应用指南 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 你是否曾遇到这样的困境&#xff1a;精心策划的…...

编程新知 2026/4/4 14:54:59

ensp安装遇难题？快马AI助手智能诊断并生成个性化修复方案

eNSP安装遇难题&#xff1f;快马AI助手智能诊断并生成个性化修复方案 最近在搭建网络实验环境时&#xff0c;遇到了eNSP安装后设备启动失败的问题。作为一个网络初学者&#xff0c;面对各种错误代码和复杂的配置步骤&#xff0c;确实有些手足无措。好在发现了InsCode(快马)平台…...

编程新知 2026/4/4 14:52:59