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

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

news 2026/1/30 12:40:13

🌟🌟🌟 专栏详解 🎉 🎉 🎉

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

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/28 8:17:53

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2026/1/25 14:21:54

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/11/9 11:32:13

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2026/1/29 3:45:00

Go 并发编程基础：通道（Channel）的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

编程新知 2025/12/4 8:54:35

STM32---外部32.768K晶振（LSE）无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

编程新知 2026/1/29 2:17:57

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30

嵌入式常见 CPU 架构

架构类型架构厂商芯片厂商典型芯片特点与应用场景PICRISC (8/16 位)MicrochipMicrochipPIC16F877A、PIC18F4550简化指令集&#xff0c;单周期执行&#xff1b;低功耗、CIP 独立外设&#xff1b;用于家电、小电机控制、安防面板等嵌入式场景8051CISC (8 位)Intel&#xff08;原始…...

编程新知 2025/6/10 21:24:01

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16