✨2.快速了解HTML5的标签类型

news/2025/2/22 18:35:19/
htmledit_views">

 

✨✨HTML5 的标签类型丰富多样,每种类型都有其独特的功能和用途,以下是一些常见的 HTML5 标签类型介绍:

🦋结构标签

  • 🪭<html>它是 HTML 文档的根标签,所有其他标签都包含在这个标签内,就像一个大容器,把整个网页的内容都包裹起来。
  • 🪭<head>这个标签里包含的是关于网页的元信息,比如网页的标题、引入的外部样式表、脚本等,这些信息不会直接显示在网页页面上,但对网页的显示和功能起着重要的作用。
  • 🪭<body>网页中实际显示的内容都放在<body>标签里,比如文字、图片、按钮等所有能被用户看到的元素都在这个标签内部。
  • 🪭<header>通常用来表示网页或页面中某个区域的头部部分,比如网站的 logo、导航栏等内容可以放在<header>标签里。
  • 🪭<footer><header>相对,用于表示网页或页面中某个区域的底部部分,一般包含版权信息、联系方式等内容。

🦋文本标签

  • 🪭<h1> - <h6>这是标题标签,<h1>是最大的标题,<h6>是最小的标题。它们用于突出显示网页中的不同级别标题,使内容结构更清晰,便于用户快速了解网页的主要内容。
  • 🪭<p>段落标签,用于定义文本段落。只要是一段连续的文本,就可以把它放在<p>标签里,浏览器会自动在段落之间添加一些间距,使文本看起来更有条理。
  • 🪭<span>它是一个行内标签,主要用于在不改变文本结构的情况下,对部分文本进行样式设置或添加脚本行为。比如你想给一段文字中的某个词设置特殊颜色,就可以把这个词放在<span>标签里,然后对<span>标签设置样式。
  • 🪭<em>用于强调文本,通常会以斜体的形式显示。比如你想突出某个重要的词语或句子,就可以把它放在<em>标签里。
  • 🪭<strong>也是用于强调文本,但它的强调程度比<em>更强,一般会以粗体的形式显示。

🦋多媒体标签

  • 🪭<img>用于在网页中插入图片。通过设置src属性来指定图片的路径,alt属性来提供图片的描述信息,当图片无法显示时,就会显示alt属性中的文字。
  • 🪭<audio>用于在网页中嵌入音频文件,支持多种音频格式。可以通过src属性指定音频文件的路径,还可以设置controls属性来显示音频播放控制按钮,让用户能够播放、暂停、调节音量等。
  • 🪭<video>用来在网页中播放视频,同样支持多种视频格式。通过src属性指定视频文件的路径,controls属性来显示视频播放控制栏,还可以设置widthheight属性来指定视频的宽度和高度。

🦋表单标签

  • 🪭<form>表单标签,用于创建用户输入信息的表单。它可以包含各种表单元素,如文本输入框、下拉菜单、单选按钮、复选框等,用户在表单中输入的信息可以提交到服务器进行处理。
  • 🪭<input>这是最常用的表单元素之一,它可以根据不同的type属性值创建不同类型的输入框,比如type="text"创建文本输入框,type="password"创建密码输入框,type="checkbox"创建复选框,type="radio"创建单选按钮等。
  • 🪭<select>用于创建下拉菜单,用户可以从下拉列表中选择一个选项。<select>标签内部,通过<option>标签来定义下拉菜单中的每个选项。
  • 🪭<textarea>用于创建多行文本输入框,用户可以在其中输入大量的文本内容,比如留言、评论等。

🦋布局标签

  • 🪭<div>这是一个非常常用的布局标签,它就像一个容器,可以把网页中的不同部分划分成不同的区域,然后通过 CSS 样式来对这些区域进行布局和样式设置。
  • 🪭<ul> 和 <li><ul>是无序列表标签,<li>是列表项标签,它们通常一起使用来创建无序列表,比如项目符号列表。每个<li>标签代表列表中的一个项目。
  • 🪭<ol> 和 <li><ol>是有序列表标签,和<ul>类似,但它创建的是有序列表,比如数字编号列表。<li>同样用于定义列表中的每个项目。

 


http://www.ppmy.cn/news/1574226.html

相关文章

向 OpenAI ChatGPT 提问如何学习黑客

Ailx10 互联网行业 安全攻防员 ​目录 如何学习黑客攻击&#xff1f; 如何学习计算机网络安全&#xff1f; 如何学习渗透测试&#xff1f; 如何学习Cobalt Strike &#xff1f; OpenAI ChatGPT 是一个人工智能回答问题系统&#xff0c;最近非常火&#xff0c;以至于很多…

【Scrapy】Scrapy教程7——存储数据

上一节我们对爬虫程序的默认回调函数parse做了改写,提取的数据可以在Scrapy的日志中打印出来了,光打印肯定是不行的,还需要把数据存储,数据可以存到文件,也可以存到数据库,我们一一来看。 存储数据到文件 首先我们看看如何将数据存储到文件,在讲[[【Scrapy】Scrapy教程…

WPF 中显示图形的方式深度解析

一、引言 Windows Presentation Foundation(WPF)凭借其强大的图形渲染能力,为开发者打造美观、交互性强的桌面应用程序提供了有力支持。在 WPF 里,有多种显示图形的方式,每种方式都有独特的用途和特点。本文将详细介绍 DrawingImage、Shape、Image、GeometryDrawing、Dra…

Oracle定时执行计划任务

标签&#xff1a; 数据化分析&#xff0c; 定时任务&#xff0c;数据库&#xff0c;oracle 分类&#xff1a;02-数据分析工具 在日常工作中&#xff0c;往往有些事情是需要经常重复地做的&#xff0c;例如每天更新业务报表、每天从数据库中提取符合条件的数据、每天将客户关系…

2025.2.21 Restless And Brave

今天是2025年的2月21日&#xff0c;星期五。 距离考研出分还有两天半的时间。 这种时候&#xff0c;我想考的特别好的同学或者考的特别差的同学都不会太焦虑&#xff0c;只有我这种考的不上不下的人才会焦虑。 我曾不止一次的想过如何面对失败&#xff0c;但每每想到这个问题…

Spring AI如何调用Function Calling

在 AI 智能体开发的过程中&#xff0c;RAG&#xff08;Retrieval-Augmented Generation&#xff09; 和 功能调用&#xff08;Function Calling&#xff09; 已经成为两种至关重要的模式。RAG 通过结合检索技术和生成模型的强大能力&#xff0c;使智能体能够实时从外部数据源获…

从CNN到Transformer:遥感影像目标检测的技术演进(矿产勘探、精准农业、城市规划、林业测量、军事目标识别和灾害评估等)

在遥感影像分析领域&#xff0c;目标检测一直是研究热点之一。随着高分辨率对地观测系统的不断发展&#xff0c;遥感影像的分辨率和数据量呈爆发式增长&#xff0c;如何高效、准确地从海量数据中提取有用信息&#xff0c;成为了一个亟待解决的问题。近年来&#xff0c;深度学习…

游戏引擎学习第111天

仓库:https://gitee.com/mrxiao_com/2d_game_2 将调试相机稍微拉远一点 今天的任务是查看地面块的相关内容。首先&#xff0c;在开始之前&#xff0c;决定将调试摄像头稍微拉远一些&#xff0c;因为希望能够看到粉色区域的整体情况。 在渲染组中&#xff0c;昨天介绍了一个概…