【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 兼容性写法

html 复制代码
 <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 兼容性写法
html 复制代码
<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的数据传递

html 复制代码
<div>
  <ul>
    <li class="item" data-name="张三" data-age="18"></li>
  </ul>
</div>
<script>
  let itemData = document.querySelector('.item').dataset
  console.log(itemData)
  // 生成DOMStringMap
</script>
相关推荐
伟笑9 分钟前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Sapphire~28 分钟前
重学前端003 --- CSS 颜色
前端·css
慧一居士28 分钟前
CSS和CSS3区别对比
前端·css3
我血条子呢29 分钟前
动态组件和插槽
前端·javascript·vue.js
中微子37 分钟前
RESTful架构与前后端路由演进:构建现代化Web应用的核心规范
前端
前端付豪37 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im43 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
I_have_a_lemon44 分钟前
前端、产品、设计师神器推荐——Onlook
前端·cursor
前端小巷子44 分钟前
深入解析CSRF攻击
前端·安全·面试
JustHappy1 小时前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构