2018.10.30作業
阿新 • • 發佈：2018-11-01
第二章
1.無序列表、有序列表和定義列表適用場合分別是什麼？
有序列表使用編號來記錄專案的順序 比如 熱搜榜
無序列表使用專案符號來記錄無序的專案 比如 廣告框
自定義列表它由兩個部分組成：定義條件和定義描述 比如 列印的試卷選擇題 或者百度詞條
2.表格的跨行、跨列分別使用什麼屬性？要實現一個跨3行2列的單元格需要哪幾個步驟？
colspan=“所跨的列數” rowspan=“所跨的行數”
1.建立一個大於3行2列的表格 比如4行4列 2.在所需位置寫入程式碼 colspan=“3” rowspan=“2” 3.刪除多餘的行列
3.HTML5中的媒體元素有哪些？怎麼實現不同瀏覽器都能播放？
vide視訊元素 audio音訊元素
使用元素source
4.製作百度知道頁面中的“品牌全知道”板塊。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>品牌全知道</title> </head> <body> <img src="images/iknowshouye.jpg"> <h3>品牌全知道</h3> <ul> <li><img src="images/icon-1.jpg">理膚泉敏感全知道</li> <li><img src="images/icon-2.jpg">葳資健康肌膚全知道</li> <li><img src="images/icon-3.jpg">中信銀行全知道</li> <li><img src="images/icon-4.gif">Windows7全知道</li> <li><img src="images/icon-5.jpg">海信電視全知道</li> <li><img src="images/icon-6.jpg">多美滋全知道</li> <li><img src="images/icon-7.jpg">三星手機全知道</li> </ul> </body> </html>
5.使用HTML5的結構元素佈局貴美商城購物車頁面。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <header> <h1>頭部</h1> </header> <section> <h1>主體部分</h1> </section> <footer> <h1>尾部</h1> </footer> </body> </html>
第三章
1.< label >標籤的for屬性表示什麼？
表示指定當滑鼠單擊標註文字時，焦點對應的表單元素
2.哪些元素自身就有驗證功能？
郵箱< email > 網址< url >
3.請用HTML5實現申請表單，相關要求如下：
>教育程度：預設選擇碩士。
>國籍：有美國，澳大利亞，日本，新加坡，預設選中澳大利亞。
>單擊文字相應的文字框得到焦點。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>申請表</title>
<style>
body{
background-color: azure;
}
</style>
</head>
<body>
<center>
<form method="post" action="">
<h1>申請表</h1>
<table>
<tr>
<td> <p>
<label for="name1">姓名：</label>
<input name="name" type="text" value="" size="25" id="name1" required/>
</p></td>
</tr>
<tr>
<td> <p>教育程度：<input name="xuewei" type="radio" value="碩士" id="xuewei1" checked/>
<label for="xuewei1">碩士</label>
<input name="xuewei" type="radio" value="博士" id="xuewei2">
<label for="xuewei2">博士</label>
</p></td>
</tr>
<tr>
<td> <p>
<label for="email1">常用郵箱：</label>
<input name="email" type="email" value="" id="email1" required/>
</p></td>
</tr>
<tr>
<td>
<p>性別：<input name="sex" type="radio" value="男" id="sex1">
<label for="sex1">男</label>
<input name="sex" type="radio" value="女" id="sex2">
<label for="sex2">女</label>
</p></td>
</tr>
<tr>
<td><p><label for="age1">年齡：</label><input name="age" type="text" value="" id="age1" required/></p></td>
</tr>
<tr>
<td><p><label for="money1">月薪：</label><input name="money" type="text" value="" size="10" id="money1" required/></p></td>
</tr>
<tr>
<td> <p><label for="fuzhu">附註：</label><textarea name="textarea" cols="25" rows="4" placeholder="請在這裡輸入附註" id="fuzhu"></textarea></p></td>
</tr>
<tr>
<td> <p>國籍：<select name="guoji">
<option value="美國">美國</option>
<option value="澳大利亞" selected/>澳大利亞</option>
<option value="日本">日本</option>
<option value="新加坡">新加坡</option>
</select></p></td>
</tr>
</table>
<p><input name="tijiao" type="submit" value="提交"> <input name="chozhi" type="reset" value="重置"></p>
</form>
</center>
</body>
</html>
4.請用HTML5實現電子產品調查表表單。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>電子產品調查表</title>
<style>
body{
background-color: cornsilk;
}
h1{
color: #66CCFF;
}
</style>
</head>
<body>
<h1>American Metric電子產品調查表</h1>
<form action="" method="post">
<p><label for="name1">姓名：</label><input type="text" name="name" id="name1" value="" placeholder="輸入必須是2-6位字元"pattern="[-\w\u4E00-\u9FA5]{2,6" required/></p>
<p><label>購買日期：</label>
<select required/>
<option value="">----</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>年
<select required/>
<option value="">----</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select >月
<select required/>
<option value="">----</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>日
</p>
<p><label for="email1">電子郵件地址：</label><input type="email" name="email" value="" id="email1" placeholder="www.baidu.com" required/></p>
<p><label for="shouji1">手機號碼：</label><input type="text" name="shouji" value="" id="shouji1" size="32" pattern="1[13578]\d{9}" placeholder="輸入必須是以13/15/17/18開頭的11位數字" required/></p>
<p>您是否檢視過我們的線上產品目錄？<input type="radio" name="flag" value="是" checked/>是<input type="radio" name="flag" value="否">否</p>
<p>如果檢視過，您對哪些產品有興趣購買？（選擇提供的產品）</p>
<p><input type="checkbox" name="chanping" value="大螢幕電視" id="dianshi"><label for="dianshi">大螢幕電視</label>
<input type="checkbox" name="chanping" value="音訊裝置" id="yin"><label for="yin">音訊裝置</label>
<input type="checkbox" name="chanping" value="視訊裝置" id="shi"><label for="shi">視訊裝置</label>
<input type="checkbox" name="chanping" value="相機" id="xiangji"><label for="xiangji">相機</label>
</p>
<p><label for="fuzhu">在填寫訂單之前，您還有什麼問題，意見或建議？</label></p>
<p><textarea id="fuzhu" placeholder="您的輸入：" rows="5" cols="45" required/></textarea></p>
<p><input type="submit" value="提交"> <input type="reset" value="重置" disabled/></p>
</form>
</body>
</html>
第四章
1.使用CSS製作網頁有哪些優勢?
頁面的讀取速度快、製作方便、美觀、好優化。
2.使用style標籤和style屬性引入CSS樣式有哪些相同點和不同點？
兩者的相同點在於都可以達到修飾的作用,唯一不同點在於當出現相同屬性後會以行內樣式為準
3.說明E F：nth-child（n）和 E F：nth-of-type（n）兩種選擇器的區別與各自的使用場景。
E F：nth-child（n）是對父元素E的第n個 E F：nth-of-type（n）是對父元素E的第n個F元素 指定了型別
4.製作總裁致辭頁面。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>總裁致辭頁面</title>
<link href="CSS/common.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>總裁致辭</h1>
<hr/>
<p><img src="image/icon.jpg"></p>
<p>目前北大青鳥IT教育全體系員工<strong>10000</strong>餘名、授權培訓中心<strong>180</strong>餘家、合作院校<strong>500</strong>餘所、覆蓋全國<strong>90</strong>餘座城市，市場佔有率達到<strong>39.8%</strong>。<br/><br/>
作為IT職業教育的先行者，北大青鳥IT教育創新的職業教育理念和業務經營模式得到了社會的廣泛認可：國家人力資源和社會保障部
與北大青鳥IT教育實施課程聯合認證制度；公司兩度入選中華人民共和國商務部評選的“中國連鎖經營百強企業”，是迄今為止教育培訓領域唯一上榜品牌。公司
連續兩年榮獲 “中國服務業十大優秀特許品牌”稱號，並獲得中國特許經營協會頒發的中國連鎖經營百強和中國特許經營年度大獎；獲得新浪頒發的“中國教育傑出貢
獻獎”和“中國十大品牌教育集團”稱號；並贏得 “中國IT公眾認知企業金獎”、“本土最具知名度認證獎”、“最佳就業認同獎”、“質量放心使用者滿意雙優品牌”、
“最佳實用課程獎”等數十個獎項。人民日報、光明日報、經濟日報、解放日報、中國青年報、中國計算機報等幾十家權威媒體對公司進行了多方面的報道。<br/><br/>
<em>2000年</em>，北大青鳥IT教育創造性地將特許經營模式引入到IT職業教育領域，在全國建立“北大青鳥APTECH計算機授權培訓中心”。所有中心實行統一經營管理、嚴格保證教
學質量，受到社會和業界的高度認可。發展速度之快、經營規模之大、學員人數之多，在全國眾多IT職業培訓機構中一枝獨秀。成立至今，北大青鳥IT教育先後培養45萬名學
員進入IT行業。</p>
</body>
</html>
h1{
font-size: 18px;
}
p{
font-size: 12px;
}
p>strong{
color: red;
}
em{
font-size: 16px;
color: blue;
}
5.製作員工團隊風采頁面。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>員工團隊風采頁面</title>
<link href="CSS/common2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p><img src="image/recruit-01.jpg"><img src="image/recruit-02.jpg"></p>
<p>北大青鳥始終以人才作為企業的核心資本。為了吸引、激勵和保留優秀人才，公司為員
工提供完善的培訓與發展體系，關注員工成長，同時在兼顧市場競爭力和內部公平的基
礎上為員工提供全面、富有競爭力的薪酬福利體系。良好的企業發展前景、 廣闊的個人發
展平臺、快樂向上的工作環境，是青鳥人一直秉承的核心要素
</p>
<h1 class="biaoti1">我們的管理團隊</h1>
<p><img id="image1" src="image/recruit-03.jpg"><img id="image2" src="image/recruit-04.jpg"></p>
<p>北大青鳥始終以人才作為企業的核心資本。為了吸引、激勵和保留優秀人才，公司為員工提供完善的培訓與
發展體系，關注員工成長，同時在兼顧市場競爭力和內部公平的基礎上為員工提供全面、富有競爭力的薪酬
福利體系。良好的企業發展前景、 廣闊的個人發展平臺、快樂向上的
</p>
<h1>我們的部門風采</h1>
<p><img src="image/recruit-05.jpg"></p>
<p>北大青鳥始終以人才作為企業的核心資本。為了吸引、激勵和保留優秀人才，公司為員工提供完善的培訓與
發展體系，關注員工成長，同時在兼顧市場競爭力和內部公平的基礎上為員工提供全面、富有競爭力的薪酬福
利體系。良好的企業發展前景、 廣闊的個人發展空間。
</p>
<ul>
<li><a href="#">聯絡我們</a></li>
<li><a href="#">關於我們</a></li>
<li><a href="#">版權宣告</a></li>
<li><a href="#">招商加盟</a></li>
</ul>
</body>
</html>
.biaoti1{
font-size: 18px;
color: red;
}
h1:nth-of-type(2){
font-size: 18px;
color: green;
}
body{
font-size: 14px;
}
img[id]{
width: 300px;
height: 200px
}
p:last-of-type{
color: blue;
}
li>a{
font-size: 14px;
color: #640000;
}