skystar 发表于 2019-7-2 13:34:51

东北师范大学 HTML5开发基础与应用 (资料)

      同学,你好!学习了HTML5的新增全局属性、新增语义化、结构化元素后,现在你来小试牛刀,检验一下自己的学习成果吧!看看你是否已将知识消化吸收。以下4个任务请你根据自己的能力等级任选1个,完成后运行一下,如果达成预定的效果,请将代码复制到word文档中,将运行的结果截图粘贴到word文档中,将word文档作为附件提交上来。你也可以完成多个任务,提交多个成果哦!看看谁的任务完成得最好哦!提交成果后,请一定记得到问答栏目老师的学习活动主题帖下回帖参与学习活动哈,无论是提交成果还是回帖都会计入你的平时成绩哦。
             任务一:使用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>
            任务二:使用<aside>标签,添加全局的附属信息(基础)。
            1、在第10行输出全局的附属信息<p>我的第二个段落。</p>。
            <!DOCTYPE html>
             <html>
             <head>
               <meta charset="utf-8">
               <title>我的任务二</title>
             </head>
             <body>
               <p>第一段内容</p>
               <aside> </aside>
             </body>
             </html>
            任务三:使用<Canvas>标签定义HTML页面中的画布(基础)。
             一个画布在网页中是一个矩形框,通过 <canvas> 元素来绘制,默认情况下<canvas> 元素没有边框和内容。
            <!DOCTYPE html>
             <html>
             <body>
               <canvas id="myCanvas" width="200" height="100"
            style="border:10px dotted #000000; background:#ddd;">
                     您的浏览器不支持 HTML5 canvas 标签。
                </canvas>
             </body>
             </html>
            任务四:用 <dialog> 标签在html中实现对话框(基础)。
             在第12行添加dialog标签。
            <!DOCTYPE html>
             <html>
             <head>
               <meta charset="utf-8">
               <title>我的第四个任务</title>
             </head>
             <body>
               <p><b>注意:</b>目前只有 Chrome 和 Safari 6 支持 dialog 标签。</p>
               <table border="1">
                     <tr>
                         <th>1月 </th>
                         <th>2月</th>
                         <th>3月</th>
                     </tr>
                     <tr>
                         <td>31</td>
                         <td>28</td>
                         <td>31</td>
                     </tr>
               </table>
             </body>
             </html>



页: [1]
查看完整版本: 东北师范大学 HTML5开发基础与应用 (资料)