JavaWeb01_HTML+CSS实现注册页面
生活随笔
收集整理的這篇文章主要介紹了
JavaWeb01_HTML+CSS实现注册页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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...* 如果用戶請求的是動態資源，那么服務器會執行動態資源，轉換為靜態資源，再發送給瀏覽器我們要學習動態資源，必須先學習靜態資源！
3. 靜態資源分類：
* HTML：用于搭建基礎網頁，展示頁面的內容* CSS：用于美化頁面，布局頁面* JavaScript：控制頁面的元素，讓頁面有一些動態的效果HTML
概念：
HTML是最基礎的網頁開發語言* Hyper Text Markup Language 超文本標記語言* 超文本:* 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本.* 標記語言:* 由標簽構成的語言。<標簽名稱> 如 html，xml* 標記語言不是編程語言快速入門：
語法：
1. html文檔后綴名 .html 或者 .htm 2. 標簽分為1. 圍堵標簽：有開始標簽和結束標簽。如 <html> </html> 3. 自閉和標簽：開始標簽和結束標簽在一起。如 <br/> 4. 標簽可以嵌套：需要正確嵌套，不能你中有我，我中有你錯誤：<a><b></a></b>正確：<a><b></b></a> 5. 在開始標簽中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來 6. html的標簽不區分大小寫，但是建議使用小寫。標簽學習：
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. 數值%：占比相對于父元素的比例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>：表示表格的腳部分9. 表單標簽
1. 表單：
* 概念：用于采集用戶輸入的數據的。用于和服務器進行交互。-
form：用于定義表單的。可以定義一個范圍，范圍代表采集用戶數據的范圍
- 屬性：
- action：指定提交數據的URL
- method:指定提交方式
- 分類：一共7種，2種比較常用
- get：
- 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議后講解)。
- 請求參數大小是有限制的。
- 不太安全。
- post：
2. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議后講解)
2. 請求參數的大小沒有限制。
3. 較為安全。
- 分類：一共7種，2種比較常用
- 屬性：
注意：表單項中的數據要想被提交：必須指定其name屬性
2. 表單項標簽
* input：可以通過type屬性值，改變元素展示的樣式* type屬性：* text：文本輸入框，默認值* placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息 * password：密碼輸入框* radio:單選框* 注意：1. 要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。2. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值3. checked屬性，可以指定默認值* checkbox：復選框* 注意：1. 一般會給每一個單選框提供value屬性，指定其被選中后提交的值2. checked屬性，可以指定默認值* file：文件選擇框* hidden：隱藏域，用于提交一些信息。* 按鈕：* submit：提交按鈕。可以提交表單* button：普通按鈕* image：圖片提交按鈕* src屬性指定圖片的路徑 * label：指定輸入項的文字描述信息* 注意：* label的for屬性一般會和 input 的 id屬性值 對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。* select: 下拉列表* 子元素：option，指定列表項* textarea：文本域* cols：指定列數，每一行有多少個字符* rows：默認多少行。表單項標簽效果圖：
CSS：頁面美化和布局控制
1. 概念：
- Cascading Style Sheets 層疊樣式表
- 層疊：多個樣式可以作用在同一個html的元素上，同時生效
2. 好處：
功能強大
將內容展示和樣式控制分離
-
降低耦合度。解耦
-
讓分工協作更容易
-
提高開發效率
3. CSS的使用
1. 內聯樣式
-
在標簽內使用style屬性指定css代碼
- 如：
2. 內部樣式
-
在head標簽內，定義style標簽，style標簽的標簽體內容就是css代碼
- 如：
3. 外部樣式
1. 定義css資源文件
2. 在head標簽內，定義link標簽，引入外部的資源文件
-
如：a.class文件
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
-
種格式可以寫為：
<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元素
- 語法： 選擇器1 選擇器2{}
父選擇器：篩選選擇器2的父元素選擇器1
- 語法： 選擇器1 > 選擇器2{}
屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
- 語法： 元素名稱[屬性名=“屬性值”]{}
偽類選擇器：選擇一些元素具有的狀態
-
? 語法： 元素:狀態{}
-
? 如：
? 狀態：
-
link：初始化的狀態
- visited：被訪問過的狀態
- active：正在訪問狀態
* hover：鼠標懸浮狀態
6. 屬性
字體、文本
- font-size：字體大小
- color：文本顏色
- text-align：對其方式
- line-height：行高
背景
- background：
邊框
- border：設置邊框，符合屬性
尺寸
- width：寬度
- height：高度
盒子模型：控制布局
-
margin：外邊距
-
padding：內邊距
- 默認情況下內邊距會影響整個盒子的大小
- box-sizing: border-box; 設置盒子的屬性，讓width和height就是最終盒子的大小
-
float：浮動
-
left
-
right
案例（Html+CSS注冊頁面）
注冊頁面效果圖：
代碼：
<!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>總結
以上是生活随笔為你收集整理的JavaWeb01_HTML+CSS实现注册页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux目录及常用命令英文全称与中文解
- 下一篇： 2017年html5行业报告,云适配发布