注冊用戶即可下載全站資源 關注Java幫幫微信公眾號
 

Web-第二天 HTML表單&CSS【悟空教程】

81
發表時間:2018-11-07 13:07來源:Java幫幫-微信公眾號

HTML表單&CSS

今日內容介紹

  • 使用html的表單標簽編寫“注冊頁面”

今日內容學習目標

  • 能夠使用<form><input>等標簽編寫注冊表單

  • 熟悉的CSS樣式的3種導入方式

  • 熟悉CSS選擇器的使用

  • 了解CSS基本屬性使用

  • 了解CSS盒子模型

今日學習標簽總覽


第1章 網站用戶注冊頁面顯示

1.1 案例介紹

所有的html標簽中,表單標簽是最重要的。在實際開發中,最經典的實例就是用戶注冊,覆蓋了表單標簽的所有的元素。效果圖如下:


1.2 相關知識點

本案例中使用的標簽如下:

  • <form>

  • <input>

  • <select>


1.2.1 表單相關標簽

1.2.1.1 表單標簽:<form>

<form> 表單標簽,在html頁面創建一個表單,表單標簽在瀏覽器上沒有任何顯示。如果數據需要提交到服務器,負責搜集數據的標簽必須存放在表單標簽體內容。

  • action屬性:請求路徑,確定表單提交到服務器的地址(路徑)

  • method屬性:請求方式。常用的取值:GET、POST

    • GET:默認值

      • 提交的數據追加在請求路徑上。例如:/1.html?username=jack&password=1234,數據格式k/v,追加是使用?連接,之后每一對數據使用&連接

      • 因為請求路徑長度有限,所有GET請求提交的數據有限。

    • POST:

      • 提交的數據不再請求路徑上追加(及不顯示在地址欄上)

      • 提交的數據大小不顯示

<body>

<!--表單-->

<form action="" method="">

<!--此處的內容可能被提交到服務器-->

</form>

<!--此處的內容在<form>標簽外部,此處數據不能提交到表單-->

</body>


1.2.1.2 輸入域標簽 <input>

  • <input> 標簽用于獲得用戶輸入信息,type屬性值不同,搜集方式不同。最常用的標簽。

    • type屬性

      • text:文本框,單行的輸入字段,用戶可在其中輸入文本。默認寬度為 20 個字符

      • password:密碼框,密碼字段。該字段中的字符以黑圓顯示。

      • radio:單選框,表示一組互斥選項按鈕中的一個。當一個按鈕被選中,之前選中的按鈕就變為非選中的 。

      • submit:提交按鈕。提交按鈕會把表單數據發送到服務器。一般不寫name屬性,否則將“提交”兩個字提交到服務器。

      因為不同項目注冊需要的字段不同,需要完成的案例中沒有覆蓋所有的表單元素,以下標簽使用也需要大家掌握。

      • checkbox: 復選框

      • file:文件上傳組件,提供"瀏覽"按下可以選擇需要上傳文件.

      • hidden:隱藏字段. 數據會發送給服務器,但瀏覽器不進行顯示。

      • u reset:重置按鈕。將表單恢復到默認值。

      • u image:圖形提交按鈕,通過src給按鈕設置圖片。

      • u button:普通按鈕,常用于與JavaScript結合使用。

    • name:元素名,如果需要表單數據提交到服務器,必須提供name屬性值,服務器通過屬性值獲得提交的數據。

    • value屬性:設置input標簽的默認值。submit和reset為按鈕顯示數據

    • size:大小

    • checked屬性:單選框或復選框被選中。

    • readonly:是否只讀

    • disabled:是否可用

    • maxlength:允許輸入的最大長度

1.2.1.3 下拉列表標簽: <select>

<select> 下拉列表。可以進行單選或多選。需要使用子標簽<option>指定列表項

name屬性:發送給服務器的名稱

multiple屬性:不寫默認單選,取值為“multiple”表示多選。

size屬性:多選時,可見選項的數目。

<option> 子標簽:下拉列表中的一個選項(一個條目)。

    selected :勾選當前列表項

    value :發送給服務器的選項值。

1.2.1.4 文本域標簽: <textarea>

  • <textarea> 文本域。多行的文本輸入控件。

    • cols屬性:文本域的列數

    • rows屬性:文本域的行數

1.2.1.5 按鈕標簽: <button> (了解)

  • <button type="button|reset|submit"> 按鈕標簽一般很少使用,提供“普通|重置|提交”功能,不同的瀏覽器默認值不同。

1.2.2 什么是div

div就是html一個普通標簽,進行區域劃分。特性:獨自占一行。獨自不能實現復雜效果。必須結合CSS樣式進行渲染。

div通常其是塊級元素

1.2.3 CSS的概述

1.2.3.1 CSS是什么

CSS 通常稱為CSS樣式或層疊樣式表,主要用于設置HTML頁面中的文本內容(字體、大小、對其方式等)、圖片的外形(高寬、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。

CSS可以是HTML頁面更好看,CSS色系的搭配可以讓用戶更舒服,CSS+DIV布局更佳靈活,更容易繪制出用戶需要的結構。

1.2.3.2 CSS名詞解釋

CSS (Cascading Style Sheets) :指層疊樣式表

樣式:給HTML標簽添加需要顯示的效果。

層疊:使用不同的添加方式,給同一個HTML標簽添加樣式,最后所有的樣式都疊加到一起,共同作用于該標簽。

1.2.3.3 CSS樣式規則

使用HTML時,需要遵從一定的規范。CSS亦如此,要想熟練的使用CSS對網頁進行修飾,首先需要了解CSS樣式規則。具體格式如下

選擇器{屬性1:屬性值;屬性2:屬性值;..}

在上面的樣式規則中,“選擇器”用于指定CSS樣式作用的HTML對象,花括號內是對該對象設置的具體樣式。屬性和屬性值以鍵值對方式出現,使用英文冒號“:”分隔。多個屬性之間使用英文分號“;”分隔。例如:

<style>

h2{

color:red;

font-size:100px;

}

</style>

初學者在書寫CSS樣式時,除了要遵循CSS樣式規則,還必須注意CSS代碼結構中的幾個特點,具體如下:

  • CSS樣式“選擇器”嚴格區分大小寫,“屬性”和“屬性值”不區分大小寫。

  • 多個屬性之間必須用英文狀態下的分號隔開,最后一個屬性后的分號可以省略,但是,為了便于增加新樣式最好保留。

  • 如果屬性的值由多個單詞組成且中間包含空格,則必須為這個屬性值加上英文狀態下的引號。例如:

p { font-family:"Times New Roman";}

  • 在編寫CSS代碼時,為了提高代碼的可讀性,通常會加上CSS注釋,例如:

/* 這是CSS注釋文本,此文本不會顯示在瀏覽器窗口中  */

  • 在CSS代碼中空格是不被解析的,花括號以及分號前后的空格可有可無。因此,可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版,即所謂的格式化CSS代碼,這樣可以提高代碼的可讀性。例如:

h1{ font-size:20px; color:red; }

h1{

/* 定義字體大小屬性*/

 font-size:20px;

/* 定義顏色屬性  */

color:red;

}

  • 上述兩段代碼所呈現的效果是一樣的,但是,第二種書寫方式的可讀性更高。需要注意的是,屬性的值和單位之間是不允許出現空格的,否則瀏覽器解析時會出錯。例如,下面這行代碼就是不正確的。

 /* 20和單位px之間有空格 */

h1{ font-size:20 px; }              

1.2.3.4 引入CSS樣式  

CSS使用非常靈活,及可以嵌入在HTML文檔中,也可以是一個單獨的文件,如果是單獨的文件,則必須以.css為擴展名。CSS和HTML的結合3種常用方式:

1) 行內樣式

行內樣式,是通過標簽的style屬性來設置元素的樣式。

<!--方式1:行內樣式

color : 表示字體顏色

font-size : 表示字體大小

-->

<a style="color: #f00; font-size: 30px;">Java幫幫</a>

行內樣式通過標簽的屬性來控制樣式,這樣并沒有做到結構與表現(HTML展示結構、CSS顯示效果)相分離,所以一般很少使用。學習階段有時候為了快速編程,偶有使用。

2) 內部樣式

內部樣式又稱為內嵌式,是將CSS代碼集中卸載HTML文檔的<head>頭部標簽體中,并且使用<style>標簽定義。

給當前html文件中的多個標簽設置樣式。

在html的<head>標簽中使用<style>標簽來定義CSS

<!--方式2:內部樣式

background-color : 表示背景色

-->

<style type="text/css">

body{

background-color: #ddd;

}

</style>

內嵌式CSS樣式只對其所在的HTML頁面有效,可以對多處標簽統一設置樣式,因此,僅設計一個頁面時,使用內嵌式是個不錯的選擇。但如果是一個網站,不建議使用這種方式,因為他不能充分發揮CSS代碼的重用優勢。

3) 外部樣式

外部樣式又稱為鏈入式,是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中,通過<link>標簽將樣式連接到HTML文檔中。

<!--方式3:外部樣式

rel="stylesheet" ,固定值,表示樣式表

type="text/css",固定值,表示css類型

href ,表示css文件位置

font-family 表示使用的字體系列,多個字體使用逗號分隔。例如:“字體1,字體2,字體3”,此時優先使用“字體1”,如果“字體1”系統不存在,再使用“字體2”,以此類推。

-->

<link rel="stylesheet" type="text/css" href="css/demo00.css"/>

鏈入式最大的好處是同一個CSS樣式表可以被不同的HTML頁面鏈接使用,同時一個HTML頁面也可以通過多個<link />標記鏈接多個CSS樣式表。

優先級

1.2.4 選擇器

要想將CSS樣式應用于特定的HTML元素,首先需要找到該目標元素。在CSS中,執行這一任務的樣式規則部分被稱為選擇器,本小節將對CSS基礎選擇器進行詳細地講解,具體如下:


1.2.4.1 元素選擇器

標記選擇器是指用HTML標記名稱作為選擇器,按標記名稱分類,為頁面中某一類標記指定統一的CSS樣式。其基本語法格式如下:

標記名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中,所有的HTML標記名都可以作為標記選擇器,例如body、h1、p、strong等。用標記選擇器定義的樣式對頁面中該類型的所有標記都有效。

例如:

h1{

color: #F00;

font-size: 50px;

}

<h1>Java幫幫</h1>

標記選擇器最大的優點是能快速為頁面中同類型的標記統一樣式,同時這也是他的缺點,不能設計差異化樣式。


1.2.4.2 ID選擇器

id選擇器使用“#”進行標識,后面緊跟id名,其基本語法格式如下:

#id{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中,id名即為HTML元素的id屬性值,大多數HTML元素都可以定義id屬性,元素的id值是唯一的,只能對應于文檔中某一個具體的元素。

例如:

#demo1{

color:#0f0;

}

<h1 id="demo1">Java幫幫</h1>

“標簽選擇器”和“id選擇器”共同作用的效果


1.2.4.3 類選擇器

類選擇器使用“.”(英文點號)進行標識,后面緊跟類名,其基本語法格式如下:

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中,類名即為HTML元素的class屬性值,大多數HTML元素都可以定義class屬性。類選擇器最大的優勢是可以為元素對象定義單獨或相同的樣式。

例如:

.myClass{

font-size: 25px;

}

<h1>Java培訓</h1>

“標簽選擇器”和“類選擇器”共同作用的效果

類選擇器的高級用法:給指定的標簽設置class樣式

標簽.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

1.2.4.4 擴展:屬性選擇器

屬性選擇器,在標簽后面使用中括號標記,其基本語法格式如下:

標簽名[標簽屬性=標簽屬性值’]{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該選擇器,是對“元素選擇器”的擴展,對一組標簽進一步過濾。

例如:

<style>

input[type="text"]{

background-color: yellow;

}

input[type="password"]{

background-color: green;

}

</style>

1.2.4.5 擴展:包含選擇器

包含選擇器,兩個標簽之間使用空格,給指定父標簽的后代標簽設置樣式,可以方便在區域內編寫樣式。

父標簽 后代標簽{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該選擇器,是對“元素選擇器”的擴展,對一個標簽內部所有后代標簽進行過濾。

<style>

#d1 div{

color: red;

}

</style>

1.2.5 CSS的樣式:

1.2.5.1 邊框和尺寸:borderwidthheight

  • border :設置邊框的樣式

    • 格式:寬度 樣式 顏色

    • 例如:style=”border:1px solid #f00”  ,1像素實邊紅色。

  • 樣式取值:solid 實線,none 無邊,double 雙線 等

  • width、height:用于設置標簽的寬度、高度。

<style type="text/css">

div{

border:1px solid #000;  /*1像素,實邊,黑色*/

width:200px;

height:200px;

}

</style>

1.2.5.2 轉換:display

HTML提供豐富的標簽,這些標簽被定義成了不同的類型,一般分為:塊標簽和行內標簽。

  • 塊標簽:以區域塊方式出現。每個塊標簽獨自占據一整行或多整行。

    • 常見的塊元素:<h1>、<div>、<ul>等

  • 行內元素:不必在新的一行開始,同時也不強迫其他元素在新的一行顯示。

    • 常見的行內元素:<span>、<a> 等

在開發中,希望行內元素具有塊元素的特性,需要使用display進行轉換

選擇器{display:屬性值}

常用的屬性值:

inline:此元素將顯示為行內元素(行內元素默認的display屬性值)

block:此元素將顯為塊元素(塊元素默認的display屬性值)

none:此元素將被隱藏,不顯示,也不占用頁面空間。

例如:

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

span{

border :1px solid #000;

width:100px;

height:40px;

}

</style>

</head>

<body>

<!--默認顯示一行,邊框環繞,高寬沒有作用-->

<span>顯示1-1</span>

<span>顯示1-2</span>


<!--每一行顯示,高寬有作用-->

<span style="display: block;">顯示2-1</span>

<span style="display: block;">顯示2-2</span>

</body>

</html>

1.2.5.3 字體:colorfont-size

color:顏色,字體顏色

例如:

<div style="height: 50px;width:200px;border:1px solid #000;">

<a href="">點擊</a>

<a href="" style="text-decoration: none;">點擊</a>

</div>

<div style="height: 50px;width:200px;border:1px solid #000;">

<a href="" style="line-height: 50px;">點擊</a>

<a href="" style="color: red;">點擊</a>

</div>

1.2.5.4 背景色:background-color

<ul style="background-color: #999;color: #FFF;">

<li>點擊</li>

<li>點擊</li>

<li style="background-color: #000;">點擊</li>

<li>點擊</li>

</ul>

1.2.5.5 布局:floatclear

通常默認的排版方式,將頁面中的元素從上到下一一羅列,而實際開發中,需要左右方式進行排版,就需要使用浮動

選擇器{float:屬性值;}

常用屬性值:

left:元素向左浮動

right:元素向右浮動

none:元素不浮動(默認值)

由于浮動元素不再占用原文檔流的位置,所以它會對頁面中其他元素的排版產生影響。如果要避免影響,需要使用clear屬性進行清除浮動。

選擇器{clear:屬性值;}

常用屬性值:

left:不允許左側有浮動元素(清除左側浮動的影響)

right:不允許右側有浮動元素(清除右側浮動的影響)

both:同時清除左右兩側浮動的影響

例如:

<!--默認上下布局-->

<div>

<div>區域1-1</div>

<div>區域1-2</div>

</div>

<hr />

<!--浮動左右布局-->

<div>

<div style="float: left;">區域2-1</div>

<div style="float: left;">區域2-2</div>

</div>

<!--取消浮動,另起一行布局-->

<div style="clear:both"></div>

<hr />

<div>

<div style="float: left;">區域2-1</div>

<div style="float: left;">區域2-2</div>

<div style="float: left;">區域2-3</div>

</div>

1.2.6 CSS的盒子模型

1.2.6.1 什么是盒子模型

CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。


1.2.6.2 內邊距:padding.


1.2.6.3 邊框:border


1.2.6.4 外邊距:margin

1.3 案例分析

1.3.1 知識點分析

為了結構更好的顯示表單,本案例我們需要使用table表格布局。根據“驗證碼”我們需要提供3列來顯示數據,其他需要將中和右合并。最終需要創建3*10表格。

1.4 案例實現

1.4.1 <table>布局

<table border="1" width="500" height="300">

<tr>

<td colspan="3"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr>

<td></td>

<td colspan="2"></td>

</tr>

</table>

1.4.2 表單

<table  width="600">

<tr>

<td colspan="3">

<font color="#3164af">會員注冊</font> USER REGISTER

</td>

</tr>

<tr>

<td>用戶名</td>

<td colspan="2"><input type="text" name="loginname" size="60"/> </td>

</tr>

<tr>

<td>密碼</td>

<td colspan="2"><input type="password" name="loginpwd" size="60"/> </td>

</tr>

<tr>

<td>確認密碼</td>

<td colspan="2"><input type="password" name="reloginpwd" size="60"/> </td>

</tr>

<tr>

<td>Email</td>

<td colspan="2"><input type="text" name="email" size="60"/> </td>

</tr>

<tr>

<td>姓名</td>

<td colspan="2"><input name="text" name="username" size="60"/> </td>

</tr>

<tr>

<td>性別</td>

<td colspan="2">

<input type="radio" name="gender" value="" checked="checked" />

<input type="radio" name="gender" value="" />

</td>

</tr>

<tr>

<td>出生日期</td>

<td colspan="2"><input type="text" name="birthday" size="60"/> </td>

</tr>

<tr>

<td width="80">驗證碼</td>

<td width="100"><input type="text" name="verifyCode" /> </td>

<td><img src="img/code.jpg" /> </td>

</tr>

<tr>

<td></td>

<td colspan="2">

<input type="submit" value="注冊" />

</td>

</tr>

</table>

1.4.3 CSS渲染

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

body{

height:500px;

}

#divFormId{

border: 5px solid #999;

width: 500px;

margin: 0 auto;

padding: 20px;

background-color: #fff;

}

#divbg{

background: url(../img/regist_bg.jpg);

height:100%;

padding-top: 80px;

}

</style>

</head>

<body>

<div id="divbg">

<div id="divFormId">

<form action="#" method="get">

... 省略

</form>

</div>

</div>

</body>

</html>


1.5 案例總結

1.5.1 divspan比較

  • div塊級元素,默認獨自占一行

  • span 行內元素,默認所有的在一行。都可以進行區域劃分。

通過css對其進行轉換

displayblocknone

第2章 總結



支付寶贊助-Java幫幫社區
微信贊助-Java幫幫社區
Java幫幫公眾號生態

Java幫幫公眾號生態

總有一款適合你

Java幫幫-微信公眾號

Java幫幫-微信公眾號

將分享做到極致

Python幫幫-公眾號

Python幫幫-公眾號

人工智能,爬蟲,學習教程

大數據驛站-微信公眾號

大數據驛站-微信公眾號

一起在數據中成長

九點編程-公眾號

九點編程-公眾號

深夜九點學編程

程序員生活志-公眾號

程序員生活志-公眾號

互聯網,職場,程序員那些事兒

Java幫幫學習群生態

Java幫幫學習群生態

總有一款能幫到你

Java學習群

Java學習群

與大牛一起交流

大數據學習群

大數據學習群

在數據中成長

九點編程學習群

九點編程學習群

深夜九點學編程

python學習群

python學習群

人工智能,爬蟲

測試學習群

測試學習群

感受測試的魅力

Java幫幫生態承諾

Java幫幫生態承諾

一直堅守,不負重望

初心
勤儉
誠信
正義
分享
合作品牌 非盈利生態-優質內容分享傳播者
關于我們
友鏈申請
友鏈交換:加幫主QQ2524138991 留言即可 24小時內答復  
全站內容非商業用途,內容來源于網友,并遵循 許可,如有異議請聯系客服。
會員登錄
獲取驗證碼
登錄
登錄
我的資料
留言
回到頂部