HTML5的新增标签及属性

最新推荐文章于 2022-09-09 10:40:55 发布

星汐飞花

最新推荐文章于 2022-09-09 10:40:55 发布

阅读量267

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_46426843/article/details/106465173

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML5的新增属性等

在HTML5中相较于以前，新增了更多的语义化标签和表单属性以及媒体标签

语义化标签

在以前的网页编写布局中，我们会使用大量的div盒子，但div和span这两个标签对于浏览器来说是没有语义的，虽然我们可以通过添加类名来区分他们，但对于浏览器来说他们并没有什么不同，在HTML5中新增了许多新得语义化标签：

标签名	语义
header	头部
nav	导航
article	内容
section	块级
aside	侧边
footer	底部

使用语义化标签的注意

语义化标签主要针对搜索引擎
新标签可以使用一次或者多次
在 IE9 浏览器中，需要把语义化标签都转换为块级元素
语义化标签，在移动端支持比较友好，
另外，HTML5 新增的了很多的语义化标签，以上只是例举

多媒体标签

在以前的HTML5中我们除了文字只能插入图片，但随着网络发展，视频音频越来越多，也能更加直观的向用户进行展示，所以在HTML5中新增加了多媒体标签。

多媒体标签有两个，分别是
- 音频 – audio
- 视频 – video
audio 标签说明
- 可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，
- 但是：播放格式是有限的
audio 支持的音频格式
- audio 目前支持三种格式
audio 的参数!

5、audio 代码演示

<body>
  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->
  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!-- 
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

四、多媒体视频标签

video 视频标签
- 目前支持三种格式

语法格式

<video src="./media/video.mp4" controls="controls"></video>

video 参数

video 代码演示

<body>
  <!-- <video src="./media/video.mp4" controls="controls"></video> -->

  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

多媒体标签总结
- 音频标签与视频标签使用基本一致
- 多媒体标签在不同浏览器下情况不同，存在兼容性问题
- 谷歌浏览器把音频和视频标签的自动播放都禁止了
- 谷歌浏览器中视频添加 muted 标签可以自己播放
- 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

新增表单属性

新增 input 标签

在这里插入图片描述

新增表单属性

在这里插入图片描述

星汐飞花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5的新增标签及属性

HTML5的新增属性等在HTML5中相较于以前，新增了更多的语义化标签和表单属性以及媒体标签语义化标签在以前的网页编写布局中，我们会使用大量的div盒子，但div和span这两个标签对于浏览器来说是没有语义的，虽然我们可以通过添加类名来区分他们，但对于浏览器来说他们并没有什么不同，在HTML5中新增了许多新得语义化标签：标签名语义header头部nav导航article内容section块级aside侧边footer底部使用语义化标
复制链接

扫一扫