作业0603

题目1（简答题）： HTML5是什么？有哪些新增标签(请举例说明)？

HTML5是什么
-HTML5是万维网的和核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改，HTML5是开放的web网络平台的奠基石。

新增标签
-header-----页面的头部

-main-----页面的主体内容

-section-----划分每一块（section里面可以放多个article）

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

-nav-----导航区域

-footer-------底部

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

-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可能的值

从列表中选择这个浏览器

定义和语法

标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。（规定 label 绑定到哪个表单元素）

题目3（编程题）：用html5标签做一个简单的页面布局（如下图所示）

asdf.png

代码如下
HTML代码

`

作业

开启您的星享之旅

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

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

越多哦？点击这里开启您的星享惊喜之旅！

星巴克饮品

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

2015年6月30日

坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作

坊”发展而来，其目的是为了控制其出产的咖啡豆品质。

他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且

他们现在已经有能力为让子女上大学，接受更好的教育。
该地出产的咖啡:星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡豆

阅读(100)评论(2)

部落与商业文化的有机融合有助社区发展

2015年5月20日

2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已

经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。
在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会

该地出产的咖啡:浓缩烘焙，祥龙咖啡豆阅读

(100)评论(2)

咖啡为这个新国家的种植户带来发展的希望

2015年3月29日

东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为

成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作

社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的

医疗服务。

该地出产的咖啡: TimorLorosa'e (核心咖啡只在澳大利亚销售)
阅读(100)评论(2)

```

-CSS代码如下

*{
margin:0;
padding:0;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
.beijing{
width:100%;
}
header{
width: 100%;
height: 8px;
margin-bottom: 17px;
background:rgb(0, 117, 71);
}
.bj2{
width: 1000px;
height: 742px;
margin:0 auto;
}
nav{
width: 800px;
height: 103px;
margin-bottom: 20px;
margin:0 auto;
}
nav span{
float: left;
width: 161px;
height: 103px;
display: block;
}
nav img{
margin-left: 21px;
}
nav ul{
width: 464px;
height: 29px;
background: white;
list-style: none;
float: left;
margin-top: 71px;
}
nav li{
float: left;
width: 90px;
height: 29px;
background: rgb(239, 229, 208);
margin-left: 7px;
margin-right: 7px;
color: rgb(37, 123, 88);
text-align: center;
line-height: 29px;
font-size: 13.5px;
font-weight: bold;
}
nav li:first-child{
width: 48px;
background: rgb(200, 185, 156);
}
nav li:last-child{
width: 76px;
}
.main{
width: 960px;
height: 618px;
}
.sec1{
float: left;
margin-right: 10px;
}
.art1{
width: 350px;
height:147px;
background: rgb(239, 229, 208);
}
h4{
color: rgb(37, 123, 88);
font-size: 18px;
padding-top: 18px;
margin-bottom: 12px;
margin-left: 20px;
}
.art1 a{
color: rgb(37, 123, 88);
text-decoration: none;
}
p{
font-size: 15px;
margin-bottom: 6px;
margin-top: 6px;
margin-left: 20px;
}
.art2{
width: 350px;
height: 500px;
background:rgb(239, 229, 208);
margin-top: 10px;
}
figure{
width:145px;
height:225px;
float: left;
margin-left: 10px;
display:block;
}
figure p{
margin-left: 0px;
text-align: center;
}
.sec2{
width: 600px;
height: 476px;
background: rgb(239, 229, 208);
float: left;
}
.sec2 .p2{
font-size: 14px;
margin-top: 5px;
margin-left: 20px;
}

效果图如下：

Y_3WA$1R3SZ_B_`@EC3U3VX.png

第二道大题：利用本次课所学的CSS3相关知识实现如下图所示的简单效果

效果图

2DUXUQQS21QB@~TK(X}NRSJ.png
代码