HTML5跟HTML的区别；我个人觉得HTML5不是增加了一些标签，还有什么功能？

HTML5跟HTML的区别；我个人觉得HTML5不是增加了一些标签，还有什么功能？

HTML5是HTML的第五个版本，HTML5中删除或修改了许多元素。今天来学习HTML5的新特性。
一、概述

HTML5的新增特性主要是针对以前的不足，增加了一些新的标签和表单以及表单属性等。
很多新特性都有兼容性问题，基本是IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。
二、语义化标签 （★★）

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

1. <div class=“header”> </div>
2. <div class=“nav”> </div>
3. <div class=“content”> </div>
4. <div class=“footer”> </div>

复制代码

发展到了HTML5后，新增了一些语义化标签，这样的话更加有利于浏览器的搜索引擎搜索，也方便了网站的seo（Search Engine Optimization，搜索引擎优化），下面就是新增的一些语义化标签

1. - `<header>` 头部标签
2. - `<nav>` 导航标签
3. - `<article>` 内容标签
4. - `<section>` 定义文档某个区域
5. - `<aside>` 侧边栏标签
6. - `<footer>` 尾部标签

复制代码

三、多媒体标签

多媒体标签分为 音频 **audio** 和视频 **video** 两个标签 使用它们，我们可以很方便的在页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件了。
因为多媒体标签的 属性、方法、事件比较多，因此我们需要什么功能的时候，就需要去查找相关的文档进行学习使用。


四、视频标签video（★★★）

基本使用
当前 元素支持三种视频格式： 尽量使用 mp4格式
使用语法：
html <video src="media/mi.mp4"></video>


兼容写法

由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

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

复制代码

上面这种写法，浏览器会匹配video标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本。
video常用属性



属性有很多，有一些属性需要大家重点掌握。

1. - `autoplay`  自动播放
2.   - 注意： 在google浏览器上面，默认禁止了自动播放，如果想要自动播放的效果，需要设置 muted属性
3. - `width`  宽度
4. - `height`  高度
5. - `loop`  循环播放
6. - `src`  播放源
7. - `muted` 静音播放

复制代码

示例代码：

1. <video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

复制代码

五、音频标签-audio

基本使用：当前元素支持三种视频格式： 尽量使用mp3格式
使用语法：

1. <audio src="media/music.mp3"></audio>

复制代码

兼容写法：
由于各个浏览器的支持情况不同，所以我们会有一种兼容性的写法，这种写法了解一下即可

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

复制代码

上面这种写法，浏览器会匹配audio标签中的source，如果支持就播放，如果不支持往下匹配，直到没有匹配的格式，就提示文本
audio常用属性

1. <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

复制代码

六、总结

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

七、新增表单元素（★★）

在H5中，帮我们新增加了很多类型的表单，这样方便了程序员的开发


代码类型：

1. <!-- 我们验证的时候必须添加form表单域 -->
2. <form action="">
3.     <ul>
4.         <li>邮箱: <input type="email" /></li>
5.         <li>网址: <input type="url" /></li>
6.         <li>日期: <input type="date" /></li>
7.         <li>时间: <input type="time" /></li>
8.         <li>数量: <input type="number" /></li>
9.         <li>手机号码: <input type="tel" /></li>
10.         <li>搜索: <input type="search" /></li>
11.         <li>颜色: <input type="color" /></li>
12.         <!-- 当我们点击提交按钮就可以验证表单了 -->
13.         <li> <input type="submit" value="提交"></li>
14.     </ul>
15. </form>

复制代码

常见输入类型：

1. text password radio checkbox button file hidden submit reset image

复制代码

新增输入类型：


类型很多，我们现阶段重点记忆三个：numbertelsearch
八、往期30篇合集

• 前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？
  
• HTML标签大全
  
• 前端学习：表格学习，附练习+源码
  
• 前端学习之列表，附送全套源码
  
• CSS入门最全笔记
  
• CSS样式表
  
• CSS之emmet语法
  
• CSS的复合选择器
  
• CSS的显示模式
  
• CSS背景：颜色、图片、平铺、背景图片位置、背景图像
  
• CSS三大特性：叠层性、继承性、优先级
  
• 前端学习之CSS盒子模型以及PS基础
  
• CSS之圆角边框、盒子阴影、文字阴影
  
• CSS之浮动知识点汇总
  
• CSS前端基础了解PS切图
  
• CSS属性书写顺序（重点）
  
• CSS练手之学成在线页面制作
  
• CSS定位的4种分类
  
• CSS综合案例：学成在线模块添加
  
• HTML+CSS之定位（position）的应用
  
• HTML+CSS案例：淘宝轮播图
  
• CSS之元素的显示与隐藏
  
• HTML+CSS综合案例：土豆网鼠标经过显示遮罩
  
• 【重点】CSS之精灵图
  
• CSS字体图标
  
• CSS三角以及京东三角案例
  
• CSS用户界面样式源码
  
• CSS之vertical-align 属性应用
  
• CSS：溢出的文字省略号显示
  
• CSS常见布局技巧+案例
  

iPhoneX 和 iPhone 有什么区别？
我个人觉得 iPhoneX 不就是加了一个刘海，还有什么功能？
市场总是在不断变化，iPhone 需要不断出新的版本满足人们新的需求，一个标准也是。


HTML5 是 HTML 的一个版本，当然以后还会出现 HTML5.5、HTML6 或 HTML2020。。。
HTML5 除了新增几个标签、也增加了很多接口。

摘录：
HTML5 是定义 HTML 标准的最新的版本。 该术语表示两个不同的概念：

• 它是一个新版本的HTML语言，具有新的元素，属性和行为，
  
• 它有更大的技术集，允许更多样化和强大的网站和应用程序。这个集合有时称为HTML5和朋友，通常缩写为HTML5。
  

设计为所有Open Web开发人员都可以使用，此引用页面链接到许多关于HTML5技术的资源，根据其功能分为几个组。

• 语义：能够让你更恰当地描述你的内容是什么。
  
• 连通性：能够让你和服务器之间通过创新的新技术方法进行通信。
  
• 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
  
• 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
  
• 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
  
• 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
  
• 设备访问 Device Access：能够处理各种输入和输出设备。
  
• 样式设计: 让作者们来创作更加复杂的主题吧！
  

自己去看看吧：HTML5

另外，HTML5 随着移动互联网的发展现在已经普及。
HTML5 算是一个老技术了。

表面上是标签的改动，但实际上应该是改动这些标签后所带来的影响，这才是html5标准提出的意义。html5已经不是SGML的子集，主要是关于语义化以及离线存储、位置、多任务等功能的增加。主要的变化有：

• 简单的声明
  

       因为不是SGML的子集，不需要对DTD的引用，所以有了更简化的Doctype声明

• 更好的语义特性
  

      增加了<header>、<footer>等新的内容标签，使网站结构更加清晰，更清楚每块内容是什么，这样也有利于搜索引擎分析页面，改善SEO效果

• 更全面的表单特性
  

     表单中增加了calendar、date、time、email、url、search等一堆属性，有了这些新属性，开发表单时真的会方便很多

• 很多新的API
  

      如用于及时绘图的canvas标签，好地替代了Flash和Silverlight；用于媒介回放的video和audio标签，还有离线数据库存储（localStorage，sessionStorage）等

• 新技术
  

       webworker，提供了JavaScript多线程解决方案；websocket,解决浏览器与后台服务器双向通讯问题；Geolocation，实现地理位置定位等

• 删除可用CSS替代的以及对可用性产生负面影响的标签
  

       如font,big,center以及frame、frameset等

分广义和狭义的理解
1.狭义的理解HTML5就是新的html协议，作为一个超文本传输协议，就是多了几个标签而已。
2.广义理解HTML5则是指与html5同一时期诞生的新的一系列Web组件，包括css3，Websocket，jsAPI等
后来广义上的这些东西一般称为H5，事实上H5是广义HTML5的缩写，这个时候HTML5一般指狭义的html协议。
很多答主说的HTML5除了标签带还有各种东西其实应该指H5而不是HTML5

HTML5 功能全览：HTML5

不要以为 HTML5 只是添加了一些标签。