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

news2025/7/20 21:10:34

🌟🌟🌟 专栏详解 🎉 🎉 🎉

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于水基湍流优化的BP神经网络(分类应用) - 附代码

基于水基湍流优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于水基湍流优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.水基湍流优化BP神经网络3.1 BP神经网络参数设置3.2 水基湍流算法应用 4.测试结果…

视频监控管理平台EasyCVR二级菜单隐藏后,鼠标悬浮时菜单名称不显示该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台可拓展性强、…

测试工程师应具备何种心态?

无论是在工作或是在生活当中&#xff0c;心态一词&#xff0c;常常被提及&#xff0c;而我们也经常听到各种各样的声音&#xff0c;要保持一个良好的心态等等。但是通常都是一些比较飘渺的说法&#xff0c;因为是相对统一和总论式的概述&#xff0c;并不是针对特定情况下的论述…

ubuntu20.04下Kafka安装部署及基础使用

Ubuntu安装kafka基础使用 kafka 安装环境基础安装下载kafka解压文件修改配置文件启动kafka创建主题查看主题发送消息接收消息 工具测试kafka Assistant 工具连接测试基础连接连接成功查看topic查看消息查看分区查看消费组 Idea 工具测试基础信息配置信息当前消费组发送消息消费…

代理服务器没有响应,谷歌浏览器无法上网【搬代码】

代理服务器没有响应 •检查你的代理设置127.0.0.1:8888。 转到“工具”>“Internet 选项”>“连接”。如果你在 LAN 中&#xff0c;请单击“局域网设置”。 •确保你的防火墙设置没有阻止 Web 访问。 •向你的系统管理员求助。 IE浏览器-设置-internet选项 然后就可…

CEC2013(MATLAB):墨西哥蝾螈优化算法(Mexican Axolotl Optimization,MAO)求解CEC2013

一、墨西哥蝾螈优化算法MAO 墨西哥蝾螈优化算法&#xff08;Mexican Axolotl Optimization&#xff0c;MAO&#xff09;由Yenny Villuendas-Rey 1等人于2021年提出&#xff0c;该算法具有较强的平衡全局搜索与局部搜索能力。 参考文献&#xff1a; [1]Villuendas-Rey, Yenny,…

汇川IT7000系列HMI使用脚本实现画面跳转时自动切换手自动模式

汇川IT7070E工业HMI使用实例(1) 用脚本切换模式 我们在使用工业HMI做画面时,可能会有这样的需求,希望切换画面时,可以根据不同的画面,自动切换相应的模式,比如有些画面是进行手动操作的,有些画面是进行自动操作的,当我们需要手动时,希望进入画面自动切换为“手动模…

【CANoe】TX Self-ACK自应答配置与CPAL实现

一、引言 在测试CAN&CANFD通信或者网络管理的时候&#xff0c;我们经常遇到使用报文&#xff08;网络管理报文或者通信报文&#xff09;唤醒被测件这个测试点&#xff0c;如果测试比较多的情况下&#xff0c;我们就会发现&#xff0c;如果CANoe没有接被测件或者被测件没有…

SBD(Schottky Barrier Diode)与JBS(Junction Barrier Schottky)

SBD和JBS二极管都是功率二极管&#xff0c;具有单向导电性&#xff0c;在电路中主要用于整流、箝位、续流等应用。两者的主要区别在于结构和性能。 结构 SBD是肖特基二极管的简称&#xff0c;其结构由一个金属和一个半导体形成的金属-半导体结构成。 JBS是结势垒肖特基二极…

mycat的部署及测试 (读写分离)

声明&#xff1a;读写分离并不局限于主从复制的服务器&#xff0c;主从复制的服务器只是给读写分离又添加了一层保护&#xff0c;本实验做的是没有主从复制的服务器&#xff0c;如果有需求 欢迎大家尝试 私信&#xff01; 一.基本概念 Mycat 介绍:是数据库中间件&#xff0c;就…

C++<内存管理>

​ ​ ✨前言✨ &#x1f393;作者&#xff1a;【 教主 】 &#x1f4dc;文章推荐&#xff1a; ☕博主水平有限&#xff0c;如有错误&#xff0c;恳请斧正。 &#x1f4cc;机会总是留给有准备的人&#xff0c;越努力&#xff0c;越幸运&#xff01; &#x1f4a6;导航助手&…

会议OA项目-首页->flex弹性布局,轮播图后台数据获取及组件使用(后台数据交互mockjs),首页布局

flex弹性布局轮播图后台数据获取及组件使用&#xff08;后台数据交互mockjs&#xff09;首页布局 1.flex弹性布局 什么是flex布局&#xff1f; 1) Flex是Flexible Box的缩写&#xff0c;意为”弹性布局”&#xff0c;用来为盒状模型提供最大的灵活性。 2) 任何一个容器都可以指…

Nginx的安装——Linux环境

1、安装gcc nginx源码的编译依赖于gcc 环境&#xff0c;如果没有 gcc 环境&#xff0c;则需要安装&#xff1a; yum install gcc-c 2、PCRE pcre-devel 安装 PCRE(Perl Compatible Regular Expressions) 是一个Perl库&#xff0c;包括 perl 兼容的正则表达式库。nginx 的 htt…

The given SOAPAction http__xxxxx_xx does not match an operation

这是在客户端调用服务端接口时报出的错误&#xff0c;主要是客户端在调用时设置了SOAPAction&#xff0c;参考如下&#xff1a; 解决方案 在注解WebMethod() 中加上action注解&#xff0c;设置上一模一样的SOAPAction即可&#xff0c;如下&#xff1a; WebMethod(action &qu…

全面超越AutoGPT,面壁智能联合清华NLP实验室开源大模型「超级英雄」XAgent

近日&#xff0c;国内领先的人工智能大模型公司面壁智能又放大招&#xff0c;联合清华大学 NLP 实验室共同研发并推出大模型「超级英雄」——XAgent。 通过任务测试&#xff0c;XAgent 在真实复杂任务的处理能力已全面超越 AutoGPT。 现已在 GitHub 正式开源&#xff0c;地址 …

基于下垂控制的孤岛双机并联逆变器环流抑制MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 在实际应用中逆变器都是并联运行的,但是逆变器的并联运行也存在不少问题,由于线路阻抗差异、各个逆变器输出端瞬时电压幅值不同等,都容易导致环流的出现。环流会导致逆变器损耗增加,从而影响微电网的输出效率…

两个步骤轻松搞定批量合并视频

你是否曾经有过批量合并视频的需求&#xff0c;但是却苦于不知道如何下手&#xff1f;今天&#xff0c;我将为你介绍一个简单易行的方法&#xff0c;只需两个步骤&#xff0c;让你轻松实现批量合并视频。 第一步&#xff1a;下载并打开固乔智剪软件 首先&#xff0c;你需要下载…

【前端学习】—JS判断数据类型的方式有哪些(八)

【前端学习】—JS判断数据类型的方式有哪些&#xff08;八&#xff09; 一、JS中判断数据类型的场景 二、JS中有哪些数据类型 三、JS判断数据类型的方式有哪些 const arr[]; const object{};const number1; const stringstring;//typeofconst typetypeof arr; console.log(type…

01认识微服务

一、微服务架构演变 1.单体架构 将所有的功能集中在一个项目开发&#xff0c;打成一个包部署。优点架构简单&#xff0c;部署成本低。缺点耦合度高&#xff0c;不利于大型项目的开发和维护 2.分布式架构 根据业务功能对系统进行拆分&#xff0c;每个业务模块作为独立的项目…

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

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