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

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.lryc.cn/news/198428.html

相关文章:

  • prometheus获取kubelet接口监控数据
  • 国产主控应用案例:汉王电子血压计-君正开发板
  • 万宾科技智能井盖传感器特点介绍
  • YoloV8改进策略:SwiftFormer,全网首发,独家改进的高效加性注意力用于实时移动视觉应用的模型,重构YoloV8
  • Jupyter Notebook在指定位置打开
  • 树控件的使用
  • C++实现顺序栈类的定义,编写main ()函数验证顺序栈类设计的合理性
  • 手机直播助手软件app哪个好用?
  • 腾讯待办宣布关停,哪款待办事项提醒APP好?
  • 【单片机毕业设计】【hj-006-7】CO、有害混合气体检测 | 空气质量检测 | 有害气体检测
  • wpf主页面解析
  • 三相交错LLC软启动控制程序算法实现---充电桩电源设计实战细节
  • Chrome 115之后的版本,安装和使用chromedriver
  • 潮玩宇宙:收藏、交流与竞技的数字乐园
  • 企拓客app骗局为不实信息,企拓客保持正常经营状态
  • 【性能】JDK和Jmeter的安装与配置
  • 02_单片机及开发板介绍
  • 华测监测预警系统 2.2---任意文件读取漏洞
  • 新版多功能去水印工具微信小程序源码下载+带流量主功能
  • 文章必备| 叶绿体基因组高级分析内容汇总
  • 阿里实习JAVA后端面经总结
  • 利用 NLP 超能力:一步步介绍Hugging Face微调教程
  • 凝聚技术力量 共建测试生态 ——集成电路测试技术交流日成功举办
  • 机器学习-ROC曲线:技术解析与实战应用
  • macos平台好用的FTP客户端 Transmit 5最新中文
  • 用JavaScript输出0-9的两种方法、以及setTimeout的三个参数的意义
  • 酷鸟云近期主要新功能合集
  • 【大数据开发技术】实验06-SequenceFile、元数据操作与MapReduce单词计数
  • 【C语言】输入一个正整数,判断其是否为素数
  • 2023年Q3季度国内手机大盘销额下滑2%,TOP品牌销售数据分析