【HTML】H5新增元素记录

H5 新增元素特性

1. 语义化标签

语义化标签的好处:

  1. 对于浏览器来说,标签不够语义化
  2. 对于搜索引擎来说,不利于SEO的优化

语义化标签:

  • header:头部元素
  • nav:导航
  • section:定义文档某个区域的元素
  • article:内容元素
  • aside:侧边栏元素
  • footer:尾部元素

在这里插入图片描述

2. Video 视频 & Audio音频

audio 和 video:

  • 我们可以直接通过元素来使用video和audio
  • 我们还可以通过JavaScript的API对其进行控制

2.1 video

HTML元素用于在HTML中嵌入媒体播放器,支持文档中的视频播放

2.1.1 常见属性
  • src:URL的地址
  • width:高度
  • height:高度
  • controls:Boolean类型,是否显示控制栏
  • autoplay:false,自动播放(大部分浏览器不支持自动播放,可以配合静音自动播放)
  • muted:是否静音播放
  • preload:是否需要预加载
    • none(默认)
    • metadata(需要加载)
    • auto(自动)
  • poster:一海报帧的URL
2.1.2 兼容性写法

 <video src="./test.mp4" controls muted width="500"><source src="./test.webm" type="" />
</video>

遇到浏览器不支持MP4格式时,会自动切换到webm的格式

2.2 audio

HTML元素用于在文档中嵌入音频内容,和video的用法类似

2.2.1 常见属性
  • src:地址
  • controls:是否显示控制台
  • autoplay:是否自动播放
  • muted:是否静音
  • preload:预加载
    • none
    • metadata
    • auto
2.2.2 音频支持格式

https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

2.2.3 兼容性写法
<div><audio src="./test.mp3" controls muted><source src="./test.ogg" type="" /><p>不好意思,您的浏览器不支持H5音频</p></audio>
</div>

3. input的扩展

MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

4. 全局属性data-*

data-*是全局属性,可以在所有元素中定义,并且javascript中操作DOM通过dataset轻松获取到

用途:通常用于HTML和javascritp的数据传递

<div><ul><li class="item" data-name="张三" data-age="18"></li></ul>
</div>
<script>let itemData = document.querySelector('.item').datasetconsole.log(itemData)// 生成DOMStringMap
</script>

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

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

相关文章

解锁多智能体路径规划新境界:结合启发式搜索提升ML本地策略

引言&#xff1a;多智能体路径寻找&#xff08;MAPF&#xff09;问题的重要性与挑战 在现代自动化和机器人技术迅速发展的背景下&#xff0c;多智能体路径寻找&#xff08;Multi-agent path finding&#xff0c;简称MAPF&#xff09;问题的研究变得日益重要。MAPF问题涉及为一…

【NTN 卫星通信】NTN的SSB波束探讨

1 概述 SSB是同步广播信道&#xff0c;用于小区搜索&#xff0c;主系统消息的发送。NR协议中定义了多种SSB波束格式&#xff0c;简述如下。   小区搜索是终端获取与小区的时间和频率同步并检测小区的物理层小区ID的过程。   为了进行小区搜索&#xff0c;UE接收以下同步信号…

如何将本地项目上传到gitlab

具体步骤如下&#xff1a; 1. 登录 gitLab账号&#xff0c;成功创建一个项目文件&#xff0c;生成对应的http/https地址 2.打开本地项目&#xff0c;初始化git $ git init 3.将本地git和服务器上的连接&#xff08;确保项目没有其他远程连接的服务器端口&#xff09; $ gi…

MySQL Workbench下载安装、 MySQL Workbench使用

官方下载链接;MySQL :: Download MySQL Workbench 下载好懒人安装&#xff0c;也可自己选择目录 下面是使用&#xff1a; 连接数据库&#xff1a; 填写数据库连接信息&#xff1a; 基本操作部分&#xff1a; 数据导入导出&#xff1a; 导出/备份 导入&#xff1a; 生产er图…

C#基础总结

这里写目录标题 目录1. 什么情况下需要override Equals?2. 什么时候需要override GetHashCode&#xff1f;3. int和int?有什么关系&#xff1f;两个类型转换是否涉及装箱过程&#xff1f;4. String类和StringBuiler类有什么区别&#xff1f;5. 抽象类和接口有什么区别&#x…

【热门话题】探索与心得:深入体验Microsoft Edge浏览器

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 探索与心得&#xff1a;深入体验Microsoft Edge浏览器一、Edge浏览器概述1.1 发…

基于微信小程序的房屋租赁管理系统

介绍 基于微信小程序房屋租赁管理系统&#xff0c;对房东-房屋-房间-租客进行网格化管理&#xff0c;帮助政府部门统计分析所辖区域的出租房屋情况。 微信小程序可以视为一种新形态的应用。相比于已有的嵌入在浏览器中的HTML5网页应用&#xff0c;他具有更高的系统权限&#x…

大型网站系统架构演化实例_5.使用反向代理和CDN加速网站响应

1.使用反向代理和CDN加速网站响应 随着网站业务不断发展&#xff0c;用户规模越来越大&#xff0c;由于区域的差别使得网络环境异常复杂&#xff0c;不同地区的用户访问网站时&#xff0c;速度差别也极大。有研究表明&#xff0c;网站访问延迟和用户流失率正相关&#xff0c;网…

【嵌入式】交叉编译指南:将开源软件带到嵌入式世界

&#x1f9d1; 作者简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟,欢迎关注。提供嵌入式方向的学习指导…

Rust入门-Hello World

1、安装 在 Linux 或 macOS 上安装 rustup 打开终端并输入下面命令&#xff1a; $ curl --proto https --tlsv1.2 https://sh.rustup.rs -sSf | sh如果安装成功&#xff0c;将出现下面这行&#xff1a; Rust is installed now. Great!2、更新 $ rustup self uninstall3、卸…

mybatis一对一,多对一,一对多--使用自动映射避免繁琐的resultMap

头疼的一对一&#xff0c;多对一&#xff0c;一对多写法 我们知道&#xff0c;相比较hibernate,mybatis的一对一&#xff0c;一对多都比较繁琐&#xff0c;hibernate可以直接在实体类里面配置好映射关系&#xff0c;获取值的时候就能把一对一和一对多的对象带出来了&#xff0…

红黑树(Red-Black Tree)

红黑树&#xff08;Red-Black Tree&#xff09;是一种自平衡的二叉查找树&#xff0c;它具有以下特性&#xff1a; 1. 每个节点要么是红色&#xff0c;要么是黑色。 2. 根节点是黑色的。 3. 每个叶子节点&#xff08;NIL节点&#xff09;是黑色的。 4. 如果一个节点是红色的&am…

手把手教你实现贪吃蛇

前言 在实现贪吃蛇前&#xff0c;我们需要熟练地掌握C语言知识&#xff0c;对初阶数据结构中的链表有一定的掌握&#xff0c;并且我们还会使用到Win 32 API 的知识&#xff0c;下面我会对需要使用到的API接口函数进行解释。最终的代码我放在后面&#xff0c;有需要的可以自取。…

探索C语言数据结构:利用顺序表完成通讯录的实现

在好久之前我就已经学习过顺序表&#xff0c;但是在前几天再次温习顺序表的时候&#xff0c;我惊奇的发现顺序编表可以完成我们日常使用的通讯录的功能&#xff0c;那么今天就来好好通过博客总结一下通讯录如何完成吧。 常常会回顾努力的自己&#xff0c;所以要给自己的努力留…

OpenHarmony其他工具类—lua

简介 Lua是一种功能强大、高效、轻量级、可嵌入的脚本语言。 支持过程编程、面向对象编程、函数编程、数据驱动编程和数据描述。 下载安装 直接在OpenHarmony-SIG仓中搜索lua并下载。 使用说明 以OpenHarmony 3.1 Beta的rk3568版本为例 将下载的lua库代码存在以下路径&#…

Java Web3-2 - tomcat

https://github.com/heibaiying/Full-Stack-Notes/blob/master/notes/Tomcat_架构解析.md https://zhuanlan.zhihu.com/p/40249834 早期&#xff0c;web技术主要用于浏览静态页面 时间发展&#xff0c;用户已经不满足于仅浏览静态页面。用户需要一些交互操作&#xff0c;获取…

服务器有哪些特性?

服务器是计算机的一种&#xff0c;但是和普通的计算机是不同的&#xff0c;服务器比普通计算机的运行速度更快、负载能力更高&#xff0c;可以在网络中为其它客户机或是大型设备提供计算或者是应用服务&#xff0c;服务器有着高速的CPU运算能力、能够进行长时间的运行有着更好的…

STM32G431RBT6之时钟树配置与生成工程

默认大家都下载了蓝桥杯嵌入式资源包了哈. 首先,打开cubumx,修改RCC与SYS. 打开并观察原理图,发现晶振是24Mhz. 第一步,打开Clock Configuration. 第二步,修改晶振为原理图相对应的24Mhz. 第三步,切换到HSE. 第四步,切换到PLLCLK. 第五步,设置HCLK为80Mhz(15届真题要求为8…

洛谷P1057 [NOIP2008 普及组] 传球游戏

#include<iostream> using namespace std; int n;// n个人传球游戏 默认开始球在编号为1的位置 int m;// 传递m次球 int main(){cin>>n>>m;// 动态转方程&#xff1a;// 球传递到编号为k人的手中// 种类总数 传递到k-1编号种类总数 传递到k1编号种类总数//…

wsl2 Ubuntu子系统内存只有一半的解决办法

物理机的内存是64G&#xff0c;在wsl2安装完Ubuntu20.04后&#xff0c;输入命令&#xff1a; free -g 发现只有32G&#xff0c;原因是默认只能获得物理机一半的内存&#xff1a; WSL 中的高级设置配置 | Microsoft Learn 因此可手动修改为与物理机同等大小&#xff1a; 1&a…