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

news2025/2/21 7:42:06

 

✨✨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.coloradmin.cn/o/2300829.html

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

相关文章

力扣 买卖股票的最佳时机

贪心算法典型例题。 题目 做过股票交易的都知道&#xff0c;想获取最大利润&#xff0c;就得从最低点买入&#xff0c;最高点卖出。这题刚好可以用暴力&#xff0c;一个数组中找到最大的数跟最小的数&#xff0c;然后注意一下最小的数在最大的数前面即可。从一个数组中选两个数…

【SQL】SQL多表查询

&#x1f384;概念 一般我们说的多表查询都涉及外键和父子表之间的关系。比如一对多:一般前面指的是父表后面指的是子表。 ⭐分类 一对多(多对一) 多对多 一对一 ⭐一对多 &#x1f4e2;案例&#xff1a;部门与员工的关系 &#x1f4e2;关系&#xff1a;一个部门对应多个员…

知识篇 | DeepSeek企业部署模式主要有6种

国际数据公司IDC近日发文《DeepSeek爆火的背后&#xff0c;大模型/生成式AI市场生态潜在影响引人关注》表示&#xff1a; “大模型的部署过程需同时满足高并发与低延迟的严苛要求&#xff0c;并需全面考量数据安全、隐私保障、资源弹性扩展以及系统维护等多重因素&#xff0c;D…

uniapp中@input输入事件在修改值只有第一次有效的问题解决

在uniapp中使用输入框&#xff0c;要求输入不超过7个字&#xff0c;所以需要监听输入事件&#xff0c;当每次输入文字的时候&#xff0c;就把输入的值截断&#xff0c;取前7个值。但是在input事件中&#xff0c;重新赋值的值发生了变化&#xff0c;但是页面上的还是没有变&…

Linux运维篇-存储基础知识

什么是存储 用于存放数据信息的设备和介质&#xff0c;等同于计算机系统中的外部存储&#xff0c;是一个完整的系统。 存储的结构和趋势 存储的体系结构 当前存储的主要体系结构有三种&#xff1a; DASNASSAN 存储的发展趋势 ssd固态硬盘云存储一体化应用存储设备非结构…

Rook-ceph(1.92最新版)

安装前准备 #确认安装lvm2 yum install lvm2 -y #启用rbd模块 modprobe rbd cat > /etc/rc.sysinit << EOF #!/bin/bash for file in /etc/sysconfig/modules/*.modules do[ -x \$file ] && \$file done EOF cat > /etc/sysconfig/modules/rbd.modules &l…

第2章 信息技术发展(一)

2.1 信息技术及其发展 2.1.1 计算机软硬件 计算机硬件(Computer Hardware)是指计算机系统中由电子、机械和光电元件等组成的各种物理装置的总称。 计算机软件 (Computer Software)是指计算机系统中的程序及其文档&#xff0c;程序是计算任务的处理对象和处理规则的描述; 文档…

【网络基本知识--2】

网络基本知识--2 1.主机A和主机B通过三次握手TCP连接&#xff0c;过程是&#xff1a; TCP三次握手连接过程如下&#xff1a; 1.客户端发送SYN(SEQx)报文发送给服务器端&#xff0c;进入SYN_SEND状态&#xff1b; 2.服务器端收到SYN报文&#xff0c;回应一个SYN(SEQy)ACK(ACKx1)…

摄影——曝光三要素

曝光三要素 光圈&#xff08;F&#xff09;&#xff1a;控制进光量的装置快门&#xff08;1/X&#xff09;&#xff1a;接受光线的时间感光度&#xff08;ISO&#xff09;&#xff1a;感光器件对光线的敏感程度 一、快门&#xff08;1/X&#xff09; 静物 1/125 动物 1/500 …

DeepSeek-R1论文阅读及蒸馏模型部署

DeepSeek-R1论文阅读及蒸馏模型部署 文章目录 DeepSeek-R1论文阅读及蒸馏模型部署摘要Abstract一、DeepSeek-R1论文1. 论文摘要2. 引言3. DeepSeek-R1-Zero的方法3.1 强化学习算法3.2 奖励建模3.3 训练模版3.4 DeepSeek-R1-Zero的性能、自进化过程和顿悟时刻 4. DeepSeek-R1&am…

Python的那些事第二十五篇:高效Web开发与扩展应用实践FastAPI

FastAPI:高效Web开发与扩展应用实践 摘要 FastAPI 是一种基于 Python 的现代 Web 框架,以其高性能、自动文档生成、数据验证和异步支持等特性受到开发者的青睐。本文首先介绍了 FastAPI 的核心特性及其开发流程,然后通过实际案例探讨了其在异步编程、微服务架构、WebSocket…

情书网源码 情书大全帝国cms7.5模板

源码介绍 帝国cms7.5仿《情书网》模板源码&#xff0c;同步生成带手机站带采集。适合改改做文学类的网站。 效果预览 源码获取 情书网源码 情书大全帝国cms7.5模板

深入解析iOS视频录制(二):自定义UI的实现

深入解析 iOS 视频录制&#xff08;一&#xff09;&#xff1a;录制管理核心MWRecordingController 类的设计与实现 深入解析iOS视频录制&#xff08;二&#xff09;&#xff1a;自定义UI的实现​​​​​​​ 深入解析 iOS 视频录制&#xff08;三&#xff09;&#xff1a;完…

Deepseek 万能提问公式:高效获取精准答案

### **Deepseek 万能提问公式&#xff1a;高效获取精准答案** 在使用 Deepseek 或其他 AI 工具时&#xff0c;提问的质量直接决定了答案的精准度和实用性。以下是一个万能的提问公式回答&#xff1a; --- ### **1. 明确背景&#xff08;Context&#xff09;** - **作用**…

DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地

对于个人开发者或尝鲜者而言&#xff0c;本地想要部署 DeepSeek 有很多种方案&#xff0c;但是一旦涉及到企业级部署&#xff0c;则步骤将会繁琐很多。 比如我们的第一步就需要先根据实际业务场景评估出我们到底需要部署什么规格的模型&#xff0c;以及我们所要部署的模型&…

算法——舞蹈链算法

一&#xff0c;基本概念 算法简介 舞蹈链算法&#xff08;Dancing Links&#xff0c;简称 DLX&#xff09;是一种高效解决精确覆盖问题的算法&#xff0c;实际上是一种数据结构&#xff0c;可以用来实现 X算法&#xff0c;以解决精确覆盖问题。由高德纳&#xff08;Donald E.…

WPF8-常用控件

目录 写在前面&#xff1a;1. 按钮控件1.1. Button 按钮1.2. RepeatButton:长按按钮1.3. RadioButton:单选按钮 2. 数据显示控件2.1. TextBlock&#xff1a;只读文本控件2.2. Lable&#xff1a;标签 显示文本控件2.3. ListBox&#xff1a;显示可选择项的列表2.4. DataGrid&…

代码随想录刷题day24|(字符串篇)151.反转字符串中的单词

一、题目思路 1.快慢指针移除字符串首尾以及单词中的多余空格 类似前面数组篇--移除元素代码随想录刷题day02|&#xff08;数组篇&#xff09;27.移除元素、26.删除有序数组中的重复项_代码随想录网站-CSDN博客 快指针fast遍历整个字符串&#xff0c;慢指针slow指向新字符串…

VMware按照的MacOS升级后无法联网

背景 3年前公司使用Flutter开发了一款app&#xff0c;现在app有微小改动需要重新发布到AppStore 问题 问题是原来的Vmware搭建的开发环境发布App失败了 提示&#xff1a;App需要使用xcode15IOS 17 SDK重新构建&#xff0c;这样的话MacOS至少需要升级到13.5 Xcode - 支持 - Ap…

DeepSeek V3和R1

DeepSeek V3 和 R1 是深度求索&#xff08;DeepSeek&#xff09;推出的两款大模型&#xff0c;基于混合专家架构&#xff08;MoE&#xff09;&#xff0c;但在设计目标、训练方法和应用场景上存在显著差异。以下是两者的详细对比与补充内容&#xff1a; DeepSeek V3和R1 一、模…