**今日任務** 網站信息頁面案例 網站圖片信息頁面案例 網站友情鏈接頁面案例 網站首頁案例 網站註冊頁面案例 網站後臺頁面案例 教學導航 - 瞭解什麼是標記語言 - 瞭解HTML主要特性，主要變化以及發展趨勢 - 瞭解HTML的結構標簽 - 掌握HTML的主要標簽（字體，圖片，列表，鏈接，表單等標 ...
**今日任務**
網站信息頁面案例
網站圖片信息頁面案例
網站友情鏈接頁面案例
網站首頁案例
網站註冊頁面案例
網站後臺頁面案例
教學導航
- 瞭解什麼是標記語言
- 瞭解HTML主要特性，主要變化以及發展趨勢
- 瞭解HTML的結構標簽
- 掌握HTML的主要標簽（字體，圖片，列表，鏈接，表單等標簽）
1.網站信息頁面
1.1需求分析:
我們公司的需要一個對外宣傳的網站介紹,介紹公司的主要業務,公司的發展歷史,公司的口號等等信息
1.2技術分析:
HTML概述:
HTML: Hyper Text Markup Language 超文本標記語言
超文本: 比普通文本功能更加強大,可以添加各種樣式
標記語言: 通過一組標簽.來對內容進行描述. <關鍵字> , 是由瀏覽器來解釋執行
```html
<h1>靜夜詩</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋兩雙,</p>
<p>舉頭望明月,</p>
<p>低頭思故鄉.</p>
```
為什麼要學習HTML:
生活所迫,今天的課程,群英妹子不讓回家.
HTML的主要作用:
設計網頁的基礎,HTML5
HTML語法規範
<!--
1. 上面是一個文檔聲明
2. 根標簽 html
3. html文件主要包含兩部分. 頭部分和體部分
頭部分 : 主要是用來放置一些頁面信息
體部分 : 主要來放置我們的HTML頁面內容
4. 通過標簽來對內容進行描述,標簽通常都是由開始標簽和結束標簽組成
5. 標簽不區分大小寫, 官方建議使用小寫
-->
1.3步驟分析:
1. 公司簡介 需要標題
2. 水平分割線
3. 四個段落
4. 第一個段落字體需要紅色
1.4代碼實現:
```html
<html>
<head>
<meta charset="UTF-8">
<title>網站信息頁面</title>
</head>
<body>
<!--
1. 公司簡介 需要標題
2. 水平分割線
3. 四個段落
4. 第一個段落字體需要紅色
-->
<h3>公司簡介</h3>
<hr />
<p>
<font color="red">“中關村黑馬程式員訓練營”</font>是由<b><i>傳智播客</i></b>聯合中關村軟體園、CSDN，並委托傳智播客進行教學實施的軟體開發高端培訓機構，致力於服務各大軟體企業，解決當前軟體開發技術飛速發展，而企業招不到優秀人才的困擾。 目前，“中關村黑馬程式員訓練營”已成長為行業“學員質量好、課程內容深、企業滿意”的移動開發高端訓練基地，並被評為中關村軟體園重點扶持人才企業。
</p>
<p>
<strong>黑馬程式員</strong>的學員多為大學畢業後，<em>有理想、有夢想，</em>想從事IT行業，而沒有環境和機遇改變自己命運的年輕人。黑馬程式員的學員篩選制度，遠比現在90%以上的企業招聘流程更為嚴格。任何一名學員想成功入學“黑馬程式員”，必須經歷長達2個月的面試流程，這些流程中不僅包括嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、品德測試等等測試。毫不誇張地說，黑馬程式員訓練營所有學員都是精挑細選出來的。百裡挑一的殘酷篩選制度確保學員質量，並降低企業的用人風險。
</p>
<p>
中關村黑馬程式員訓練營不僅著重培養學員的基礎理論知識，更註重培養項目實施管理能力，並密切關註技術革新，不斷引入先進的技術，研發更新技術課程，確保學員進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。
</p>
<p>
一直以來，黑馬程式員以技術視角關註IT產業發展，以深度分享推進產業技術成長，致力於弘揚技術創新，倡導分享、 開放和協作，努力打造高質量的IT人才服務平臺。
</p>
</body>
</html>
```
1.5 擴展內容
b : 加粗
i : 斜體
strong: 加粗, 帶語義標簽
em: 斜體, 帶語義
2.網站圖片信息
2.1需求分析:
在我們的網站中通常需要顯示LOGO圖片,顯示效果如下
2.2技術分析
img 標簽:
常用的屬性;
width : 寬度
height: 高度
src : 指定文件路徑
alt: 圖片載入失敗時的提示內容
2.3步驟分析
2.4代碼實現
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
常用屬性:
src : 指定圖片路徑
width : 指定圖片寬度
height : 圖片高度
alt : 文件載入失敗時的提示信息
-->
<img src="../img/美女22.jpg" width="500px" alt="這張圖片可能載入問題" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在網頁中顯示圖片-->
<img src="../img/logo2.png" width="30%"/>
<img src="../image/header.jpg" width="30%" />
</body>
</html>
```
2.5 擴展-文件路徑
- 相對路徑
```html
./ 代表的是當前路徑
../ 代表的上一級路徑
../../ 上上一級路徑
```
3.網站友情鏈接頁面
3.1需求分析
在我們的網站中,通常會顯示友商公司的網站鏈接
- 百度
- 新浪微博
- 黑馬程式員
3.2技術分析
列表標簽:
無序列表: ul
type: 小圓圈,小圓點, 小方塊
有序列表: ol
type: 1,a ,A,I,
start : 指定是起始索引
3.3步驟分析
3.4代碼實現
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
1.使用無序列表
百合網
世紀家園
珍愛網
非誠勿擾
-->
<body>
<ul>
<li><a href="http://www.baihe.com" target="_blank">百合網</a></li>
<li><a href="http://www.jiayuan.com">世紀家園</a></li>
<li>珍愛網</li>
<li>非誠勿擾</li>
</ul>
</body>
</html>
```
3.5 擴展內容
點擊鏈接,跳轉去指定網站
a 超鏈接標簽
常用的屬性:
href: 指定要跳轉去的鏈接地址
如果是網路地址需要加上http協議 ,
如果訪問的是本網站的html文件,可以直接寫文件路徑
target : 以什麼方式打開
_self: 預設打開方式,在當前視窗打開
_blank: 新起一個標簽頁打開頁面
上午內容回顧:
- 網站信息案例
- 字體標簽 font
- color: 顏色
- size: 大小 1~7
- face: 改變字體
- p 段落標簽
- h標題標簽 : 1~6
- br 換行
- hr 水平線
- b 加粗
- i 斜體
- strong : 加粗 包含語義
- em : 斜體 包含語義
- 網站圖片案例
- img標簽
- src : 指定圖片的路徑
- width: 寬度
- height: 高度
- alt : 圖片載入錯誤時的提示信息
- 相對路徑:
- ./ 代表的是當前路徑
- ../ 代表的上一級路徑
- ../../ 代表的上上一級路徑
- 友情鏈接:
- ul: 無序列表
- type :
- ol: 有序列表
- type : 樣式
- start : 起始索引
- li : 列表項
- a 超鏈接標簽
- href : 要訪問的鏈接地址
- target : 打開方式
- 網站首頁
- table標簽
- border: 指定邊框
- width : 寬度
- height : 高度
- bgcolor : 背景顏色
- align : 對齊方式
- tr標簽
- td標簽
- colspan: 跨列操作
- rowspan: 跨行操作
- 表格單元格的合併
- 表格的嵌套
4.網站首頁
4.1需求分析:
根據產品文檔,完成商城首頁,顯示效果如圖:
4.2技術分析:
表格標簽table
table標簽:
常用的屬性:
bgcolor : 背景色
width : 寬度
height : 高度
align : 對齊方式
tr 標簽
td 標簽
合併單元格:
colspan : 跨列操作
rowspan : 跨行操作
註意: 跨行或者跨列操作之後,被占掉的格子需要刪除掉
表格的嵌套:
在td中可以嵌套一個表格
4.3步驟分析
1. 創建一個8行一列的表格
2. 第一部份: LOGO部分: 嵌套一個一行三列的表格
3. 第二部分: 導航欄部分 : 放置5個超鏈接
4. 第三部分: 輪播圖
5. 第四部分: 嵌套一個三行7列表格
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
4.4代碼實現
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. 創建一個8行一列的表格
2. 第一部份: LOGO部分: 嵌套一個一行三列的表格
3. 第二部分: 導航欄部分 : 放置5個超鏈接
4. 第三部分: 輪播圖
5. 第四部分: 嵌套一個三行7列表格
6. 第五部分: 直接放一張圖片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一張圖片
9. 第八部分: 放一堆超鏈接
-->
<table width="100%" >
<!--第一部份: LOGO部分: 嵌套一個一行三列的表格-->
<tr>
<td>
<table width="100%">
<tr>
<td>
<img src="../img/logo2.png" />
</td>
<td>
<img src="../image/header.jpg" />
</td>
<td>
<a href="#">登錄</a>
<a href="#">註冊</a>
<a href="#">購物車</a>
</td>
</tr>
</table>
</td>
</tr>
<!--第二部分: 導航欄部分 : 放置5個超鏈接-->
<tr bgcolor="black">
<td height="50px">
<a href="#"><font color="white">首頁</font></a>
<a href="#"><font color="white">手機數位</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">電腦辦公</font></a>
<a href="#"><font color="white">香煙酒水</font></a>
</td>
</tr>
<!--第三部分: 輪播圖 -->
<tr>
<td>
<img src="../img/1.jpg" width="100%" />
</td>
</tr>
<!--第四部分: 嵌套一個三行7列表格-->
<tr>
<td>
<table width="100%" height="500px">
<tr>
<td colspan="7">
<h3>最新商品<img src="../img/title2.jpg"></h3>
</td>
</tr>
<tr align="center">
<!--左邊大圖的-->
<td rowspan="2" width="206px" height="480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!--第五部分: 直接放一張圖片-->
<tr>
<td>
<img src="../products/hao/ad.jpg" width="100%" />
</td>
</tr>
<!--第六部分: 抄第四部分的-->
<tr>
<td>
<table width="100%" height="500px">
<tr>
<td colspan="7">
<h3>熱門商品<img src="../img/title2.jpg"></h3>
</td>
</tr>
<tr align="center">
<!--左邊大圖的-->
<td rowspan="2" width="206px" height="480px">
<img src="../products/hao/big01.jpg" />
</td>
<td colspan="3" height="240px">
<img src="../products/hao/middle01.jpg" width="100%" height="100%" />
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
<tr align="center">
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
<td>
<img src="../products/hao/small06.jpg" />
<p>洗衣機</p>
<p><font color="red">$998</font></p>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第七部分: 放置一張圖片-->
<tr>
<td>
<img src="../image/footer.jpg" width="100%" />
</td>
</tr>
<!--第八部分: 放一堆超鏈接-->
<tr>
<td align="center">
<a href="#">關於我們</a>
<a href="#">聯繫我們</a>
<a href="#">招賢納士</a>
<a href="#">法律聲明</a>
<a href="#">友情鏈接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服務聲明</a>
<a href="#">廣告聲明</a>
<br />
Copyright © 2005-2016 傳智商城 版權所有
</td>
</tr>
</table>
</body>
</html>
```
5.網站註冊頁面:
5.1需求分析:
編寫一個HTML頁面, 顯示效果如圖所示
5.2技術分析:
- 表單標簽
```html
<!--
表單標簽
action : 直接提交的地址
method :
get 方式 預設提交方式 ,會將參數拼接在鏈接後面 , 有大小限制 ,4k
post 方式 會將參數封裝在請求體中, 沒有這樣的限制
input :
type: 指定輸入項的類型
text : 文本
password : 密碼框
radio : 單選按鈕
checkbox : 覆選框
file : 上傳文件
submit : 提交按鈕
button : 普通按鈕
reset : 重置按鈕
hidden : 隱藏域
date : 日期類型
tel : 手機號
number : 只允許輸入數字
placeholder : 指定預設的提示信息
name : 在表單提交的時候,當作參數的名稱
id : 給輸入項取一個名字, 以便於後期我們去找到它,並且操作它
textarea : 文本域, 可以輸入一段文本
cols : 指定寬度
rows : 指定的是高度
select : 下拉列表
option : 選擇項
-->
```
步驟分析:
1. logo部分
2. 導航欄
3. 註冊部分
4. 頁腳圖片
5. 網站聲明信息
5.3代碼實現:
```html
<form action="註冊入門案例.html">
<table width="60%" align="center">
<tr>
<td colspan="2"><font color="blue" size="5">會員註冊</font> USER REGISTER</td>
</tr>
<tr>
<td>用戶名:</td>
<td>
<input type="text" placeholder="請輸入用戶名"/>
</td>
</tr>
<tr>
<td>密 碼:</td>
<td>
<input type="password" placeholder="請輸入密碼"/>
</td>
</tr>
<tr>
<td>確認密碼:</td>
<td>
<input type="password" placeholder="請再次輸入密碼"/>
</td>
</tr>
<tr>
<td>email:</td>
<td>
<input type="text" placeholder="請輸入郵箱"/>
</td>
</tr>
<tr>
<td>姓名:</td>
<td>
<input type="text" placeholder="請輸入真實姓名"/>
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 妖
</td>
</tr>
