一、
1.什么是HTML5
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
HTML5继承了HTML的部分特征，又增添了许多心的语法特征，比如语义特征、本地存储特征、网页多媒体特征等。此外HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
2.举例说明新增标签
article------独立文档标记
<article></article>
main------页面的主体内容
<main></main>
section------划分每一块
<section><section>
aside------添加附注
<aside></aside>
hgroup------标注副标题
<h1> 主标题</h1> <hgroup>标注副标题</hgroup>
figure------添加插图
<figure><img src=""></figure>
nav------导航
<nav></nav>
figcaption------添加图题
<figure> <img src=""> <figcaption>图片文字</figcaption> </figure>
3.input的新增类型
range特定范围内的数值选择器
<input type ="range" name=" " id=" ">
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="email" name="" id="">
number------只包含数字的输入框
<input type="number" name="" id="">
placeholder------输入框提示信息
<input type="placeholder" name="" id="请输入用户名">
autocomplete------是否保存用户输入值
（*默认为on，关闭提示选择off）
<input type="autocomplete" name="" id="">
autofocus------指定表单获取输入焦点
<input type="text" name="" id="" autofocus>
disabled------表单禁用状态
<input type="text" name="" id="" disabled>
datalist------与input元素配合使用，来定义input可能的值
<input list="" id="" name=""><datalist id=""><option value=""></datalist>
4.用html5标签做一个简单的页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>starbucks</title>
<style type="text/css">
*{
list-style: none;
text-decoration: none;
}
body{
background-color: #ffffff;
font: 14px 微软雅黑, 黑体, Verdana, Arial, sans-serif;
color: #333333;
border-top: 8px solid #006f47;
}
.wrap
{
width: 960px;
margin: 0 auto;
}
.top-header{
margin: 10px 0;
height: 120px;
}
.starbucks-logo
{
float: left;
margin-left: 20px;
}
.top-menu
{
float: left;
margin-top: 83px;
margin-left: 30px;
color: #006f47;
}
.top-menu ul li{
display: inline;
color: #006f47;
background-color: #efe5d0;
padding: 5px 10px;
margin: 0 5px;
}
section{
margin-left:300px;
width:400px;
height:180px;
background:url(../imgs/background.gif);
float:left;
}
h3{
color:#006f47;
margin-left:20px;
line-height:50px;
}
p{
line-height: 27px;
}
.a{
position: relative;
top:200px;
left:-700px;
width:400px;
height:500px;
background:url(../imgs/background.gif);
float: left;
}
.b{
color:color:#006f47;
}
img{
margin:5px 5px;
}
.c{
background-image:url(../imgs/background.gif);
width:700px;
height:500px;
position: relative;
top:-500px;
left:720px;
float: left;
font-size: 15px;
}
</style>
</head>
<body>
<div class="wrap">
<header class="top-header">
<img class="starbucks-logo" src="../imgs/logo.png" alt="">
<nav class="top-menu">
<ul>
<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>
</div>
<section>
<article>
<h3>开启您的星享之旅</h3>
<p class="b">
星享卡会员光顾星巴克时可积累星星，兑换好礼！
每积累消费50元可获赠一颗星星。星星越多，好礼
越多哦！
<a href="#">点击这里</a>开启您的星享惊喜之旅！
</p>
</article>
</section>
<section class="a">
<h3 class="b">星巴克饮品</h3>
<img src="../imgs/caffe-1.jpg">
<img src="../imgs/caffe-2.jpg">
<img src="../imgs/caffe-3.jpg">
<img src="../imgs/caffe-4.jpg">
</section>
<div class="c">
家庭咖啡作坊帮助孩子们上大学
坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社由哥斯达黎加最早成立的"微型作
坊"发展而来，其目的是为了控制其出产的咖啡豆品质。
他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯家的生活质量，而且
他们现在已经有能力为让子女上大学，接受更好的教育。
该地出产的咖啡：星巴克家常咖啡豆浓缩烘焙，优肯综合咖啡豆
阅读（100） 评论（2）
部落与商业文化的有机融合有助社区发展
2015年5月20日
2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已
经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。
这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。
该地出产的咖啡：浓缩烘焙，祥龙咖啡豆
阅读（100）评论（2）
咖啡为这个新国家的种植户带来发展的希望
2015年3月29日
东帝汶即是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为
成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作
社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的
医疗服务。
该地出产的咖啡：TimorLorosa'e（核心咖啡只在澳大利亚销售）
</div>
</body>
</html>
二、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work2</title>
<style>
*{ margin: 0; padding: 0; box-sizing: border-box; }
body{ width: 100%;
height: 500px;
background: url(../img/555.jpg);
}
[class~="on"]
{ width: 800px;
height: 260px;
margin:0 auto;
background: rgba(255,255,255,0.85);
border-radius: 50px;
margin-top: 10px;
}
[class="upon"]
{ width: 800px;
height: 270px;
margin:0 auto;
background: rgba(255,255,255,0.85);
border-radius: 50px;
}
[class~="on"] [class="chamfer"]
{width: 100px;
height: 100px;
border-radius: 20px;
background: rgb(37,195,183);
text-align: center;
line-height: 100px;
float: left;
margin-top: 50px;
}
[class~="on"] [class="circle"]
{ width: 100px;
height: 100px;
border-radius: 50px;
background: rgb(37,195,183);
text-align: center;
line-height: 100px;
float: left;
margin-left: 50px;
margin-top: 50px;
}
[class="auto"]
{ margin: 0 auto;
width: 250px;
height: 200px;
}
[class="middle"]
{height: 50px;
width: 300px;
margin-left: 50px;
color: rgb(22,181,226);
text-shadow: 2px 2px 2px rgb(22,181,226);
}
[class="shadow"]
{ width: 100px;
height: 100px;
background: rgb(31,128,231);
margin: 0 auto;
box-shadow:8px 8px 4px rgb(219,43,173);
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<section class="on clearfix">
<section class="auto">
<section class="chamfer">角 </section>
<section class="circle">圆</section>
</section>
</section>
<section class="upon">
<section class="shadow">阴影</section>
</section>
</body>
</html>
网友评论