HTML个人笔记（二） HTML5 基础篇

HTML5基础

**HTML5 是最新的 HTML 标准。  是专门为承载丰富的 web 内容而设计的，并且无需额外插件。 **

** HTML5 拥有新的语义、图形以及多媒体元素。提供的新元素和新的 API 简化了 web 应用程序的搭建。  **

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

新的语义元素，比如 <header>, <footer>, <article>, and <section>。

新的表单控件，比如数字、日期、时间、日历和滑块。

强大的图像支持（借由 <canvas> 和 <svg>） 

强大的多媒体支持（借由 <video> 和 <audio>）

强大的新 API，比如用本地存储取代 cookie。

<canvas>	定义使用 JavaScript 的图像绘制。 

<svg>	定义使用 SVG 的图像绘制。 

<audio>	定义声音或音乐内容。 

<embed>	定义外部应用程序的容器（比如插件）。 

<source>	定义 <video> 和 <audio> 的来源。

 <track>	定义 <video> 和 <audio> 的轨道。

 <video>	定义视频或影片内容。

SVG 

SVG 是一种使用 XML 描述 2D 图形的语言。 

SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。  

在 SVG 中，每个被绘制的图形均被视为对象。

如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)  用于定义用于网络的基于矢量的图形 ，使用 XML 格式定义图形 ， 图像在放大或改变尺寸的情况下其图形质量不会有损失 ， 是万维网联盟的标准 ， 图像可通过文本编辑器来创建和修改 ，图像可被搜索、索引、脚本化或压缩 ， 是可伸缩的 ，图像可在任何的分辨率下被高质量地打印 ， 可在图像质量不下降的情况下被放大

Canvas

Canvas 通过 JavaScript 来绘制 2D 图形。 

Canvas 是逐像素进行渲染的。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。 

Canvas 与 SVG 的比较

Canvas 依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。

SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用。

HTML5易忘易错点

什么是语义元素？ 语义元素清楚地向浏览器和开发者描述其意义。

一些常见的语义元素

定义文章。                                      定义页面内容以外的内容。

 

定义用户能够查看或隐藏的额外细节