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

 

✨✨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.rhkb.cn/news/20370.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PostgreSQL 的崛起与无服务器数据库的新时代

根据 2023 年 Stack Overflow 开发人员调查 &#xff0c;PostgreSQL 超越 MySQL 成为最受开发人员推崇和期望的数据库系统&#xff0c;这是一个重要的里程碑。这一转变反映了开发人员社区对 PostgreSQL 强大的功能集、可靠性和可扩展性的日益认同。 这种不断变化的格局激发了数…

Redis(高阶篇)03章——缓存双写一致性之更新策略探讨

一、反馈回来的面试题 一图你只要用缓存&#xff0c;就可能会涉及到redis缓存与数据库双存储双写&#xff0c;你只要是双写&#xff0c;就一定会有数据一致性的问题&#xff0c;那么你如何解决一致性的问题双写一致性&#xff0c;你先动缓存redis还是数据库mysql哪一个&#x…

【机器学习监督学习】:从原理到实践,探索算法奥秘,揭示数据标注、模型训练与预测的全过程,助力人工智能技术应用与发展

&#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏:机器学习专栏 目录 线性回归&#xff08;Linear Regression&#xff09; 基本概念 数学模型 优缺点 利用Python实现线性回归 逻辑回归&#xff08;Logistic Regression&#xff09; 3.2. 数学模型 优缺点 …

数据结构_前言

本次我们将进入一个新的阶段啦~ 要注意哦&#xff1a; 在学数据结构之前&#xff0c;我们要先掌握c语言中所学的指针、结构体、内存的存储这几部分&#xff0c;如果还没太掌握的话&#xff0c;那记得去复习回顾一下噢。 下面我们就一起进入数据结构的学习吧&#xff01; 知识…

VirtualBox 中使用 桥接网卡 并设置 MAC 地址

在 VirtualBox 中使用 桥接网卡 并设置 MAC 地址&#xff0c;可以按照以下步骤操作&#xff1a; 步骤 1&#xff1a;设置桥接网卡 打开 VirtualBox&#xff0c;选择你的虚拟机&#xff0c;点击 “设置” (Settings)。进入 “网络” (Network) 选项卡。在 “适配器 1” (Adapt…

【Mysql】索引

【Mysql】索引 一、索引的简介二、索引结构2.1 Hash2.2 二叉搜索树2.3 B树2.4 B树 三、索引分类3.1 主键索引3.2 普通索引3.3 唯一索引3.4 全文索引3.5 聚集索引3.6 非聚集索引3.7 索引覆盖 四、使用索引4.1 自动创建索引4.2 手动创建索引4.2.1 主键索引4.2.2 唯一索引4.2.3 普…

超全Deepseek资料包,deepseek下载安装部署提示词及本地部署指南介绍

该资料包涵盖了DeepSeek模型的下载、安装、部署以及本地运行的详细指南&#xff0c;适合希望在本地环境中高效运行DeepSeek模型的用户。资料包不仅包括基础的安装步骤&#xff0c;还提供了68G多套独立部署视频教程教程&#xff0c;针对不同硬件配置的模型选择建议&#xff0c;以…

1、Window Android 13模拟器 将编译的映像文件导入Android Studio

1、环境准备 编译环境&#xff1a;Ubuntu-18.04.5编译版本&#xff1a;android13-release下载地址&#xff1a;清华大学开源软件镜像站AOSP # 下载repo # 同步代码&#xff1a;repo init -u https://mirrors.tuna.tsinghua.edu.cn/git/AOSP/platform/manifest -b android13-r…

UE5 Niagara 粒子远处闪烁解决

在UE5.2中使用Niagara粒子系统制作水特效时&#xff0c;远处出现粒子闪烁的问题&#xff0c;通常由渲染精度、深度冲突或LOD设置引起 .效果如下&#xff1a; 处理深度缓冲冲突&#xff08;Z-Fighting&#xff09; 问题原因&#xff1a;粒子与场景几何体深度值重叠导致闪烁。 …

机器学习入门实战 4 - 基本模型

&#x1f4cc; 机器学习基本模型项目实战&#xff1a;预测泰坦尼克号乘客的生存概率 &#x1f6a2; 项目背景 1912 年 4 月 15 日&#xff0c;泰坦尼克号在处女航中撞上冰山沉没&#xff0c;船上 2224 名乘客和船员中&#xff0c;仅有约 710 人生还。 哪些因素决定了生还几率&…

电子制造企业数字化转型实战:基于Odoo构建MES平台的深度解决方案

作者背景 拥有8年乙方项目经理经验、8年甲方信息化管理经验&#xff0c;主导过12个Odoo制造业项目落地&#xff0c;服务客户涵盖消费电子、汽车电子、工业设备等领域。本文基于华东某电子企业&#xff08;以下简称"A公司"&#xff09;的实战案例&#xff0c;解析行业…

Python - 爬虫利器 - BeautifulSoup4常用 API

文章目录 前言BeautifulSoup4 简介主要特点&#xff1a;安装方式: 常用 API1. 创建 BeautifulSoup 对象2. 查找标签find(): 返回匹配的第一个元素find_all(): 返回所有匹配的元素列表select_one() & select(): CSS 选择器 3. 访问标签内容text 属性: 获取标签内纯文本get_t…

排序与算法:选择排序

执行效果 选择排序的执行效果是这样的&#xff1a; 呃……看不懂吗&#xff1f;没关系&#xff0c;接着往下看介绍 算法介绍 选择排序&#xff08;Selection sort&#xff09;是一种简单直观的排序算法。选择排序的主要优点与数据移动有关。如果某个元素位于正确的最终位置…

Day4:强化学习之Qlearning走迷宫

一、迷宫游戏 1.环境已知 迷宫环境是定义好的&#xff0c;障碍物位置和空位置是已知的&#xff1b; # 定义迷宫 grid [[0, 0, 0, 1, 0],[0, 1, 0, 1, 0],[0, 1, 0, 0, 0],[0, 0, 0, 1, 0],[0, 1, 1, 1, 0] ] 2.奖励方式已知 如果碰到障碍物则得-1&#xff0c;如果到终点则…

Windows 环境下 Grafana 安装指南

目录 下载 Grafana 安装 Grafana 方法 1&#xff1a;使用 .msi 安装程序&#xff08;推荐&#xff09; 方法 2&#xff1a;使用 .zip 压缩包 启动 Grafana 访问 Grafana 配置 Grafana&#xff08;可选&#xff09; 卸载 Grafana&#xff08;如果需要&#xff09; 下载 G…

栈回溯方案

注&#xff1a;栈回溯无法很好的定位到未调优化的函数&#xff0c;需要编译前使用 -fno-optimize-sibling-calls 选项禁止尾调优化。 基于unwind的栈回溯 在 arm 架构下&#xff0c;不少32位系统用的是 unwind 形式的栈回溯&#xff0c;这种栈回溯要复杂很多。首先需要程序有一…

[算法学习笔记]1. 枚举与暴力

一、枚举算法 定义 枚举是基于已有知识来猜测答案的问题求解策略。即在已知可能答案的范围内&#xff0c;通过逐一尝试寻找符合条件的解。 2. 核心思想 穷举验证&#xff1a;对可能答案集合中的每一个元素进行尝试终止条件&#xff1a;找到满足条件的解&#xff0c;或遍历完…

突破反爬困境:从服务端渲染到客户端SPA,爬虫环境的演变与新挑战(一)

声明 本文所讨论的内容及技术均纯属学术交流与技术研究目的&#xff0c;旨在探讨和总结互联网数据流动、前后端技术架构及安全防御中的技术演进。文中提及的各类技术手段和策略均仅供技术人员在合法与合规的前提下进行研究、学习与防御测试之用。 作者不支持亦不鼓励任何未经授…

(蓝桥杯——10. 小郑做志愿者)洛斯里克城志愿者问题详解

题目背景 小郑是一名大学生,她决定通过做志愿者来增加自己的综合分。她的任务是帮助游客解决交通困难的问题。洛斯里克城是一个六朝古都,拥有 N 个区域和古老的地铁系统。地铁线路覆盖了树形结构上的某些路径,游客会询问两个区域是否可以通过某条地铁线路直达,以及有多少条…

java基础——抽象类与接口

目录 一、抽象类 1. 定义 2. 示例代码 3. 特点 4. 使用场景 二、接口 1. 定义 2. 示例代码 3. 特点 三、抽象类和接口的区别 四、接口与抽象类的结合 五、自定义排序方法 六、总结 在 Java 编程中&#xff0c;抽象类和接口是两个极为重要的概念&#xff0c;它们在…