一、
1、 什么是html5？
html5是集html语言为基础，并且增加了一些新的代码字符进行更好效果实现的一种编程语言。 html5就是包括HTML、CSS和JavaScript在内的一套技术组合，强化了Web网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。所以说未来HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。但是HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2、有哪些新增标签？
①、header :页眉（网页（部分区域）的头部 顶部 导航区域等等），闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
②、nav ：导航链接部分；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟 DIV标签，可以说是完全一样的特性。
③、section； 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。闭合 标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的 特性；
④、footer: 页脚（网页（部分区域）的底部|版权区域等等），闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
⑤、article： 内容是引用其他地方的。一个区域中的，另外一部分内容；闭合标签；块元素；默认的宽是：100%；高： 内容的高度；实质上，跟DIV标签，可以说是完全一样的特性
⑥、aside :跟 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域；（最常见的京东的右侧的工具栏）
⑦、hgroup 给标题分组，为标题或者子标题进行分组，通常与h1-h6元素组合使用。如果文章中只有一个标题，则不使用hgroup。
闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
⑧、figure 对多个元素进行组合。通常与figcaption联合使用。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上跟DIV标签，可以说是完全一样的特性；figcaption 定义figure元素组的标题，必须写在figure元素中。一个figure元素内最多只允许放置一个figcaption元素。闭合标签；块元素；默认的宽是：100%；高：内容的高度；实质上，跟DIV标签，可以说是完全一样的特性；
⑨、main：规定文档的主要内容。<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
⑩、datalist 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。 闭合标签；行内元素；默认无宽度和高度。
2、input有哪些新增类型
-
color
这里写图片描述
点击时弹出颜色选择器，可以选择任意颜色
-
number
这里写图片描述
输入范围内的数字，可以手动输入超出范围的数字，但不能提交
<form>
<input name="num" type="number" />
</form> -
tel
输入电话号码，只有safari支持 -
search
搜索引擎
<input type="search" name="" id=""> -
email
自带检测功能，提交时会检测是否包含@符，并且@符前后是否有字符
<form>
<input name="email" type="email" />
</form> -
range
表示输入一定范围内数字值的文本输入框value
跟其它input类型里的value属性一样。可以是整数，也可以是浮点 数。缺省值是最小值和最大值的中间值。min
范围的最小值。缺省值是0。max
范围的最大值。缺省值是100。step
步长，滑块组件滑动时value变动的最小单位。缺省值是1。如果最小值min是浮点数，step也可以是浮点数。这里写图片描述
<form>
<input name="range" type="range" min="1" max="10"/>
</form> -
url
输入的网址必须是http://开头，并且后面必须有字符，否则不能提交
<form>
<input type="url" name="" id="">
</form> -
date
可供选取日期和时间的输入文本框，选取日、月、年（只能在部分浏览器有效果）
这里写图片描述
<form>
<input name="date" type="date"/>
<input type="submit" value="提交"/>
</form>
-
time
可以手动选择时间
这里写图片描述
-
datetime
选择带有时区的日期和时间，ie，firfox和chrome都不支持 -
datetime-local
这里写图片描述
选择日期和时间，没有时区
-
month
这里写图片描述
和date类型一样，只不过只能选择到月份
-
week
这里写图片描述
只能选择到第几周，这种日期方式国内基本很少用
-
placeholder输入框提示信息
<input type="text" name="" id="" placeholder="请输入用户 名">
-
autocomplete
可选值on/off，表示基于之前用户输入的内容浏览器自动填写/不允许自动填写 -
autofocus
页面加载时input自动获取焦点
<input type="text" name="" autofocus> -
required
此项必填，不为空
<input type="text" name="usr_name" required="required"> -
disabled
输入被禁用，选框变灰，禁用的元素不会提交 -
form
规定form之外的input属于一个或多个表单，form属性指向归属表单的id值，如果属于多个表单，id之间加空格- list
list指向引用的datalist（功能和select一样，但是不在网页中显示）预定义的可选项，例如
- list
<form>
<input list="mylist"/>
<datalist id="mylist">
<option>张三</option>
<option>李四</option>
<option>王五</option>
</datalist>
</form>
而页面中的表现则是（点击右侧展开时可选项才会展开）：
这里写图片描述
3、
<html>
<body>
<header class="clearfix">
<div class="picture fl">
<img src="img/1.png" height="103" width="119" alt="">
</div>
<nav>
<ul class="items fl clearfix">
<li><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 class="clearfix">
<div class="left fl">
<div class="left-top fl">
<h2>开启您的星享之旅！</h2>
<div class="text">
<p>星享卡会员光顾星巴克时可累积星星，兑换好礼！</p>
<p>每累积消费50元可获赠一颗星星。星星越多，好礼</p>
<p>越多哦！点击这里开启您的星享惊喜之旅!</p>
</div>
</div>
<div class="left-bottom fl">
<h2>星巴克饮品</h2>
<div class="picture">
<div class="picture1 clearfix">
<div class="img1 fl">
<img src="img/2.png" height="162" width="145" alt="">
<li>美式咖啡</li>
</div>
<div class="img2 fr">
<img src="img/3.png" height="162" width="145" alt="">
<li>卡布奇诺</li>
</div>
</div>
<div class="picture2 clearfix">
<div class="img3 fl">
<img src="img/4.png" height="162" width="145" alt="">
<li>拿铁</li>
</div>
<div class="img4 fr">
<img src="img/5.png" height="162" width="145" alt="">
<li>摩卡</li>
</div>
</div>
</div>
</div>
</div>
<div class="right fr">
<div class="text2">
<article>
家庭咖啡作坊帮助孩子们上大学</br>
2015年6月30日</br>
坎得利亚塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作</br>
坊”发展而来，其目的是为了控制其出产的咖啡豆品质。</br>
他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且</br>
他们现在已经有能力为让子女上大学，接受更好的教育。</br>
该地出产的咖啡：星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡英亩豆</br>
阅读(100）评论（2）</br>
部落与商业文化的有机融合有助于社区发展</br>
2015年5月20日</br>
2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方。如今却已</br>
经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。</br>
在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。</br>
该地出产的咖啡：浓缩烘培，祥龙咖啡豆</br>
阅读（100）评论（2）</br>
咖啡为这个新国家的种植户带来发展的希望</br>
2015年3月29日</br>
东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为</br>
成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作</br>
社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的</br>
医疗服务。</br>
该地出产的咖啡：TimorLorosa'e（核心咖啡只在澳大利亚销售）</br>
阅读（100）评论（2）</br>
</article>
</div>
</div>
</main>
</body>
</html>
css：
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.clearfix:after{
display: block;
content: '';
clear:both;
}
header{
width:960px;
margin:0 auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
header .picture{
padding-top: 17px;
padding-left: 20px;
}
header ul{
padding-top: 88px;
padding-left: 35px;
}
header ul li{
float: left;
width: 90px;
margin-right: 15px;
background: #efe5d0;
}
header ul li a{
font-size: 13px;
font-weight: bold;
color:#006f47;
display: block;
padding: 10px;
text-align: center;
}
[class="clearfix"] li:first-child{
width: 48px;
background: #c8b99c;
}
main{
width: 960px;
margin: 20px auto;
}
.left{
width: 350px;
}
.left-top{
width: 350px;
background: #efe5d0;
}
.left-top h2{
font-size: 16px;
display: block;
padding-top: 25px;
padding-left:20px;
color: #006f47;
}
.text{
margin:20px 20px 28px 20px;
}
.left-top p{
font-size: 12px;
display: block;
padding-bottom: 13px;
color: #333333;
}
[class="text"] p:last-child{
padding-bottom: 0px;
}
.left-bottom{
width: 350px;
background: #efe5d0;
margin-top: 10px;
}
.left-bottom h2{
font-size: 16px;
display: block;
padding-top: 25px;
padding-left:20px;
color: #006f47;
}
main .picture{
padding:12px 20px 33px 20px;
}
main li{
margin:8px auto;
font-size: 12px;
text-align: center;
}
main .picture2{
padding-top: 5px;
}
.right{
width: 600px;
background: #efe5d0;
}
.text2{
margin:20px 20px 22px 20px;
}
.text2 article{
font-size: 12px;
display: block;
color: #333333;
line-height: 20px;
}
二、
<html>
<body>
<header>
<div class="boxtop clearfix">
<div class="box1 fl">
<p>
圆角
</p>
</div>
<div class="box2 fr">
<p>
圆型
</p>
</div>
</div>
<div class="boxbottom clearfix">
<div class="box3">
<p>阴影</p>
</div>
</div>
</header>
</body>
</html>
css：
*{
margin: 0;
padding: 0;
}
header{
background: url(../img/3.png);
}
.clearfix{
display: block;
content:'';
clear: both;
}
.fl{
float: left;
}
.fr{
float: right;
}
.boxtop{
margin: 0 auto;
width: 1170px;
height: 90px;
border-radius: 20px;
background: rgba(100,100,0,0.55);
padding: 10px;
}
.box1{
background:lightgreen;
width: 80px;
height: 80px;
border-radius: 20px;
margin-left: 480px;
}
.box1 p{
display:inline-block;
font-size: 20px;
font-weight: bold;
color: black;
text-align: center;
margin:30px 18px;
}
.box2{
background:lightgreen;
width: 80px;
height: 80px;
border-radius: 40px;
margin-right: 480px;
}
.box2 p{
display:inline-block;
font-size: 20px;
font-weight: bold;
color: black;
margin:30px 18px;
}
.boxbottom{
width: 1170px;
height: 90px;
border-radius: 20px;
background:rgba(100,100,100,0.65);
margin:80px auto;
padding: 10px;
}
.box3{
width: 80px;
height: 80px;
background:pink;
box-shadow: 10px 10px 5px 1px purple;
margin:0px 550px;
}
.box3 p{
display: inline-block;
font-size: 20px;
font-weight: bold;
color: black;
padding: 30px 18px;
}
网友评论