HTML5学习笔记
HTML5重点
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素，比如 article、footer、header、nav、section
- 新的表单控件，比如 calendar、date、time、email、url、search
浏览器
- 定义了八个新的语义元素，都是块级元素
（设置display可以让就浏览器正确显示）
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Canvas
html5用于图形绘制的元素，通过脚本（js）来完成。
默认情况没有边框，style属性添加边框
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
<script>
var c=document.getElementById("myCanvas");//获取canvas元素
var ctx=c.getContext("2d");//创建ctx对象，getContext，拥有多种绘制图形的方法
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);//绘制红色矩形，后方参数为坐标
</script>
绘制矩形：fillRect()
画线：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
stroke（）
画圆：arc(x,y,r,start,stop)
文本：
font - 定义字体
fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本
图像：drawImage(image,x,y)
内联SVG
SVG：可缩放矢量图形。
SVG使用xml格式定义图形，改变尺寸时图形质量不会有损失
直接嵌入：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
Canvas和SVG的区别！
Canvas：使用js来绘制2d图形，逐个像素渲染，一旦绘制完成不能修改。
SVG：使用 xml 描述2d图形，SVG DOM中每个元素都可以用 js 附加事件处理器。
MathML
是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
拖放 drag drop
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
地理定位
Geolocation（地理定位）用于定位用户的位置。
Geolocation 通过请求一个位置信息，用户同意后，浏览器会返回一个包含经度和维度的位置信息
Video 视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
元素支持三种视频格式： MP4, WebM, 和 Ogg
Audio音频
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
元素支持三种音频格式文件: MP3, Wav, 和 Ogg
input类型
number：定义一个数值输入域(限定)
<input type="number" name="quantity" min="1" max="5">
range：用于应该包含一定范围内数字值的输入域，显示为滑动条
<input type="range" name="points" min="1" max="10">
week：week 类型允许你选择周和年。
color、date、datetime、datetime-local、email、month、search、tel、time、url
表单元素
新的表单元素：
datalist：规定输入域的选项列表。
属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项(就是自动显示在框框里面)
output：
显示计算结果
keygen：
元素的作用是提供一种验证用户的可靠方法。
标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
表单属性
区分一下表单元素和属性：
元素是指form、label、button这些可以直接的东西
属性是每个元素的type
语义元素
语义元素：元素的意义
article：定义独立的内容
nav：导航链接的部分
aside：侧边栏
header：头部区域
figure：独立的流内容
figcaption：figure的标题
web存储
cookies localStorage sessionStorage
cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。
web SQL
Web SQL 是在浏览器上模拟数据库，可以使用 JS 来操作 SQL 完成对数据的读写。
以下是规范中定义的三个核心方法：
openDatabase：这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction：这个方法让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql：这个方法用于执行实际的 SQL 查询。
应用程序缓存
application cache
HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
应用程序缓存：文档的html标签中包含manifest属性
Manifest 文件：
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
web workers
运行在后台的js，不影响页面性能
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
你可以使用web worker提供的一种简单的方法来为web内容在后台线程中运行脚本，这些线程在执行任务的过程中并不会干扰用户界面！
SSE
服务器发送事件(Server-Sent Events)
是基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。
HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。
Server-Sent 事件指的是网页自动获取来自服务器的更新。例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。
WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
代码规范
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
2419
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
