8、HTML5新增标签(布局、媒体、画布、矢量)

简介: 8、HTML5新增标签(布局、媒体、画布、矢量)

1、什么是HTML5


  • HTML5是超文本标记语言(html)的第五次重大修改,可以简单的理解就是html的第五个版本


2、HTML5新特性


HTML5新特性
布局元素 header、nav、aside、article、section、footer
媒体元素 audio、vedio
画布 canvas
矢量图片 svg



3、HTML5布局元素


布局元素 相当于一个有语义的div
header 网页头部
nav 导航栏
aside 侧标栏
article 显示文章
section 布局的一部分
footer 网页页脚


4、HTML5媒体元素


HTML5媒体元素 作用
audio 音频
video 视频
媒体元素属性
controls 控制器
autoplay 自动播放
muted 静音(视频)


源代码:

<!-- 音频 -->
<audio src="audio/年少有为.mp3" controls></audio>
<!-- 视频 -->
<video src="audio/年少有为.mp4" controls muted></video>


目录
打赏
0
0
0
0
2
分享
相关文章
HTML布局
HTML布局
83 0
HTML5的新语义化标签
HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
128 49
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
106 5
|
4月前
|
HTML中使用Flex布局实现双行夹批效果
在HTML中,还可以用table元素来实现双行夹批效果,但比flex布局代码更复杂,效果也不见得更理想。
91 10
Html布局 BFC的概念和作用讲解
BFC(Block Formatting Context)是Web页面的CSS渲染机制之一,它如同一个独立的容器,确保内部元素的变化不会影响外部布局。本文介绍了BFC的基本概念、作用及实现方法,包括通过设置`float`、`position`、`overflow`属性或使用伪元素等方式使元素成为BFC,有效解决布局中的边距塌陷等问题,优化网页布局效果。
50 2
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
HTML 布局1
网页布局对网站外观至关重要。推荐使用 `&lt;div&gt;` 元素进行布局,尽管 `&lt;table&gt;` 也可行但不建议使用。示例代码展示了如何用 `&lt;div&gt;` 创建多列布局,包括头部、菜单、内容和底部区域。
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
96 2