HTML5+CSS3

一. HTML5是什么？有哪些新增标签(请举例说明)？

1. HTML5是HTML标准的最新演进版本。它是一个新的 HTML语言版本包含了新的元素，属性和行为，同时包含了一系列可以被用来让 Web 站点和应用更加多样化，功能更强大的技术。HTML5的一些新规则：新特性应该基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求(比如 Flash)；更优秀的错误处理 ；更多取代脚本的标记(新增了一些语义化的标签： 在HTML4当中，很明显的一个形象就是用DIV来进行任何的布局。)；HTML5应该独立于设备(对于各个移动设备说来，也是完美兼容的)。
2. 新增的标签：
(1).特殊内容元素：

• header------页面的头部
  
• main------页面的主体内容（每个页面只能有一个）
  
• section------划分区域（相当于html4中的div）
  
• article------划分文章每章节(article里面可以放多个aside)
  
• nav----导航区域
  
  ul>li
• footer------底部导航
  
• figure------新闻形式的组合（文字主标题 副标题和图片组合）
  

• hgroup------标题和子标题的组合
  

(2).form表单控件：

• email-----电子邮箱文本框
  
• tel-----电话号码
  
• url-----网页URL地址
  
• search-----搜索引擎
  
• date-----日期类型
  
• time-----时间
  
• range-----数值选择器(可设置范围)
  
• number-----只包含数字的输入框
  
• placeholder-----输入框提示信息
  
• autocomplete-----是否保存用户输入值
  默认为on，关闭为off
• autofocus-----获取输入焦点
  
• required-----此项必填，不为空
  Name:
• disabled-----表单禁用状态
  

  Last name:

• datalist 定义可选数据的列表。(与 input 元素配合使用，就可以制作出输入值的下拉列表)

选择你喜欢的游戏```

     

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

星巴克页面.png

    
        
        
        
    
    
        

            

                
                

                    

                        
主页
                        
咖啡及文化
                        
饮品及美食
                        
星享俱乐部
                        
在线订阅
                    
                
            
            

                

                    

                        
开启您的星享之旅！
                        
星享卡会员光顾星巴克时可积累星星，兑换好礼！每积累消费50元可获赠一颗星星。星星越多，好礼越多哦！点击这里开启您的星享惊喜之旅！
                    
                    

                        
星巴克饮品
                        

                            

                                
                                
美式咖啡
                            
                            

                                
                                
卡布奇诺
                            
                        
                        

                            

                                
                                
拿铁
                            
                            

                                
                                
摩卡
                            
                        
                    
                
                

                        

                            
家庭咖啡作坊帮助孩子们上大学
                            
2015年6月30日
                            
坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作坊”发展而来，其目的是为了控制其出产的咖啡豆品质。
                            
 他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且他们现在已经有能力为让子女上大学，接受更好的教育。
                            
 该地出产的咖啡：星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡豆
                            
阅读(100)评论(2)
                        
                        

                            
部落与商业文化的有机融合有助社区发展
                            
2015年5月20日
                            
2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。
                            
 在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。
                            
该地出产的咖啡：浓缩烘焙，祥龙咖啡豆阅读
                            
阅读(100)评论(2)
                        
                        

                            
 咖啡为这个新国家的种植户带来发展的希望
                            
2015年3月29日
                            
东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的 医疗服务。
                            
该地出产的咖啡：TimorLorosa'e (核心咖啡只在澳大利亚销售)
                            
阅读(100)评论(2)
                        
                    
            
        
    

/* css初始化 start */
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.fl {
    float: left;
}
/* css初始化 end */
.starbucks {
    width: 1100px;
    margin: 0 auto;
}
.naver {
    margin-left: 140px;
}
[class^="list"] {
    float: left;
    background: yellow;
    padding: 6px 10px;
    margin: 75px 10px 0 10px;
    font-weight: bold;
    font-size: 14px;
}
[class="list1"] {
    background: green;
}
.left_top {
    width: 360px;
    background: yellow;
    padding: 20px;
}
.left_top h4 {
    margin-bottom: 14px;
}
.left_top p {
    line-height: 30px;
}
.left_bellow {
    width: 360px;
    background: yellow;
    padding: 20px;
    margin-top: 10px;
}
[class^="lb"] {
    float: left;
    text-align: center;
    margin: 10px 20px 0 0; 
}
[class="lb_r"] {
    margin-right: 0;
}
.right {
    width: 620px;
    background: yellow;
    padding: 20px;
    margin-left: 10px;
}
.right p {
    line-height: 22px;
}

代码实现图

starbucks.png

11060404-549c7ce5ebbcf893.png

    
        
        
        
    
    
        

            
圆角
        
        

            
圆形
        
        

            
阴影
        
    

.squre {
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: green;
    text-align: center;
    line-height: 100px;
}
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: red;
    text-align: center;
    line-height: 100px;
}
.shadow {
    width: 100px;
    height: 100px;
    background: blue;
    text-align: center;
    line-height: 100px;
    box-shadow: 10px 10px 10px gray;
}

代码实现图

圆角.png