html5是什么

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改（这是一项推荐标准、外语原文：[W3C] Recommendation）
html5是集html语言为基础，并且增加了一些新的代码字符进行更好效果实现的一种编程语言。 html5就是包括HTML、CSS和JavaScript在内的一套技术组合，强化了Web网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。所以说未来HTML5将成为 HTML、XHTML 以及 HTML DOM 的新标准。但是HTML5 仍处于完善之中。然而，大部分现代[浏览器]已经具备了某些 HTML5 支持。

h5新增标签

头部
主要内容

（每个页面只能出现一次）
划分区域：
（ section里可以放多个article）
划分文章章节：
（article里可以放多个aside）
```
` 
    
       内容 
       
`
```
```
`  
    标题
    文字
    内容
`
```

导航

figure——放图片文字

`
     文字
     图片
     标题
 `

hgroup——标题与子标题结合
```
`
     标题
     标题
 `
```
底部

input有哪些新增类型

1.email电子邮箱文本框
```
  ``
```
2.tel电话号码
```
  ``
```
3.url网页URL地址
```
  ``
```
4.search搜索引擎
```
  ``
```
5.date日期类型
```
  ``
```
6.time时间
```
  ``
```
7.range特定范围内的数值选择器
```
  ``
```
8.number只包含数字的输入框
```
  ``
```
9.placeholder输入框提示信息
```
  ``
```
10.autocomplete是否保存用户输入值

(autocomplete是否保存用户输入值，默认为on，关闭提示选择off)
11.autofocus指定表单获取输入焦点
```
  ``
```
12.required此项必填，不为空
```
   `Name: `
```
13.disabled表单禁用状态
```
   `Last name: `
```

14.datalist选项列表与input元素配合使用，来定义input可能的值

从列表中选择这个浏览器

定义和用法

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

用h5标签做的简单界面

例图

星巴克页面.png

效果图

image.png

代码

html

            `  
               
               
               
                  
                                     
                  
                  
                 
                   
                    

                  
                      
                  主页
                  咖啡及文化
                  饮品及美食
                  星享俱乐部
                  在线订阅
                      
                  
                      
                 
                 
                 
              开启您的星享之旅
              星享卡会员光顾星巴克时可积累星星，兑换好礼！
              每积累消费50元可赠一颗星星。星星越多，好礼
              越多哦？点击这里开启您的星享惊喜之旅！

              

               
                  星巴克饮品
                  
                      
                      美式咖啡
                  
                  
                      
                      卡布奇诺
                  
                  
                      
                      拿铁
                  
                  
                      
                      摩卡
                  
              
          

          
              
                  家庭咖啡作坊帮助孩子们上大学
              

                  2015年6月30日
              

                  坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作
              

                  坊”发展而来，其目的是为了控制其出产的咖啡豆品质。
              

                  他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且
              

                  他们现在已经有能力为让子女上大学，接受更好的教育。
              

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

                  阅读(100)评论(2)
              
              
                  部落与商业文化的有机融合有助社区发展
              

                  2015年5月20日
              

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

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

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

                  该地出产的咖啡:浓缩烘焙，祥龙咖啡豆阅读
              

                  (100)评论(2)
              
              
                  咖啡为这个新国家的种植户带来发展的希望
              

                  2015年3月29日
              

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

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

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

                  医疗服务。
              

                  该地出产的咖啡: TimorLorosa'e (核心咖啡只在澳大利亚销售)
              

                  阅读(100)评论(2)
              
          
          
      

      
          @2015  Starbucks Corporation. All rights reserved.
      
  
 
 `

css

` *{
        margin:0px;
        padding:0px;
   }

  .cearfix:after{
        display: block;
        content: "";
        clear: both;
  }

   #bj{
        width: 1172px;
      }
   header{
           width: 1172px;
           height: 8px;
           margin-bottom: 17px;
           background: #006f47;
     }
   .bj2{
          width: 961px;
          height: 742px;
          margin:0 auto;
     }
    nav{
         width: 961px;
         height: 103px;
         margin-bottom: 20px;
     }
    nav span{
             float: left;
             width: 161px;
             height: 103px;
             display: block;
     }
    nav img{
            margin-left: 21px;
     }
    nav ul{
            width: 464px;
            height: 29px;
            background: white;
            list-style: none;
            float: left;
            margin-top: 71px;
     }
    nav li{
           float: left;
           width: 90px;
           height: 29px;
           background: #efe5d0;
           margin-left: 7px;
           margin-right: 7px;
           color: #327551;
           text-align: center;
           line-height: 29px;
           font-size: 13.5px;
           font-weight: bold;
     }
     nav li:first-child{
                        width: 48px;
                        background: #c8b99c;
     }
     nav li:last-child{
                       width: 76px;
      }
     .main{
            width: 960px;
            height: 618px;
      }
     .sec1{
           float: left;
           margin-right: 10px;
       }
     .art1{
           width: 350px;
           height:147px;
           background: #efe5d0;
       }
       h4{
          color: #006f47;
          font-size: 18px;
          padding-top: 18px;
          margin-bottom: 12px;
          margin-left: 20px;
        }
       .art1 a{
               color: #006f47;
               text-decoration: none;
        }
       p{
         font-size: 15px;
         margin-bottom: 6px;
         margin-top: 6px;
         margin-left: 20px;
        }
       .art2{
             width: 350px;
             height: 461px;
             background:#efe5d0;
             margin-top: 10px;
        }
        figure{
               float: left;
               margin-left: 20px;
        }
         figure p{
                   margin-left: 0px;
                   text-align: center;
         }
         .sec2{
                width: 600px;
                height: 476px;
                background: #efe5d0;
                float: left;
         }
         .sec2 .p2{
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 20px;
         }
         footer{
                width: 1172px;
                height: 45px;
                margin-top: 10px;
                background: #7d7566;
                text-align: center;
                line-height: 45px;
                color: #fbf3e1;
         }`

*CSS3特效

效果图

image.png
代码

html5、css3特效、form新增表单

html5是什么

h5新增标签

标题

标题

标题

标题

input有哪些新增类型

用h5标签做的简单界面

开启您的星享之旅

星巴克饮品

*CSS3特效

你可能感兴趣的:(html5、css3特效、form新增表单)