文章目錄
-
- 導航
-
- 1.網站資訊頁面
-
- 1.1需求分析:
- 1.2技術分析:
-
- HTML概述:
- HTML的主要作用:
- HTML文法規範
- 1.3步驟分析:
- 1.4代碼實作:
-
- 1.5 擴充内容
- 2.網站圖檔資訊
-
- 2.1需求分析:
- 2.2技術分析
- 2.3步驟分析
- 2.4代碼實作
- 2.5 擴充-檔案路徑
- 3.網站友情連結頁面
-
- 3.1需求分析
- 3.2技術分析
- 3.3步驟分析
- 3.4代碼實作
-
- 3.5 擴充内容
- 4.網站首頁
-
- 4.1需求分析:
- 4.2技術分析:
-
- 表格标簽table
-
- 合并單元格:
- 表格的嵌套:
- 4.3步驟分析
- 4.4代碼實作
- 5.網站注冊頁面:
-
- 5.1需求分析:
- 5.2技術分析:
- 步驟分析:
- 5.3代碼實作:
- 6.網站背景頁面展示
-
- 6.1需求分析:
- 6.2技術分析
- 6.3步驟分析
- 6.4代碼實作
- 常用的快捷鍵
- 了解什麼是标記語言
- 了解HTML主要特性，主要變化以及發展趨勢
- 了解HTML的結構标簽
- 掌握HTML的主要标簽（字型，圖檔，清單，連結，表單等标簽）
我們學校需要一個對外宣傳的網站介紹,介紹學校的主要業務,學校的發展曆史,學校的口号等等資訊。
HTML: Hyper Text Markup Language 超文本标記語言
超文本: 比普通文本功能更加強大,可以添加各種樣式
标記語言: 通過一組标簽.來對内容進行描述. <關鍵字> , 是由浏覽器來解釋執行
<h1>靜夜詩</h1>
<b><i>--李白</i> </b> <br/>
<p>床前明月光,</p>
<p>地上鞋兩雙,</p>
<p>舉頭望明月,</p>
<p>低頭思故鄉.</p>
設計網頁的基礎,HTML5
<!--
1. 上面是一個文檔聲明
2. 根标簽 html
3. html檔案主要包含兩部分. 頭部分和體部分
頭部分 : 主要是用來放置一些頁面資訊
體部分 : 主要來放置我們的HTML頁面内容
4. 通過标簽來對内容進行描述,标簽通常都是由開始标簽和結束标簽組成
5. 标簽不區分大小寫, 官方建議使用小寫
-->
- 公司簡介 需要标題
- 水準分割線
- 四個段落
- 第一個段落字型需要紅色
<html>
<head>
<meta charset="UTF-8">
<title>網站資訊頁面</title>
</head>
<body>
<!--
1. 學校簡介 需要标題
2. 水準分割線
3. 四個段落
4. 第一個段落字型需要紅色
-->
<h3>學校簡介</h3>
<hr />
<p>
<font color="red">“鄭州師範學院”</font>學校前身是<b><i>1949年成立的河南省立鄭州師範學校</i></b>2001年，鄭州第二師範學校并入鄭州教育學院；2002年3月，鄭州教育學院與鄭州師範學校合并建立鄭州師範高等專科學校；2010年3月，在鄭州師範高等專科學校的基礎上成立鄭州師範學院。據2018年6月學校官網顯示，學校占地面積1060畝，建築面積46萬餘平方米，教學儀器裝置總價值1.66多億元；共有經濟學、法學、教育學、文學、曆史學、理學、工學、農學、管理學、藝術學等10個學科門類，現有39個大學專業、12個專科專業，現有教職工1200餘人，全日制在校生18000餘人，成人教育學生5000多人。
</p>
<p>
<strong>師資力量</strong>2017年2月<em>據學校官網顯示，</em>學校有教職工1060餘人，其中具有進階專業技術職務的350餘人；具有碩士、博士學位的教師770餘人；享受國務院特殊津貼專家、國家級、省級優秀教師、河南省學術技術帶頭人、河南省教學名師、省級優秀中青年骨幹教師等60餘人，擁有2個省級教學團隊。
</p>
<p>
據2017年2月學校官網顯示，學校有國家級教師教育精品資源共享課2門，省級精品課程3門，教育部教師隊伍建設示範項目1項，教育部卓越教師教育訓練計劃改革項目1項，河南省卓越教師培養計劃改革項目2項，省教師教育改革創新實驗區1個，省高等學校“專業綜合改革試點”4個，省高等學校實驗教學示範中心3個，省級示範性實訓基地1個，省級特色專業1個。
</p>
<p>
學校是國家教育部“國培計劃”示範性項目和中西部項目承擔者、河南省新課改教育訓練者和國小省級骨幹教師教育訓練基地、河南省中國小校長教育訓練基地、援疆項目教育訓練基地、英特爾未來教育項目河南總執行機構。
</p>
</body>
</html>
b : 加粗
i : 斜體
strong: 加粗, 帶語義标簽
em: 斜體, 帶語義
在我們的網站中通常需要顯示LOGO圖檔,顯示效果如下
img 标簽:
常用的屬性;
width : 寬度
height: 高度
src : 指定檔案路徑
alt: 圖檔加載失敗時的提示内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
常用屬性:
src : 指定圖檔路徑
width : 指定圖檔寬度
height : 圖檔高度
alt : 檔案加載失敗時的提示資訊
-->
<img src="../img/1.jpg" width="500px" alt="這張圖檔可能加載問題" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在網頁中顯示圖檔-->
<img src="../img/logo.png" width="30%"/>
<img src="../image/header.jpg" width="30%" />
</body>
</html>
- 相對路徑
./ 代表的是目前路徑
../ 代表的上一級路徑
../../ 上上一級路徑
在我們的網站中,通常會顯示友商公司的網站連結
- 百度
- 新浪微網誌
- CSDN
清單标簽:
無序清單: ul
type: 小圓圈,小圓點, 小方塊
有序清單: ol
type: 1,a ,A,I,
start : 指定是起始索引
<!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>
點選連結,跳轉去指定網站
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标簽
根據産品文檔,完成商城首頁,顯示效果如圖:
table标簽:
bgcolor : 背景色
height : 高度
align : 對齊方式
tr 标簽
td 标簽
colspan : 跨列操作
rowspan : 跨行操作
注意: 跨行或者跨列操作之後,被占掉的格子需要删除掉
在td中可以嵌套一個表格
- 建立一個8行一列的表格
- 第一部份: LOGO部分: 嵌套一個一行三列的表格
- 第二部分: 導航欄部分 : 放置5個超連結
- 第三部分: 輪播圖
- 第四部分: 嵌套一個三行7清單格
- 第五部分: 直接放一張圖檔
- 第六部分: 抄第四部分的
- 第七部分: 放置一張圖檔
- 第八部分: 放一堆超連結
<!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 © 2018 yxy 版權所有
</td>
</tr>
</table>
</body>
</html>
編寫一個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 : 選擇項 -->- logo部分
- 導航欄
- 注冊部分
- 頁腳圖檔
- 網站聲明資訊
<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>
我們前面已經做完了首頁商品展示, 那麼我們需要一個頁面用來編輯我們的商品資訊, 還有商品分類, 使用者購買之後,還得有訂單管理頁面
架構标簽:
frameset
注意: 使用了frameset必須将body删掉,否則頁面會有問題
Ctrl + D 删除光标目前所在的行
Ctrl + Shift + R 複制目前行到下一行
Ctrl + Enter 将光标移動到下一行
Ctrl + Shift + Enter 将光标定位在上一行
Ctrl + Shift + / 注釋目前行
Ctrl + R 運作目前網頁/重新整理目前網頁
![Vue項目 - 單檔案元件和Vue中的路由[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)