一、HTML5
1.HTML5语法
- DOCTYPE及字符编码
DOCTYPE:<!DOCTYPE html>
字符编码:<meta charset="UTF-8">
- 大小写都可以
在HTML5里不区分大小写(建议:写代码最后规范,最好小写)
不允许写结束符的标签:area , basebr , col, command , embed , hr , img , input , keygen , link , meta , param , source , track , wbr
可以省略结束符的标签:li , dt , dd , p , rt , optgroup , colgroup , thread , tbody , tr , td , th
省略
2.HTML5元素
内容类型
内嵌:在文档中添加其他类型的内容,如audio、video、canvas和iframe
流:在文档和应用的body中使用的元素,如form、h1和small等
标题:段落标题,如h1、h2和hgroup等
交互:与用户交互的内容,如音频和视频的控件、button和textare等
元数据:通常出现在页面的head中,设置页面其他部分的表现和行为,如script、style和title等
短语:文本和文本标记元素,如mark、kbd、sub和sup等
元素名称
header:标记头部区域的内容
footer:标记脚部区域的内容
section:web页面中的一块区域
article:独立的文章内容
aside:相关内容或者引文
nav:导航类辅助内容
二、HTML5各种类型的应用和新增属性
1.email类型的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get">
请输入您的E-mail地址:<input type="email" name="user_email" /><br />
<input type="submit" />
</form>
</body>
</html>
运行结果
2.URL类型的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get">
请输入网址:<input type="url" name="user_url" /><br />
<input type="submit" />
</form>
</body>
</html>
3.number类型的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get">
请输入数值:<input type="number" name="number1" min="1" max="20" step="4" /><br />
<input type="submit" />
</form>
</body>
</html>
运行结果
4.range类型的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#" method="get">
请输入数值:<input type="range" name="range1" min="1" max="30"/><br />
<input type="submit" />
</form>
</body>
</html>
5.日期检查器类型的应用
6.search类型的应用
<input type="search" >
7.tel类型的应用
<input type="tel">
8.color类型的应用
<input type="color">
9.新增的form属性
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head><head>
<script type="text/javascript">
function multi(){
a=parseInt(prompt("请输入第1个数字。",0));
b=parseInt(prompt("请输入第2个数字。",0));
document.forms["form"]["result"].value=a*b;
}
</script>
</head>
<body οnlοad="multi()">
<form action="#" method="get" name="form">
两数的乘积为:<output name="result"></output>
</form>
</body>
</html>
运行结果
四、canvas元素
1.canvas如何绘制图形
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.fillRect(50, 25, 100, 50);
</script>
</body>
</html>
运行结果
2.绘制直线
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="100"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.moveTo(0, 0);
context.lineTo(200, 100);
context.stroke();
</script>
</body>
</html>
运行结果
3.绘制圆形
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="150">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "#FF00FF";
context.beginPath();
context.arc(100, 75, 50, 0, Math.PI * 2, true);
context.closePath();
context.fill();
</script>
</body>
</html>
运行结果
4.绘制三角形
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="200" height="200"></canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.fill();
</script>
</body>
</html>
运行结果
5.清空画布
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<script type="text/javascript">
function clearMap() {
context.clearRect(0, 0, 300, 200);
}
</script>
<body>
<canvas id="myCanvas" style="border:1px solid;" width="300" height="200">
</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
context.strokeStyle = "#FF00FF";
context.beginPath();
context.arc(200, 150, 100, -Math.PI * 1 / 6, -Math.PI * 5 / 6, true);
context.stroke();
</script>
</br>
<input name="" type="button" value="清空画布" onClick="clearMap();">
</body>
</html>
运行结果
点击清空画布后
6.旋转坐标空间
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="javascript">
function drawTop(ctx, fillStyle) {
ctx.fillStyle = fillStyle;
ctx.beginPath();
ctx.arc(0, 0, 30, 0, Math.PI, true);
ctx.closePath();
ctx.fill();
}
function drawGrip(ctx) {
ctx.save();
ctx.fillStyle = "blue";
ctx.fillRect(-1.5, 0, 1.5, 40);
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.arc(-5, 40, 4, Math.PI, Math.PI * 2, true);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
function draw() {
var ctx = document.getElementById('myCanvas').getContext("2d");
ctx.translate(150, 150);
for(var i = 1; i < 9; i++) {
ctx.save();
ctx.rotate(Math.PI * (2 / 4 + i / 4));
ctx.translate(0, -100);
drawTop(ctx, "rgb(" + (30 * i) + "," + (255 - 30 * i) + ",255)");
drawGrip(ctx);
ctx.restore();
}
}
window.onload = function() {
draw();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="300"></canvas>
</body>
</html>
运行结果