【艾琪出品】-HTML5开发基础与应用、学习资料

柔光的暖阳◎ 2021-11-24 00:04 235阅读 0赞

【声明】**本博客内容，若有侵权请告之,会删除 非商业用途,如有侵权,请告知我,我会删除**

**如回复不及时，或不懂的请加我****微信 island68 QQ823173334** **可以的话注明来自CSDN**

**很希望通过CSDN这个平台与大家交流**

**HTML5开发基础与应用**

小试牛刀  
  
任务一：使用HTML新增元素<audio>播放指定的音频（基础）。  
请在第8行，<audio>和</audio>标签之间，输出statics/demosource/horse.mp3下的音频。  
<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>音频播放</title>  
</head>  
<body>  
<audio controls> </audio>  
</body>  
</html>

第一阶段作品展示

写一个上中下布局的网页

你需要提交的作品：  
用html5标签写一个上中下布局的网页。完成后运行一下，如果达成预定的效果，

要求：  
1.内容越丰富越好。  
2.使用html5的新增标签。  
3.务必按要求提交作业。如提交空白文档或提交的作业不是老师布置的作业，会得零分哦。

独具慧眼-HTML5开发基础与应用

同学，你好！经过10周的学习，你已经不再是个前端小白了，现在这里有2个任务，请你任选一个完成。如果你感兴趣，也可以  
任务一：  
问题：丁小满同学为了实现下图的效果，写了一组编写代码，但是这组代码在运行中出现了问题，导致他并不能得到下图的效果。怎么办呢？请你帮帮他吧~~  
任务：请你帮丁小满同学找到这组代码中的bug并修改过来，实现如下图的效果。  
一个人奋战总是孤独的，你可以使用求助卡和军师卡  
求助卡：到微信群内找伙伴寻求帮助，问问大家是怎么解决的。  
军师卡：到平台问答区发求助给辅导老师，请军师给你指点迷津。  
  
丁小满写的代码：  
<!DOCTYPE HTML>  
<html>  
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid \#c3c3c3;">  
Your browser does not support the canvas element.  
<canvas>

var c=document.getElementById("myCanvas");  
var cxt=c.getContext("2");  
cxt.fillStyle="\#FF0000";  
cxt.beginPath();  
cxt.arc(70,18,15,0,Math.PI\*2,true);  
cxt.closePath();  
cxt.fill();

</script>

</body>  
</html>

第三阶段作品展示-HTML5开发基础与应用  
至

任务：  
1. 左侧是联系我们，包括名称、电子邮箱和你的留言。  
2. 页面主页是柑橘描述，底部是作者及创建该网页时间。  
考核点：  
1. input属性的使用，电子邮箱使用html5校验  
2. 整体布局考察页面布局情况，css的知识  
页面效果：  
  
图片  
demo\_img.jpg  
  
arrow.png