2018-06-07

题目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标记其中包括纯粹显示效果的标记,如和

,它们已经被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-----页面的头部

main----页面主体内容部分（每个页面只可以出现一次）

section------划分区域

(section里面可以放多个article)

article------划分文章每章节(article里面可以放多个aside)

总结:

三级标题

我是李白，一人饮酒醉

向右看一眼

nav----导航区域

ul>li

footer----底部导航区域

figure----里面可以放入图片和文字

p img h3

hgroup----标题与子标题的组合

题目2（简答题）： input 有哪些新增类型(请举例说明)？
1.email电子邮箱文本框

2.tel电话号码

3.url网页URL地址

4.search搜索引擎

5.date日期类型

6.time时间

7.range特定范围内的数值选择器

8.number只包含数字的输入框

9.placeholder输入框提示信息

10.autocomplete是否保存用户输入值

autocomplete是否保存用户输入值，默认为on，关闭提示选择off

11.autofocus指定表单获取输入焦点

12.required此项必填，不为空

Name:

13.disabled表单禁用状态

Last name:

14.datalist选项列表与input元素配合使用，来定义input可能的值

从列表中选择这个浏览器
题目3（编程题）：用html5标签做一个简单的页面布局（如下图所示）

HTML样式

STARBUCKS

• 主页


• 咖啡及文化


• 饮品及美食


• 星象俱乐部


• 在线订购

开启你的星享之旅

星享卡会员光顾星巴可积累星星，兑换好礼！

每积累消费50元可获赠星星。星星越多，好礼

越多哟！点击这里开启星巴克之旅`

家庭咖啡作坊帮助孩子们上大学

2015年6月30号

星巴克饮品

美式咖啡

卡不奇诺

拿铁

摩卡

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相关知识实现如下图所示的简单效果