**HTML5**
HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网的帮助下，访问由许多互相链接的超文本组成的系统。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon）， 360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。
HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。
HTML5 中的一些有趣的新特性：
• 用于绘画的 canvas 元素， HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
• 用于媒介回放的 video 和 audio 元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素，比如 article、footer、header、nav、section
• 新的表单控件，比如 calendar、date、time、email、url、search
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单: <!DOCTYPE html>
**Canvas**
**创建一个画布（Canvas）**
<canvas>元素是HTML5中的新元素，通过使用该元素，你可以在网页中绘制所需的图形。
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas id="myCanvas" width="200" height="100"></canvas>
注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小。
提示: 你可以在HTML页面中使用多个 <canvas> 元素.
使用 style 属性来添加边框：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
**使用JavaScript来绘制图像**
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
<script>
var c=document.getElementById("myCanvas"); --找到 <canvas> 元素:
var ctx=c.getContext("2d"); --创建 context 对象：
ctx.fillStyle="#FF0000"; --绘制一个红色的矩形
ctx.fillRect(0,0,150,75);
</script>
getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
设置fillStyle属性可以是CSS颜色，渐变，或图案。fillStyle默认设置是#000000（黑色）。
**Canvas 坐标**
canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)。 横X纵Y
**Canvas - 路径**
1、在Canvas上画线，我们将使用以下两种方法：
• moveTo(x,y) 定义线条开始坐标
• lineTo(x,y) 定义线条结束坐标
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
定义开始坐标(0,0), 和结束坐标 (200,100).
2、在canvas中绘制圆形, 我们将使用以下方法:
• arc(x,y,r,start,stop)
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 上绘制空心的文本
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
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的值为渐变，然后绘制形状，如矩形，文本，或一条线。
当使用<canvas>元素创建径向渐变的时候 context.createRadialGradient(x , y , r , x1 , y1 , r1) 括号内的参数有如下的含义:
• x：表示渐变的开始圆的 x 坐标
• y：表示渐变的开始圆的 y 坐标
• r：表示开始圆的半径
• x1：表示渐变的结束圆的 x 坐标
• y1：表示渐变的结束圆的 y 坐标
• r1：表示结束圆的半径
**Canvas - 图像**
把一幅图像放置到画布上, 使用以下方法:
• drawImage(image,x,y)
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);
**HTML5代码规范**
**使用正确的文档类型**
文档类型声明位于HTML文档的第一行：<!DOCTYPE html> 或者 <!doctype html>
**使用小写元素名**
HTML5 元素名可以使用大写和小写字母。
推荐使用小写字母：
• 混合了大小写的风格是非常糟糕的。
• 开发人员通常使用小写 (类似 XHTML)。
• 小写风格看起来更加清爽。
• 容易编写。
<section>
<p>这是一个段落。</p>
</section>
**关闭所有 HTML 元素**
在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。
**关闭空的 HTML 元素**
我们可以这么写：
<meta charset="utf-8">
也可以这么写：
<meta charset="utf-8" />
**使用小写属性名**
HTML5 属性名允许使用大写和小写字母。我们推荐使用小写字母属性名:
<div class="menu">
**属性值**
HTML5 属性值可以不用引号。属性值我们推荐使用引号” ”:
• 如果属性值含有空格需要使用引号。
• 混合风格不推荐的，建议统一风格。
• 属性值使用引号易于阅读。
**图片属性**
图片通常使用 alt 属性。 在图片不能显示时，它能替代图片显示。
定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
**空格和等号**
等号前后可以使用空格。但我们推荐少用空格:
避免一行代码过长
每行代码尽量少于 80 个字符。
空行和缩进
不要无缘无故添加空行。
为每个逻辑功能块添加空行，这样更易于阅读。
缩进使用两个空格，不建议使用 TAB。
比较短的代码间不要使用不必要的空行和缩进。
**不推荐省略 <html> 和 <body>**
在标准 HTML5 中， <html> 和 <body> 标签是可以省略的。
不推荐省略 <html> 和 <body> 标签。
<html> 元素是文档的根元素，用于描述页面的语言：
省略 <html> 或 <body> 在 DOM 和 XML 软件中会崩溃。
省略 <body> 在旧版浏览器 (IE9)会发生错误。
**不推荐省略 <head>**
在标准 HTML5 中， <head>标签是可以省略的。
默认情况下，浏览器会将 <body> 之前的内容添加到一个默认的 <head> 元素上。
不推荐省略 <head> 标签。
<html><head><title></title></head><body><h1></h1><p></p></body></html>
**元数据**
HTML5 中 <title> 元素是必须的，标题名描述了页面的主题:
标题和语言可以让搜索引擎很快了解你页面的主题:
**HTML 注释**
1、注释可以写在 <!-- 和 --> 中: <!-- 这是注释 -->
2、比较长的评论可以在 <!-- 和 --> 中分行写：长评论第一个字符缩进两个空格
<!--
这是一个较长评论。 这是 一个较长评论。这是一个较长评论。
这是 一个较长评论 这是一个较长评论。 这是 一个较长评论。
-->.
**样式表**
短的规则可以写成一行: 长的规则可以写成多行:
• 将左花括号与选择器放在同一行。
• 左花括号与选择器间添加以空格。
• 使用两个空格来缩进。
• 冒号与属性值之间添加已空格。
• 逗号和分号之后使用一个空格。
• 每个属性与值结尾都要使用分号。
• 只有属性值包含空格时才使用引号。
• 右花括号放在新的一行。
• 每行最多 80 个字符。
**在 HTML 中载入 JavaScript**
使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):
<script src="myscript.js">
**使用 JavaScript 访问 HTML 元素**
HTML 中 JavaScript 尽量使用相同的命名规则。
var obj =getElementById("Demo")
var obj = getElementById("demo")
**使用小写文件名**
大多 Web 服务器 (Apache, Unix) 对大小写敏感：london.jpg 不能通过 London.jpg 访问。
其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感：london.jpg 可以通过 London.jpg 或 london.jpg 访问。
必须保持统一的风格，我们建议统一使用小写的文件名。
**文件扩展名**
HTML 文件后缀可以是 .html (或r .htm)。
CSS 文件后缀是 .css 。 JavaScript 文件后缀是 .js 。
**.htm 和 .html 的区别**
.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。HTML 完整的后缀是 ".html"。
1、区别在于：
.htm 应用在早期 DOS 系统，系统现在或者只能有三个字符。
在 Unix 系统中后缀没有特别限制，一般用 .html。
2、技术上区别
如果一个 URL 没有指定文件名 (如 //www.w3cschool.cn/css/), 服务器会返回默认的文件名。通常默认文件名为 index.html, index.htm, default.html, 和default.htm。
如果服务器只配置了 "index.html" 作为默认文件，你必须将文件命名为 "index.html", 而不是 "index.htm"。
但是，通常服务器可以设置多个默认文件，你可以根据需要设置默认文件。
HTML5 学习
最新推荐文章于 2022-04-12 18:23:35 发布
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
