一、

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

<label for="myBrowser">从列表中选择这个浏览器</label>
<input list="browsers" id="myBrowser" name="myBrowser"> 
<datalist id="browers">
          <option value="Chrome">
          <option value="Firefox">
          <option value="Opera">
</datalist>

4.用html5标签做一个简单的页面布局

html

</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.3homework1</title>
<link rel="stylesheet" href="../CSS/css3.css">
</head>
<body>
<main>
<span clearfix="clearfix">
<img src="../img/logo.png" alt="正在加载中" class="f-l">
<ul class="clearfix">
<li><strong>主页</strong></li>
<li><strong>咖啡及文化</strong></li>
<li><strong>饮品及美食</strong></li>
<li><strong>星想俱乐部</strong></li>
<li><strong>在线订阅</strong></li>
</ul>
</span>
<section class="left f-l">
<section class="first">
<h4>开始您的星享之旅</h4>
<p class="font">星享卡会员光顾星巴克时可积累星星，兑换好礼!

每积累消费500元，可兑换一颗星星。星星越多，好礼

越多哦！<font>点击这里</font>开启您的星享惊喜之旅！
</p>
</section>
<section class="second m-t-10">
<h4>星巴克饮品</h4>
<ul class="clearfix on font">
<li class="f-l"><img src="../img/caffe-1.jpg" alt="正在加载中"><figcaption>美式咖啡</figcaption> </li>
<li class="f-l"><img src="../img/caffe-2.jpg" alt="正在加载中"><figcaption>卡布奇诺</figcaption></li>
</ul>
<ul class="clearfix upon font">
<li class="f-l">
<figure>
<img src="../img/caffe-3.jpg" alt="正在加载中">
<figcaption>拿铁</figcaption>
</figure>
</li>
<li class="f-l">
<figure>
<img src="../img/caffe-4.jpg" alt="正在加载中">
<figcaption>摩卡</figcaption>
</figure>
</li>
</ul>
</section>
</section>
<section class="third f-l font ">
<p class="m-l-20 ">家庭咖啡作坊帮助孩子们上大学</p>
<article class="m-l-20">
2015年6月30日

坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社由哥斯达黎加最早成立的"微型作
坊"发展而来，其目的是为了控制其出产的咖啡豆品质。

他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯家的生活质量，而且
他们现在已经有能力为让子女上大学，接受更好的教育。

该地出产的咖啡：星巴克家常咖啡豆浓缩烘焙，优肯综合咖啡豆

阅读（100）评论（2）

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

2015年5月20日

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

经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。

在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。

该地出产的咖啡：浓缩烘焙，祥龙咖啡豆

阅读（100）评论（2）

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

2015年3月29日

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

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

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

医疗服务。

该地出产的咖啡：TimorLorosa'e（核心咖啡只在澳大利亚销售）

阅读（100）评论（2）
</article>
</section>
</main>
<footer>
@2015 Starbucks Corporation.All rights reserved.
</footer>
</body>
</html>

css




*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}
[class~="clearfix"]:after{
    display: block;
    content: '';
    clear: both;
}
[class~="font"]{
    color: rgb(68,71,70);
    font-size: 14px;
}
[class="f-l"]{
    float: left;
}
[class~="m-t-10"]{
    margin-top: 10px;
}
[class~="m-l-20"]{
    margin-left: 20px;
}
body{
    width: 100%;
    border-top: 8px solid rgb(0,111,71);
}







main{
    width:960px;
    height: 772px;
    margin: 0 auto;
}
main span [class="f-l"]{
    margin-top: 18px;
    margin-left: 20px;
}
main span li{
    float: left;
    color: rgb(0,111,71);
    margin-left: 14px;
    padding: 5px 10px;
    background: rgb(239,229,208);
    margin-top: 92px;
}
main span ul li:first-child{
    background: rgb(200,185,156);
    margin-left: 36px;
}
main [class~="left"]{
    width: 355px;
    height: 618px;
    float: left;
}
main [class="first"]{
    width: 355px;
    height: 144px;
    background: url(../img/background.gif);
}
main [class~="second"]{
    width: 355px;
    height: 468px;
    background: url(../img/background.gif);
}
main [class~="third"]{
    display: block;
    width: 595px;
    height: 478px;
    float: left;
    margin-left: 10px;
    background: url(../img/background.gif);
}
main [class="first"] h4{
    color: rgb(0,111,71);
    line-height: 52px;
    margin-left: 19px;
}
main [class~="left"] [class="first"] p{
    font-size: 12px;
    display: inline-block;
    margin-left: 17px;
    line-height: 20px;
}
main [class="first"] p font{
    color: rgb(0,111,71);
}
main [class~="second"] h4{
    color: rgb(0,111,71);
    line-height: 52px;
    margin-left: 19px;
}
main [class~="second"] [class~="on"] li{
    margin-left: 4px;
    margin-top: -10px;
}
main [class~="second"] [class~="on"] li figcaption{
    text-align: center;
}
main [class~="second"] [class~="upon"] li{
    margin-left: 5px;
}
main [class~="second"] [class~="upon"] li figcaption{
    text-align: center;
}
main [class~="third"] p:first-of-type{
    margin-top: 26px;
}
footer{
    width: 100%;
    height: 45px;
    background: rgb(103,92,71);
    color: white;
    text-align: center;
    line-height: 45px;
    font-size: 14px;
}

二、

利用css3相关知识实现特殊效果

<!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"] h3{
                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>

2018-第六次作业