HTML5中新增元素介绍

news2024/11/15 18:21:52

引入了许多新元素,以增强网页的语义和功能。这些新元素大致可以按以下几类进行分类和介绍。
下面是对各标签的详解,section、header、footer、nav、article、aside、figure、code、dialog、meter、time、progress、video、audio、details、atagrid、menu、command等。
在这里插入图片描述

一、语义元素(Semantic Elements)

这些元素旨在提供更清晰的文档结构和语义信息。

<article>:定义独立的内容区域,如博客文章或新闻文章。
<aside>:  表示页面内容之外的辅助内容,如侧边栏。
<details>:用于描述文档或应用中的某个部分的详细信息,用户可点击查看。
<figcaption>:定义 <figure> 元素的标题。
<figure>:用于包含图像、图表、照片、代码块等,通常与 <figcaption> 搭配使用。
<footer>:定义页面或章节的页脚内容。
<header>:定义页面或章节的页眉内容。
<main>:  表示文档的主要内容。
<mark>:  表示需要突出显示的文本。
<nav>:   定义导航链接的部分。
<section>:表示文档中的一个独立章节。

二、媒体元素(Media Elements)

这些元素用于更好地处理多媒体内容。

<audio>:  定义声音内容,如音乐或其他音频流。
<video>:  定义视频内容。
<source>: 为 <audio><video> 元素定义多种媒体资源。
<track>:  为 <video><audio> 元素提供字幕文件

三、 表单元素(Form Elements)

这些元素增强了表单的功能和用户体验。

<datalist>:提供输入建议的列表。
<keygen>:  用于生成密钥对(现已弃用)。
<output>:  表示计算或用户操作的结果。
<progress>:表示任务的进度。
<meter>:   表示预定义范围内的标量测量。
<input>     类型扩展:如 email, url, number, range, date, time, datetime-local, month, week, search。

四、图形元素(Graphics Elements)

这些元素用于绘制图形和定义矢量图形。

<canvas>:用于绘制图形,通常通过 JavaScript。
<svg>:   定义可缩放矢量图形。

五、元数据元素(Metadata Elements)

这些元素提供文档的元数据。

<base>: 设置所有相对 URL 的基准 URL。
<meta charset="UTF-8">:定义文档的字符编码。
<link>: 定义文档与外部资源的关系。
<style>:在文档中嵌入 CSS 样式。

六、交互元素(Interactive Elements)

这些元素用于增强用户和网页的互动。

<details>:用于描述文档或应用中的某个部分的详细信息,用户可点击查看。
<summary>:为 <details> 元素定义一个可见标题。

七、脚本元素(Scripting Elements)

这些元素用于嵌入或引用脚本。

<script>:定义客户端脚本,如 JavaScript。

八、其他元素(Miscellaneous Elements)

其他一些新增元素,用于特定的功能和用途。

<embed>:嵌入外部内容,如插件。
<time>:表示24小时的时间,或者纪元时间。

这些新元素不仅丰富了 HTML 的功能,还大大提升了网页的语义和可读性。通过合理使用这些元素,开发者可以创建更结构化、更易于理解和维护的网页。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2154620.html

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

相关文章

AIGC7: 高通骁龙AIPC开发者沙龙过程记录A

图中是一座高耸的宫殿。 就像AI的出现&#xff0c;慢慢初现端倪&#xff0c;头角峥嵘。 背景 一直以来都比较关注AI的发展&#xff0c;有幸再一次参加异常AI的盛会。 从我的角度看。 高通是一家生产芯片的公司&#xff0c;国内的小米&#xff0c;荣耀&#xff0c;Oppo , Vi…

Qt_窗口界面QMainWindow的介绍

目录 1、菜单栏QMenuBar 1.1 使用QMainWindow的准备工作 1.2 在ui文件中设计窗口 1.3 在代码中设计窗口 1.4 实现点击菜单项的反馈 1.5 菜单中设置快捷键 1.6 菜单中添加子菜单 1.7 菜单项中添加分割线和图标 1.8 关于菜单栏创建方式的讨论 2、工具栏QToolBar …

[产品管理-32]:NPDP新产品开发 - 30 - 文化、团队与领导力 - 领导力与团队的可持续发展

目录 一、团队领导的领导力 1.1 领导力 1、领导力的定义 2、领导力的重要性 3、领导力的构成要素 4、如何提升领导力 1.2 情商 二、虚拟团队 1、团队定义与特征 2、团队优势 3、团队挑战与应对策略 三、可持续发展 四、团队管理和领导力中的度量指标 4.1 激励创新…

unix中的进程标识以及使用场景

一、前言 本文将介绍unix系统中的进程标识以及使用场景。进程标识和用户标识类似&#xff0c;只不过其指代的对象是一个进程。我们常把进程标识称为进程ID&#xff0c;本文将讨论如下内容&#xff1a; 1.什么是进程标识&#xff1f; 2.特殊的进程标识 3.如果获取以及使用进程标…

深度学习02-pytorch-09(pytorch完结篇)-基本使用介绍-线性回归案例

使用PyTorch的基本流程&#xff1a;数据准备&#xff1a;通过make_regression生成回归数据&#xff0c;使用 TensorDataset 和 DataLoader 来封装数据。 模型定义&#xff1a;使用 nn.Module 或内置层&#xff08;如 nn.Linear&#xff09;来定义模型结构。 损失函数和优化器…

【全网最全】2024年华为杯研赛D题成品论文获取入口(后续会更新)

您的点赞收藏是我继续更新的最大动力&#xff01; 一定要点击如下的卡片&#xff0c;那是获取资料的入口&#xff01; 点击链接加入【2024华为杯研赛资料汇总】&#xff1a;https://qm.qq.com/q/XzdIsvbiM0https://qm.qq.com/q/XzdIsvbiM0 你是否在寻找数学建模比赛的突破点…

【他山之石】优化 JavaScript 的乐趣与价值(下)

前言 继本文的 上篇 发表之后&#xff0c;没想到反响还挺好&#xff0c;看来大家在 JS 优化的问题上越来越注重“与国际接轨”了。一起来看本文的下篇&#xff0c;也是干货满满。 文章目录 6. Avoid large objectsWhat the eff should I do about this? 7. Use eval8. Use str…

多元形式助力商业价值最大化,王鹤棣商业影响力遥遥领先

明星商业代言层出不穷&#xff0c;但在个人影响力的升级玩法上&#xff0c;当代青年偶像王鹤棣以其独特的个人魅力和卓越的商业头脑&#xff0c;正逐步搭建起一个以个人形象为核心&#xff0c;与各大品牌相互成就的立体商业模型。通过一系列创新的商务合作模式&#xff0c;王鹤…

[Java并发编程] synchronized(含与ReentrantLock的区别)

文章目录 1. synchronized与ReentrantLock的区别2. synchronized的作用3. synchronized的使用3.1 修饰实例方法&#xff0c;作用于当前实例&#xff0c;进入同步代码前需要先获取实例的锁3.2 修饰静态方法&#xff0c;作用于类的Class对象&#xff0c;进入修饰的静态方法前需要…

React组件如何暴露自身的方法

一、研究背景 最近遇到一个如何暴露React组件自身方法的问题。在某些时候&#xff0c;我们需要调用某个组件内部的方法以实现某个功能&#xff0c;因此我们需要了解如何暴露组件内部API的方法。 二、实践过程 本文主要介绍React组件暴露子组件API的方法&#xff0c;以下是实…

2024年研赛-华为杯数模竞赛C题论文首发+论文讲解+代码分享

2024年华为杯-研赛分享资料&#xff08;论文分享部分代码&#xff09;&#xff08;已更新部分代码&#xff09;&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1HGIYjV3lqzUc_3H0vg5H8w 提取码&#xff1a;sxjm 题 目&#xff1a; _基于数据驱动下磁性元件的磁芯损耗建模…

leetcode第十三题:罗马数字转整数

罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&#xff0c;C&#xff0c;D 和 M。 字符 数值 I 1 V 5 X 10 L 50 C 100 D 500 M 1000 例如&#x…

OpenCV特征检测(7)角点检测函数goodFeaturesToTrack()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 确定图像上的强角点。 该函数根据 240中所描述的方法查找图像中最显著的角点或者指定图像区域内的最显著角点。 函数使用 cornerMinEigenVal 或…

华南理工大学信息工程高频电子线路课程设计——基于锁相环的调试解调器设计

完整报告链接如下&#xff1a; 通过网盘分享的文件&#xff1a;高频课设报告.docx 链接: https://pan.baidu.com/s/1J83UCDSU0UHcv4ONYxfyhg?pwdzqyr 提取码: zqyr --来自百度网盘超级会员v5的分享 懒得贴上来了&#xff0c;放一下截图。

ICM20948 DMP代码详解(34)

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;33&#xff09; 上一回解析了inv_icm20948_initialize_lower_driver函数中设置FIFO_RST和FIFO_CFG寄存器相关的代码&#xff0c;本回继续往下解析inv_icm20948_initialize_lower_driver函数的后续代码。为了便于理解和…

蓝桥杯【物联网】零基础到国奖之路:十. OLED

蓝桥杯【物联网】零基础到国奖之路:十.OLED 第一节 硬件解读第二节 MDK配置 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/fa7660b81be9407aa19c603561553db0.png)第三节 代码 第一节 硬件解读 OLED硬件知识: 第二节 MDK配置 第三节 代码 include头文件。 编…

Webui 显卡有显存,会报错:CUDA out of memory

Webui 显卡明明有显存&#xff0c;会报错&#xff1a;CUDA out of memory 网上找了很多资料&#xff0c;都没有能解决这个问题 &#xff0c;后来发现和电脑虚拟内存设置有关&#xff0c;这里记录一下具体的解决方法&#xff1a; 什么是 CUDA Out of Memory 错误&#xff1f; …

【MySQL】字符集与Collation

今天做项目&#xff0c;突然发现&#xff0c;项目中使用的MySQL的库排序规则是 utf8mb4_general_ci&#xff0c;而我自己用的MySQL8默认库规则是utf8mb4_0900_ai_ci&#xff0c;于是想要弄清楚 出处&#xff08;写的非常详细&#xff09;&#xff1a;mysql设置了utf8mb4&#x…

WPF自定义Dialog模板,内容用不同的Page填充

因为审美的不同&#xff0c;就总有些奇奇怪怪的需求&#xff0c;使用框架自带的对话框已经无法满足了&#xff0c;这里记录一下我这边初步设计的对话框。别问为啥要用模板嵌套Page来做对话框&#xff0c;问就是不想写太多的窗体。。。。 模板窗体&#xff08;XAML&#xff09;…

面试-设计模式

策略模式 定义了一组算法&#xff0c;分别封装起来&#xff0c;这些算法直接可以相互替换 设计模式的开闭原则&#xff1a;对修改关闭&#xff0c;对扩展开放 装饰模式 将某种算法作为一个装饰品添加到对象身上&#xff0c;同时可以自由穿戴更换装饰品 两个主要的角色&…