H5新特性小结

最新推荐文章于 2025-05-02 22:00:00 发布

Kim 希

最新推荐文章于 2025-05-02 22:00:00 发布

阅读量173

点赞数

文章标签： html5

本文链接：https://blog.youkuaiyun.com/haruhyuhae/article/details/108309509

版权

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

注意：对于中文网页需要使用声明编码，否则会出现乱码。

视频Video和音频Radio标签
很多站点都会使用到视频. HTML5 提供了展示视频的标准。

视频
元素提供了播放、暂停和音量控件来控制视频。

同时元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
元素支持多个元素. 元素可以链接不同的视频文件
音频
直到现在，仍然不存在一项旨在网页上播放音频的标准。
今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了在网页上嵌入音频元素的标准，即使用元素。
HTML5 中播放音频，你需要使用以下代码

<audio controls>  
  <source src="horse.ogg" type="audio/ogg">  
  <source src="horse.mp3" type="audio/mpeg">
   您的浏览器不支持 audio 元素。
</audio>

 control 属性供添加播放、暂停和音量控件。
 在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
> <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

canvas画布和svg渲染矢量图片
元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，您必须使用脚本来绘制图形
新选择器
E:last-child 匹配父元素的最后一个子元素、E:nth-child(n)匹配父元素的第n个子元素、E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E

2D/3D 转换
转换属性（translate、rotate、scale、skew、matrix、transform）、3D转换（rotateX、rotateY）

圆角
border-radius圆角、border-image圆角图片
阴影效果
box-shadow框阴影、text-shadow文本阴影
可下载的字体
@font-face字体、text-wrap自动换行、text-overflow检索当当前行超过指定容器的边界
背景
background-size图片设置大小、background-origin设置定位区域、background-clip背景颜色的绘制区域、background-break控制背景怎样在这些不同的盒子中显示

本地数据存储
web存储功能， localStorage本地离线可长期存储数据，浏览器关闭后数据不丢失，sessionStorage数据在浏览器关闭后自动删除
Web 应用
web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行
表单
新表单元素, 新属性，新输入类型，自动验证。
input表单控件（datetime、datetime-local、week、date、month、time）、color、email、number、range、search、tel、url
语义化标签
header、footer、nav、section、article、aside、detailes、summary、dialog