一、
1.什么是HTML5
萬維網(wǎng)的核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言（HTML）的第五次重大修改。
HTML5繼承了HTML的部分特征，又增添了許多心的語法特征，比如語義特征、本地存儲特征、網(wǎng)頁多媒體特征等。此外HTML5還定義了處理非法文檔的具體細(xì)節(jié)，使得所有瀏覽器和客戶端程序能夠一致地處理語法錯誤。
2.舉例說明新增標(biāo)簽
- article------獨(dú)立文檔標(biāo)記
<article></article> - main------頁面的主體內(nèi)容
<main></main> - section------劃分每一塊
<section><section> - aside------添加附注
<aside></aside> - hgroup------標(biāo)注副標(biāo)題
<h1> 主標(biāo)題</h1> <hgroup>標(biāo)注副標(biāo)題</hgroup> - figure------添加插圖
<figure><img src=""></figure> - nav------導(dǎo)航
<nav></nav> - figcaption------添加圖題
<figure> <img src=""> <figcaption>圖片文字</figcaption> </figure>
3.input的新增類型
range特定范圍內(nèi)的數(shù)值選擇器
<input type ="range" name=" " id=" ">
email------電子郵箱文本框
<input type="email" name="" id="">
tel------電話號碼
<input type="tel" name="" id="">
url------網(wǎng)頁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------特定范圍內(nèi)的數(shù)值選擇器
<input type="email" name="" id="">
number------只包含數(shù)字的輸入框
<input type="number" name="" id="">
placeholder------輸入框提示信息
<input type="placeholder" name="" id="請輸入用戶名">
autocomplete------是否保存用戶輸入值
（*默認(rèn)為on，關(guān)閉提示選擇off）
<input type="autocomplete" name="" id="">
autofocus------指定表單獲取輸入焦點(diǎn)
<input type="text" name="" id="" autofocus>
disabled------表單禁用狀態(tài)
<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標(biāo)簽做一個簡單的頁面布局
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">星享卡會員光顧星巴克時可積累星星，兌換好禮!
每積累消費(fèi)500元，可兌換一顆星星。星星越多，好禮
越多哦！<font>點(diǎn)擊這里</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 ">家庭咖啡作坊幫助孩子們上大學(xué)</p>
<article class="m-l-20">
2015年6月30日
坎得利亞.塔拉茲是哥斯達(dá)黎加的一所家庭合作社由哥斯達(dá)黎加最早成立的"微型作
坊"發(fā)展而來，其目的是為了控制其出產(chǎn)的咖啡豆品質(zhì)。
他們獲得了成功并最終得到了星巴克的垂青，這不僅改善了桑切斯家的生活質(zhì)量，而且
他們現(xiàn)在已經(jīng)有能力為讓子女上大學(xué)，接受更好的教育。
該地出產(chǎn)的咖啡：星巴克家?？Х榷?jié)饪s烘焙，優(yōu)肯綜合咖啡豆
閱讀（100） 評論（2）
部落與商業(yè)文化的有機(jī)融合有助社區(qū)發(fā)展
2015年5月20日
2002年，比爾賈納接手了395英畝的奇甲巴莊園，這個原本已經(jīng)被荒廢的地方，如今卻已
經(jīng)成為國際知名的咖啡生產(chǎn)地，因其出產(chǎn)的咖啡品質(zhì)優(yōu)異，繼而成為了星巴克的供應(yīng)商。
在這個過程中，比爾積極投身于社區(qū)發(fā)展，同時也為原住民提供了工作機(jī)會。
該地出產(chǎn)的咖啡：濃縮烘焙，祥龍咖啡豆
閱讀（100）評論（2）
咖啡為這個新國家的種植戶帶來發(fā)展的希望
2015年3月29日
東帝汶即是世界上最晚建立國家之一，亦是最貧窮的國家之一。然而其出產(chǎn)獨(dú)特咖啡為
成千上萬依靠單一經(jīng)濟(jì)作物生活的農(nóng)戶帶來了新希望。一個擁有17,000名成員的農(nóng)戶協(xié)作
社正在和星巴克合作，為咖啡種植者爭取更高的產(chǎn)品收購價的同時也為其社區(qū)提供基本的
醫(yī)療服務(wù)。
該地出產(chǎn)的咖啡：TimorLorosa'e（核心咖啡只在澳大利亞銷售）
閱讀（100） 評論（2）
</article>
</section>
</main>
<footer>
@2015 Starbucks Corporation.All rights reserved.
</footer>
</body>
</html>
css
*{
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);
}
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: 12px;
display: inline-block;
margin-left: 17px;
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: 4px;
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相關(guān)知識實(shí)現(xiàn)特殊效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>work2</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 500px;
background: url(../img/555.jpg);
}
[class~="on"]{
width: 800px;
height: 260px;
margin:0 auto;
background: rgba(255,255,255,0.85);
border-radius: 50px;
margin-top: 10px;
}
[class="upon"]{
width: 800px;
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="upon">
<section class="shadow">
陰影
</section>
</section>
</body>
</html>
