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

embedded/2025/2/22 13:13:08/
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/embedded/164337.html

相关文章

JUC并发—9.并发安全集合三

大纲 1.并发安全的数组列表CopyOnWriteArrayList 2.并发安全的链表队列ConcurrentLinkedQueue 3.并发编程中的阻塞队列概述 4.JUC的各种阻塞队列介绍 5.LinkedBlockingQueue的具体实现原理 6.基于两个队列实现的集群同步机制 1.并发安全的数组列表CopyOnWriteArrayList …

小米路由器 AX3000T 降级后无法正常使用,解决办法

问题描述 买了个 AX3000T 路由器&#xff0c;想安装 OpenWRT 或者 安装 Clash 使用&#xff0c;看教程说是需要降级到 v1.0.47 版本。 结果刷机之后路由器无法打开了&#xff0c;一直黄灯亮&#xff0c;中间灭一下&#xff0c;又是黄灯长亮&#xff0c;没有 WIFI 没有连接。以…

微软宣布 Windows 11 将不再免费升级:升级需趁早

大家都知道如果你现在是Windows 10 系统&#xff0c;其实可以免费升级到正版 Windows 11&#xff0c;只要你的电脑配置满足 TPM2.0要求。 而最近微软已经公布了 Windows 10 的最后支持时间&#xff0c;也就是今年10月14日&#xff0c;在这之后微软将不再对Windows 10负责&#…

uniapp中引入Vant Weapp的保姆级教学(包含错误处理)

废话不多说&#xff0c;直接上方法&#xff0c;网上的教学好多都是错误的 1.安装vant weapp 在Hbuilder的终端&#xff0c;输入以下代码 npm install vant/weapp -S --production 2.新建wxcomponents文件夹 在项目的跟目录新建一个“wxcomponents’文件夹&#xff0c;与app.…

解决npm问题:错误的代理设置

错误的代理设置 npm install vue-waterfall-plugin-next npm ERR! code ECONNREFUSED npm ERR! syscall connect npm ERR! errno ECONNREFUSED npm ERR! FetchError: request to https://registry.npmmirror.com/vue-waterfall-plugin-next failed, reason: connect ECONNREFU…

论文解读 | AAAI'25 Cobra:多模态扩展的大型语言模型,以实现高效推理

点击蓝字 关注我们 AI TIME欢迎每一位AI爱好者的加入&#xff01; 点击 阅读原文 观看作者讲解回放&#xff01; 个人信息 作者&#xff1a;赵晗&#xff0c;浙江大学-西湖大学联合培养博士生 内容简介 近年来&#xff0c;在各个领域应用多模态大语言模型&#xff08;MLLMs&…

Flutter开发的应用页面非常多时如何高效管理路由

文章目录 1. 集中式路由管理示例&#xff1a; 2. 动态路由生成 (onGenerateRoute)示例&#xff1a; 3. 模块化路由管理示例&#xff1a; 4. 使用路由管理库使用go_router的示例&#xff1a; 5. 路由分层管理总结 当Flutter应用中有大量页面时&#xff0c;路由管理变得复杂。为了…

CT dicom 去除床板 去除床位,检查床去除

1. 前言 医院拍摄患者CT与MRI 图像&#xff0c; 但是CT图像中就会出现检查床的区域&#xff0c;来看CT扫描设备是什么样子的&#xff0c;红色标出区域 可以在图中看到&#xff0c;在头部位置安装有固定头部的类似支架的东西&#xff0c;这个东西拍摄出来时什么样子呢&#xff…