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 Starbucks Corporation. All rights 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>
