HTML5新增具有代表性的十大新特性

---

前言

HTML 是超文本标记语言（英语：HyperText Markup Language，简称：HTML），是一种用于创建或描述网页的标准标记语言。

---

一、HTML5是什么？

由来：HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

目的：为了在移动设备上支持多媒体。

二、HTML5新增具有代表性的十大新特性有哪些

1.语义化标签

意义：使用新的元素来创建更好的页面结构

好处
1、语义化标签具有可读性，使得文档结构清晰
2、浏览器便于读取，有利于SEO优化
3、展现在页面中时，用户体验好
4、便于团队开发和维护

常用的语义化标签及其各部分解释作用

header：表示网页的头部部分，代表网页或者section的页眉，作为整个页面或者一个内容块的标题,也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关的logo

nav：表示导航栏部分，定义整个页面的主要导航部分。

section：表示页面内的一个区块，定义文档中的节或段，段可以时一篇文章按照主体的分段，节可以指一个页面里面的分组

aside：表示侧边栏，包含与内容相关各种链接。它是特殊的section；如果aside标签被包含在article中时，作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等

article：表示一个区块内的一个独立区域，定义一个文档，页面，或者网站中自成一体的内容。

footer：表示页面内的底部部分，定义了整个页面或者一部分的页脚，通常包含一些基本信息，譬如：作者，相关文档连接，站点地图，版权信息等；如果footer包含了整个节，那么它就代表附录，索引，许可协议，标签，类别等一些其他类似的信息。

综合运用

样式部分

	header{
		width:100%;
		height:50px;
		background-color: #CCFF66;
		overflow:hidden;
	}
	nav{
		width:80%;
		height:40px;
		margin:5px auto;
		text-align:center;
		line-height:40px;
		background-color: #CCFFFF
	}
	section{
		position:relative;
		width:100%;
		height:400px;
		background-color: #CC99CC;
		overflow:hidden;
	}
	aside{
		position:absolute;
		left:30px;
		top:50%;
		transform:translateY(-50%);
		width:80px;
		height:200px;
		line-height:200px;
		text-align:center;
		background-color: #CCFF00;
	}
	article{
		width:60%;
		height:300px;
		background-color: #CC9933;
		text-align:center;
		line-height:300px;
		margin:50px auto;
	}
	footer{
		width:100%;
		height:100px;
		background-color: #000033;
		text-align:center;
		line-height:100px;
		color:#ffffff;
	}

结构部分

	<header>
		<nav>导航栏</nav>
	</header>
	<section>
		<aside>侧边栏</aside>
		<article>独立内容块</article>
	</section>
	<footer>尾部</footer>

效果展示

2、新的表单类型及对应的新属性

新的表单类型

注意：表单的控件只有在表单内才可以统一的提交有效的信息

1、邮箱验证

简介：这个是新增的输入框类型，用户在填写完该输入框后，在提交信息时会自动验证 email 域的值是否合法有效

代码展示

	<form>
		<input type="email">
		<input type="submit">
	<form>

效果展示

2、数值输入

简介：这个是新增的数值类型，只能输入数字或者通过上下加减数值大小，用于应该包含数值的输入域。

特点：可以对输入的数值的大小进行一个限制范围

代码展示

	<form>
		<!-- 限制输入的值只能在6～8之间，包含了6和8的 -->
		<input type="number" min=6 max=8>
		<input type="submit">
	</form>

效果展示

3、文件导入

简介：可以上传本地文件至 需要的地方，需要js配合使用；如果要上传多个文件可以添加multiple属性

注意：如果上传图片一定要给form表单添加enctype属性

代码展示

	<form active="demo.php" enctype="multipart/form-data">
		<input type="file" multiple>
		<input type="submit">
	</form>

效果展示

案例：及时预览图片

结构部分

	<form active="demo.php" enctype="multipart/form-data">
		<input type="file" id="myFile" multiple>
		<input type="submit">
	</form>
	<img src="" id="myImg" width=300 alt="">

效果部分

	const myFile = document.getElementById('myFile')
	const myImg = document.getElementById('myImg')
	myFile.onchange = ()=>{
		console.log(myFile.files)
		const file = myFile.files[0]
		const read = new FileReader()
		//转译文件地址
		read.readAsDataURL(file)
		//文件加载完成就显示出来
		read.onload = ()=>{
			myImg.src = read.result
		}
	}

效果实现

4、图片按钮

简介：可以将一个图片至按钮中，作为图片按钮；创建一个图像控件，该控件单击后将导致表单立即被提交。即：本身就是一个提交按钮以图片的形式显示

注：按钮大小由width和height都可以设置

代码展示

	<form method='post'>
		<input type="image" src="小可爱.jpg" width=100 alt="submit">
	</form>

效果展示

5、颜色选取

简介：可以选取各种不同的颜色；用于选取颜色。

代码展示

	<form>
		<input type="color" />
		<input type="submit">
	</form>

效果展示

6、日期表示

简介：可以快速的帮助输入当前的日期，允许你从一个日期选择器选择一个日期。

注： 表示日期的不只是有date一种，还有datetime、datetime-local 都可以表示

代码展示

	<form active="demo.php">
		<input type="date" >
		<input type="submit">
	</form>

效果展示

7、语义化的搜索框

简介：算是文本框的一个分支吧，可以很简明的知道这是一个搜索框，框内有一个X可以清除当前的所有内容；用于搜索域，类似于站点搜索

代码展示

	<form action="demo.php">
		<input type="search" placehold>
		<input type="submit">
	</form>

效果展示

8、手机号码输入框

简介：主要用于移动端的可以很方便的输入手机号，电脑端没有特别明显的效果；定义输入电话号码字段

代码展示

	<form action="demo.php">
		<input type="tel" >
		<input type="submit">
	</form>

效果展示

9、网页地址输入

简介：可以方便的检验输入的网址的格式，用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。(必须为hppt格式的)

注：iPhone 的 Safari 浏览器会识别 url 输入类型，然后改变触摸屏的键盘来适应它（添加 .com 选项
代码展示

	<form active="demo.php">
		<input type="url">
		<input type="submit">
	<form>

效果展示

常见的表单的新属性

1、placeholder

描述：文本的占位符；提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

案例展示

	<input type="text" placeholder="请输入文字">

2、required

描述：这个属性的值为布尔值且默认为true，限定在表单内当前的文本框必须填写，否则不能提交信息；规定必须在提交之前填写输入域（不能为空）

案例展示

	<form active="demo.php">
		<input type="text" required>
		<input type="submit">
	</form>

3、autofocus

描述：自动聚焦到需要填写的地方；规定在页面加载时，域自动地获得焦点。

案例展示

<form active="demo.php">
	<input type="text" autofocus>
</form>

4、autocomplete

描述：备选项，用于提示之前填写过的内容，再次填写时会自动提示；该属性的值为on或off，一般默认为on是打开的（email的是默认off关闭的）拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

注：使用这个属性时一定要配和name一起，不然会失效

效果展示

	<form active="demo.php" method="post">
		用户名：<input type="text" name="uname" autocomplete><br />
		密&emsp;码：<input type="password" name="pwd"><br />
		手机号：<input type="tel" name="pho" autocomplete><br />
		<input type="submit">
	</form>

5、minlength与maxlength

描述：限定输入的最少字数和最多字数；规定输入字段的最大或小长度，以字符个数计。（如果超过最大字数就不会继续输入，计算的字符所用的码元个数即该字符的真实长度。）

效果展示

	<form active="demo.php" method="post">
		<input type="text" minlength="6" maxlength="9">
	</form>

3、视频和音频及其相关属性

video：视频播放标签，支持的播放格式有：ogg、mp3、webm；该标签可嵌套多个source标签用于表现同一个视频多种播放方式，当前一个视频格式不支持时就轮到下一个source标签直到有一个source标签内可以播放就停止向下寻找，如果没有一个可以播放的就展示当前的内容

案例实现

	<video width=300 height=300 controls>
		<source src="./小可爱.ogg">
		<source src="./小可爱.mp4">
		对不起,你的浏览器不支持video,换个浏览器在试试吧
	</video>

或：当只有一个文件格式时

	<video src="./小可爱.mp4" controls autoplay>
		对不起,你的浏览器不支持video,换个浏览器在试试吧
	</video>

成功的

失败的

audio：音频播放标签，同video标签的使用方法一样，但audio用于对音频的播放，支持的格式有：mp3、wav、ogg；

效果展示

	<audio controls>
		<source src="./爱一点.mp3">
	</audio>

或：当只有一个文件格式时

	<audio src="./爱一点.mp3" controls autoplay>

相关的属性

1、autoplay：自动播放，值为布尔值，当视频标签加载完成后会自动播放，但是若浏览器有限制自动播放的相关规定则会导致该属性失效。

2、controls：音频或视频的控件显示，值为布尔值，或者称为显示标签的存在更合适

案例展示

	div{
		width:200px;
		height:30px;
		text-align:center;
		font-size:20px;
		color:#fee;
		background-color:#ff6030;	
	}

	<div>不带有controls</div>
	<audio src="./爱一点.mp3"></audio>
	<div>带有controls</>
	<audio src="./爱一点.mp3" controls></audio>

3、loop：循环播放，值为布尔值，当视频或音频播放完后，会自动继续播放当前的文件

4、muted：静音播放，值为布尔值，通常该属性配和autoplay和loop，可以使video标签一直无声播放视频

5、poster：预先加载一个图片在视频之前显示，值为图片路径，通常称之为视频封面

案例展示

	<video src="./小可爱.mp4" controls width=300 autoplay poster="./peiqi.png"></video>

注：该视频并不是小猪佩奇哦！

4、canvas绘图

描述：可以用作图形的容器处理，可以很简单画出一些图像不需要借用别的图片，比如一个简单的时钟就完全可以由canvas很简单的画出，节约资源。

关于canvas的详细用法有很多可以点击这个链接更多的canvas详解

5、SVG绘图

简介：使用xml描述2D图形的语言

优势：相对于canvas描绘的图像，SVG的更不易失帧即SVG的图像比canvas更稳定，并且SVG 绘图很容易编辑，只要从其描述中移除元素就行。

相关简单的属性值的描述

1、version：相关的xml的版本号

2、circle：画圆

cx：圆心的（X轴）横坐标。
cy：圆心的（Y轴）纵坐标
r：圆心的半径
stroke：外边线条的颜色
stroke-width：外边线条的宽度
fill：圆的填充色
案例实现

	<svg version="1.1">
  		<circle cx="100" cy="50" r="40" stroke="hotpink" stroke-width="2" fill="red" />
	</svg> 
	

3、rect：画矩形

x：矩形距离窗口的横距离（X轴）
y：矩形距离窗口的纵距离（Y轴）
width：矩形的宽
heigth：矩形的高
fill：矩形内的填充色
stroke：矩形的外边实心线
stroke-width：矩形的外边实心线的填充色

案例实现

	<svg version="1.1">
  		 <rect x="50" y="20" width="100" height="100" style="fill:blueviolet;stroke:pink;stroke-width:5;"/>
	</svg> 

4、polygon：折线

points：坐标值，每个点的坐标值用空格区分开，最后连接在一起形成图像

	<svg version="1.0">
		<polygon points="50,0 60,40 100,50 60,60 50,100 40,60 0,50 40,40" fill='hotpink' stroke="blueviolet" />
	<svg>

6、地理定位

Geolocation简介

通常用于带有GPS的用户的地理位置，常用于手机定位

由于pc端看不出效果就不演示了

7、拖放API

简介：通常一个元素的默认状态时不可拖拽的，即元素的拖拽属性默认为false，所以想要将元素拖动就得解开拖拽=>draggable=true解除可以抓取

作用：可以对拖拽中的元素做一些特效的处理或者应用于用户上传文件时对本地的文件直接拖拽上传。

8、Web Worker

9、Web Storage

10、WebSocket