🌟🌟🌟 专栏详解 🎉 🎉 🎉
欢迎来到前端开发之旅专栏! 不管你是完全小白,还是有一点经验的开发者,在这里你会了解到最简单易懂的语言,与你分享有关前端技术和实用技巧的内容。此专栏的目标是提供易于理解且实用的内容,通过深入浅出的方式让大家掌握前端开发的核心概念和技能。我也相信,通过这个专栏,各位开发者们将更好地理解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元素的附加信息,可以对元素进行设置和配置。属性以键值对的形式出现,位于元素的开始标签中。
id
属性:用于为元素指定唯一的标识符。
<h1 id="title">这是标题</h1>
class
属性:用于为元素指定一个或多个样式类。
<div class="box"><p class="box-red">这是一个带样式的段落。</p>
</div>
style
属性:用于为元素指定内联样式,包含CSS属性和值。
<p style="color: red; font-size: 16px;">这是红色且字体大小为16像素的段落。</p>
src
属性:用于指定图像、音频、视频等外部资源的URL。
<img src="image.jpg" alt="图片">
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>
href
属性:用于指定链接的URL。
<a href="https://www.example.com">点击这里访问示例网站</a>
target
属性:用于指定链接打开的目标窗口或框架。
<a href="https://www.example.com" target="_blank">在新窗口中打开链接</a>
alt
属性:用于为图像元素提供替代文本,当图像无法显示时显示该文本。
<img src="image.jpg" alt="替代文本">
disabled
属性:用于禁用表单元素的交互功能。
<input type="text" disabled>
required
属性:用于指示表单元素必须填写或选择。
<input type="text" required>
最后至此也是希望大家能够简单的理解html的三要素
结语
✨ 每天创作一点点
✨ 开心快乐一整天
✨ 点赞关注加收藏
✨ 美好一天又一天
铁铁们 感谢支持 我需要你们的三连 👍👍👍