java学习笔记day14—HTML
生活随笔
收集整理的這篇文章主要介紹了
java学习笔记day14—HTML
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今日內容
1. web概念概述 2. HTMLweb概念概述
* 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 或者 .htm2. 標簽分為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,blue2. 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:itcast@itcast.cn">聯系我們</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>總結
以上是生活随笔為你收集整理的java学习笔记day14—HTML的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轉:愚公移山
- 下一篇： 2017年html5行业报告,云适配发布