21HTML5新特性

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签、新的表单、新的表单属性等。
这些新的特性都有兼容性问题，基本上是IE9+以上版本的浏览器才支持，如果不考虑兼容性的问题，可以大量使用这些新的特性。
声明：
- a.新特性增加了很多，但是本篇仅仅专注于开发中常用的新特性。

1.HTML5新增的语义化标签

以前布局，基本上使用的是div标签。但是div对于搜索引擎来说，它是没有语义的。
```
<div class="header"></div>
<div class="nav"></div>
<div class="content"></div>
<div class="footer"></div>
```

HTML5新增的语义化标签：

<header>: 头部标签
<nav>: 导航标签
<article>: 内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>: 尾部标签

注意：
- 这种语义化标签主要是针对搜索引擎的；
- 这些新标签页面中可以使用多次；
- 在IE9中，需要把这些元素转换为块级元素；
- 其实，在移动端更喜欢用这些标签；
- HTML5中还增加了其他的新标签；

2.HTML5新增的多媒体标签

新增的多媒体标签主要包括两个：
- 音频：<audio>
- 视频：<video>
使用它们可以很方便的在页面中嵌入音频和视频，而不再去使用flash和其他浏览器插件。

2.1 视频<video>

当前<video>元素仅支持以下三种视频格式：尽量使用mp4格式。

语法：

<video src="文件地址" controls="controls"></video>

视频<video>的常见属性：

2.2 音频<audio>

HTML5在不使用插件的情况下，也可以原生的支持音频格式文件的播放。当然，支持的格式也是有限的。
当前<audio>元素支持三种音频格式：尽量使用mp3格式。

语法：

<audio src="文件地址" controls="controls"></audio>

音频<audio>的常见属性：
谷歌浏览器会把音频和视频自动播放禁止了！！！

3.多媒体标签总结

音频标签和视频标签的使用方式基本一致；
浏览器支持情况不同；
谷歌浏览器会把音频和视频自动播放禁止了；
可以给视频标签添加muted属性来静音播放视频，音频不可以(可以通过JavaScript来解决)；
视频标签是重点，经常设置自动播放，循环和设置大小属性；不使用controls控件。

4.HTML5新增input表单

重点记住number、search、tel这三个！

<!-- 当我们验证的时候，必须添加form表单域 -->
<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>

5.HTML5新增的表单属性

可以通过以下设置方式修改placeholder里面的字体颜色：
```
input::placeholder {color: pink;
}
```

6.资料下载

笔记及代码，欢迎star,follow,fork…

21HTML5新特性相关推荐

我要学ASP.NET MVC 3.0（一）： MVC 3.0 的新特性
摘要 MVC经过其1.0和2.0版本的发展,现在已经到了3.0的领军时代,随着技术的不断改进,MVC也越来越成熟.使开发也变得简洁人性化艺术化. 园子里有很多大鸟都对MVC了如指掌,面对问题犹同孙悟空 ...
.NET 4.0 Interop新特性ICustomQueryInterface （转载）
.NET 4.0 Interop新特性ICustomQueryInterface 在.NET Framework v4.0发布的新功能中,在名字空间System.Runtime.InteropServ ...
oracle如何查询虚拟列,Oracle11g新特性之--虚拟列（VirtualColumn)
Oracle 11g新特性之--虚拟列(Virtual Column) Oracle 11G虚拟列Virtual Column介绍在老的 Oracle 版本,当我们需要使用表达式或者一些计算公式时, ...
mysql8导入 psc 没有数据_新特性解读 | MySQL 8.0.22 任意格式数据导入
作者:杨涛涛资深数据库专家,专研 MySQL 十余年.擅长 MySQL.PostgreSQL.MongoDB 等开源数据库相关的备份恢复.SQL 调优.监控运维.高可用架构设计等.目前任职于爱可生, ...
mysql query browswer_MySQL数据库新特性之存储过程入门教程
MySQL数据库新特性之存储过程入门教程在MySQL 5中,终于引入了存储过程这一新特性,这将大大增强MYSQL的数据库处理能力.在本文中将指导读者快速掌握MySQL 5的存储过程的基本知识,带领用 ...
windows无法配置此无线连接_Kubernetes 1.18功能详解：OIDC发现、Windows节点支持，还有哪些新特性值得期待？...
Kubernetes 1.18发布,一些对社区产生影响的新特性日渐完善,如 KSA(Kubernetes Service Account) tokens的OIDC发现和对Windows节点的支持.在A ...
java字符串去重复_Java 8新特性：字符串去重
本文首发与InfoQ. 8月19日,Oracle发布了JDK 8u20,JDK 8u20包含很多新特性,比如Java编译器更新.支持在运行时通过API来修改MinHeapFreeRatio和MaxHe ...
Oracle 11g 新特性 -- Transparent Data Encryption (透明数据加密TDE) 增强说明
一.TransparentData Encryption (TDE:透明数据加密) 说明 Orace TDE 是Orcle 10R2中的一个新特性,其可以用来加密数据文件里的数据,保护从操作系统层面上 ...
.NET Framework 4.0的新特性
本文将揭示.NET 4.0中的3个新特性:图表控件.SEO支持以及ASP.NET 4可扩展的输出缓存. 图表控件微软向开发者提供了大量可免费下载的图表控件,可以在.NET 3.5 ASP.NET或W ...

21HTML5新特性

1.HTML5新增的语义化标签

2.HTML5新增的多媒体标签

2.1 视频<video>

2.2 音频<audio>

3.多媒体标签总结

4.HTML5新增input表单

5.HTML5新增的表单属性

6.资料下载

21HTML5新特性相关推荐

最新文章

热门文章