HTML5中新增元素介绍

引入了许多新元素,以增强网页的语义和功能。这些新元素大致可以按以下几类进行分类和介绍。
下面是对各标签的详解,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.xdnf.cn/news/1542027.html

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

相关文章

数据库提权【笔记总结】

文章目录 UDF提权以有webshell只有数据库权限条件复现msf工具sql语句提权 MOF提权前言条件复现msf工具php脚本提权 sqlserver提权前言条件xp_cmdshell提权复现 沙盒提权介绍复现 Oracle提权靶场搭建执行任意命令复现 通过注入存储过程提权&#xff08;低权限提升至DBA&#xff…

深度学习之概率论预备知识点(3)

在深度学习中&#xff0c;概率论和数理统计是理解许多算法背后的理论基础。这些知识在处理不确定性、估计模型参数、理解数据分布等方面非常关键 1、概率 一种用来描述随机事件发生的可能性的数字度量&#xff0c;表示某一事件发生的可能性。 概率并不客观存在&#xff0c;是…

12. Inseq 特征归因:可视化解释 LLM 的输出

Feature Attribution&#xff08;特征归因&#xff09;&#xff1a;你可以将其当做对模型输出的解释&#xff0c;就像在图像分类中可视化模型关注的区域一样。 本文将介绍 Inseq&#xff0c;这是一个用于解释和可视化序列生成模型输出的工具。我们将通过翻译任务&#xff08;关…

【MySQL 01】数据库基础

目录 1.数据库是什么 2.基本操作 数据库服务器连接操作 数据库和数据库表的创建 服务器&#xff0c;数据库&#xff0c;表关系 数据逻辑存储 3.MySQL架构 4.SQL分类 5.存储引擎 1.数据库是什么 mysql&&mysqld&#xff1a; mysql&#xff1a;这通常指的是 MySQL …

C#描述-计算机视觉OpenCV(6):形态学

C#描述-计算机视觉OpenCV&#xff08;6&#xff09;&#xff1a;形态学 前言阈值化二值图像腐蚀与膨胀算法形态学滤波器开启和闭合运算原理概括 前言 这是本系列第六节&#xff0c;主要是介绍基础的形态学运用。 形态学主要是分析图像中不同主题的形态&#xff0c;它定义了一系…

基于redis的HyperLogLog数据结构实现的布隆过滤器在信息流中历史数据的应用

一、基于redis的HyperLogLog数据结构实现的布隆过滤器在信息流中历史数据的应用 做信息流服务端的左发一定会遇到用户历史数据的集合&#xff0c;对于一些有限信息流&#xff08;因DT数据中心的推荐数据变化较慢&#xff0c;推荐量不大&#xff09;&#xff0c;历史数据可以使用…

扎克伯格的未来愿景 用智能眼镜引领数字社交互动新时代

在即将召开的 Meta Connect 2024 大会之前&#xff0c;对公司创始人马克-扎克伯格&#xff08;Mark Zuckerberg&#xff09;进行了长达 90 分钟的播客采访&#xff0c;对 Meta 的未来发展方向和愿景进行了阐述。 这次访谈不仅为即将举行的会议预热&#xff0c;还深入探讨了 Met…

CAN通信技术入门篇

参考ISO 11898与BOSCH_CAN_V20 1.CAN通信技术概述 CAN ( Controller Area Network ) 即控制器局域网络。由于其高性能、高可靠性、及独特的设计,CAN越来越受到人们的重视。国外已有许多大公司的产品采用了这一技术。 CAN最初是由德国的BOSCH公司为汽车监测、控制系统而设计的…

ML 系列:机器学习和深度学习的深层次总结(04)多元线性回归 (MLR)

图 1.多元线性回归与简单线性回归 一、说明 线性回归从一维推广到多维&#xff0c;这与单变量线性回归有很多不同&#xff0c;情况更加复杂&#xff0c;而在梯度优化也需要改成向量梯度&#xff0c;同时&#xff0c;数据预处理也成了必要步骤。 二、综述 多元线性回归是简单线性…

利用JAVA写一张纸折叠珠穆拉玛峰高度

public class zhumulama {public static void main(String[] args) {double height 8848860;double zhi 0.1;int count 0;while(zhi < height){zhi*2;//每次折完厚度count;//计数}System.out.println("一共需要折"count"次");System.out.println(&qu…

PD协议过程详解:从物理连接到智能管理的全面剖析

随着科技的飞速发展&#xff0c;电力传输与数据交换的需求日益增加&#xff0c;Power Delivery&#xff08;简称PD&#xff09;协议应运而生&#xff0c;成为现代电子设备充电与数据传输的重要标准。PD协议由USB Implementers Forum&#xff08;USB-IF&#xff09;制定&#xf…

Lanterns (dp 紫 线段树 二分 维护dp)

Lanterns - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 让所有点被覆盖&#xff0c;那么状态可以设计成覆盖一段前缀&#xff0c;并且中间不允许出现断点 由于CF崩了&#xff0c;所以暂时没提交代码。 记f(i) 为前 i 个灯笼点亮的最长前缀。 由于答案具有保留性&#xff…

24年研赛-华为杯数模竞赛D题论文首发+代码分享

本届研赛助攻题目 C D F三题论文均已经全部完成。后更新计划 如图所示。 免费给大家分享 三个问题的论文部分代码 2024年华为杯-研赛分享资料&#xff08;论文部分代码&#xff09;&#xff08;已更新部分代码&#xff09;&#xff1a; 链接&#xff1a;https://pan.baidu.com…

【Vue系列五】—Vue学习历程的知识分享!

前言 本篇文章讲述前端工程化从模块化到如今的脚手架的发展&#xff0c;以及Webpack、Vue脚手架的详解&#xff01; 一、模块化 模块化就是把单独的功能封装到模块&#xff08;文件&#xff09;中&#xff0c;模块之间相互隔离&#xff0c;但可以通过特定的接口公开内部成员…

仓颉编程入门2,启动HTTP服务

上一篇配置了仓颉sdk编译和运行环境&#xff0c;读取一个配置文件&#xff0c;并把配置文件简单解析了一下。 前面读取配置文件&#xff0c;使用File.readFrom()&#xff0c;这个直接把文件全部读取出来&#xff0c;返回一个字节数组。然后又创建一个字节流&#xff0c;给文件…

动手学深度学习(李沐)PyTorch 第 1 章 引言

在线电子书 深度学习介绍 安装 使用conda环境 conda create -n d2l-zh python3.8 pip安装需要的包 pip install jupyter d2l torch torchvision下载代码并执行 wget https://zh-v2.d2l.ai/d2l-zh.zip unzip d2l-zh.zip jupyter notebookpip install rise如果不想使用jupyt…

数模打怪(九)之线性规划、非线性规划、多目标规划

一、线性规划 1、问题特征&#xff1a;有限的条件下&#xff0c;最大的收益 怎样分配&#xff0c;使……尽量多&#xff08;少&#xff09;&#xff0c;使利润最多&#xff0c;使最合理 变量都是一次项&#xff08;x&#xff09; 2、三个要素&#xff1a;决策变量、目标函数…

docker技术(上)

一、docker简介 Docker 是一个开源的应用容器引擎&#xff0c;于 2013 年由 Solomon Hykes 推出并开源。它基于 Go 语言开发&#xff0c;遵从 Apache2.0 协议。Docker 可以让开发者将应用及其依赖包打包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 或 Windows…

工程师 - Windows下打开PowerShell和CMD Prompt的若干方法

打开PowerShell 在Windows中&#xff0c;你可以通过以下几种方式来打开PowerShell&#xff1a; 1. 开始菜单&#xff08;Start Menu&#xff09;&#xff1a;点击“开始”按钮&#xff0c;然后在搜索栏中输入“PowerShell”。在搜索结果中&#xff0c;选择“Windows PowerShell…

【若依RuoYi-Vue | 项目实战】帝可得后台管理系统(二)

文章目录 一、人员管理1、需求说明2、生成基础代码&#xff08;1&#xff09;创建目录菜单&#xff08;2&#xff09;添加数据字典&#xff08;3&#xff09;配置代码生成信息&#xff08;4&#xff09;下载代码并导入项目 3、人员列表改造&#xff08;1&#xff09;基础页面&a…