這兩天覆習了下HTML和CSS的一些基本內容並實現了兩個小的案例,在此整理一下。php
* 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:控制頁面的元素,讓頁面有一些動態的效果
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. 數值%:佔比相對於父元素的比例 * 案例:HTML百度百科demo <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>HTML</title> </head> <body> <h1>HTML</h1> <hr color="#ffd700"> <p> <b>HTML</b>稱爲超文本標記語言,是一種標識性的語言。它包括一系列標籤.經過這些標籤能夠將網絡上的文檔格式統一,使分散的Internet資源鏈接爲一個邏輯總體。HTML文本是由HTML命令組成的描述性文本,HTML命令能夠說明文字,圖形、動畫、聲音、表格、連接等。 </p> <p> 超文本是一種組織信息的方式,它經過超級連接方法將文本中的文字、圖表與其餘信息媒體相關聯。這些相互關聯的信息媒體可能在同一文本中,也多是其餘文件,或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分佈在不一樣位置的信息資源用隨機方式進行鏈接,爲人們查找,檢索信息提供方便。 </p> <hr color="#ffd700"> <font color="gray" size="2"> <center> ©2020 Baidu 使用百度前必讀 | 百科協議 | 隱私政策 | 百度百科合做平臺 | 京ICP證030173號<br> 京公網安備11000002000001號 </center> </font> </body> </html> (3) 圖片標籤: * img:展現圖片 * 屬性: * src:指定圖片的位置 * alt:規定圖像的替代文本,若未刷新出來則顯示alt中的文本 * 代碼: <!--展現一張圖片 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: * 屬性: * type:有序列表的樣式如"1"、"A"、"I" * start:有序列表的開始位置 * li:列表項 * 無序列表: * ul: * 屬性: * type: disc square circle * li:列表項 (5) 連接標籤: * a:定義一個超連接 * 屬性: * href:指定訪問資源的URL(統一資源定位符) * target:指定打開資源的方式 * _self:默認值,在當前頁面打開 * _blank:在空白頁面打開 * 代碼: <!--超連接 a--> <a href="http://www.baidu.com">點我</a> <br> <a href="http://www.baidu.com" target="_self">點我</a> <br> <a href="http://www.baidu.com" target="_blank">點我</a> <br> <a href="./5_列表標籤.html">列表標籤</a><br> <a href="mailto:xxx@xxx.com">聯繫咱們</a> <br> <a href="http://www.baidu.com"><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>:表示表格的腳部分 * 演示代碼: <!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>表格標籤</title> </head> <body> <table border="1" width="40%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center"> <caption>學生信息表</caption> <thead> <tr> <th>編號</th> <th>姓名</th> <th>成績</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>張三</td> <td>100</td> </tr> <tr> <td>2</td> <td>李四</td> <td>60</td> </tr> </tbody> <tfoot > <tr bgcolor="red"> <td>1</td> <td>王五</td> <td>40</td> </tr> </tfoot> </table> </body> </html>
特殊字符表:
css
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-2020©, All Rights Reserved 蘇ICP備88888888 </font> </td> </tr> </table> </body> </html>
* 表單: * 概念:用於採集用戶輸入的數據的。用於和服務器進行交互。 * form:用於定義表單的。能夠定義一個範圍,範圍表明採集用戶數據的範圍 * 屬性: * action:指定提交數據的URL * method:指定提交方式 * 分類:一共7種,2種比較經常使用 * get: 1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議中學過)。 2. 請求參數大小是有限制的。 3. 不太安全。 * post: 2. 請求參數不會在地址欄中顯示。會封裝在請求體中(HTTP協議中學過) 2. 請求參數的大小沒有限制。 3. 較爲安全。 * 表單項中的數據要想被提交:必須指定其name屬性 * 表單項標籤: * input:能夠經過type屬性值,改變元素展現的樣式 * type屬性: * text:文本輸入框,默認值 * placeholder:指定輸入框的提示信息,當輸入框的內容發生變化,會自動清空提示信息 * password:密碼輸入框 * radio:單選框 * 注意: 1. 要想讓多個單選框實現單選的效果,則多個單選框的name屬性值必須同樣。 2. 通常會給每個單選框提供value屬性,指定其被選中後提交的值 3. checked屬性,能夠指定默認值 * checkbox:複選框 * 注意: 1. 通常會給每個單選框提供value屬性,指定其被選中後提交的值 2. checked屬性,能夠指定默認值 * file:文件選擇框 * hidden:隱藏域,用於提交一些信息。 * 按鈕: * submit:提交按鈕。能夠提交表單 * button:普通按鈕 * image:圖片提交按鈕 * src屬性指定圖片的路徑 * color:取色器 * date:日期 * datetime-local:帶時間的日期,不帶時區 * email:定義用於email地址的字段 * number:定義用於輸入數字的字段 * label:指定輸入項的文字描述信息 * 注意: * label的for屬性通常會和 input 的 id屬性值對應。若是對應了,則點擊label區域會讓input輸入框獲取焦點。 * select: 下拉列表 * 子元素:option,指定列表項 * 加上selected 默認選中 * textarea:文本域 * cols:指定列數,每一行有多少個字符 * rows:默認多少行。
1. 概念: Cascading Style Sheets 層疊樣式表 * 層疊:多個樣式能夠做用在同一個html的元素上,同時生效 2. 好處: (1) 功能強大 (2) 將內容展現和樣式控制分離 * 下降耦合度。解耦 * 讓分工協做更容易 * 提升開發效率 3. CSS的使用:CSS與html結合方式 (1) 內聯樣式 * 在標籤內使用style屬性指定css代碼 * 如:<div style="color:red;">hello css</div> (2) 內部樣式 * 在head標籤內,定義style標籤,style標籤的標籤體內容就是css代碼 * 如: <style> div{ color:blue; } </style> <div>hello css</div> (3) 外部樣式 1. 定義css資源文件。 2. 在head標籤內,定義link標籤,引入外部的資源文件 * 如: * a.css文件: div{ color:green; } <link rel="stylesheet" href="css/a.css"> <div>hello css</div> <div>hello css</div> * 注意: * 1,2,3種方式 css做用範圍愈來愈大 * 1方式不經常使用,經常使用2,3 * 第3種格式能夠寫爲: <style> @import "css/a.css"; </style> 4. css語法: * 格式: 選擇器 { 屬性名1:屬性值1; 屬性名2:屬性值2; ... } * 選擇器:篩選具備類似特徵的元素 * 注意: * 每一對屬性須要使用;隔開,最後一對屬性能夠不加; 5. 選擇器:篩選具備類似特徵的元素 * 分類: (1) 基礎選擇器 1. id選擇器:選擇具體的id屬性值的元素.建議在一個html頁面中id值惟一 * 語法:#id屬性值{} 2. 元素選擇器:選擇具備相同標籤名稱的元素 * 語法:標籤名稱{} * 注意:id選擇器優先級高於元素選擇器 3. 類選擇器:選擇具備相同的class屬性值的元素。 * 語法:.class屬性值{} * 注意:類選擇器選擇器優先級高於元素選擇器 (2) 擴展選擇器: 1. 選擇全部元素: * 語法: *{} 2. 並集選擇器: * 選擇器1,選擇器2{} 3. 子選擇器:篩選選擇器1元素下的選擇器2元素 * 語法: 選擇器1 選擇器2{} 4. 父選擇器:篩選選擇器2的父元素選擇器1 * 語法: 選擇器1 > 選擇器2{} 5. 屬性選擇器:選擇元素名稱,屬性名=屬性值的元素 * 語法: 元素名稱[屬性名="屬性值"]{} 6. 僞類選擇器:選擇一些元素具備的狀態 * 語法: 元素:狀態{} * 如: <a> * 狀態: * link:初始化的狀態 * hover:鼠標懸浮狀態 * active:正在訪問狀態 * visited:被訪問過的狀態 6. 屬性 (1) 字體、文本 * font-size:字體大小 * color:文本顏色 * text-align:對其方式 * line-height:行高 (2) 背景 * background:複合屬性 * no-repeat 不重複 * url("圖片路徑") (3) 邊框 * border:設置邊框,複合屬性 * style : solid 實線邊界 dashed 虛線框 (4) 尺寸 * width:寬度 * height:高度 (5) 盒子模型:控制佈局 * margin:外邊距 * margin: auto; 讓div水平居中 * padding:內邊距 * 默認狀況下內邊距會影響整個盒子的大小 * box-sizing: border-box; 設置盒子的屬性,讓width和height就是最終盒子的大小 * float:浮動 * left * right
實現效果:
html
分析:
html5
實現代碼以下:web
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊頁面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/register_bg.png") no-repeat center; padding-top: 25px; } .rg_layout{ width: 900px; height: 500px; border: 8px solid #EEEEEE; background-color: white; /*讓div水平居中*/ margin: auto; } .rg_left{ /*border: 1px solid red;*/ float: left; margin: 15px; } .rg_left > p:first-child{ color:#FFD026; font-size: 20px; } .rg_left > p:last-child{ color:#A6A6A6; font-size: 20px; } .rg_center{ float: left; /* border: 1px solid red;*/ } .rg_right{ /*border: 1px solid red;*/ float: right; margin: 15px; } .rg_right > p:first-child{ font-size: 15px; } .rg_right p a { color:pink; } .td_left{ width: 100px; text-align: right; height: 45px; } .td_right{ padding-left: 50px ; } #username,#password,#email,#name,#tel,#birthday,#checkcode{ width: 251px; height: 32px; border: 1px solid #A6A6A6 ; /*設置邊框圓角*/ border-radius: 5px; padding-left: 10px; } #checkcode{ width: 110px; } #img_check{ height: 32px; vertical-align: middle; } #btn_sub{ width: 150px; height: 40px; background-color: #FFD026; border: 1px solid #FFD026 ; } </style> </head> <body> <div class="rg_layout"> <div class="rg_left"> <p>新用戶註冊</p> <p>USER REGISTER</p> </div> <div class="rg_center"> <div class="rg_form"> <!--定義表單 form--> <form action="#" method="post"> <table> <tr> <td class="td_left"><label for="username">用戶名</label></td> <td class="td_right"><input type="text" name="username" id="username" placeholder="請輸入用戶名"></td> </tr> <tr> <td class="td_left"><label for="password">密碼</label></td> <td class="td_right"><input type="password" name="password" id="password" placeholder="請輸入密碼"></td> </tr> <tr> <td class="td_left"><label for="email">Email</label></td> <td class="td_right"><input type="email" name="email" id="email" placeholder="請輸入郵箱"></td> </tr> <tr> <td class="td_left"><label for="name">姓名</label></td> <td class="td_right"><input type="text" name="name" id="name" placeholder="請輸入姓名"></td> </tr> <tr> <td class="td_left"><label for="tel">手機號</label></td> <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></td> </tr> <tr> <td class="td_left"><label>性別</label></td> <td class="td_right"> <input type="radio" name="gender" value="male"> 男 <input type="radio" name="gender" value="female"> 女 </td> </tr> <tr> <td class="td_left"><label for="birthday">出生日期</label></td> <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請輸入出生日期"></td> </tr> <tr> <td class="td_left"><label for="checkcode" >驗證碼</label></td> <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼"> <img id="img_check" src="img/verify_code.jpg"> </td> </tr> <tr> <td colspan="2" align="center"><input type="submit" id="btn_sub" value="註冊"></td> </tr> </table> </form> </div> </div> <div class="rg_right"> <p>已有帳號?<a href="#">當即登陸</a></p> </div> </div> </body> </html>