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

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

news 2025/7/10 4:03:30

🌟🌟🌟 专栏详解 🎉 🎉 🎉

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

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

编程新知 2025/6/17 12:57:30

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

编程新知 2025/7/9 2:08:29

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/7/10 2:31:58

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/7/8 15:26:13

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2025/7/9 18:41:34

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/6/17 7:54:42

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/7/7 23:05:56

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/7/8 11:51:32