【web概念概述、HTML】
阿新 • • 發佈：2020-10-05
今日內容
1. web概念概述
2. HTML
web概念概述
* JavaWeb： * 使用Java語言開發基於網際網路的專案 * 軟體架構： 1. C/S: Client/Server 客戶端/伺服器端 * 在使用者本地有一個客戶端程式，在遠端有一個伺服器端程式 * 如：QQ，迅雷... * 優點： 1. 使用者體驗好 * 缺點： 1. 開發、安裝，部署，維護 麻煩 2. B/S: Browser/Server 瀏覽器/伺服器端 * 只需要一個瀏覽器，使用者通過不同的網址(URL)，客戶訪問不同的伺服器端程式 * 優點： 1. 開發、安裝，部署，維護 簡單 * 缺點： 1. 如果應用過大，使用者的體驗可能會受到影響 2. 對硬體要求過高 * B/S架構詳解 * 資源分類： 1. 靜態資源： * 使用靜態網頁開發技術釋出的資源。 * 特點： * 所有使用者訪問，得到的結果是一樣的。 * 如：文字，圖片，音訊、視訊, HTML,CSS,JavaScript * 如果使用者請求的是靜態資源，那麼伺服器會直接將靜態資源傳送給瀏覽器。瀏覽器中內建了靜態資源的解析引擎，可以展示靜態資源 2. 動態資源： * 使用動態網頁及時釋出的資源。 * 特點： * 所有使用者訪問，得到的結果可能不一樣。 * 如：jsp/servlet,php,asp... * 如果使用者請求的是動態資源，那麼伺服器會執行動態資源，轉換為靜態資源，再發送給瀏覽器
* 我們要學習動態資源，必須先學習靜態資源！
* 靜態資源：
* HTML：用於搭建基礎網頁，展示頁面的內容
* CSS：用於美化頁面，佈局頁面
* JavaScript：控制頁面的元素，讓頁面有一些動態的效果
HTML
1. 概念：是最基礎的網頁開發語言 * Hyper Text Markup Language 超文字標記語言 * 超文字: * 超文字是用超連結的方法，將各種不同空間的文字資訊組織在一起的網狀文字. * 標記語言: * 由標籤構成的語言。<標籤名稱> 如 html，xml * 標記語言不是程式語言 2. 快速入門： * 語法： 1. html文件字尾名 .html 或者 .htm 2. 標籤分為 1. 圍堵標籤：有開始標籤和結束標籤。如 <html> </html> 2. 自閉和標籤：開始標籤和結束標籤在一起。如 <br/> 3. 標籤可以巢狀： 需要正確巢狀，不能你中有我，我中有你 錯誤：<a><b></a></b> 正確：<a><b></b></a> 4. 在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來 5. html的標籤不區分大小寫，但是建議使用小寫。 * 程式碼： <html> <head> <title>title</title> </head> <body> <FONT color='red'>Hello World</font><br/> <font color='green'>Hello World</font> </body> </html> 3. 標籤學習： 1. 檔案標籤：構成html最基本的標籤 * html:html文件的根標籤 * head：頭標籤。用於指定html文件的一些屬性。引入外部的資源 * title：標題標籤。 * body：體標籤 * <!DOCTYPE html>：html5中定義該文件是html文件 2. 文字標籤：和文字有關的標籤 * 註釋：<!-- 註釋內容 --> * <h1> to <h6>：標題標籤 * h1~h6:字型大小逐漸遞減 * <p>：段落標籤 * <br>：換行標籤 * <hr>：展示一條水平線 * 屬性： * color：顏色 * width：寬度 * size：高度 * align：對其方式 * center：居中 * left：左對齊 * right：右對齊 * <b>：字型加粗 * <i>：字型斜體 * <font>:字型標籤 * <center>:文字居中 * 屬性： * color：顏色 * size：大小 * face：字型 * 屬性定義： * color： 1. 英文單詞：red,green,blue 2. rgb(值1，值2，值3)：值的範圍：0~255 如 rgb(0,0,255) 3. #值1值2值3：值的範圍：00~FF之間。如： #FF00FF * width： 1. 數值：width='20' ,數值的單位，預設是 px(畫素) 2. 數值%：佔比相對於父元素的比例 * 案例：公司簡介 <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑馬程式設計師簡介</title> </head> <body> <h1> 公司簡介 </h1> <hr color="#ffd700"> <p> <font color="#FF0000">"中關村黑馬程式設計師訓練營"</font>是由<b><i>傳智播客</i></b>聯合中關村軟體園、CSDN， 並委託傳智播客進行教學實施的軟體開發高階培訓機構，致力於服務各大軟體企業，解決當前軟體開發技術飛速發展， 而企業招不到優秀人才的困擾。 </p> <p> 目前，“中關村黑馬程式設計師訓練營”已成長為行業“學員質量好、課程內容深、企業滿意”的移動開發高階訓練基地， 並被評為中關村軟體園重點扶持人才企業。 </p> <p> 黑馬程式設計師的學員多為大學畢業後，有理想、有夢想，想從事IT行業，而沒有環境和機遇改變自己命運的年輕人。 黑馬程式設計師的學員篩選制度，遠比現在90%以上的企業招聘流程更為嚴格。任何一名學員想成功入學“黑馬程式設計師”， 必須經歷長達2個月的面試流程，這些流程中不僅包括嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、 品德測試等等測試。毫不誇張地說，黑馬程式設計師訓練營所有學員都是精挑細選出來的。百裡挑一的殘酷篩選制度確 保學員質量，並降低企業的用人風險。 中關村黑馬程式設計師訓練營不僅著重培養學員的基礎理論知識，更注重培養專案實施管理能力，並密切關注技術革新， 不斷引入先進的技術，研發更新技術課程，確保學員進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。 </p> <p> 一直以來，黑馬程式設計師以技術視角關注IT產業發展，以深度分享推進產業技術成長，致力於弘揚技術創新，倡導分享、 開放和協作，努力打造高質量的IT人才服務平臺。 </p> <hr color="#ffd700"> <font color="gray" size="2"> <center> 江蘇傳智播客教育科技股份有限公司<br> 版權所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882 </center> </font>
</body> </html> 3. 圖片標籤： * img：展示圖片 * 屬性： * src：指定圖片的位置 * 程式碼： <!--展示一張圖片 img--> <img src="image/jingxuan_2.jpg" align="right" alt="古鎮" width="500" height="500"/> <!-- 相對路徑 * 以.開頭的路徑 * ./：代表當前目錄 ./image/1.jpg * ../:代表上一級目錄 --> <img src="./image/jiangwai_1.jpg"> <img src="../image/jiangwai_1.jpg"> 4. 列表標籤： * 有序列表： * ol: * li: * 無序列表： * ul: * li: 5. 連結標籤： * a:定義一個超連結 * 屬性： * href：指定訪問資源的URL(統一資源定位符) * target：指定開啟資源的方式 * _self:預設值，在當前頁面開啟 * _blank：在空白頁面開啟 * 程式碼： <!--超連結 a--> <a href="http://www.itcast.cn">點我</a> <br> <a href="http://www.itcast.cn" target="_self">點我</a> <br> <a href="http://www.itcast.cn" target="_blank">點我</a> <br> <a href="./5_列表標籤.html">列表標籤</a><br> <a href="mailto:[email protected]">聯絡我們</a> <br> <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a> 6. div和span： * div:每一個div佔滿一整行。塊級標籤 * span：文字資訊在一行展示，行內標籤 內聯標籤 7. 語義化標籤：html5中為了提高程式的可讀性，提供了一些標籤。 1. <header>：頁首 2. <footer>：頁尾
8. 表格標籤：
* table：定義表格
* width：寬度
* border：邊框
* cellpadding：定義內容和單元格的距離
* cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
* bgcolor：背景色
* align：對齊方式
* tr：定義行
* bgcolor：背景色
* align：對齊方式
* td：定義單元格
* colspan：合併列
* rowspan：合併行
* th：定義表頭單元格
* <caption>：表格標題
* <thead>：表示表格的頭部分
* <tbody>：表示表格的體部分
* <tfoot>：表示表格的腳部分
案例：旅遊網站首頁
1. 確定使用table來完成佈局
2. 如果某一行只有一個單元格，則使用<tr><td></td></tr>
3. 如果某一行有多個單元格，則使用
<tr>
<td>
<table></table>
</td>
</tr>
4. 程式碼實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑馬旅遊網</title>
</head>
<body>
<!--採用table來完成佈局-->
<!--最外層的table，用於整個頁面的佈局-->
<table width="100%" align="center">
<!-- 第1行 -->
<tr>
<td>
<img src="image/top_banner.jpg" width="100%" alt="">
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>
<table width="100%" align="center">
<tr>
<td>
<img src="image/logo.jpg" alt="">
</td>
<td>
<img src="image/search.png" alt="">
</td>
<td>
<img src="image/hotel_tel.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<!-- 第3行 -->
<tr>
<td>
<table width="100%" align="center">
<tr bgcolor="#ffd700" align="center" height="45" >
<td>
<a href="">首頁</a>
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
<td>
門票
</td>
</tr>
</table>
</td>
</tr>
<!-- 第4行 輪播圖 -->
<tr>
<td>
<img src="image/banner_3.jpg" alt="" width="100%">
</td>
</tr>
<!-- 第5行 黑馬精選-->
<tr>
<td>
<img src="image/icon_5.jpg" alt="">
黑馬精選
<hr color="#ffd700" >
</td>
</tr>
<!-- 第6行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 國內遊 -->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
國內遊
<hr color="#ffd700" >
</td>
</tr>
<!-- 第8行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/guonei_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="" height="100%">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第9行 境外遊 -->
<tr>
<td>
<img src="image/icon_7.jpg" alt="">
境外遊
<hr color="#ffd700" >
</td>
</tr>
<!-- 第10行 -->
<tr>
<td>
<table align="center" width="95%">
<tr>
<td rowspan="2">
<img src="image/jiangwai_1.jpg" alt="">
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="" height="100%">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第11行 -->
<tr>
<td>
<img src="image/footer_service.png" alt="" width="100%">
</td>
</tr>
<!-- 第12行 -->
<tr>
<td align="center" bgcolor="#ffd700" height="40">
<font color="gray" size="2">
江蘇傳智播客教育科技股份有限公司
版權所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882
</font>
</td>
</tr>
</table>
</body>
</html>