一、HTML5是什么？有哪些新增标签(请举例说明)？

1、video元素
定义视频。像电影片段或其他视频流。例：<video src="movie.ogg" controls="controls">video元素</video>
2、audio元素
定义音频。如音乐或其他音频流。例：<audio src ="someaudio.wav">audio元素</audio>
3、embed元素
用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：<embed src="flash.swf" />
4、mark元素
主要用来在视觉上向用户呈现哪些需要突出显示或[高亮显示]的文字。典型应用搜索结果中[高亮显示]搜素关键字。
HTML5<mark></mark>;
5、progress元素
表示运行中的进程，可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。<progress></progress>。
6、time元素
表示日期或时间，也可以两者同时。
7、ruby元素
定义 ruby 注释（中文注音或字符）。
与 <ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
<ruby>
汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
8、rt元素
定义字符（中文注音或字符）的解释或发音。
9、rp元素
在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
10、wbr元素
表示软换行。与br元素的区别：br元素表示此处必须换行；wbr表示浏览器窗口或父级元素足弓宽时（没必要换行时），不换行，而宽度不够时主动在此处换行。
11、[canvas元素]
定义图形，比如图表和其他图像。<canvas> 元素只是图形容器（画布），必须使用脚本来绘制图形。
<canvas id="myCanvas"></canvas><script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
12、command元素——貌似没什么效果。是不是支持有问题
表示命令按钮，比如[单选按钮]、复选框或按钮。
只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。。
<menu>
<command onclick="alert('Hello World')">
Click Me!</command>
</menu>

二、 input 有哪些新增类型(请举例说明)？

1.Input 类型: color
<form action="demo.php">
选择你喜欢的颜色: <input type="color" name="favcolor">
<input type="submit">
</form>
2.Input 类型: datetime-local
<form action="form.php">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
<input type="submit">
</form>
3.Input 类型: month
<form action="-form.php">
生日 ( 月和年 ): <input type="month" name="bdaymonth">
<input type="submit">
</form>
4.Input 类型: week
week 类型允许你选择周和年。
<form action="demo-form.php">
选择周: <input type="week" name="year_week">
<input type="submit">
</form>
5.keygen 元素
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）
目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
实例
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
6.output 元素
output 元素用于不同类型的输出，比如计算或脚本输出：
实例
<output id="result" onforminput="resCalc()"></output>

三、用html5标签做一个简单的页面布局（如下图所示）

d07d635a58eb20d30460445cd8040440d354a286.png

<body>
    <header>
        <figure></figure>
        <nav></nav>
    </header>
    <main>
        <aside>
            <section>
                <h2></h2>
                <p></p>
            </section>
            <section>
                <h2></h2>
                <figure>
                    <img src="" alt="">
                    <h3></h3>
                </figure>
                <figure>
                    <img src="" alt="">
                    <h3></h3>
                </figure>
                <figure>
                    <img src="" alt="">
                    <h3></h3>
                </figure>
                <figure>
                    <img src="" alt="">
                    <h3></h3>
                </figure>
            </section>
        </aside>
        <article>
            <p></p>
        </article>
    </main>
    <footer>
        <span></span>
    </footer>
</body>

第二道大题：

利用本次课所学的CSS3相关知识实现如下图所示的简单效果

a094d4de445ad87a74bba9e94d0c3a6785740be9.png

1.圆角，圆形

         .yuanjiao {
            width: 100px;
            height: 100px;
            background: gray;
            border-radius: 15px;
            text-align: center;
            line-height: 100px;
        }

        .yuanxing {
            width: 100px;
            height: 100px;
            background: gray;
            border-radius: 50px;
            text-align: center;
            line-height: 100px;
        }

2.div 阴影

        .yinying {
            width: 100px;
            height: 100px;
            background: purple;
            box-shadow: 5px 5px 10px gray;
            text-align: center;
            line-height: 100px;
        }