HTML学习教程

来源：互联网发布：学历网络教育报考编辑：程序博客网时间：2024/05/23 10:51

1 html5基础

1 input ---focus焦点

对比A：

<!DOCTYPE html>

<title>用HTML 5实现代码清单1-1中的JavaScript代码</title>

<form>

<p>

<label>Search:<input name=search autofocus></label>

</p>

</form>

<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>

<p>这段代码是根据HTML 5语法

<br/>编写出来的。

3 ul—editable <ulcontentEditable="true">

<!DOCTYPE html>

<head>

<title>conentEditalbe属性示例</title>

</head>

<h2>可编辑列表</h2>

</ul>

4 article—header，footer--time<time pubdate独立自内容—

<!DOCTYPE html>

<head>

<title>conentEditalbe属性示例</title>

</head>

</header>

<p><b>苹果</b> ，植物类水果，多次花果...（“苹果”文章正文）</p>

</footer>

</article>

5 section—标签—片段

6 submit—input--formaction

<head>

<title>formaction属性示例</title>

</head>

<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

</form>

7 input-submit----formmethod=”post”

<!DOCTYPE html>

<head>

<title>formmethod属性示例</title>

</head>

<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

</form>

8 input—text—list –datalist-option—text自动提示文本

<!DOCTYPE html>

<head>

<title>list属性示例</title>

</head>

text：<inputtype="text" name="greeting" list="greetings">

<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>

<title>简单表单示例</title>

<label for=email>Email</label>

</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" />

</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="三个字母的国家代码" />

</form>

</body>

</html>

12 email.checkValidity()--email—email验证

<!DOCTYPE html>

<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>

<label for=email>Email</label>

</form>

13 figure—image

<!DOCTYPE HTML>

<html>

<body>

<p>上海卢浦大桥是当今世界第一钢结构拱桥，是世界上跨度最大的拱形桥。它也是世界上首座完全采用焊接工艺连接的大型拱桥（除合拢接口采用栓接外），现场焊接焊缝总长度达4万多米，接近上海市内环高架路的总长度。卢浦大桥像澳大利亚悉尼的海湾大桥一样具有旅游观光的功能。</p>

<p>黄浦江上的的卢浦大桥</p>

<p>拍摄者：W3School 项目组，拍摄时间：2010 年 10 月</p>

</figure>

</body>

</html>

13 cavas--- fillstyle—file—strokeStyle –linewidth—stokeRect(画矩形边框)-canvas.getContext('2d');context.fillStyle context.fillRect context.strokeRect

<!DOCTYPE html>

<head>

<title>canvas元素示例</title>

</head>

<h1>canvas元素示例</h1>

</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 坐标。

圆的中心的 y 坐标。

圆的半径。

sAngle

起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

eAngle

结束角，以弧度计。

counterclockwise

可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

beginPath() 方法开始一条路径，或重置当前的路径。

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>

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>

<!—可以添加controls属性来显示浏览器自带的播放用的控制条。 -->

</video><br/>

</body>

</html>

2 Js 基础

0 0