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

最新推荐文章于 2023-07-19 19:57:54 发布

island33

最新推荐文章于 2023-07-19 19:57:54 发布

阅读量395

点赞数

本文链接：https://blog.csdn.net/island33/article/details/97489571

版权

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

如回复不及时，或不懂的请加我 微信 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