HTML5 介绍和语法规范
认识 HTML5
HTML5 并不仅仅只是作为 HTML 标记语言的一个 最新版本，更重要的是它制定了 Web 应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。
HTML5 定义了一系列 新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建丰富互联网应用，还提供了一系列的 Javascript API，如地理位置、重力感应、硬件访问等，可以在浏览器内实现类原生应用，甚至结合 Canvas 我们可以开发网页版游戏，同时结合 CSS3的过渡、转换、动画等特性，可以极大的增强用户的体验，提升开发功能的可应用性。
我们日常讨论的H5其实是一个 泛称，它指的是由 HTML5 + CSS3 + Javascript 等奇数组合而成的一个 应用开发平台。
语法规范
随着 Web 技术的更新，HTML也先后经历了 HTML4.01、XHTML1.0、HTML5 几个重要的版本，在版本的演变过程中新增或废除了一些属性，同时对语法规范也做了一些调整，为了能够保证浏览器可以兼容不同版本语法规范，我们可以使用 <!DOCTYPE> 指示浏览器应该如何处理我们的 HTML。
html:4s+tab html:4t+tab
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
html:xt+tab html:xs+tab
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
!+tab html:5
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
HTML5 在语法规范上也做了比较大的调整，去除了许多冗余，书写规则更加简洁、清晰。
通过以上的比较我们可以总结得出 HTML5 在语法规范上的特点：
- 更简洁
- 更宽松
但是我们在实际开发中应规范书写，不建议太随意！并且现在基本上所有网站都采用HTML5的语法规范。
语义化
所谓的语义化是要使HTML标签具备很好的可读性，可以清晰传达每个标签所要表达的意义，以方便其被友好的处理和解析。
对于语义化标签我们并不陌生，如 <p> 表示一个段落、<ul> 表示一个无序列表、<h1>~<h6> 表示一系列标题等，在此基础上 HTML5 增加了大量更有意义的语义标签，更有利于 搜索引擎 或 辅助设备 来理解HTML页面内容。
传统的做法我们通过添加类名如 class="header"class="footer"，使 HTML 页面具有语义性的，但是不具备通用性(如 class="hrader" 也可能被写成 class="head")。
HTML5则是通过增加 语义化标签 的形式来解决这个问题，例如 <header></header>、<footer></footer> 等，这样就可以保证其 具有通用性。
1.常用的语义化标签
| 标签 | 语义 |
|---|---|
<nav> | 导航 |
<header> | 页眉 |
<footer> | 页脚 |
<section> | 区块 |
<article> | 文章 |
<aside> | 侧边栏 |
progress | 进度条 |
本质上新语义标签与 <div>、<span> 没有区别，只是其 具有语义性，使用时除了在 HTML 结构上需要注意外，其他和普通标签的使用无任何差别，可以理解成 <div class='nav'> 相当于 <nav>。
尽量避免全局使用 header、footer、aside等语义标签。
2.兼容性处理
在不支持 HTML5 新标签的浏览器里，会将这些新的标签解析成 行内元素(inline)对待，所以我们只需要将其转换成 块元素 (block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过 document.createElement('tagName') 创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过 document.createElement('tagName') 来创建一遍，这样IE低版本也能正常解析HTML5新标签了，但是在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题，这个库文件会帮自动通过 document.createElement('tagName') 创建所有HTML5的新标签。(html5shiv.min.js)
<!--[if lte IE 8]> <script src='./js/html5shiv.min.js'></script>
<![endif]-->
3.微数据
微数据是在如 span、div 的标签内添加 属性，让机器（如搜索引擎）识别其含义，某些特定类型的信息，例如评论、人物信息或事件都有相应的属性，用来描述其含义，可以理解成新语义标签的一种补充。(itemprop)
表单
1.输入类型
| 类型 | 使用示例 | 含义 |
|---|---|---|
<input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码格式 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框 |
| range | <input type="range"> | 自由拖动滑块 |
| color | <input type="color"> | 拾色器 |
| time | <input type="time"> | |
| date | <input type="date"> | |
| datetime | <input type="datetime"> | |
| month | <input type="month"> | |
| week | <input type="week"> |
部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中应选择性的使用。
2.表单元素
| 类型 | 含义 |
|---|---|
<datalist> | 数据列表 |
<keygen> | 生成加密字符串 |
<output> | 输出结果 |
<meter> | 度量器 |
3.表单属性
| 属性 | 用法 | 含义 |
|---|---|---|
| placeholder | <input type="text" placeholder="请输入用户名"> | 占位符 |
| autofocus | <input type="text" autofocus> | 自动获得焦点 |
| multiple | <input type="file" multiple> | 多文件上传 |
| autocomplete | <input type="file" autocomplete> | 自动完成 |
| form | <input type="file" form="某表单ID"> | |
| novalidate | <form novalidate></form> | 关闭验证 |
| required | <input type="text" required> | 必填项 |
| pattern | <input type="text" pattern="\d"> | 自定义验证 |
多媒体
在HTML5之前，在网页上播放视频/音频的通用方法是利用 Flash 来播放，但是大多情况下，并非所有用户的浏览器都安装了 Flash 插件，由此使得处理音频/视频播放变得非常复杂，并且移动设备的浏览器并不支持 Flash 插件。
1.音频
HTML5通过 <audio> 标签来解决音频播放的问题使用相当简单。
<audio src='../test.mp3'></audio>并且可以通过附加属性可以更友好控制音频的播放，如：autoplay 自动播放 controls 是否显示默认播放控件 loop 循环播放。
由于版权等原因，不同浏览器可支持播放的格式是不一样的。
多浏览器支持方案：
<audio controls> <source src='../test.mp3'>
<source src='../test.wav'>
<source src='../test.ogg'>
</audio>
2.视频
HTML5 通过 <video> 标签来解决视频播放的问题。
<video src="../test.mp4"></video>同样，通过附加属性可以更友好的控制视频的播放。
autoplay自动播放controls是否显示默认播放控件loop循环播放width设置播放窗口的宽度height设置播放窗口的高度 由于版权等原因，不同的浏览器可支持播放的格式是不一样的。
多浏览器支持的方案
<video> <source src='../test.mp4'>
<source src='../test.ogg'>
</video>
DOM扩展
1.获取元素
document.getElementByClassName('class')通过类名获取元素，以 类数组 形式存在。document.querySelector('selector')通过 CSS 选择器获取元素，符合匹配条件的 第1个 元素。document.querySelectorAll('selector')通过 CSS 选择器获取元素，以 类数组 形式存在。
2.类名操作
Node.classList.add('class')添加 class。Node.classList.remove('class')移除 class。Node.classList.toggle('class')切换 class，有则移除，无则添加。Node.classLIst.contains('class')检测是否存在 class。
Node 指一个有效的 DOM 节点，是一个通称。
3.自定义属性
在 HTML5 中我们可以自定义属性，其格式如下 data-*=""，例如 date-info="我是自定义属性"，通过 Node.dataset['info'] 我们便可以获取到自定义的属性值。
Node.dataset 是以 对象 形式存在的，当我们为同一个 DOM 节点指定了多个自定义属性时，Node.dataset 则存储了所有的自定义属性值。
以上是 HTML5 介绍和语法规范 的全部内容， 来源链接： utcz.com/p/233476.html
