前端基础知识（六）HTML5新特性

最新推荐文章于 2024-11-14 00:00:11 发布

AGCA

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量217

点赞数

文章标签： html

本文链接：https://blog.csdn.net/agca_zxl/article/details/117846437

版权

HTML5 <!DOCTYPE>

声明必须位于HTML5文档中的第一行

HTML5的改进

1）新元素
2）新属性
3）完全支持CSS3
4）2D/3D转换
5）本地存储
6）本地SQL数据
7）Web应用

HTML5多媒体

HTML5 < video >
HTML5 < audio >

<video width="320" height="240" controls>
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
 您的浏览器不支持 HTML5 video 标签。
</video>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

HTML5图形

使用html5可以简单的绘制图形

使用 < canvas> 元素定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
使用内联SVG 指可伸缩矢量图形用于定义用于网络的基于矢量的图形
使用CSS3 2D转换、3D转换

canvas和svg的区别：
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

HTML5使用CSS3

新选择器
新属性
动画
2D/3D转换
圆角
阴影效果
可下载的字体

HTML5语义元素

< article > 定义页面独立的内容区域
< aside > 定义页面的侧边栏内容
< bdi > 允许您设置一段文本，使其脱离其父元素的文本方向设置
< detail > 用于描述文档或文档某个部分的细节
< dialog > 定义对话框，比如提示框
< summary > 标签包含detail元素的标题
< figure> 规定独立的流内容（图像、图表、照片、代码等等）
< figcaption > 定义 < figure > 元素的标题
< footer > 定义section或者document的页脚
< header > 定义文档的头部区域
< mark > 定义带有记号的文本
< meter > 定义度量衡，仅用于已知最大值和最小值的度量
< nav > 定义导航链接的部分
< progress > 定义任何类型的任务的进度
< ruby > 定义ruby注释（中文注音或字符）
< rt > 定义字符（中文注音或字符）的解释或发音
< rp > 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
< section > 定义文档中的节（section、区段）
< time > 定义日期或时间
< wbr > 规定在文本中的何处适合添加换行符

HTML5使用地理位置

请使用getCurrentPosition（）方法来获得用户的位置。

var x = document.getElementById("demo");
function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition)
	} else {
		x.innerHTML="该浏览器不支持获取地理位置。";
	}
}
function showPosition(position) {
	x.innerHTML="纬度: " + position.coords.latitude + 
	"<br>经度: " + position.coords.longitude;	
}

HTML5表单

< datalist> input标签定义选项列表，请与input元素配合使用该元素，来定义input可能的值
< keygen> 规定用于表单的密钥的生成器的字段
< output> 定义不同类型的输出，比如脚本的输出

<input list="browsers" name="browser">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

HTML5新的input类型

color 、date、datetime、datetime-local、email、number、range、search、tel、time、url、week

HTML5新的表单属性

HTML5 的和标签添加了几个新属性.
《form》新属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
novalidate 属性是一个 boolean(布尔) 属性. 规定在提交表单时不应该验证 form 或 input 域。

《input》新属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
autofocus 属性规定在页面加载时，域自动地获得焦点。
form 规定输入域所属的一个或多个表单。
formaction 用于描述表单提交的URL地址.会覆盖元素中的action属性.
formentype 描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单
formmethod 义了表单提交的方式。get、post
formnovalidate 描述了元素在表单提交时无需被验证。
formtarget 指定一个名称或一个关键字来指明表单提交数据接收后的展示。
height、width
list
min、max
multiple 规定元素中可选择多个值。
pattern（regexp）描述了一个正则表达式用于验证 < input> 元素的值。
placeholder
required 规定必须在提交之前填写输入域（不能为空）。
step 属性为输入域规定合法的数字间隔。

HTML5 Web存储 - localStorage 和 sessionStorage

客户端存储数据的两个对象为：

localStorage - 用于长久存储整个网站的数据，保存的数据没有过期时间，知道手动去除。
sessionStorage - 用于临时保存同一窗口（或标签的）的数据，在关闭窗口或标签后将会删除这些数据。

HTML5 Web Workers

当在HTML页面中执行脚本时，页面的状态时不可响应的，直到脚本完成。
Web Worker 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。