2018-06-03

作者: 我还在等你_ceec | 来源:发表于2018-06-03 23:52 被阅读0次

神奇的绿豆
神奇的绿豆（53
烁—第10期拆书训练营—第一周第一次作业—一颗
22-2018周检视
日精进打卡（第331天）
夏秋里的东莞
心晴6月4号觉察
其实你不懂我的爱——读《红楼梦》观曹雪芹的内心独白
线程并发-1. 线程池
2018少儿平安福

一、

1.HTML5是什么

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。
HTML5继承了HTML的部分特征，又增添了许多心的语法特征，比如语义特征、本地存储特征、网页多媒体特征等。此外HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。

2.举例说明新增标签

header------页面的头部
<header></header>
--main------页面的主体内容
<main></main>
section------划分每一块
<section><section>
aside------添加附注
<aside></aside>
article------独立文档标记
<article></article>
hgroup------标注副标题
<h1> 主标题</h1> <hgroup>标注副标题</hgroup>
figure------添加插图
<figure><img src=""></figure>
figcaption------添加图题

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

nav------导航
<nav></nav>

3.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="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">星享卡会员光顾星巴克时可积累星星，兑换好礼!<br>
                每积累消费500元，可兑换一颗星星。星星越多，好礼<br>
                越多哦！<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日<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）

            </article>
        </section>
    </main>
    <footer>
        @2015 Starbucks Corporation.All rights reserved.
    </footer>
</body>
</html>

css
/*样式初始化 start*/
*{
    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);
}
/*样式初始化 end*/
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: 14px;
    display: inline-block;
    margin-left: 19px;
    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: 5px;
    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相关知识实现特殊效果

如图所示

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>homework2</title>
  <style>
      *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }
      body{
          width: 100%;
          height: 500px;
          background: url(../img/555.jpg);
      }
      [class~="on"]{
          width: 1200px;
          height: 260px;
          margin:0 auto;
          background: rgba(255,255,255,0.85);
          border-radius: 50px;
          margin-top: 10px;
      }
          [class="upon"]{
          width: 1200px;
          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="middle">
      <h3>2.div阴影</h3>
  </section>
  <section class="upon">
          <section class="shadow">
              阴影      
          </section>
  </section>
</body>
</html>

神奇的绿豆
文~紫玉姑娘 2018-06-03 亲爱的文文，...
神奇的绿豆（53
文~紫玉姑娘 2018-06-03 亲爱的文文，...
烁—第10期拆书训练营—第一周第一次作业—一颗
Sonnar 关注 2018-06-03 13:56 · 字数 783 · 阅读 20 · 拆书帮将全部内容复制...
22-2018周检视
2018年第22周起始时间：2018-05-28 结束时间：2018-06-03 一、目标完成情况...
日精进打卡（第331天）
2018-06-03 姓名：李义公司：........ 组别：259期利他二组【知~学习】背诵六项精进大纲...
夏秋里的东莞
（2018-06-03）天烧地烫热如蒸，野外劳工似雨淋。赤背遮羞熬日子，但求冬季早来临。
心晴6月4号觉察
心晴芳菲 2018-06-03 15:42 · 字数 242 · 阅读 0 · 日记本 1.事件:去蒋姐家聊天，谈...
其实你不懂我的爱——读《红楼梦》观曹雪芹的内心独白
二月惊蛰鲁 2018-06-03 21:27 · 字数 1358 · 阅读 0 · 日记本 “为什么我的眼里常含泪...
线程并发-1. 线程池
标注：本文为个人整理，仅做自己学习参考使用，请勿转载和转发2018-05-29: 初稿2018-06-03: 第一...
2018少儿平安福
少儿平安福2018：281项意外，109种疾病，3次肿瘤，3次轻症，最高赔580% 2018-06-03 ——林上...