HTML5学习笔记(1-13节)

来源:菜鸟HTML5教程

 

一、简介:参考>>

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

HTML5新特性:

  • 用于绘画的 canvas 元素
  • 用于媒介回放的 video 和 audio 元素
  • 新的特殊内容元素,比如header、nav、article、section、footer
  • 新的表单控件,比如 calendar、date、time、email、url、search
  • 对本地离线存储的更好的支持

 

<!DOCTYPE html>  //声明必须位于 HTML5 文档中的第一行
<html>
<head>
<meta charset="utf-8">  //中文网页需要使用utf-8声明编码否则会乱码
<title>文档标题</title>
</head>
 
<body>
文档内容......
</body>
 
</html>

 

HTML5 图形

使用 HTML5 你可以简单的绘制图形:

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG优势

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

 

 

二、浏览器支持 参考>>

<!--[if lt IE9]> 
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

标签及属性详细描述:HTML5参考手册

 

 二、HTML5 浏览器支持参考>>

 让低版本浏览器支持H5方法:设置H5的8个新的HTML语义元素的CSS 的 display 属性值为 block

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

 

为 HTML 添加新元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>为HTML 添加新元素</title>
<script>
document.createElement("myHero") //为IE浏览器添加新的元素
</script>
<style>
myHero {  //为自定义新元素设置样式
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
}
</style> 
</head>
<body>
<myHero>我的第一个新元素</myHero> //自定义的新元素
</body>
</html>

 

 Internet Explorer 浏览器问题

 Internet Explorer 8 及更早 IE 版本的浏览器不支持以上的方式。

我们可以使用 Sjoerd Visscher 创建的 "HTML5 Enabling JavaScript", " shiv" 来解决该问题:

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

以上代码是一个注释,作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件,并解析它。

 

注意:国内用户请使用本站静态资源库(Google 资源库在国内不稳定):

<!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--> 

 

针对IE浏览器html5shiv 是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。

完美的 Shiv 解决方案

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>  //必须放在<head>元素中,因为IE浏览器在解析HTML5新元素时需要先加载该文件。
  <![endif]-->
</head>
<body>
</body>
</html>

 

 三、HTML5 新元素

 H5添加的新元素:图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。

 

 

 

 

四、HTML5 Canvas

 Canvas是一个画布容器,画图通过JS脚本完成。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">  //id脚本经常会用到
</canvas>

JS绘制图像:

var c=document.getElementById("myCanvas"); //找到 <canvas> 元素
var ctx=c.getContext("2d");  //getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="#FF0000";     //fillStyle属性可以是CSS颜色,渐变,或图案。fillStyle 默认设置是#000000(黑色)。
ctx.fillRect(0,0,150,75);    //定义了矩形当前的填充方式

 

Canvas坐标:

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

坐标实例

如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。鼠标移动的矩形框上,显示定位坐标。

 

Canvas路径:

在Canvas上画线,我们将使用以下两种方法:

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 "ink" 的方法,就像stroke().

实例:

定义开始坐标(0,0), 和结束坐标 (200,100)。然后使用 stroke() 方法来绘制线条:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

 

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

实际上我们在绘制圆形时使用了 "ink" 的方法, 比如 stroke() 或者 fill().

实例:

使用 arc() 方法 绘制一个圆:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

 

Canvas文本:

使用 canvas 绘制文本,重要的属性和方法如下:

  • font - 定义字体
  • fillText(text,x,y) - 在 canvas 上绘制实心的文本
  • strokeText(text,x,y) - 在 canvas 上绘制空心的文本

使用 fillText():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

使用 strokeText():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

 

 Canvas渐变:

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变:

  • createLinearGradient(x,y,x1,y1) - 创建线条渐变
  • createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象,必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止,参数使用坐标来描述,可以是0至1.

使用渐变,设置fillStyle或strokeStyle的值为 渐变,然后绘制形状,如矩形,文本,或一条线。

使用 createLinearGradient():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 

使用 createRadialGradient():

JS:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
 
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

 

Canvas图像:

把一幅图像放置到画布上, 使用以下方法:

  • drawImage(image,x,y)