今日任務
網站資訊頁面案例
網站圖檔資訊頁面案例
網站友情連結頁面案例
網站首頁案例
網站注冊頁面案例
網站背景頁面案例
教學導航
- 了解什麼是标記語言
- 了解HTML主要特性，主要變化以及發展趨勢
- 了解HTML的結構标簽
- 掌握HTML的主要标簽（字型，圖檔，清單，連結，表單等标簽）
1.網站資訊頁面
1.1需求分析:
我們公司的需要一個對外宣傳的網站介紹,介紹公司的主要業務,公司的發展曆史,公司的口号等等資訊
1.2技術分析:
HTML概述:
HTML: Hyper Text Markup Language 超文本标記語言
超文本: 比普通文本功能更加強大,可以添加各種樣式
标記語言: 通過一組标簽.來對内容進行描述. <關鍵字> , 是由浏覽器來解釋執行
<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.4代碼實作:
<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代碼實作
<!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 擴充-檔案路徑
- 相對路徑
./ 代表的是目前路徑
../ 代表的上一級路徑
../../ 上上一級路徑
3.網站友情連結頁面
3.1需求分析
在我們的網站中,通常會顯示友商公司的網站連結
- 百度
- 新浪微網誌
- 黑馬程式員
3.2技術分析
清單标簽:
無序清單: ul
type: 小圓圈,小圓點, 小方塊
有序清單: ol
type: 1,a ,A,I,
start : 指定是起始索引
3.3步驟分析
3.4代碼實作
<!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 : 斜體 包含語義
- 字型标簽 font
- 網站圖檔案例
- img标簽
- src : 指定圖檔的路徑
- width: 寬度
- height: 高度
- alt : 圖檔加載錯誤時的提示資訊
- 相對路徑:
- ./ 代表的是目前路徑
- …/ 代表的上一級路徑
- …/…/ 代表的上上一級路徑
- img标簽
- 友情連結:
- ul: 無序清單
- type :
- ol: 有序清單
- type : 樣式
- start : 起始索引
- li : 清單項
- a 超連結标簽
- href : 要通路的連結位址
- target : 打開方式
- ul: 無序清單
- 網站首頁
- table标簽
- border: 指定邊框
- width : 寬度
- height : 高度
- bgcolor : 背景顔色
- align : 對齊方式
- tr标簽
- td标簽
- colspan: 跨列操作
- rowspan: 跨行操作
- 表格單元格的合并
- 表格的嵌套
- table标簽
4.網站首頁
4.1需求分析:
根據産品文檔,完成商城首頁,顯示效果如圖:
4.2技術分析:
表格标簽table
table标簽:
常用的屬性:
bgcolor : 背景色
width : 寬度
height : 高度
align : 對齊方式
tr 标簽
td 标簽
合并單元格:
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之後,被占掉的格子需要删除掉
表格的嵌套:
在td中可以嵌套一個表格
4.3步驟分析
- 建立一個8行一列的表格
- 第一部份: LOGO部分: 嵌套一個一行三列的表格
- 第二部分: 導航欄部分 : 放置5個超連結
- 第三部分: 輪播圖
- 第四部分: 嵌套一個三行7清單格
- 第五部分: 直接放一張圖檔
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖檔
- 第八部分: 放一堆超連結
4.4代碼實作
<!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技術分析:
- 表單标簽
<!-- 表單标簽 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 : 選擇項 -->步驟分析:
- logo部分
- 導航欄
- 注冊部分
- 頁腳圖檔
- 網站聲明資訊
5.3代碼實作:
<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>
<tr>
<td>出生日期:</td>
<td>
<input type="date" />
</td>
</tr>
<tr>
<td>驗證碼:</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="注冊" />
</td>
</tr>
</table>
</form>
6.網站背景頁面展示
6.1需求分析:
我們前面已經做完了首頁商品展示, 那麼我們需要一個頁面用來編輯我們的商品資訊, 還有商品分類, 使用者購買之後,還得有訂單管理頁面
6.2技術分析
架構标簽:
frameset
注意: 使用了frameset必須将body删掉,否則頁面會有問題
frame
常用屬性:
src: 引入的html檔案路徑
name: 指定架構的名稱
6.3步驟分析
6.4代碼實作
擴充
架構中點選跳轉
常用的快捷鍵
Ctrl + D 删除光标目前所在的行
Ctrl + Shift + R 複制目前行到下一行
Ctrl + Enter 将光标移動到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注釋目前行
Ctrl + R 運作目前網頁/重新整理目前網頁
![Spring MVC 自學雜記（五） -- SpringMVC與前台的json資料互動[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)