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

🌟🌟🌟 专栏详解 🎉 🎉 🎉

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

结语

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/160932.html

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

相关文章

【Java基础面试十二】、说一说你对面向对象的理解

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a; 说一说你对面向对象的理…

thinkphp5.1 获取缓存cache(‘cache_name‘)特别慢,php 7.0 unserialize 特别慢

thinkphp5.1 获取缓存cache(‘cache_name’)特别慢&#xff0c;php 7.0 unserialize 特别慢 场景&#xff1a; 项目中大量使用了缓存&#xff0c;本地运行非常快&#xff0c;二三百毫秒&#xff0c;部署到服务器后 一个表格请求就七八秒&#xff0c;最初猜想是数据库查询慢&am…

消息队列学习分享

消息队列学习 消息队列来解决问题 &#xff08;1&#xff09;异步处理 消息通知、日志管理、更新统计数据等步骤 &#xff08;2&#xff09;流量控制 如何避免过多的请求压垮我们的系统&#xff1f; 比如一个秒杀系统&#xff0c;网关在收到请求后&#xff0c;将请求放入…

Kotlin中的数值类型

在Kotlin中&#xff0c;Byte、Short、Int、Long、Float和Double是基本数据类型&#xff0c;用于表示不同范围和精度的数值。 Byte&#xff08;字节&#xff09;&#xff1a;Byte类型是8位有符号整数类型&#xff0c;取值范围为-128到127。在Kotlin中&#xff0c;可以使用字面值…

vscode工程屏蔽不使用的文件夹或文件的方法

一. 简介 vscode是一款 微软提供的免费的代码编辑软件。 对于 IMX6ULL-ALPHA开发板而言&#xff0c;NXP官方uboot一定会支持不止 IMX6ULL芯片的代码&#xff0c;也不止支持 一种架构&#xff0c;还支持其他芯片或架构的源码文件。 为了方便阅读代码&#xff0c;vscode软件可…

腾讯云我的世界mc服务器多少钱一年?

腾讯云我的世界mc服务器多少钱&#xff1f;95元一年2核2G3M轻量应用服务器、2核4G5M带宽优惠价218元一年、4核8G12M带宽轻量服务器446元一年&#xff0c;云服务器CVM标准型S5实例2核2G优惠价280元一年、2核4G配置服务器748元一年&#xff0c;腾讯云百科txybk.com分享腾讯云我的…

[LeetCode周赛复盘] 第 115 场双周赛20231014

[LeetCode周赛复盘] 第 115 场双周赛20231014 一、本周周赛总结100095. 上一个遍历的整数1. 题目描述2. 思路分析3. 代码实现 100078. 最长相邻不相等子序列 I1. 题目描述2. 思路分析3. 代码实现 100077. 最长相邻不相等子序列 II1. 题目描述2. 思路分析3. 代码实现 100029. 和…

【数据结构】排序--选择排序(堆排序)

目录 一 堆排序 二 直接选择排序 一 堆排序 堆排序(Heapsort)是指利用堆积树&#xff08;堆&#xff09;这种数据结构所设计的一种排序算法&#xff0c;它是选择排序的一种。它是 通过堆来进行选择数据。 需要注意的是排升序要建大堆&#xff0c;排降序建小堆。 直接选择排…

HEIC转jpg

下载imagemagick,安装 https://imagemagick.org/archive/binaries/ImageMagick-7.1.1-20-Q16-HDRI-x64-dll.exe cmd D:\soft\ImageMagick-7.1.1-Q16-HDRI\magick.exe "C:\Users\Gamer\Downloads\iCloud 照片1\iCloud 照片\IMG_3889.HEIC" IMG_3889.jpg

WebSocket: 实时通信的新维度

介绍&#xff1a; 在现代Web应用程序中&#xff0c;实时通信对于提供即时更新和交互性至关重要。传统的HTTP协议虽然适合请求-响应模式&#xff0c;但对于需要频繁数据交换的场景并不理想。而WebSocket技术的出现填补了这个空白&#xff0c;为Web开发者们带来了一种高效、实时的…

Elucidating the Design Space of Diffusion-Based Generative Models 阅读笔记

文章用一种新的设计框架统一diffusion-based model&#xff0c;并使用模块化&#xff08;modular&#xff09;的思想&#xff0c;分别从采样、训练、score network设计三个方面分析和改进diffusion-based model。 之前的工作1已经把diffusion-based model统一到SDE或者ODE框架…

10-k8s-身份认证与鉴权

文章目录 一、ServiceAccount介绍二、ServiceAccount相关的资源对象三、dashboard空间示例 一、ServiceAccount介绍 ServiceAccount&#xff08;服务账户&#xff09;概念介绍 1&#xff09;ServiceAccount是Kubernetes集群中的一种资源对象&#xff0c;用于为Pod或其他资源提供…

JavaScript基础知识14——运算符:逻辑运算符,运算符优先级

哈喽&#xff0c;大家好&#xff0c;我是雷工&#xff01; 一、逻辑运算符 1、概念&#xff1a;在程序中用来连接多个比较条件时候使用的符号。 2、应用场景&#xff1a;在程序中用来连接多个比较条件时候使用。 3、逻辑运算符符号&#xff1a; 4、代码演示逻辑运算符的使用…

手机流量卡经营商城小程序的作用是什么

流量卡成为很多用户的选择&#xff0c;同时市场中也出现了不少流量卡卖家&#xff0c;基于多种形式开展生意。然而虽然市场需求度高&#xff0c;但流量卡经营难题也不少。 流量卡客户具有高忠诚度&#xff0c;然而入驻线上第三方平台&#xff0c;客户属于平台&#xff0c;无法…

四川天蝶电子商务有限公司抖音电商服务引领行业标杆

随着电子商务的飞速发展&#xff0c;四川天蝶电子商务有限公司作为一家领先的抖音电商服务提供商&#xff0c;已经脱颖而出。本文将详细解析四川天蝶电子商务有限公司的抖音电商服务&#xff0c;让您一探究竟。 一、卓越的服务理念 四川天蝶电子商务有限公司始终坚持以客户为中…

多媒体应用设计师 第3章 多媒体信息传输技术

1.数据通信技术 1.1.多媒体通信的服务质量 多媒体服务质量(Qos)指网络服务的良好程度&#xff0c; 衡量QoS的常见指标为:吞吐量&#xff0c;差错率&#xff0c;端到端延迟&#xff0c;延迟抖动,带宽&#xff0c;丢包率&#xff0c;服务可用性等。 1.2.多媒体通信的服务质量类…

flask基础开发知识学习

之前做了一些LLM的demo&#xff0c;接口用flask写的&#xff0c;但是涉及到后端的一些业务就感觉逻辑写的很乱&#xff0c;代码变成屎山&#xff0c;于是借助官方文档和GPT迅速补了一些知识&#xff0c;总结一下一个很小的模板 于是决定边学边重构之前的代码… 文章目录 代码结…

【milkv】更新rndis驱动

问题 由于windows升级到了11&#xff0c;导致rndis驱动无法识别到。 解决 打开设备管理器&#xff0c;查看网络适配器&#xff0c;没有更新会显示黄色的图标。 右击选择更新驱动

网络安全必备常识:Web应用防火墙是什么?

如今&#xff0c;很多企业都将应用架设在Web平台上&#xff0c;为用户提供更为方便、快捷的服务支持&#xff0c;例如网上银行、网上购物等。与此同时&#xff0c;应用程序组合变得前所未有的复杂和多样化&#xff0c;这为攻击者发动攻击开辟了大量媒介&#xff0c;Web应用防火…

【QT】界面布局-登陆窗口

记录页面布局-登陆窗口的流程 &#xff08;1&#xff09;继承QWidget &#xff08;2&#xff09;设置标签 &#xff08;3&#xff09;单行文本编辑 &#xff08;4&#xff09;按钮 开始设置布局&#xff0c; 法1&#xff1a;使用Horizontal layout&#xff0c;但是不方便 法2…