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

最新推荐文章于 2024-10-13 21:18:37 发布

归来巨星

最新推荐文章于 2024-10-13 21:18:37 发布

阅读量1.4k

点赞数 15

分类专栏：前端之旅文章标签： html 前端

本文链接：https://blog.csdn.net/clli_chain/article/details/133891769

版权

前端之旅专栏收录该内容

4 篇文章 0 订阅

订阅专栏

🌟🌟🌟 专栏详解 🎉 🎉 🎉

欢迎来到前端开发之旅专栏！ 不管你是完全小白，还是有一点经验的开发者，在这里你会了解到最简单易懂的语言，与你分享有关前端技术和实用技巧的内容。此专栏的目标是提供易于理解且实用的内容，通过深入浅出的方式让大家掌握前端开发的核心概念和技能。我也相信，通过这个专栏，各位开发者们将更好地理解Web开发的本质，从而掌握更深层次的技术。Are you ready? 各位开发者们你们准备好了吗？
在这里插入图片描述

一、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的三要素

结语

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

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

归来巨星

关注

15
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录