星巴克作业

作者: miss_ca93 | 来源:发表于2018-06-07 15:02 被阅读0次

一.HTML5是什么

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括：
· 新的解析规则增强了灵活性
· 新属性
· 淘汰过时的或冗余的属性
· 一个HTML5文档到另一个文档间的拖放功能
· 离线编辑
· 信息传递的增强
· 详细的解析规则
· 多用途互联网邮件扩展（MIME）和协议处理程序注册
· 在SQL数据库中存储数据的通用标准（Web SQL）
HTML5在2007年被万维网联盟(W3C)新的工作组采用。这个工作组在2008年1月发布了HTML 5的首个公开草案。眼下，HTML5处于“呼吁审查”状态，W3C预期它将在2014年年底达到其最终状态。
** 特性
语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
设备容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能，与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics & Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性（Class: Performance & Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

二.举例说明新增标签

header------页面的头部
<header></header>
main-------页面的主体内容部分
<main></main>
section------划分区域
<section></section>(section里边可以放多个article)
article------划分文章每一个章节
<article></article>(article里边可以放多个aside)
小总结

<article>     
        <h3>三级标题</h3>
        <p>我叫陈雪妃</p>
        <aside>我最白，是的毫无疑问，有疑问也憋着！！</aside>
        <aside>我最白，是的毫无疑问，有疑问也憋着！！</aside>
        <aside>我最白，是的毫无疑问，有疑问也憋着！！</aside>
</article>

nav------导航区域
<nav>ul>li</nav>
footer------底部导航区域
<footer></footer>
figure------里边可以放图片和文字

 <figure>
<img src="">
<figcaption>图片文字</figcaption>
</figure>

hgroup-------标题与子标题的组合
<hgroup></hgroup>

三.举例说明新增表单

1.email电子邮箱文本框
<input type="email" name="" id="">
2.tel电话号码文本框
<inpu 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="placeholder" 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.disable表单禁用状态
<p>Last name:<input type="text" name="Iname" 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="Opera">
      <option value="Safari">
      <option value="Internet Explorer">
      <option value="Microsoft Edge">
</datalist>
<input type="submit" value="提交">

定义和用法

<label>标签为input元素定义标注（标记）。
label元素不会向用户呈现任何特殊效果。不过，他为鼠标用户改进了可用性。如果在label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会将焦点自动转到和标签相关的表单控件上。
<label>标签的for属性应当与相关元素的id属性相同。（规定label绑定到哪个表单元素上）

css3特效HTML

'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3特效</title>
<style>
[class="wrap"]{
width: 50%;
height: 50%;
background: #999;
}
[class="yuanjaio"]{
width: 150px;
height: 150px;
border-radius: 26px;
background: yellow;
text-align: center;
line-height: 150px;
float: left;
}
[class="yuan"]{
width: 150px;
height: 150px;
border-radius: 75px;
background: red;
text-align: center;
line-height: 150px;
float: left;
margin: 0px 50px;
}
[class="yinying"]{
width: 150px;
height: 150px;
border-radius: 75px;
background:grey;
text-align: center;
line-height: 150px;
float: left;
box-shadow: 10px 6px 7px 5px red;
-webkit-text-stroke: 1px yellow;
}
</style>
</head>
<body>
<section class="wrap">
<section class="yuanjaio">
圆角
</section>
<section class="yuan">
圆
</section>
<section class="yinying">
阴影
</section>
</section>
</body>
</html>
'''

css3特效如上图所示

星巴克主页html

'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>星巴克主页</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header>
<div clearfix="clearfix">
<img class="floatleft" src="img/logo.png" alt="星巴克咖啡">
<nav class="top-menu floatleft">
<ul clearfix="clearfix">
<li><a href="#" title="星巴克主页">主页</a></li>
<li><a href="#">咖啡及文化</a></li>
<li><a href="#">饮品及美食</a></li>
<li><a href="#">星享俱乐部</a></li>
<li><a href="#">在线订购</a></li>
</ul>
</nav>
<main class="form floatleft">
<div class="left">
<section class="first">
<figure class="font clearfix">
<h3>开启您的星享之旅</h3>
<p class="first1">星享卡会员光顾星巴克可积累星星，兑换豪礼！</p>
<p class="first2">每累积消费50元可获赠一颗星星，星星越多好礼越多哦！<a href="#">点击这里</a>开启您的星享惊喜之旅！</p>
</figure>
</section>
<section class="second">
<figure class="font clearfix">
<h3>星巴克饮品</h3>
<figure class="second1">
<img src="img/caffe-1.png" alt="">
<figcaption>美式咖啡</figcaption>
</figure>
<figure class="second1">
<img src="img/caffe-2.png" alt="">
<figcaption>卡布奇诺</figcaption>
</figure>
<figure class="second1">
<img src="img/caffe-3.png" alt="">
<figcaption>拿铁</figcaption>
</figure>
<figure class="second1">
<img src="img/caffe-4.png" alt="">
<figcaption>摩卡</figcaption>
</figure>
</figure>
</section>
</div>
<section class="third">
<article class="font">
<p>家庭咖啡作坊帮助孩子们上大学</p>
<aside class="first1">2015年6月30日

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

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

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

阅读（100）评论（2）

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

2015年5月20日

2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。

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

阅读（100）评论（2）

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

2015年3月29日

东帝汶即是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的医疗服务。

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

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

星巴克主页css-style

'''
*{
margin:0px;
padding:0px;
}
body{
width:1172px;
height:822px;
border-top:8px solid #006f47;
}
header [class~="clearfix"]:after{
display:block;
content:'';
clear:both;
}
header{
width:965px;
height:767px;
margin: 0px auto;
}
[class="top-menu"]{
width: 460px;
height: 30px;
}
[class~="floatleft"]{
float: left;
}
ul li a{
color: #0f7048;
line-height:29px;
text-decoration: none;
font-weight: bold;
}
ul li{
background: #efe5d0;
width: 90px;
height: 29px;
float: left;
text-align:center;
font-size: 15px;
list-style: none;
margin-right: 15px;
}
[class~="top-menu"]{
margin-top:80px;
margin-left:32px;
}
[clearfix="clearfix"] li:first-child{
background: #c8b99c;
}
[class="floatleft"]{
margin-left: 20px;
}
h3{
line-height: 52px;
color: #0f7048;
}
[class="left"]{
width: 350px;
height: 620px;
float: left;
}
[class~="form"]{
width: 965px;
height: 620px;
}
[class~="font"]{
margin-left: 20px;
}
[class="first"]{
width: 350px;
height: 147px;
background:url(../img/background.gif);
margin-bottom:11px;
margin-right:10px;
}
[class="first1"] a{
color: #0f7048;
text-decoration: none;
}
[class="second"]{
width: 350px;
height: 463px;
background:url(../img/background.gif);
}
[class="second1"]{
width:145px;
height:195px;
text-align: center;
float: left;
margin-right: 20px;
}
[class="third"]{
width: 604px;
height: 477px;
background:url(../img/background.gif);
float: left;
margin-left: 11px;
}
[class="font"]{
margin:23px 28px 23px 20px;
font-size: 14px;
}
footer{
width:1172px;
height: 45px;
background: #675c47;
line-height: 45px;
text-align: center;

}'''

咖啡作业第一页如上图所示

咖啡作业第二页如上图所示

星巴克作业

一.HTML5是什么

二.举例说明新增标签

三.举例说明新增表单

定义和用法

css3特效HTML

星巴克主页html

星巴克主页css-style

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读