HTML5的新特性概述（上）

html5作为html的代替者，成为新的标准，而且时至今日，在前端开发中，已经被大家广泛应用，但是对于html5有哪些具体功能和特性，有不少人就对它认识就显得模糊了。下面是我总结的一些h5的新特性，供大家参考：

1. 语义化标签

html标签是我们开发前端界面的骨架，但是以前我们使用html标签布局使用的都是div标签，div标签的语义非常的不清晰，因此html5为了规范这一块，给出了一系列的标签：

• <hrader></header> 头部区域标签，块级标签
• <footer></footer> 底部区域标签，块级标签
• <nav></nav> 导航区域标签，块级标签
• <time></time> 时间区域标签，内联标签
• <article></article> 文章段落标签，块级标签
• <aside></aside> 侧边栏区域标签，块级标签
• <mark></mark> 标记记号标签，内联标签
• <summary></summary> 单词翻译: 摘要，h5官方文档描述：定义 details 元素的标题，块级标签
• <detailes></detailes> 单词翻译：细节，h5官方文档描述：定义元素的细节，块级标签
• <section></section> 单词翻译：部分，h5官方文档描述：定义 section，块级标签

2. 新表单类型

我这里描述的表单，主要指的<input>，<input>表单标签本身已经有不少类型了，但是h5为了满足开发需求，同样还新增了不少的类型：

• <input type="email" /> e-mail 地址的输入域
• <input type="number" /> 数字输入域
• <input type="url" /> URL 地址的输入域
• <input type="range" /> range 类型显示为滑动条，默认value值是1~100的限定范围，可以通过min属性和max属性自定义范围<input type="range" name="points" min="1" max="10" />
• <input type="search" /> 用于搜索域
• <input type="color" /> 用于定义选择颜色
• <input type="tel" /> 电话号码输入域
• <input type="date" /> date类型为时间选择器

HTML5 新增的表单属性

• placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
• required 属性，是一个 boolean 属性。要求填写的输入域不能为空
• pattern 属性，描述了一个正则表达式用于验证<input> 元素的值。
• min 和 max 属性，设置元素最小值与最大值。
• step 属性，为输入域规定合法的数字间隔。
• height 和 width 属性，用于 image 类型的 <input> 标签的图像高度和宽度。
• autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
• multiple 属性 ，是一个 boolean 属性。规定<input> 元素中可选择多个值。

3. 视频和音频

视频<video>和音频<audio>，也是html提供的新的标签，它们的功能类似于<img>标签，<img>标签引用的是图片，它们引用的是视频文件和音频文件。不仅如此，html5针对视频文件和音频文件的特殊性，给 <video>和<audio>提供了非常丰富的方法,属性和事件，用于操控这俩元素。 `

<audio src="audio/putclub.com_Googlewasjusta.mp3" id="audio"></audio>
<button id="start-music">开始播放</button>
<button id="stop-music">暂停播放</button>

var startMusic = document.getElementById('start-music');
var stopMusic = document.getElementById('stop-music');

startMusic.onclick = function () {  //开始播放
		var audioEl = document.getElementById('audio');
		audioEl.play()
	}
	
stopMusic. onclick = function () {  // 暂停播放
		var audioEl = document.getElementById('audio');
		audioEl.pause()
	}
复制代码

`

<audio>目前支持的音频格式有: MP3, Wav, 和 Ogg。

`

<video width="600" height="400" id="video" controls="controls">
	<source src="video/jieda2.mp4" type="audio/mp4"></source>
</video>
<button id="start-tv">视频开始播放</button>
<button id="stop-tv">暂停视频播放</button>

var startTv = document.getElementById('start-tv');
var stopTv = document.getElementById('stop-tv');

startTv.onclick = function () {
		var video = document.getElementById('video');
		video.play();
	}
	
stopTv.onclick = function () {
		var video = document.getElementById('video');
		video.pause();
}
复制代码

`

注意：video播放视频时请注意转换一下视频的格式，转换为AVC(H264)，不转换的话容易出现有声音而没有视频的现象，浏览器将支持第一个识别的文件类型：( MP4, WebM, 和 Ogg)。

视频<video>和音频<audio>常用的几个方法有：

• play() 开始播放音频/视频
• pause() 暂停当前播放的音频/视频
• load() 重新加载音频/视频元素

视频<video>和音频<audio>常用的属性有：

• controls 属性设置或返回音频/视频是否显示控件（比如播放/暂停等）
• defaultPlaybackRate 属性设置或返回音频/视频的默认播放速度
• duration 属性返回当前音频/视频的长度（以秒计）
• ended 属性返回音频/视频的播放是否已结束
• loop 属性设置或返回音频/视频是否应在结束时重新播放
• muted 属性设置或返回音频/视频是否静音
• networkState 属性返回音频/视频的当前网络状态
• src 属性设置或返回音频/视频元素的当前来源
• volume 属性设置或返回音频/视频的音量
• readyState 属性返回音频/视频当前的就绪状态
• played 返回表示音频/视频已播放部分的 TimeRanges 对象

视频<video>和音频<audio>还拥有非常多自己特定的事件，不过本文将不在罗列，上面的方法和属性也并不是全部，需要详细了解的同学可以去HTML 5 视频/音频参考手册查看。

4. Canvas绘图

canvas 元素用于在网页上绘制图形,canvas标签本身只是个图型容器，需要使用javaScript脚本来绘制图形。

`

<canvas id="mycanvas" width="600" height="400"></canvas>

var myCanvas = document.getElementById('mycanvas');
var canvas2d =	myCanvas.getContext('2d');

canvas2d.moveTo(100, 100);  // 线条起始位置
canvas2d.lineTo(400, 100);  // 线条结束位置
canvas2d.strokeStyle = '#CD5C5C'    // 线条颜色
canvas2d.lineWidth = 5；    // 定义线宽
canvas2d.font = '20px Arial'; // 定义字体大小和字体类型
canvas2d.fillText('Canvas绘图demo', 400, 100)   // 设置绘制的文本和位置
canvas2d.stroke();
复制代码

`

moveTo(x,y) 定义线条开始坐标，lineTo(x,y) 定义线条结束坐标,lineWidth设置线宽，fillText()设置绘制的文本和位置,stroke()执行绘画。

上面这个是上面canvas绘制的图形。想要详细了解canvas的同学，可以去到HTML5 Canvas 参考手册。

5. SVG

SVG是指可伸缩的矢量图形，SVG 也是一种使用 XML 描述 2D 图形的语言。由于SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

`

<style>
        /* svg 样式：
		fill：填充色
		stroke：描边色
		stroke-width：边框宽度*/
		
		#mycircle{
			fill: darkseagreen;
			stroke: coral;
			stroke-width: 2px;
		}
</style>

<svg width="200px" height="200px">
	<!--<circle>标签代表圆形 cx、cy、r属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于<svg>画布的左上角原点。-->
	<circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
复制代码

`

svg图形的样式和css有些不同，fill是定义图形填充色，stroke描边色，stroke-width是线宽,如果我们要对svg图形操作，那么我们该怎么做呢，其实很简单，只需要document.getElementById()获取需要操作的svg图形节点，然后针对该svg图形的属性去操作就可以了，对svg图形属性的操作可以用getAttribute()和setAttribute(),好啦，更多详细的svg知识点，可以去SVG 参考手册和阮一峰老师的svg图像学习了解。

6. 小结

本文考虑到文章篇幅的问题，所以分作上篇和下篇进行介绍h5的新特性。本上篇主要介绍了h5的五种新特性，语义化的标签，新增的表单元素类型，视频和音频，canvas绘图以及svg图形的简要介绍。