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

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

news 2025/8/29 20:00:25

🌟🌟🌟 专栏详解 🎉 🎉 🎉

欢迎来到前端开发之旅专栏！ 不管你是完全小白，还是有一点经验的开发者，在这里你会了解到最简单易懂的语言，与你分享有关前端技术和实用技巧的内容。此专栏的目标是提供易于理解且实用的内容，通过深入浅出的方式让大家掌握前端开发的核心概念和技能。我也相信，通过这个专栏，各位开发者们将更好地理解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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2025/8/29 9:06:29

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/7/13 22:34:29

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

编程新知 2025/8/21 6:35:28

零基础在实践中学习网络安全-皮卡丘靶场（第九期-Unsafe Fileupload模块）（yakit方式）

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

编程新知 2025/8/28 19:18:33

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制&#xff0c;展现出显著的技术优势&#xff1a; 深层组织穿透能力&#xff1a;适用于活体组织深度成像 高分辨率观测性能&#xff1a;满足微观结构的精细研究需求 低光毒性特点&#xff1a;减少对样本的损伤…...

编程新知 2025/8/29 3:57:29

基于Java+VUE+MariaDB实现（Web）仿小米商城

仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意&#xff1a;运行前…...

编程新知 2025/8/2 14:36:09

医疗AI模型可解释性编程研究：基于SHAP、LIME与Anchor

1 医疗树模型与可解释人工智能基础 医疗领域的人工智能应用正迅速从理论研究转向临床实践，在这一过程中，模型可解释性已成为确保AI系统被医疗专业人员接受和信任的关键因素。基于树模型的集成算法（如RandomForest、XGBoost、LightGBM）因其卓越的预测性能和相对良好的解释性…...

编程新知 2025/8/29 0:19:34

前端工具库lodash与lodash-es区别详解

lodash 和 lodash-es 是同一工具库的两个不同版本&#xff0c;核心功能完全一致&#xff0c;主要区别在于模块化格式和优化方式&#xff0c;适合不同的开发环境。以下是详细对比&#xff1a; 1. 模块化格式 lodash 使用 CommonJS 模块格式&#xff08;require/module.exports&a…...

编程新知 2025/7/6 1:32:25

高保真组件库：开关

一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...

编程新知 2025/8/22 1:22:46

6.9本日总结

一、英语 复习默写list11list18&#xff0c;订正07年第3篇阅读 二、数学 学习线代第一讲&#xff0c;写15讲课后题 三、408 学习计组第二章&#xff0c;写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语&#xff1a;复习l默写sit12list17&#…...

编程新知 2025/7/29 0:35:06