今日內(nèi)容
- web概念概述
- HTML
web概念概述
-
JavaWeb：
使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項(xiàng)目
-
軟件架構(gòu)：
- C/S: Client/Server 客戶端/服務(wù)器端
- 在用戶本地有一個客戶端程序够吩，在遠(yuǎn)程有一個服務(wù)器端程序
- 如：QQ比然，迅雷...
- 優(yōu)點(diǎn)：
- 用戶體驗(yàn)好
- 缺點(diǎn)：
- 開發(fā)、安裝周循，部署强法，維護(hù) 麻煩
- B/S: Browser/Server 瀏覽器/服務(wù)器端
- 只需要一個瀏覽器，用戶通過不同的網(wǎng)址(URL)湾笛，客戶訪問不同的服務(wù)器端程序
- 優(yōu)點(diǎn)：
- 開發(fā)饮怯、安裝，部署嚎研，維護(hù) 簡單
- 缺點(diǎn)：
- 如果應(yīng)用過大蓖墅，用戶的體驗(yàn)可能會受到影響
- 對硬件要求過高
- C/S: Client/Server 客戶端/服務(wù)器端
-
B/S架構(gòu)詳解
- 資源分類：
1. 靜態(tài)資源：
* 使用靜態(tài)網(wǎng)頁開發(fā)技術(shù)發(fā)布的資源。
* 特點(diǎn)：
* 所有用戶訪問，得到的結(jié)果是一樣的置媳。
* 如：文本于樟，圖片，音頻拇囊、視頻, HTML,CSS,JavaScript
* 如果用戶請求的是靜態(tài)資源迂曲，那么服務(wù)器會直接將靜態(tài)資源發(fā)送給瀏覽器。瀏覽器中內(nèi)置了靜態(tài)資源的解析引擎寥袭，可以展示靜態(tài)資源
2. 動態(tài)資源：
* 使用動態(tài)網(wǎng)頁及時(shí)發(fā)布的資源路捧。
* 特點(diǎn)：
* 所有用戶訪問，得到的結(jié)果可能不一樣传黄。
* 如：jsp/servlet,php,asp...
* 如果用戶請求的是動態(tài)資源杰扫，那么服務(wù)器會執(zhí)行動態(tài)資源，轉(zhuǎn)換為靜態(tài)資源膘掰，再發(fā)送給瀏覽器
- 資源分類：
我們要學(xué)習(xí)動態(tài)資源章姓，必須先學(xué)習(xí)靜態(tài)資源！
靜態(tài)資源：
* HTML：用于搭建基礎(chǔ)網(wǎng)頁识埋，展示頁面的內(nèi)容
* CSS：用于美化頁面凡伊，布局頁面
* JavaScript：控制頁面的元素，讓頁面有一些動態(tài)的效果
HTML
概念：是最基礎(chǔ)的網(wǎng)頁開發(fā)語言
Hyper Text Markup Language 超文本標(biāo)記語言
* 超文本:
超文本是用超鏈接的方法窒舟，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本.
* 標(biāo)記語言:
a 由標(biāo)簽構(gòu)成的語言系忙。<標(biāo)簽名稱> 如 html，xml
b 標(biāo)記語言不是編程語言快速入門：
* 語法：
a. html文檔后綴名 .html 或者 .htm
b. 標(biāo)簽分為
a. 圍堵標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽惠豺。如 <html> </html>
b. 自閉和標(biāo)簽：開始標(biāo)簽和結(jié)束標(biāo)簽在一起银还。如
c. 標(biāo)簽可以嵌套：
需要正確嵌套，不能你中有我洁墙，我中有你
錯誤：<a><b></a></b>
正確：<a><b></b></a>
d. 在開始標(biāo)簽中可以定義屬性蛹疯。屬性是由鍵值對構(gòu)成，值需要用引號(單雙都可)引起來
e. html的標(biāo)簽不區(qū)分大小寫热监，但是建議使用小寫捺弦。
* 代碼：
<html>
<head>
<title>title</title>
</head>
<body>
<FONT color='red'>Hello World</font><br/>
<font color='green'>Hello World</font>
</body>
</html>
- 標(biāo)簽學(xué)習(xí)：
文件標(biāo)簽：構(gòu)成html最基本的標(biāo)簽
* html:html文檔的根標(biāo)簽
* head：頭標(biāo)簽。用于指定html文檔的一些屬性狼纬。引入外部的資源
* title：標(biāo)題標(biāo)簽。
* body：體標(biāo)簽
* <!DOCTYPE html>：html5中定義該文檔是html文檔-
文本標(biāo)簽：和文本有關(guān)的標(biāo)簽
a 注釋：<-!-- 注釋內(nèi)容 -->
b<h1> to <h6>：標(biāo)題標(biāo)簽
h1~h6:字體大小逐漸遞減
c <p>：段落標(biāo)簽
d <-br->：換行標(biāo)簽
e<-hr->：展示一條水平線
屬性：
* color：顏色
* width：寬度
* size：高度
* align：對其方式
* center：居中
* left：左對齊
* right：右對齊
f <b>：字體加粗
g <i>：字體斜體
h <font>:字體標(biāo)簽
i <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. 數(shù)值：width='20' ,數(shù)值的單位歉铝，默認(rèn)是 px(像素)
2. 數(shù)值%：占比相對于父元素的比例
* 案例：公司簡介
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>黑馬程序員簡介</title>
</head>
<body>
<h1>
公司簡介
</h1>
<hr color="#ffd700">
<p>
<font color="#FF0000">"中關(guān)村黑馬程序員訓(xùn)練營"</font>是由<b><i>傳智播客</i></b>聯(lián)合中關(guān)村軟件園盈简、CSDN， 并委托傳智播客進(jìn)行教學(xué)實(shí)施的軟件開發(fā)高端培訓(xùn)機(jī)構(gòu)，致力于服務(wù)各大軟件企業(yè)柠贤，解決當(dāng)前軟件開發(fā)技術(shù)飛速發(fā)展香浩， 而企業(yè)招不到優(yōu)秀人才的困擾。
</p>
<p>
目前臼勉，“中關(guān)村黑馬程序員訓(xùn)練營”已成長為行業(yè)“學(xué)員質(zhì)量好邻吭、課程內(nèi)容深、企業(yè)滿意”的移動開發(fā)高端訓(xùn)練基地宴霸， 并被評為中關(guān)村軟件園重點(diǎn)扶持人才企業(yè)囱晴。
</p>
<p>
黑馬程序員的學(xué)員多為大學(xué)畢業(yè)后，有理想瓢谢、有夢想畸写，想從事IT行業(yè)，而沒有環(huán)境和機(jī)遇改變自己命運(yùn)的年輕人氓扛。 黑馬程序員的學(xué)員篩選制度枯芬，遠(yuǎn)比現(xiàn)在90%以上的企業(yè)招聘流程更為嚴(yán)格。任何一名學(xué)員想成功入學(xué)“黑馬程序員”采郎， 必須經(jīng)歷長達(dá)2個月的面試流程千所，這些流程中不僅包括嚴(yán)格的技術(shù)測試、自學(xué)能力測試尉剩，還包括性格測試真慢、壓力測試、 品德測試等等測試理茎。毫不夸張地說黑界，黑馬程序員訓(xùn)練營所有學(xué)員都是精挑細(xì)選出來的。百里挑一的殘酷篩選制度確 保學(xué)員質(zhì)量皂林，并降低企業(yè)的用人風(fēng)險(xiǎn)朗鸠。
中關(guān)村黑馬程序員訓(xùn)練營不僅著重培養(yǎng)學(xué)員的基礎(chǔ)理論知識，更注重培養(yǎng)項(xiàng)目實(shí)施管理能力础倍，并密切關(guān)注技術(shù)革新烛占， 不斷引入先進(jìn)的技術(shù)，研發(fā)更新技術(shù)課程沟启，確保學(xué)員進(jìn)入企業(yè)后不僅能獨(dú)立從事開發(fā)工作忆家，更能給企業(yè)帶來新的技術(shù)體系和理念。
</p>
<p>
一直以來德迹，黑馬程序員以技術(shù)視角關(guān)注IT產(chǎn)業(yè)發(fā)展芽卿，以深度分享推進(jìn)產(chǎn)業(yè)技術(shù)成長，致力于弘揚(yáng)技術(shù)創(chuàng)新胳搞，倡導(dǎo)分享卸例、 開放和協(xié)作称杨，努力打造高質(zhì)量的IT人才服務(wù)平臺。
</p>
<hr color="#ffd700">
<font color="gray" size="2">
<center>
江蘇傳智播客教育科技股份有限公司<br>
版權(quán)所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882
</center>
</font>
</body>
</html>
- 圖片標(biāo)簽：
* img：展示圖片
* 屬性：
* src：指定圖片的位置
* 代碼：
<!--展示一張圖片 img-->
<img src="image/jingxuan_2.jpg" align="right" alt="古鎮(zhèn)" width="500" height="500"/>
<!--
相對路徑
* 以.開頭的路徑
* ./：代表當(dāng)前目錄 ./image/1.jpg
* ../:代表上一級目錄
-->
<img src="./image/jiangwai_1.jpg">
<img src="../image/jiangwai_1.jpg">
- 列表標(biāo)簽：
* 有序列表：
* ol:
* li:
* 無序列表：
* ul:
* li: - 鏈接標(biāo)簽：
* a:定義一個超鏈接
* 屬性：
* href：指定訪問資源的URL(統(tǒng)一資源定位符)
* target：指定打開資源的方式
* _self:默認(rèn)值筷转，在當(dāng)前頁面打開
* _blank：在空白頁面打開
* 代碼：
<!--超鏈接 a-->
<a >點(diǎn)我</a>
<br>
<a target="_self">點(diǎn)我</a>
<br>
<a target="_blank">點(diǎn)我</a>
<br>
<a href="./5_列表標(biāo)簽.html">列表標(biāo)簽</a><br>
<a href="mailto:itcast@itcast.cn">聯(lián)系我們</a>
<br>
<a ><img src="image/jiangwai_1.jpg"></a>
-
div和span：
- div:每一個div占滿一整行姑原。塊級標(biāo)簽
- span：文本信息在一行展示，行內(nèi)標(biāo)簽 內(nèi)聯(lián)標(biāo)簽
- div:每一個div占滿一整行姑原。塊級標(biāo)簽
語義化標(biāo)簽：html5中為了提高程序的可讀性呜舒，提供了一些標(biāo)簽锭汛。
1. <header>：頁眉
2. <footer>：頁腳表格標(biāo)簽:
- table 定義表格
* width：寬度
* border：邊框
* cellpadding：定義內(nèi)容和單元格的距離
* cellspacing：定義單元格之間的距離。如果指定為0阴绢，則單元格的線會合為一條
* bgcolor：背景色
* align：對齊方式- tr：定義行
* bgcolor：背景色
* align：對齊方式 - td：定義單元格
* colspan：合并列
* rowspan：合并行
* th：定義表頭單元格
* <caption>：表格標(biāo)題
* <thead>：表示表格的頭部分
* <tbody>：表示表格的體部分
* <tfoot>：表示表格的腳部分
- tr：定義行
案例：旅游網(wǎng)站首頁
- 確定使用table來完成布局
- 如果某一行只有一個單元格店乐，則使用<tr><td></td></tr>
- 如果某一行有多個單元格，則使用
<tr>
<td>
<table></table>
</td>
</tr>
4. 代碼實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>黑馬旅游網(wǎng)</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晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
<td>
<img src="image/jiangxuan_1.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 899</font>
</td>
</tr>
</table>
</td>
</tr>
<!-- 第7行 國內(nèi)游 -->
<tr>
<td>
<img src="image/icon_6.jpg" alt="">
國內(nèi)游
<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晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_2.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</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晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
</tr>
<tr>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</p>
<font color="red">¥ 699</font>
</td>
<td>
<img src="image/jiangxuan_3.jpg" alt="">
<p>上海飛三亞五天4晚自由行(春節(jié)銷售+親子+蜜月+自由行)</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">
江蘇傳智播客教育科技股份有限公司
版權(quán)所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882
</font>
</td>
</tr>
</table>
</body>
</html>