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>


相关文章
|
27天前
|
移动开发 IDE 前端开发
HTML基础-标签与元素:构建网页的基石
【6月更文挑战第1天】HTML是网页基础,由标签和元素定义内容结构与样式。本文介绍HTML标签(如`<p>`)和元素(包括开始、结束标签及内容),并列出常见错误:忘记闭合标签、错误嵌套顺序、不恰当使用自封闭标签及混淆标签与属性。建议遵循标准、使用IDE辅助、验证代码和持续实践来避免错误。示例代码展示基本用法:`<html><head><title>...</title></head><body>...</body></html>`。学习HTML标签与元素是前端开发入门关键。
|
19小时前
|
前端开发 JavaScript 搜索推荐
HTML标签是如何定义网页内容的显示方式的?
【6月更文挑战第28天】HTML标签是如何定义网页内容的显示方式的?
8 2
|
19小时前
|
JavaScript 前端开发 UED
HTML标签的工作原理是什么?
【6月更文挑战第28天】HTML标签的工作原理是什么?
7 1
|
14天前
|
存储 JavaScript 前端开发
HTML标签data-属性的作用
HTML标签data-属性的作用
|
14天前
|
移动开发 HTML5 前端开发
【网页搭建基石】:揭秘HTML标签的魔法世界
【网页搭建基石】:揭秘HTML标签的魔法世界
|
23天前
|
数据采集 移动开发 搜索推荐
HTML基础-HTML5新增语义标签:解锁网页结构新维度
【6月更文挑战第5天】本文介绍了HTML5的语义标签,旨在提升网页结构化和可访问性。核心语义标签包括`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;article&gt;`、`&lt;section&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`、`&lt;figure&gt;`和`&lt;figcaption&gt;`。常见问题包括滥用标签作布局工具、忽略`&lt;main&gt;`、不恰当嵌套和忽视辅助功能。
|
22天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
22 1
|
22天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
30 1
|
3天前
|
移动开发 前端开发 搜索推荐
HTML5飞跃指南:基础标签元素,网页设计的第一步
HTML5飞跃指南:基础标签元素,网页设计的第一步
|
3天前
|
Web App开发 移动开发 搜索推荐
HTML5 新增语义标签及属性
HTML5 新增语义标签及属性