题目1（简答题）： HTML5是什么？有哪些新增标签(请举例说明)？
-
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容： [1] ）。 2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
-
header-----页面的头部
<header></header> -
main----页面主体内容部分（每个页面只可以出现一次）
<main></main> -
section------划分区域
<section></section>(section里面可以放多个article) -
article------划分文章每章节(article里面可以放多个aside)
<article></article> -
nav----导航区域
<nav> ul>li </nav> -
footer----底部导航区域
<footer></footer> -
figure----里面可以放入图片和文字
<figure> p img h3</figure> -
hgroup----标题与子标题的组合
<hgroup></hgroup>
题目2（简答题）： input 有哪些新增类型(请举例说明)？
- email电子邮箱文本框
<input type="email" name="" id="">
- tel电话号码
<input type="tel" name="" id="">
- url网页URL地址
<input type="url" name="" id="">
- search搜索引擎
<input type="search" name="" id="">
- date日期类型
<input type="date" name="" id="">
- time时间
<input type="time" name="" id="">
- range特定范围内的数值选择器
<input type="range" name="" id="">
- number只包含数字的输入框
<input type="number" name="" id="">
- placeholder输入框提示信息
<input type="text" name="" id="" placeholder="请输入用户名">
- autocomplete是否保存用户输入值
autocomplete是否保存用户输入值，默认为on，关闭提示选择off
- autofocus指定表单获取输入焦点
<input type="text" name="" autofocus>
- required此项必填，不为空
Name: <input type="text" name="usr_name" required="required">
- disabled表单禁用状态
<p>Last name: <input type="text" name="lname" disabled></p>
- 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="提交">
题目3（编程题）：用html5标签做一个简单的页面布局（如下图所示）
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/Coffee.css">
</head>
<body>
<header>
<article>
<img src="img/图标.png" alt=""width="110px"height="106px">
</article>
<nav><ul><br><br><br><br><br>
<li class="l1"><a href="#">主页</a></li>
<li><a href="#">咖啡及文化</a></li>
<li><a href="#">饮品及美食</a></li>
<li><a href="#">星享俱乐部</a></li>
<li><a href="#">在线订阅</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h3>开启您的星享之旅</h3>
<p>
星享卡会员光顾星巴克时可积累星星，兑换好礼！<br>
每积累消费50元可获赠一颗星星。星星越多，好礼<br>越多哦！<a>点击这里</a>开启您的星享惊喜之旅！
</p>
</section>
<aside>
</aside>
<article>
<h3>星巴克饮品</h3>
<div class="img1">
<img src="img/coffee1.png" alt=""class="i1">
<img src="img/coffee2.png" alt=""class="i2">
</div>
<a class="a2">美式咖啡</a><span class="s2">卡布奇诺</span>
<div class="img2">
<img src="img/coffee3.png" alt=""class="i3">
<img src="img/coffee4.png" alt=""class="i4">
</div>
<a class="a3">拿铁</a><span class="s3">魔卡</span>
</article>
</main>
</body>
</html>
css代码
*{
text-decoration:none;
list-style:none;
margin:0;
padding:0;
}
header{
width:1100px;
height:150px;
margin:0px auto;
}
header img{
margin:35px 40px;
}
header li{
float:left;
background-color:rgb(236, 228, 208);
margin:0px 10px;
width:92px;
text-align:center;
}
nav .l1{
width:60px;
background-color:rgb(200, 185, 156);
}
header a{
color:rgb(25, 112, 73);
font-weight: bolder;
}
nav{
width:700px;
height:150px;
float:left;
margin-left:70px;
}
article{
width:130px;
height:150px;
float:left;
}
main{
width:1100px;
height:630px;
margin:0px auto;
}
section{
width:35%;
height:180px;
background-color: rgb(239, 229, 208);
float:left;
}
h3{
color:rgb(25, 112, 73);
margin-left:20px;
line-height:70px;
}
section p{
margin-left:20px;
font-size:14px;
}
section p a{
color:rgb(25, 112, 73);
font-weight: bolder;
}
main article{
width:35%;
height:480px;
float:left;
background-color: rgb(239, 229, 208);
margin:10px 0px;
}
aside{
width:63%;
height:75%;
float:right;
background-image: url(../img/main.png);
background-repeat: no-repeat;
margin-right:10px;
}
.img1{
width:350px;
height:163px;
}
.img1 .i1{
float:left;
margin-left:25px;
}
.img1 .i2{
float:right;
}
article .a2{
font-size:14px;
margin-left:73px;
}
article .s2{
font-size:14px;
margin-left:115px;
}
.img2{
width:350px;
height:163px;
margin:10px 0px;
}
.img2 .i3{
float:left;
margin-left:25px;
}
.img2 .i4{
float:right;
}
article .a3{
font-size:14px;
margin-left:86px;
}
article .s3{
font-size:14px;
margin-left:150px;
}
第二道大题：
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/css3.css">
<title>阴影和圆角的实现</title>
</head>
<body>
<div class="all">
<div class="f1">
<div class="fang">圆角</div>
<div class="yuan">圆形</div>
</div>
<footer>
<div class="f2">
<div class="zheng">
阴影
</div>
</div>
</footer>
</div>
</body>
</html>
css代码
*{
margin:0;
padding: 0;
}
.all{
width:100%;
height:695px;
background-image: url(../img/coffee1.png);
float:left;
}
.f1{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:0px 15px;
border-radius:30px;
}
.f1 .fang{
width: 90px;
height: 90px;
background-color: rgb(37,195,183);
border-radius:10px;
margin:60px 570px;
float:left;
text-align: center;
line-height: 90px;
}
.f1 .yuan{
width: 90px;
height: 90px;
background-color: rgb(37,195,183);
border-radius:45px;
margin:60px -390px;
float:left;
text-align: center;
line-height: 90px;
}
footer{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:235px 15px;
border-radius:30px;
}
.f2{
float:left;
width:98%;
height:230px;
background-color: rgba(255,255,255,0.7);
margin:0px auto;
border-radius:30px;
}
.zheng{
width:200px;
height:200px;
background-color: rgb(131,128,231);
text-align: center;
line-height: 200px;
margin:15px auto;
box-shadow: 10px 10px 5px rgb(219,43,173);
}
网友评论