java学习笔记day14—HTML
生活随笔
收集整理的這篇文章主要介紹了
java学习笔记day14—HTML
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
今日內(nèi)容
1. web概念概述 2. HTMLweb概念概述
* JavaWeb：* 使用Java語言開發(fā)基于互聯(lián)網(wǎng)的項目* 軟件架構(gòu)：1. C/S: Client/Server 客戶端/服務(wù)器端* 在用戶本地有一個客戶端程序，在遠程有一個服務(wù)器端程序* 如：QQ，迅雷...* 優(yōu)點：1. 用戶體驗好* 缺點：1. 開發(fā)、安裝，部署，維護 麻煩2. B/S: Browser/Server 瀏覽器/服務(wù)器端* 只需要一個瀏覽器，用戶通過不同的網(wǎng)址(URL)，客戶訪問不同的服務(wù)器端程序* 優(yōu)點：1. 開發(fā)、安裝，部署，維護 簡單* 缺點：1. 如果應(yīng)用過大，用戶的體驗可能會受到影響2. 對硬件要求過高* B/S架構(gòu)詳解* 資源分類：1. 靜態(tài)資源：* 使用靜態(tài)網(wǎng)頁開發(fā)技術(shù)發(fā)布的資源。* 特點：* 所有用戶訪問，得到的結(jié)果是一樣的。* 如：文本，圖片，音頻、視頻, HTML,CSS,JavaScript* 如果用戶請求的是靜態(tài)資源，那么服務(wù)器會直接將靜態(tài)資源發(fā)送給瀏覽器。瀏覽器中內(nèi)置了靜態(tài)資源的解析引擎，可以展示靜態(tài)資源2. 動態(tài)資源：* 使用動態(tài)網(wǎng)頁及時發(fā)布的資源。* 特點：* 所有用戶訪問，得到的結(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
1. 概念：是最基礎(chǔ)的網(wǎng)頁開發(fā)語言* Hyper Text Markup Language 超文本標(biāo)記語言* 超文本:* 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本.* 標(biāo)記語言:* 由標(biāo)簽構(gòu)成的語言。<標(biāo)簽名稱> 如 html，xml* 標(biāo)記語言不是編程語言2. 快速入門：* 語法：1. html文檔后綴名 .html 或者 .htm2. 標(biāo)簽分為1. 圍堵標(biāo)簽：有開始標(biāo)簽和結(jié)束標(biāo)簽。如 <html> </html>2. 自閉和標(biāo)簽：開始標(biāo)簽和結(jié)束標(biāo)簽在一起。如 <br/>3. 標(biāo)簽可以嵌套：需要正確嵌套，不能你中有我，我中有你錯誤：<a><b></a></b>正確：<a><b></b></a>4. 在開始標(biāo)簽中可以定義屬性。屬性是由鍵值對構(gòu)成，值需要用引號(單雙都可)引起來5. 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>3. 標(biāo)簽學(xué)習(xí)：1. 文件標(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文檔2. 文本標(biāo)簽：和文本有關(guān)的標(biāo)簽* 注釋：<!-- 注釋內(nèi)容 -->* <h1> to <h6>：標(biāo)題標(biāo)簽* h1~h6:字體大小逐漸遞減* <p>：段落標(biāo)簽* <br>：換行標(biāo)簽* <hr>：展示一條水平線* 屬性：* color：顏色* width：寬度* size：高度* align：對其方式* center：居中* left：左對齊* right：右對齊* <b>：字體加粗* <i>：字體斜體* <font>:字體標(biāo)簽* <center>:文本居中* 屬性：* color：顏色* size：大小* face：字體* 屬性定義：* color：1. 英文單詞：red,green,blue2. 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， 并委托傳智播客進行教學(xué)實施的軟件開發(fā)高端培訓(xùn)機構(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)村軟件園重點扶持人才企業(yè)。</p><p>黑馬程序員的學(xué)員多為大學(xué)畢業(yè)后，有理想、有夢想，想從事IT行業(yè)，而沒有環(huán)境和機遇改變自己命運的年輕人。 黑馬程序員的學(xué)員篩選制度，遠比現(xiàn)在90%以上的企業(yè)招聘流程更為嚴(yán)格。任何一名學(xué)員想成功入學(xué)“黑馬程序員”， 必須經(jīng)歷長達2個月的面試流程，這些流程中不僅包括嚴(yán)格的技術(shù)測試、自學(xué)能力測試，還包括性格測試、壓力測試、 品德測試等等測試。毫不夸張地說，黑馬程序員訓(xùn)練營所有學(xué)員都是精挑細(xì)選出來的。百里挑一的殘酷篩選制度確 保學(xué)員質(zhì)量，并降低企業(yè)的用人風(fēng)險。中關(guān)村黑馬程序員訓(xùn)練營不僅著重培養(yǎng)學(xué)員的基礎(chǔ)理論知識，更注重培養(yǎng)項目實施管理能力，并密切關(guān)注技術(shù)革新， 不斷引入先進的技術(shù)，研發(fā)更新技術(shù)課程，確保學(xué)員進入企業(yè)后不僅能獨立從事開發(fā)工作，更能給企業(yè)帶來新的技術(shù)體系和理念。</p><p>一直以來，黑馬程序員以技術(shù)視角關(guān)注IT產(chǎn)業(yè)發(fā)展，以深度分享推進產(chǎn)業(yè)技術(shù)成長，致力于弘揚技術(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>3. 圖片標(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">4. 列表標(biāo)簽：* 有序列表：* ol:* li:* 無序列表：* ul:* li:5. 鏈接標(biāo)簽：* a:定義一個超鏈接* 屬性：* href：指定訪問資源的URL(統(tǒng)一資源定位符)* target：指定打開資源的方式* _self:默認(rèn)值，在當(dāng)前頁面打開* _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_列表標(biāo)簽.html">列表標(biāo)簽</a><br><a href="mailto:itcast@itcast.cn">聯(lián)系我們</a><br><a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>6. div和span：* div:每一個div占滿一整行。塊級標(biāo)簽* span：文本信息在一行展示，行內(nèi)標(biāo)簽 內(nèi)聯(lián)標(biāo)簽7. 語義化標(biāo)簽：html5中為了提高程序的可讀性，提供了一些標(biāo)簽。1. <header>：頁眉2. <footer>：頁腳8. 表格標(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>：表示表格的腳部分案例：旅游網(wǎng)站首頁
1. 確定使用table來完成布局 2. 如果某一行只有一個單元格，則使用<tr><td></td></tr> 3. 如果某一行有多個單元格，則使用<tr><td><table></table></td></tr>4. 代碼實現(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>總結(jié)
以上是生活随笔為你收集整理的java学习笔记day14—HTML的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轉:愚公移山
- 下一篇： leetcode之回溯backtraci