HTML5 新增的标签有哪些

news2024/11/16 5:22:27

HTML5(超文本标记语言第五版)是一种用于创建和呈现网页内容的标准标记语言。是最新的html标准,拥有新的语义、图形以及多媒体元素,简化web应用程序,专为丰富的web内容而设计的,简称“H5”。

语义化标签


H5是HTML(超文本标记语言)的第五个主要版本,由万维网联盟(World Wide Web Consortium,W3C)进行开发和维护。

 

HTML5引入了许多新的功能和语义元素,以改进Web页面的结构、样式和交互性能。以下是HTML5的一些主要特性:

①.语义元素:HTML5引入了一些新的语义元素,如<header>、<nav>、<section>、<article>、  <footer>等,使开发者可以更清晰地定义页面结构,提高可读性和可访问性。

②.多媒体支持:HTML5提供了内置的多媒体支持,包括<audio>和<video>元素,使开发者能够在网页中直接嵌入音频和视频内容,而无需依赖第三方插件(如Flash)。

③.Canvas绘图:HTML5引入了<canvas>元素,通过JavaScript脚本可以在其中进行绘图和渲染,使开发者可以创建复杂的图形、图表和动画效果。

④.Web存储:HTML5提供了本地存储功能,包括Web Storage和IndexedDB。这使得网页可以在客户端(用户的浏览器)上存储数据,以便离线访问和临时数据存储。

⑤.Web应用程序:HTML5提供了一些特性,使开发者能够构建功能强大的Web应用程序,如Web Workers(后台脚本)、Web Sockets(实时通信)和WebRTC(实时音视频通信)等。

⑥.改进的表单控件:HTML5引入了一些新的表单元素和属性,如日期选择器、输入验证、进度条、颜色选择器等,使开发者能够更轻松地创建交互性更强的表单。

具体标签如下:

一、页面结构

标签描述
<header>页面或节的页眉
<nav>页面导航链接部分
<section>独立的节或主题区块
<article>独立的、完整的内容块
<aside>页面侧边栏或附属内容
<footer>页面或节的页脚
<main>页面的主要内容区域
<figure>包含一组相关的多媒体内容
<figcaption><figure>元素的标题或说明性文本

二、多媒体

标签描述
<video>视频
<audio>音频
<source><video>和<audio>的媒体源
<track><video>和<audio>的文本轨道(字幕、描述等)

三、表单

标签描述
<datalist>输入框的预定义选项列表
<output>计算结果或脚本输出
<progress>任务的进度
<meter>标量测量
<keygen>用于生成密钥对的表单元素
<details>可折叠的内容
<summary><details>元素的摘要
<fieldset>表单元素的分组容器
<legend><fieldset>元素的标题
<datalist>输入框的预定义选项列表
<output>计算结果或脚本输出

四、语义化和其他

标签描述
<mark>文本高亮
<time>日期、时间或时间范围
<ruby>注音文本(用于东亚文字)
<rt><ruby>元素的解释性文字
<rp><ruby>元素在不受支持时显示的回退内容
<wbr>单词换行标记
<bdi>文本的双向性隔离
<dialog>对话框
<template>用于定义片段模板,供脚本复制和插入

HTML5的出现对于Web开发具有重要意义,它使得开发者可以更加灵活、高效地构建功能丰富、跨平台的Web应用程序和内容。它被广泛支持和采用,成为现代Web开发的基础技术之一。

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

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

相关文章

大数据下批处理性能问题分析优化分享

大数据下批处理性能问题分析优化分享 互联网的步伐加速了硬件资源的发展&#xff0c;而硬件资源的改进&#xff0c;促进社会的建设的快速发展&#xff0c;特别是这互联互通大数据时代&#xff0c;多用户大数据下&#xff0c;单核服务器无法承受处理&#xff0c;特别是对于一个并…

【AI底层逻辑】——篇章3(上):数据、信息与知识香农信息论信息熵

目录 引入 一、数据、信息、知识 二、“用信息丈量世界” 1、香农信息三定律 2、一条信息的价值 3、信息的熵 总结 引入 AI是一种处理信息的模型&#xff0c;我们把信息当作一种内容的载体&#xff0c;计算机发明以前很少有人思考它的本质是什么。随着通信技术的发展&a…

【C++从入门到放弃】模板进阶——非类型模板参数、类模板的特化、模板的分离编译

&#x1f9d1;‍&#x1f4bb;作者&#xff1a; 情话0.0 &#x1f4dd;专栏&#xff1a;《C从入门到放弃》 &#x1f466;个人简介&#xff1a;一名双非编程菜鸟&#xff0c;在这里分享自己的编程学习笔记&#xff0c;欢迎大家的指正与点赞&#xff0c;谢谢&#xff01; 模板进…

行业报告 | 人工智能现状报告(中)

原创 | 文 BFT 机器人 03 行业 与NVIDIA的GPU相比&#xff0c;后起之秀的AL芯片公司还有机会吗? NVIDIA公司的FY2021数据中心收入为106亿美元。在2021年4月&#xff0c;他们确认了32.6亿美元&#xff0c;按年度计算&#xff0c;这比排名前二的人工智能半导体初创公司的估值总和…

Android 14 新功能:区域偏好 Regional Preferences

翻译自 https://alexzh.com/regional-preferences-in-android-14/ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9YLBwPZs-1687502002096)(/Users/ellisonchan/Nutstore Files/ellison-wiki/docs/文章输出/原创/locale/android14-base-locale.png)]…

微信管理系统太多?该如何选择

“您的手机号就是您的微信号吗&#xff1f;我可以加您微信&#xff0c;然后给您发送我们的产品资料和报价。” 毕竟微信是一个月活跃用户超过10亿的应用&#xff0c;成为企业员工&#xff0c;尤其是销售人员沟通联络的首要选择&#xff0c;即使有其他专用办公工具&#xff0c;…

idea中使用java断言——java笔记

在 Java 中&#xff0c;断言是一种用于检查代码中是否满足特定条件的机制。它可以用来确保程序在开发和测试阶段的正确性&#xff0c;并且可以在出现错误时提供有用的错误信息。 断言在 Java 中由关键字 assert 表示&#xff0c;其语法为&#xff1a; assert condition;或者 …

6.Java的JDBC编程

文章目录 &#x1f306;1. 数据库编程&#x1f306;&#x1f3ef;1.1数据库编程的必备条件&#x1f3ef;&#x1f3f0;1.2下载驱动包&#x1f3f0;⛺️1.3导入驱动包&#xff1a;⛺️&#x1f3ed;1.4编写JDBC代码&#x1f3ed;&#x1f5fc;1.4.1数据库插入操作(在idea中用Jav…

《Opencv3编程入门》学习笔记—第七章

《Opencv3编程入门》学习笔记 记录一下在学习《Opencv3编程入门》这本书时遇到的问题或重要的知识点。 第七章 图像变换 图像变换&#xff1a;即将一幅图像转变成图像数据的另一种表现形式。 一、基于OpenCV的边缘检测 OpenCV中边缘检测的各种算子和滤波器&#xff1a;Can…

【雕爷学编程】Arduino动手做(125)---WT588D语音模块

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

Linux缓冲区续集——手撕fopen、fwrite、fflush、fclose等C库函数

目录 头文件&#xff1a; 接下来就是设计这四个函数&#xff1a;Mystdio.c 重点讲一讲_fflush函数的底层实现原理&#xff1a; 所以数据内容的经过如下&#xff1a; 总结&#xff1a; 执行——测试写好的这4个函数&#xff1a; 运行结果: 修改测试代码&#xff…

ASEMI快恢复二极管MUR80100PT功能和应用实用指南

编辑-Z MUR80100PT是一种高性能、超快恢复二极管&#xff0c;设计用于各种应用&#xff0c;包括电源、逆变器和电机控制系统。本文将提供一个全面的指南&#xff0c;以了解MUR80100PT的特点和应用&#xff0c;以及它在提高电子设备的效率和可靠性方面的重要性。 MUR80100PT的特…

使用vite创建vue3、react项目

一、使用vite需要的环境 node: 14.18 , 16 vite官网&#xff1a;https://cn.vitejs.dev/guide/ 如上图、官网上明确给出了提醒&#xff0c;要使用vite搭建项目&#xff0c;需要node版本在14.18 二、使用vite创建vue3项目 1. 使用命令启动vite创建项目 使用 NPM: $ npm cr…

开始使用Dotnetty高性能网络库进行网络通讯

&#x1f4e2;欢迎点赞 &#xff1a;&#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;&#x1f4e2;本文作者&#xff1a;由webmote 原创&#x1f4e2;作者格言&#xff1a;新的征程&#xff0c;我们面对的不是…

深度:激光和光纤诞生记

光子盒研究院出品 导读&#xff1a;20世纪50年代以来&#xff0c;科技领域掀起了一场光学革命&#xff0c;激光和光纤的诞生&#xff0c;带来了革命性突破。事实上&#xff0c;激光和光纤的诞生也是第一次量子革命的范畴&#xff0c;因为这些技术的发展是基于对量子规律的观测和…

Java集合之LinkedList详解

Java集合之LinkedList 一、LinkedList类的继承关系1. 基类功能说明1.1. Iterator&#xff1a;提供了一种方便、安全、高效的遍历方式。1.2. Collection&#xff1a;为了使ArrayList具有集合的基本特性和操作。1.3. Queue: LinkedList是一种队列&#xff08;Queue&#xff09;数…

I/O error on POST request for “...“ PKIX path building failed的解决办法

异常&#xff1a; 项目中需要用RestTemplate调三方接口&#xff0c;url是https开头加密的。postman可以调通&#xff0c;代码提示没有证书&#xff0c;具体如下&#xff1a; [ERROR][2023-06-25 10:41:16,574][com.peraglobal.restInterface.controller.PLMController]I/O err…

MySQL如何在Centos7环境安装:简易指南

目录 前言 一、卸载不要的环境 1.检查本地MySQL是否正在运行 2.停止正在运行的MySQL 二、检查系统安装包 三、卸载这些默认安装包 1.手动一个一个卸载 2.自动卸载全部 四、获取mysql官方yum源 五、安装mysql yum源&#xff0c;对比前后yum源 1.安装前 2.安装中 3.…

MySQL进阶SQL语句之函数运用

目录 1.select&#xff08;显示表格中一个或数个字段的所有数据记录&#xff09; 2.distinct&#xff08;不显示重复的数据记录&#xff09; 3.where&#xff08;有条件查询&#xff09; 4.and 、or&#xff08;且、或&#xff09; 5. in&#xff08;显示已知的值的数据记…

浅谈单线程和多线程的异同

前两天有个面试&#xff0c;面试官问了我一个单线程和多线程的问题&#xff0c;情境如下&#xff1a; 面试官&#xff1a;你对单线程和多线程有什么看法&#xff1f; 我&#xff1a; 面试官&#xff1a; 我&#xff1a; 面试官&#xff1a; 我 现在先让我们来了解一下进程…