HTML5 和 CSS3 的新特性--HTML5 的新特性_小喵咪汪汪叫(^▽^)

网络 02-07 1385

????????HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。

????????这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。

HTML5 新增的语义化标签

以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。

<header>:头部标签

<nav>:导航标签

<article>:内容标签

<section>:定义文档某个区域

<aside>:侧边栏标签?

<footer>:尾部标签

注意：

这种语义化标准主要是针对搜索引擎的

这些新标签页面中可以使用多次

在 IE9 中，需要把这些元素转换为块级元素

其实，我们移动端更喜欢使用这些标签?

HTML5 新增的多媒体标签

新增的多媒体标签主要包含两个：

1.音频：<audio>

2.视频：<video>

使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用 flash 和其他浏览器插件。

HTML5 在不使用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。

1. 视频<video>

当前

元素支持三种视频格式：尽量使用 mp4格式

<video controls="controls" width="300"> <source src="move.ogg" type="video/ogg" > <source src="move.mp4" type="video/mp4" > 您的浏览器暂不支持 <video> 标签播放视频 </ video >

?考虑兼容性的写法，但是一般都是用mp4,所以只当做了解即可

在谷歌是防止用户突然打开一个视频而消耗油量，而把他禁用了，可以通过muted方式静音播放，其中muted="muted"可以缩写为muted?。同时我们也可以将video理解为一个大盒子

一般开发中不写controls控件显示，一般通过js控制

2.音频<audio>

当前

元素支持三种音频格式：

?语法

兼容，知道就可以了

< audio controls="controls" > <source src="happy.mp3" type="audio/mpeg" > <source src="happy.ogg" type="audio/ogg" > 您的浏览器暂不支持 <audio> 标签。 </ audio>

常见属性

?谷歌浏览器把音频和视频自动播放禁止了

后面可以通过js解决

3. 多媒体标签总结

音频标签和视频标签使用方式基本一致

浏览器支持情况不同

谷歌浏览器把音频和视频自动播放禁止了

我们可以给视频标签添加 muted 属性来静音播放视频，音频不可以（可以通过JavaScript解决）

视频标签是重点，我们经常设置自动播放，不使用 controls 控件，循环和设置大小属性

HTML5 新增的 input 类型?

?重点记住： number tel search 这三个

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <form action=""> <ul> <li>邮箱: <input type="email" /></li> <li>网址: <input type="url" /></li> <li>日期: <input type="date" /></li> <li>时间: <input type="time" /></li> <li>数量: <input type="number" /></li> <li>手机号码: <input type="tel" /></li> <li>搜索: <input type="search" /></li> <li>颜色: <input type="color" /></li>  <li> <input type="submit" value="提交"></li> </ul> </form> </body> </html>

HTML5 新增的表单属性?

可以通过以下设置方式修改placeholder里面的字体颜色：?

input::placeholder { color: pink; }

?默认是将autocomplete开启的，这样是不安全的，我们只要autocomplete="off"就可以关闭它

?默认是只能选一个的，但是<input type="file" name="" id="" multiple>设置了multiple就可以多选了

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML5新增表单属性</title> <style> input::placeholder { color: pink; } </style> </head> <body> <form action="" > <input type="search" required placeholder="默认" autofocus name="search" autocomplete="off"> <input type="file" name="" id="" multiple> <input type="submit" value="提交"/> </form> </body> </html>