html5、css3特效、form新增表单

2018-06-07 本文已影响0人 JasmynH

html5是什么

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

h5新增标签

头部
<header></header>
主要内容
<main></main>（每个页面只能出现一次）
划分区域：<section> （ section里可以放多个article）

划分文章章节：<article> （article里可以放多个aside）

`<section> 
    <article>
       <aside>内容 </aside>
    </article>   
</section>`

`<section>  
    <h3>标题</h3>
    <p>文字</p>
    <aside>内容</aside>
</section>`

导航

`<nav>
     <ul>
         <li>内容
         <li>内容
     </ul>
 </nav>

figure——放图片文字

`<figure>
     <p>文字</p>
     <img>图片
     <h3>标题</h3>
 </figure>`

hgroup——标题与子标题结合

`<hgoup>
     <h2>标题</h2>
     <h4>标题</h4>
 </hgroup>`

底部
<footer></footer>

input有哪些新增类型

1.email电子邮箱文本框
```
  `<input type="email" name="" id="">`
```
2.tel电话号码
```
  `<input 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="text" 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.disabled表单禁用状态

   `<p>Last name: <input type="text" name="lname" 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="Internet Explorer">
    <option value="Opera">
    <option value="Safari">
    <option value="Microsoft Edge">
</datalist>
<input type="submit" value="提交">

定义和用法

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

用h5标签做的简单界面

例图

星巴克页面.png

效果图

image.png

代码

html

            `  <!DOCTYPE html>
               <html lang="en">
               <head>
               <meta charset="utf-8">
                  <link rel="stylesheet" href="../css/1.css" class="">
                  </head>                   
                  <body>
                  <div id="bj">
                 <header></header>
                   <div class="bj2">
                    <nav>

                  <span><img src="../img/1.png" height="103" width="119" alt="" class=""></span>
                      <ul>
                  <li>主页</li>
                  <li>咖啡及文化</li>
                  <li>饮品及美食</li>
                  <li>星享俱乐部</li>
                  <li>在线订阅</li>
                      </ul>
                  </nav>
                      
                 <main class="main clearfix">
                 <section class="sec1">
                 <article class="art1">
              <h4>开启您的星享之旅</h4>
              <p>星享卡会员光顾星巴克时可积累星星，兑换好礼！</p>
              <p>每积累消费50元可赠一颗星星。星星越多，好礼</p>
              <p>越多哦？<a href="#">点击这里</a>开启您的星享惊喜之旅！</p>

              </article>

               <article class="art2">
                  <h4>星巴克饮品</h4>
                  <figure>
                      <img src="../img/2.png" height="162" width="145" alt="" class="">
                      <p>美式咖啡</p>
                  </figure>
                  <figure>
                      <img src="../img/3.png" height="162" width="145" alt="" class="">
                      <p>卡布奇诺</p>
                  </figure>
                  <figure>
                      <img src="../img/4.png" height="162" width="145" alt="" class="">
                      <p>拿铁</p>
                  </figure>
                  <figure>
                      <img src="../img/5.png" height="162" width="145" alt="" class="">
                      <p>摩卡</p>
                  </figure>
              </article>
          </section>

          <section class="sec2">
              <p class="p2">
                  家庭咖啡作坊帮助孩子们上大学
              <br>
                  2015年6月30日
              <br>
                  坎得利亚.塔拉兹是哥斯达黎加的一所家庭合作社，由哥斯达黎加最早成立的“微型作
              <br>
                  坊”发展而来，其目的是为了控制其出产的咖啡豆品质。
              <br>
                  他们获得了成功并最终得到了星巴克的垂青，这不仅改善了桑切斯一家的生活质量，而且
              <br>
                  他们现在已经有能力为让子女上大学，接受更好的教育。
              <br>
                  该地出产的咖啡:星巴克家常咖啡豆，浓缩烘培，优肯综合咖啡豆
              <br>
                  阅读(100)评论(2)
              </p>
              <p class="p2">
                  部落与商业文化的有机融合有助社区发展
              <br>
                  2015年5月20日
              <br>
                  2002年，比尔贾纳接手了395英亩的奇甲巴庄园，这个原本已经被荒废的地方，如今却已
              <br>
                  经成为国际知名的咖啡生产地，因其出产的咖啡品质优异，继而成为了星巴克的供应商。
              <br>
                  在这个过程中，比尔积极投身于社区发展，同时也为原住民提供了工作机会。
              <br>
                  该地出产的咖啡:浓缩烘焙，祥龙咖啡豆阅读
              <br>
                  (100)评论(2)
              </p>
              <p class="p2">
                  咖啡为这个新国家的种植户带来发展的希望
              <br>
                  2015年3月29日
              <br>
                  东帝汶，既是世界上最晚建立国家之一，亦是最贫穷的国家之一。然而其出产独特咖啡为
              <br>
                  成千上万依靠单一经济作物生活的农户带来了新希望。一个拥有17,000名成员的农户协作
              <br>
                  社正在和星巴克合作，为咖啡种植者争取更高的产品收购价的同时也为其社区提供基本的
              <br>
                  医疗服务。
              <br>
                  该地出产的咖啡: TimorLorosa'e (核心咖啡只在澳大利亚销售)
              <br>
                  阅读(100)评论(2)
              </p>
          </section>
          </main>
      </div>

      <footer>
          @2015 &nbsp;Starbucks&nbsp;Corporation.&nbsp;All&nbsp;rights&nbsp;reserved.
      </footer>
  </div>
 </body>
 </html>`

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
代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        .clearfix:after{
            display:block;
            content:'';
            clear:both;
        }
           .bj{
            width:400px;
            height:100px;
            padding-top:20px;
           }
           .square{
            width:50px;
            height:50px;
            border-radius:10px;
            background:#20c4b8;
            line-height:50px;
            text-align:center;
            float:left;
            margin-left:50px;
           }
           .round{
            width:50px;
            height:50px;
            border-radius:25px;
            background:#20c4b8;
            line-height:50px;
            text-align:center;
            float:left;
            margin-left:50px;
           }
           .shade{
            width:50px;
            height:50px;
            background:#1981e8;
            line-height:50px;
            text-align:center;
            float:left;
            margin-left:50px;
            box-shadow:8px 8px 5px #db28ae;
           }
        </style>
    </head>
    <body>
    <div class="bj clearfix">
        <div class="square">圆角</div>
        <div class="round">圆形</div>
        <div class="shade">阴影</div>
    </div>
    </body>
</html>