前端·HTML5基础知识介绍

　　知识点1：HTML5

　　HTML5是最新的第五代HTML标准，不仅提供丰富的媒体支持，还增强了对创建一个能与用户进行交互的Web应用的支持。

　　使用HTML5只需要用<!DOCTYPE html>。DOCTYPE告诉浏览器使用哪个版本的HTML规范来渲染文档。

　　另外通常声明字符集：<meta charset="UTF-8">。

　　知识点2：新增结构元素

　　1.<section>定义页面中一个内容区块，如一个章节；

　　2.<article>定义完整独立内容块，如一篇文章；

　　3.<header>定义文档或节的页眉；

　　4.<footer>定义文档或节的页脚；

　　5.<nav>定义导航链接集合；

　　6.<aside>定义页面主内容之外的某些内容，通常表现为侧边栏；

　　7.<main>定义文档中主要或重要的内容；

　　知识点3：视频与音频

　　通过<video>来包含视频，目前支持三种视频格式：Ogg、MPEG4、WebM。例：

　　元素间插入的内容是供不支持video元素的浏览器显示的。可以直接用src属性指向视频资源，也可用多个<source>标签为媒体元素指定媒体源，浏览器将使用第一个可识别的格式。

　　设置controls（即controls="controls"）提供播放、暂停和音量控件，设置autoplay可让视频就绪后自动播放，设置loop可循环播放。另外play（）和pause（）用于播放和暂停。

　　通过<audio>来包含音频，目前支持三种音频格式：Ogg Vorbis、MP3、Wav。例：

　　用法与<video>十分相似。

　　知识点4：改进的<iframe>

　　内联框架元素<iframe>提供了一种将整个web页嵌入到当前文档中的方法。例：

　　allowfullscreen，如果设置可以通过全屏API设置为全屏模式；

　　sandbox，“沙盒”，对嵌入内容执行所有可用的限制，提高安全性；

　　seamless，将使其看上去像是包含文档的一部分（无边框或滚动条）。

　　知识点5：新增的<input>类型

　　HTML5拥有多个新表单输入类型，提供了更好的输入控制和验证。如：

　　1.color：用于指定颜色的控件；

　　2.date、month、week：用于时间选择的控件；

　　3.email：用于编辑email字段，在提交时会自动验证值；

　　4.number：用于输入浮点数的控件，能设定对所接受数字的限定；

　　5.range：用于输入不精确值控件，显示为滑动条；

　　6.search：用于输入搜索字符串；

　　7.tel：用于输入电话号码的控件；

　　8.url：用于编辑URL的字段，在提交时会自动验证值；

　　知识点6：WebSocket

　　一种全双工通讯协议，在浏览器服务器间建立一条TCP连接直接交换数据。

　　为了建立一个 WebSocket连接，浏览器首先要向服务器发起一个 HTTP 请求，其附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求。

　　Js代码：var Socket=new WebSocket（url, [protocol] ）;

　　WebSocket对象拥有open、message、error、close四个监听事件和send、close两个方法。

　　知识点7：本地存储

　　之前应用数据只能存储在cookie中，HTML5本地存储则更安全，存储限制更大，且信息不会被传输到服务器。有两个在客户端存储数据的对象：

　　1.localStorage（长期存储）：存储的数据没有时间限制，浏览器关闭后数据会一直存在。用法：

　　增加：localStorage.setItem（'myCat', 'Tom'）;

　　读取：var cat=localStorage.getItem（'myCat'）;

　　另一种读写方法：localStorage.lastname="Smith";

　　移除：localStorage.removeItem（'myCat'）;

　　移除所有：lovalStorage.clear（）;

　　2.sessionStorage（临时存储）：在浏览器打开期间存在（包括页面重新加载），当关闭浏览器标签页时数据会被删除。用法与localStorage类似。

　　知识点8：图形容器<canvas>

　　<canvas>是一个可以使用脚本来绘制图形的HTML元素，它创造了一个固定大小的画布，公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。脚本需要找到渲染上下文，然后在上面绘制。

　　1.在HTML中创建Canvas。例：

　　2.通过JavaScript绘图。例：

　　3.坐标系

　　左上角坐标为（0, 0），x轴向右为正，y轴向下为正。

　　4.矩形

　　canvas只支持一种原生图形绘制即矩形。用法：

　　fillRect（x, y, width, height）；//绘制一个填充的矩形

　　strokeRect（x, y, width, height）；//绘制一个矩形的边框

　　clearRect（x, y, width, height）//清除指定矩形区域，让清除部分完全透明

　　5.路径

　　图形的基本元素是路径，其创建过程为：

　　a.创建路径：beginPath（）；

　　b.使用画图命令去画路径：moveTo（）、lineTo（）等；

　　c.将路径封闭：closePath（）；

　　d.通过绘制已定义路径或填充路径区域来渲染图形：stroke（）、fill（）；

　　6.颜色

　　给渲染上下文设置颜色值，新值会成为新绘制的图形的默认值。fillStyle、strokeStyle分别设置图形的填充颜色与轮廓颜色。

　　7.文本

　　fillText（text, x, y [, maxWidth]）；//在指定的（x,y）位置填充指定的文本，绘制的最大宽度可选

　　strokeText（text, x, y [, maxWidth]）；//在指定的（x,y）位置绘制文本边框，绘制的最大宽度可选

　　另外可对渲染上下文的font、textAlign设置字体属性与对齐方式。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h60029.shtml