題目1（簡答題）： HTML5是什么？有哪些新增標(biāo)簽(請舉例說明)卵洗？
HTML5是什么
-HTML5是萬維網(wǎng)的和核心語言、標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用超文本標(biāo)記語言 （HTML）的第五次重大修改，HTML5是開放的web網(wǎng)絡(luò)平臺的奠基石斋射。
新增標(biāo)簽
-header-----頁面的頭部
<header></header>
-main-----頁面的主體內(nèi)容
<main></main>
-section-----劃分每一塊（section里面可以放多個article）
<section></section>
-article------劃分文章每章節(jié)（article里面可以放多個aside)
<article></article>
-nav-----導(dǎo)航區(qū)域
<nav></nav>
-footer-------底部
<footer></footer>
-figure-----里面可以放入圖片和文字
<figure></figure>
-hgroup-----標(biāo)題與子標(biāo)題的組合
<hgroup></hgroup>
題目2（簡答題）： input 有哪些新增類型(請舉例說明)症概？
-
1.email電子郵箱文本框
<input type="email" name="" id=""> -
2.tel電話號碼
<input type="tel" name="" id=""> -
3.url網(wǎng)頁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特定范圍內(nèi)的數(shù)值選擇器
<input type="range" name="" id=""> -
8.number只包含數(shù)字的輸入框
<input type="number" name="" id=""> -
9.placeholder輸入框提示信息
<input type="text" name="" id="" placeholder="請輸入用戶名"> -
10.autocomplete是否保存用戶輸入值
autocomplete是否保存用戶輸入值蕾额，默認(rèn)為on，關(guān)閉提示選擇off -
11.autofocus指定表單獲取輸入焦點
<input type="text" name="" autofocus> -
12.required此項必填彼城，不為空
Name: <input type="text" name="usr_name" required="required"> -
13.disabled表單禁用狀態(tài)
<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> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
- label 元素不會向用戶呈現(xiàn)任何特殊效果募壕。不過调炬，它為鼠標(biāo)用戶改進(jìn)了可用性。如果您在 label 元素內(nèi)點擊文本舱馅，就會觸發(fā)此控件缰泡。就是說，當(dāng)用戶選擇該標(biāo)簽時代嗤，瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上棘钞。
- <label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同依鸥。（規(guī)定 label 綁定到哪個表單元素）
題目3（編程題）：用html5標(biāo)簽做一個簡單的頁面布局（如下圖所示）
- 代碼如下
- HTML代碼
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作業(yè)</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="beijing">
<header></header>
<div class="bj2">
<nav>
<span>
<img src="img/logo.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/caffe-1.jpg" alt="">
<p>美式咖啡</p>
</figure>
<figure>
<img src="img/caffe-2.jpg" alt="">
<p>卡布奇諾</p>
</figure>
<figure>
<img src="img/caffe-3.jpg" alt="">
<p>拿鐵</p>
</figure>
<figure>
<img src="img/caffe-4.jpg" alt="">
<p>摩卡</p>
</figure>
</article>
</section>
<section class="sec2">
<p class="p2"> 家庭咖啡作坊幫助孩子們上大學(xué)
2015年6月30日
坎得利亞.塔拉茲是哥斯達(dá)黎加的一所家庭合作社趴捅，由哥斯達(dá)黎加最早成立的“微型作
坊”發(fā)展而來垫毙，其目的是為了控制其出產(chǎn)的咖啡豆品質(zhì)。
他們獲得了成功并最終得到了星巴克的垂青拱绑，這不僅改善了桑切斯一家的生活質(zhì)量综芥，而且
他們現(xiàn)在已經(jīng)有能力為讓子女上大學(xué)，接受更好的教育猎拨。
該地出產(chǎn)的咖啡:星巴克家嘲蛎辏咖啡豆，濃縮烘培红省，優(yōu)肯綜合咖啡豆
閱讀(100)評論(2)
</p>
<p class="p2">
部落與商業(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)
</p>
<p class="p2">
咖啡為這個新國家的種植戶帶來發(fā)展的希望
2015年3月29日
東帝汶硬毕，既是世界上最晚建立國家之一呻引，亦是最貧窮的國家之一。然而其出產(chǎn)獨特咖啡為
成千上萬依靠單一經(jīng)濟(jì)作物生活的農(nóng)戶帶來了新希望昭殉。一個擁有17,000名成員的農(nóng)戶協(xié)作
社正在和星巴克合作苞七，為咖啡種植者爭取更高的產(chǎn)品收購價的同時也為其社區(qū)提供基本的
醫(yī)療服務(wù)。
該地出產(chǎn)的咖啡: TimorLorosa'e (核心咖啡只在澳大利亞銷售)
閱讀(100)評論(2)
</p>
</section>
</main>
</div>
</div>
</body>
</html>```
-CSS代碼如下
*{
margin:0;
padding:0;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
.beijing{
width:100%;
}
header{
width: 100%;
height: 8px;
margin-bottom: 17px;
background:rgb(0, 117, 71);
}
.bj2{
width: 1000px;
height: 742px;
margin:0 auto;
}
nav{
width: 800px;
height: 103px;
margin-bottom: 20px;
margin:0 auto;
}
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: rgb(239, 229, 208);
margin-left: 7px;
margin-right: 7px;
color: rgb(37, 123, 88);
text-align: center;
line-height: 29px;
font-size: 13.5px;
font-weight: bold;
}
nav li:first-child{
width: 48px;
background: rgb(200, 185, 156);
}
nav li:last-child{
width: 76px;
}
.main{
width: 960px;
height: 618px;
}
.sec1{
float: left;
margin-right: 10px;
}
.art1{
width: 350px;
height:147px;
background: rgb(239, 229, 208);
}
h4{
color: rgb(37, 123, 88);
font-size: 18px;
padding-top: 18px;
margin-bottom: 12px;
margin-left: 20px;
}
.art1 a{
color: rgb(37, 123, 88);
text-decoration: none;
}
p{
font-size: 15px;
margin-bottom: 6px;
margin-top: 6px;
margin-left: 20px;
}
.art2{
width: 350px;
height: 500px;
background:rgb(239, 229, 208);
margin-top: 10px;
}
figure{
width:145px;
height:225px;
float: left;
margin-left: 10px;
display:block;
}
figure p{
margin-left: 0px;
text-align: center;
}
.sec2{
width: 600px;
height: 476px;
background: rgb(239, 229, 208);
float: left;
}
.sec2 .p2{
font-size: 14px;
margin-top: 5px;
margin-left: 20px;
}
效果圖如下：
第二道大題：利用本次課所學(xué)的CSS3相關(guān)知識實現(xiàn)如下圖所示的簡單效果
-
效果圖
2DUXUQQS21QB@~TK(X}NRSJ.png 代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.clearfix:after{
display:block;
content:'';
clear:both;
}
.round{
width:50px;
height:50px;
border-radius:10px;
background:rgb(37, 195, 83);
line-height:50px;
text-align:center;
float:left;
margin-left:75px;
}
.circular{
width:50px;
height:50px;
border-radius:25px;
background:rgb(37, 195, 83);
line-height:50px;
text-align:center;
float:left;
margin-left:75px;
}
.shade{
width:50px;
height:50px;
background:rgb(131, 121, 231);
line-height:50px;
text-align:center;
float:left;
margin-left:75px;
box-shadow:8px 8px 5px rgb(219, 43, 173);
}
</style>
</head>
<body>
<div class="clearfix">
<div class="round">圓角</div>
<div class="circular">圓形</div>
<div class="shade">陰影</div>
</div>
</body>
</html>
