HTML学习教程
2014-08-13 12:24
260 查看
1 html5基础
1 input ---focus焦点
对比A:<!DOCTYPE html>
<meta charset="UTF-8">
<title>用HTML 5实现代码清单1-1中的JavaScript代码</title>
<form>
<p>
<label>Search:<input name=search autofocus></label>
</p>
</form>
B:
<form>
<p><label>Username:<inputname=search type="text"id="search"></label></p>
<scripttype="text/javascript">
document.getElementById ('search').focus()
</script>
</form>
2 html5的标准结构
<!DOCTYPE html><meta charset="UTF-8">
<title>HTML 5标记示例</title>
<p>这段代码是根据HTML 5语法
<br/>编写出来的。
3 ul—editable <ulcontentEditable="true">
<!DOCTYPE html><head>
<meta charset="utf-8 ">
<title>conentEditalbe属性示例</title>
</head>
<h2>可编辑列表</h2>
<ul contentEditable="true">
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
</ul>
4 article—header,footer--time<time pubdate独立自内容—
<!DOCTYPE html><head>
<meta charset="utf-8 ">
<title>conentEditalbe属性示例</title>
</head>
<article>
<header>
<h1>苹果</h1>
<p>发表日期: <time pubdate="pubdate">2010/10/09</time></p>
</header>
<p><b>苹果</b> ,植物类水果,多次花果...(“苹果”文章正文)</p>
<footer>
<p><small>著作权归***公司所有。</small></p>
</footer>
</article>
5 section—标签—片段
6 submit—input--formaction
<head><title>formaction属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform"action="serve.jsp">
<input type="submit"name="s1" value="v1" formaction="s1.jsp">提交到S1
<input type="submit"name="s2" value="v2" formaction="s2.jsp">提交到S2
<input type="submit"name="s3" value="v3" formaction="s3.jsp">提交到S3
<input type="submit">
</form>
7 input-submit----formmethod=”post”
<!DOCTYPE html><head>
<title>formmethod属性示例</title>
<meta charset="UTF-8">
</head>
<form id="testform"action="serve.jsp">
<input type="submit" name="s1"value="v1" formaction="s1.jsp"formmethod="post">提交到S1
<input type="submit" name="s2"value="v2" formaction="s2.jsp"formmethod="get">提交到S2
<input type="submit">
</form>
8 input—text—list –datalist-option—text自动提示文本
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
text:<inputtype="text" name="greeting" list="greetings">
<!--使用style="display:none;"将detalist元素设定为不显示-->
<datalist id="greetings"style="display: none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">GoodAfternoon</option>
</datalist>
9 input—required—type=number min=0 max=100 type=date type=email type=url
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>简单表单示例</title>
<form name="form1">
<label for=username>姓名</label>
<input name=username id=usernametype=text required /><br/>
<label for=age>年龄</label>
<input name=age id=age type=number min=0max=100/><br/>
<label for=birthday>出生日期</label>
<input name=birthday id=birthdaytype=date/><br/>
<label for=email>Email</label>
<input name=email id=email type=emailrequired /><br/>
<label for=url>个人主页</label>
<input name=url id=url type=url/><br/>
<label for=memo>个人简介</label>
<textarea name=memo id=memo required></textarea><br/>
<input type=submit>
</form>
10 input—type=range
<!DOCTYPE HTML><html>
<body>
<formaction="/example/html5/demo_form.asp" method="get">
Points: <input type="range"name="points" min="1" max="10" />
<input type="submit" />
</form>
</body>
</html>
11 input—required pattern--title正则
<!DOCTYPE HTML><html>
<body>
<formaction="/example/html5/demo_form.asp" method="get">
国家代码:<input type="text" name="country_code"pattern="[A-z]{3}"
title="三个字母的国家代码" />
<input type="submit" />
</form>
</body>
</html>
12 email.checkValidity()--email—email验证
<!DOCTYPE html><meta charset=UTF-8 />
<title>checkValidity示例</title>
<scriptlanguage="javascript">
function check()
{
var email = document.getElementById("email");
if(email.value=="")
{
alert("请输入Email地址");
return false;
}
else if(!email.checkValidity())
alert("请输入正确的Email地址");
else
alert("您输入的Email地址有效");
}
</script>
<form id=testform onsubmit="returncheck();">
<label for=email>Email</label>
<input name=email id=email type=email/><br/>
<input type=submit>
</form>
13 figure—image
<!DOCTYPE HTML>
<html>
<body>
<p>上海卢浦大桥是当今世界第一钢结构拱桥,是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥(除合拢接口采用栓接外),现场焊接焊缝总长度达4万多米,接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>
<figure>
<p>黄浦江上的的卢浦大桥</p>
<p>拍摄者:W3School 项目组,拍摄时间:2010 年 10 月</p>
<img src="/i/shanghai_lupu_bridge.jpg"width="350" height="234" />
</figure>
</body>
</html>
13 cavas--- fillstyle—file—strokeStyle –linewidth—stokeRect(画矩形边框)-canvas.getContext('2d');context.fillStyle context.fillRect context.strokeRect
<!DOCTYPE html><head>
<meta charset="UTF-8">
<title>canvas元素示例</title>
<script type="text/javascript"src="script.js"></script>
</head>
<body onload="draw('canvas');">
<h1>canvas元素示例</h1>
<canvas id="canvas"width="400" height="300" />
</body>
</html>
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF"; //設置顏色
context.fillRect(0, 0, 400, 300); //畫正方形
context.fillStyle = "red"; //顏色
context.strokeStyle = "blue"; //邊框顏色
context.lineWidth=1;//邊框線寬度
context.fillRect(50,50,100,100);
context.strokeRect(50,50,100,100);
}
14 cavas---arc—beginPath()畫圖為連續的圓環—用for循環
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for(var i = 0; i < 10; i++)
{
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.05)';
context.fill();
}
}
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
参数值
参数 | 描述 |
x | 圆的中心的 x 坐标。 |
y | 圆的中心的 y 坐标。 |
r | 圆的半径。 |
sAngle | 起始角,以弧度计。(弧的圆形的三点钟位置是 0 度)。 |
eAngle | 结束角,以弧度计。 |
counterclockwise | 可选。规定应该逆时针还是顺时针绘图。False = 顺时针,true = 逆时针。 |
15 cavas—无beginpath—closepath会把前面的园重画,导致颜色变深
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for(var i = 0; i < 10; i++)
{
// context.beginPath(); context.closePath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.fillStyle = 'rgba(255, 0, 0, 0.05)';
context.fill();
}
}
16 cavas—组合太阳花
function draw(id){
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
var dx = 150;
var dy = 150;
var s = 100;
context.beginPath();
context.fillStyle = 'rgb(100,255,100)';
context.strokeStyle = 'rgb(0,0,100)';
var x = Math.sin(0);
var y = Math.cos(0);
var dig = Math.PI / 15 * 11;
for(var i = 0; i < 30; i++)
{
var x = Math.sin(i * dig);
var y = Math.cos(i * dig);
context.lineTo( dx + x * s,dy + y * s);
}
context.closePath();
context.fill();
context.stroke();
}
17 vedio视频播放
<!DOCTYPE html><html>
<head>
<metacharset="UTF-8"></meta>
<title>媒体播放示例</title>
<script>
var video;
function init()
{
video = document.getElementById("video1");
//监听视频播放结束事件
video.addEventListener("ended", function()
{
alert("播放结束。");
}, true);
// 发生错误
video.addEventListener("error",function(){
switch (video.error.code)
{
case MediaError.MEDIA_ERROR_ABORTED:
alert("视频的下载过程被中止。");
break;
case MediaError.MEDIA_ERROR_NETWORK:
alert("网络发生故障,视频的下载过程被中止。");
break;
case MediaError.MEDIA_ERROR_DECODE:
alert("解码失败。");
break;
case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
alert("不支持播放的视频格式。");
break;
default:
alert("发生未知错误。");
}
},false);
}
function play()
{
// 播放视频
video.play();
}
function pause()
{
//暂停播放
video.pause();
}
</script>
</head>
<body onload="init()">
<!—可以添加controls属性来显示浏览器自带的播放用的控制条。 -->
<video id="video1" src="test.ogv">
</video><br/>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
</body>
</html>
2 Js 基础
相关文章推荐
- HTML教程,简单学习HTML语言
- HTML学习教程
- Html 学习教程及资料
- Putty基础教程之(一).入门命令学习及编写HTML
- js学习入门教程笔记:css+html+js用户注册代码实现
- 学习HTML-CSS-JAVASVRIPT教程
- 每天学习30分钟新知识之html教程1
- Ubuntu15.04 网站服务器环境搭建,php/html/css等学习环境搭建教程
- html学习教程7之第一个html模版
- Putty基础教程之(一).入门命令学习及编写HTML
- 学习网站开发必备推荐!30天学会HTML和CSS基础入门视频教程 (免费精品课程)
- (W3C学习笔记)HTML 初级教程
- XML,HTML,XSL等在线学习教程
- Silverlight Telerik控件学习:主题Theme切换html教程
- html学习教程4之表单
- HTML网页列表标记学习教程
- 韩顺平_php从入门到精通_视频教程_第11讲_初识css_类选择器_id选择器_html选择器_学习笔记_源代码图解_PPT文档整理
- html学习教程2
- 【html-01】h5教程学习笔记
- HTML学习路程(一)HTML教程