题目1（简答题）： HTML5是什么？有哪些新增标签(请举例说明)？
HTML5是用于取代1999年所制定的HTML 4.01 和XHTML 1.0 标准的HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些HTML5 技术。HTML 5有两大特点:首先,强化了Web 网页的表现性能。其次,追加了本地数据库等Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。1.取消了一些过时的HTML4标记其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。
1.HTML5 吸取了XHTML2 一些建议,包括一些用来改善文档结构的功能,
比如,新的HTML 标签header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现
这些功能时一般都是使用div。
2.将内容和展示分离
b 和i 标签依然保留,但它们的意义已经和之前有所不同,这些标签的意义只是为了将一段文字标识出来,而不是为了为它们设置粗体或斜体式样。u,font,center,strike 这些标签则被完全去掉了。
3.一些全新的表单输入对象
包括日期,URL,Email 地址,其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样
的网页对搜索引擎,对读屏软件等更为友好。
4.全新的,更合理的Tag
多媒体对象将不再全部绑定在object 或embed Tag 中,而是视频有视频的Tag,音频有音频的Tag。
5.本地数据库
这个功能将内嵌一个本地的SQL 数据库,以加速交互式搜索,缓存以及索引功能。同时,那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。
6.Canvas 对象
将给浏览器带来直接在上面绘制矢量图的能力,这意味着用户可以脱离Flash 和Silverlight,直接在浏览器中显示图形或动画。
7.浏览器中的真正程序
将提供API 实现浏览器内的编辑,拖放,以及各种图形用户界面的能力。内容修饰Tag 将被剔除,而使用CSS。
8.Html5取代Flash在移动设备的地位
header-----页面的头部
<header></header>
main----页面主体内容部分（每个页面只可以出现一次）
<main></main>
section------划分区域
<section></section>(section里面可以放多个article)
article------划分文章每章节(article里面可以放多个aside)
<article></article>
总结:
<article> <h3>三级标题</h3> <p>我是李白，一人饮酒醉</p> <aside>向右看一眼</aside> </article>
nav----导航区域
<nav> ul>li </nav>
footer----底部导航区域
<footer></footer>
figure----里面可以放入图片和文字
<figure> p img h3</figure>
hgroup----标题与子标题的组合
<hgroup></hgroup>
题目2（简答题）： input 有哪些新增类型(请举例说明)？
1.email电子邮箱文本框
<input type="email" name="" id="">
2.tel电话号码
<input type="tel" name="" id="">
3.url网页URL地址
<input type="url" name="" id="">
4.search搜索引擎
<input type="search" name="" id="">
5.date日期类型
<input type="date" name="" id="">
6.time时间
<input type="time" name="" id="">
7.range特定范围内的数值选择器
<input type="range" name="" id="">
8.number只包含数字的输入框
<input type="number" name="" id="">
9.placeholder输入框提示信息
<input type="text" name="" id="" placeholder="请输入用户名">
10.autocomplete是否保存用户输入值
autocomplete是否保存用户输入值，默认为on，关闭提示选择off
11.autofocus指定表单获取输入焦点
<input type="text" name="" autofocus>
12.required此项必填，不为空
Name: <input type="text" name="usr_name" required="required">
13.disabled表单禁用状态
<p>Last name: <input type="text" name="lname" disabled></p>
14.datalist选项列表与input元素配合使用，来定义input可能的值
<label for="myBrowser">从列表中选择这个浏览器</label> <input list="browsers" id="myBrowser" name="myBrowser"> <datalist id="browsers"> <option value="Chrome">
题目3（编程题）：用html5标签做一个简单的页面布局（如下图所示）
HTML样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/group.css">
</head>
<body>
<header><h4>STARBUCKS</h4></header>
<img src="../image/xingbake.jpg">
<ul>
<li class="q1">主页</li>
<li class="q2">咖啡及文化</li>
<li class="q3">饮品及美食</li>
<li class="q4">星象俱乐部</li>
<li class="q5">在线订购</li>
</ul>
<section></section>
<header>
<h3>开启你的星享之旅</h3>
<p>星享卡会员光顾星巴可积累星星，兑换好礼！
每积累消费50元可获赠星星。星星越多，好礼
越多哟！点击这里开启星巴克之旅`
</p>
</header>
<aside>
<a>
家庭咖啡作坊帮助孩子们上大学
2015年6月30号
</a>
</aside>
<article>
<h3 class="e1">星巴克饮品</h3>
<img src="../image/meishikafei.jpg" class="a1">
<img src="../image/kabuqinuo.jpg" class="a2">
<img src="../image/natie.jpg" class="a3">
<img src="../image/moka.jpg" class="a4">
<p class="s1">美式咖啡</p>
<p class="s2">卡不奇诺</p>
<p class="s3">拿铁</p>
<p class="s4">摩卡</p>
</article>
</html>
CSS样式
*{
margin:0;
padding: 0;
}
header{
float:left;
}
header,h2{
margin:230px 70px 0px 480px;
}
img{
float:left;
}
img{
height:100px;
width:100px;
margin:130px 0px 0px -160px;
}
li{
float:left;
}
li{
height:30px;
width:90px;
list-style:none;
text-align:center;
}
.q1{
height:30px;
width:60px;
background-color:gray;
margin:200px 0px 0px -10px;
}
.q2{
height:30px;
width:95px;
background-color:#d19e9e;
margin:200px 0px 0px 30px;
}
.q3{
height:30px;
width:95px;
background-color:#d19e9e;
margin:200px 0px 0px 35px;
}
.q4{
height:30px;
width:95px;
background-color:#d19e9e;
margin:200px 0px 0px 40px;
}
.q5{
height:30px;
width:80spx;;
background-color:#d19e9e;
margin:200px 0px 0px 45px;
}
section{
float:right;
}
section{
height:140px;
width:350px;
background-color:#d19e9e;
margin:60px 1100px 0px 0px ;
}
h3{
float:left;
}
h3{
color:green;
margin:-358px 0px 0px 3px;
}
.e1{
margin:8px 0px 0px 23px;
}
p{
margin:-320px 0px 0px 0px ;
}
aside{
float:left;
}
aside{
height:540px;
width:450px;
background-color:#d19e9e;
margin:-140px 0px 0px -30px ;
}
article{
float:right;
}
article{
height:370px;
width:350px;
background-color:#d19e9e;
margin:-370px 1100px 0px 0px;
}
a{
float:left;
}
a{
margin:10px 0px 0px 10px;
}
.a1{
float:right;
}
.a1{
margin:40px 210px 0px 0px ;
}
.a2{
float:right;
}
.a2{
margin:-100px 40px 0px 0px ;
}
.a3{
float:right;
}
.a3{
margin:60px 210px 0px 0px ;
}
.a4{
float:right;
}
.a4{
margin:-98px 40px 0px 0px ;
}
.s1{
float:right;
}
.s1{
margin:-150px 230px 0px 0px ;
}
.s2{
float:right;
}
.s2{
margin:-150px 60px 0px 0px ;
}
.s3{
float:right;
}
.s3{
margin:10px 239px 0px 0px ;
}
.s4{
float:right;
}
.s4{
margin:-15px 69px 0px 0px ;
}
第二道大题：
利用本次课所学的CSS3相关知识实现如下图所示的简单效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
:root{
background: white;
}
.d-parent{
width:2000px;
height:1000px;
background: url(../image/51b03dd2a5ddf686.jpg!200x200.jpg);
}
.d-child{
height:200px;
background: white;
border-radius: 25px;
margin:-450px 0px 0px 0px ;
opacity: 0.7;
}
.d-child1{
height:200px;
background: white;
border-radius: 25px;
margin:-550px 0px 0px 0px ;
opacity: 0.7;
}
.d-child2{
width:150px;
height:150px;
background: yellow;
border-radius: 25px;
margin:-180px 160px 0px 800px;
opacity: 1.7;
position:absolute;
}
.d-child3{
width:150px;
height:150px;
background: green;
border-radius: 75px;
margin:-180px 160px 0px 1000px;
opacity: 1.7;
position:absolute;
}
.box{
width: 150px;
height:150px;
background: pink;
border-radius: 25px;
line-height:200px;
box-shadow: 10px 10px 5px purple;
position:absolute;
margin:180px 160px 0px 900px;
/*弧度就宽高各一半*/
}
</style>
</head>
<body>
<div class="d-parent"></div>
<div class="d-child"></div>
<div class="d-child1"></div>
<div class="d-child2"></div>
<div class="d-child3"></div>
<div class="box"></div>
</body>
</html>
