题目1（简答题）： HTML5是什么？有哪些新增标签(请举例说明)？
HTML5是什么
-HTML5是万维网的和核心语言、标准通用标记语言下的一个应用超文本标记语言 （HTML）的第五次重大修改，HTML5是开放的web网络平台的奠基石。
新增标签
-header-----页面的头部
<header></header>
-main-----页面的主体内容
<main></main>
-section-----划分每一块（section里面可以放多个article）
<section></section>
-article------划分文章每章节（article里面可以放多个aside)
<article></article>
-nav-----导航区域
<nav></nav>
-footer-------底部
<footer></footer>
-figure-----里面可以放入图片和文字
<figure></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"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> <option value="Microsoft Edge"> </datalist> <input type="submit" value="提交">
定义和语法
- <label> 标签为 input 元素定义标注（标记）。
- label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
- <label> 标签的 for 属性应当与相关元素的 id 属性相同。（规定 label 绑定到哪个表单元素）
题目3（编程题）：用html5标签做一个简单的页面布局（如下图所示）
- 代码如下
- HTML代码
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="beijing">
<header></header>
<div class="bj2">
<nav>
<span>
<img src="img/logo.png" height="103" width="119" alt="" class="">
</span>
<ul>
<li>主页</li>
<li>咖啡及文化</li>
<li>饮品及美食</li>
<li>星享俱乐部</li>
<li>在线订阅</li>
</ul>
</nav>
<main class="main clearfix">
<section class="sec1">
<article class="art1">
<h4>开启您的星享之旅</h4>
<p>星享卡会员光顾星巴克时可积累星星，兑换好礼！</p>
<p>每积累消费50元可赠一颗星星。星星越多，好礼</p>
<p>越多哦？<a href="#">点击这里</a>开启您的星享惊喜之旅！</p>
</article>
<article class="art2">
<h4>星巴克饮品</h4>
<figure>
<img src="img/caffe-1.jpg" alt="">
<p>美式咖啡</p>
</figure>
<figure>
<img src="img/caffe-2.jpg" alt="">
<p>卡布奇诺</p>
</figure>
<figure>
<img src="img/caffe-3.jpg" alt="">
<p>拿铁</p>
</figure>
<figure>
<img src="img/caffe-4.jpg" alt="">
<p>摩卡</p>
</figure>
</article>
</section>
<section class="sec2">
<p class="p2"> 家庭咖啡作坊帮助孩子们上大学
2015年6月30日
坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作
坊”发展而来，其目的是为了控制其出产的咖啡豆品质。
他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且
他们现在已经有能力为让子女上大学，接受更好的教育。
该地出产的咖啡:星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡豆
阅读(100)评论(2)
</p>
<p class="p2">
部落与商业文化的有机融合有助社区发展
2015年5月20日
2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已
经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。
在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会
该地出产的咖啡:浓缩烘焙，祥龙咖啡豆阅读
(100)评论(2)
</p>
<p class="p2">
咖啡为这个新国家的种植户带来发展的希望
2015年3月29日
东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为
成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作
社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的
医疗服务。
该地出产的咖啡: TimorLorosa'e (核心咖啡只在澳大利亚销售)
阅读(100)评论(2)
</p>
</section>
</main>
</div>
</div>
</body>
</html>```
-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;
}
效果图如下：
第二道大题：利用本次课所学的CSS3相关知识实现如下图所示的简单效果
-
效果图
2DUXUQQS21QB@~TK(X}NRSJ.png 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.clearfix:after{
display:block;
content:'';
clear:both;
}
.round{
width:50px;
height:50px;
border-radius:10px;
background:rgb(37, 195, 83);
line-height:50px;
text-align:center;
float:left;
margin-left:75px;
}
.circular{
width:50px;
height:50px;
border-radius:25px;
background:rgb(37, 195, 83);
line-height:50px;
text-align:center;
float:left;
margin-left:75px;
}
.shade{
width:50px;
height:50px;
background:rgb(131, 121, 231);
line-height:50px;
text-align:center;
float:left;
margin-left:75px;
box-shadow:8px 8px 5px rgb(219, 43, 173);
}
</style>
</head>
<body>
<div class="clearfix">
<div class="round">圆角</div>
<div class="circular">圆形</div>
<div class="shade">阴影</div>
</div>
</body>
</html>
