就業(yè)班第二階段-課件713課程htmlcss

1、HTML 表單&CSS今日內(nèi)容介紹使用 html 的表單編寫“頁面”今日內(nèi)容學習目標能夠使用等編寫表單熟悉的 CSS 樣式的 3 種導(dǎo)入方式熟悉 CSS 選擇器的使用了解 CSS 基本屬性使用了解 CSS 盒子模型今日學習講學習表單總覽，提供總覽方便大家更好的吸收。第1章用戶頁面顯示1.1 案例介紹所有的 html中，表單是最重要的。在實際開發(fā)中，最經(jīng)典的實例就是用戶，覆蓋了表單的所有的元素。效果圖如下：1.2 相關(guān)知識點本案例中使用的如下：1.2.1表單相關(guān)1.2.1.1 表單： 表單，在 html 頁面創(chuàng)建一個表單，表單在瀏覽器上沒有任何顯示。如果數(shù)據(jù)體內(nèi)容。需要提交到服務(wù)器，負責搜集數(shù)據(jù)

2、的必須存放在表單action 屬性：請求路徑，確定表單提交到服務(wù)器的地址（路徑）method 屬性：請求方式。常用的取值：GET、GET：默認值T提交的數(shù)據(jù)追加在請求路徑上。例如：/1.html?username=jack&password=1234，數(shù)據(jù)格式 k/v，追加是使用?連接，之后每一對數(shù)據(jù)使用&連接因為請求路徑長度有限，所有GET 請求提交的數(shù)據(jù)有限。敏感數(shù)據(jù)會在地址欄顯示,不適合做等數(shù)據(jù)提交T：提交的數(shù)據(jù)不再請求路徑上追加（及不顯示在地址欄上）提交的數(shù)據(jù)大小不顯示1.2.1.2 輸入域：用于獲得用戶輸入信息，type 屬性值不同，搜集方式不同。最常用的。type 屬性text：文

3、本框，單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符password：框，字段。該字段中的字符以黑圓顯示。radio：單選框，表示一組互斥選項按鈕中的一個。當一個按鈕被選中，之前選中的按鈕就變?yōu)榉沁x中的 。submit：提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。一般不寫 name 屬性，否則將“提交”兩個字提交到服務(wù)器。因為不同項目需要的字段不同，需要完成的案例中沒有覆蓋所有的表單元素，以下用也需要大家掌握。使checkbox： 復(fù)選框image: 按鈕上的file：文件上傳組件,提供瀏覽按下可以選擇需要上傳文件.hidden：隱藏字段. 數(shù)據(jù)會發(fā)送給服務(wù)器，但瀏覽器不進行顯

4、示。reset：重置按鈕。將表單恢復(fù)到默認值。 button：普通按鈕，常用于與 JavaScript 結(jié)合使用。name：元素名，如果需要表單數(shù)據(jù)提交到服務(wù)器，必須提供 name 屬性值，服務(wù)器通過屬性值獲得提交的數(shù)據(jù)。value 屬性：設(shè)置 input的默認值。submit 和 reset 為按鈕顯示數(shù)據(jù)checked 屬性：單選框或復(fù)選框被選中。readonly：是否只讀 disabled：是否可用1.2.1.3 下拉列表： 下拉列表。可以進行單選或多選。需要使用子指定列表項name 屬性：發(fā)送給服務(wù)器的名稱multiple 屬性：不寫默認單選，取值為“multiple”表示多選。siz

5、e 屬性：多選時，可見選項的數(shù)目。!-此處的內(nèi)容在外部，此處數(shù)據(jù)不能提交到表單- 子：下拉列表中的一個選項（一個條目）。selected ：勾選當前列表項value ：發(fā)送給服務(wù)器的選項值。1.2.1.4 文本域： 文本域。多行的文本輸入控件。cols 屬性：文本域的列數(shù)rows 屬性：文本域的行數(shù)1.2.1.5 按鈕： （了解） 按鈕不同的瀏覽器默認值不同。一般很少使用，提供“普通|重置|提交”功能，1.2.2divdiv 就是 html 一個普通須結(jié)合CSS 樣式進行渲染。div 通常其是塊級元素，進行區(qū)域劃分。特性：獨自占一行。獨自不能實現(xiàn)復(fù)雜效果。必1.2.3 CSS 的概述1.2.3

6、.1 CSS 是什么CSS 通常稱為 CSS 樣式或?qū)盈B樣式表，主要用于設(shè)置 HTML 頁面中的文本內(nèi)容（字體、大小、對其方式等）、的外形（、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS 可以是 HTML 頁面更好看，CSS 色系的搭配可以讓用戶更舒服，CSS+DIV 布局更佳靈活，更容易繪制出用戶需要的結(jié)構(gòu)。1.2.3.2 CSSCSS (Cascading Style Sheets) ：指層疊樣式表樣式：給 HTML添加需要顯示的效果。層疊：使用不同的添加方式，給同一個 HTML添加樣式，最后所有的樣式都疊加到一起，共同作用于該。1.2.3.3 CSS 樣式規(guī)則使用 HTML 時

7、，需要遵從一定的規(guī)范。CSS 亦如此，要想熟練的使用 CSS 對網(wǎng)頁進行修飾，首先需要了解CSS 樣式規(guī)則。具體格式如下在上面的樣式規(guī)則中，“選擇器”用于指定 CSS 樣式作用的 HTML 對象，花括號內(nèi)是對該對象設(shè)置的具體樣式。屬性和屬性值以鍵值對方式出現(xiàn)，使用英文冒號“:”分隔。多個屬性之間使用英文分號“;”分隔。例如：初學者在書寫 CSS 樣式時，除了要遵循CSS 樣式規(guī)則，還必須注意CSS 代碼結(jié)構(gòu)中的幾個特點，具體如下：CSS 樣式“選擇器”嚴格區(qū)分大小寫，“屬性”和“屬性值”不區(qū)分大小寫。多個屬性之間必須用英文狀態(tài)下的分號隔開，最后一個屬性后的分號可以省略，但是，為了便于增加新樣式

8、最好保留。如果屬性的值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號。例如：在編寫CSS 代碼時，為了提高代碼的可讀性，通常會加上 CSS 注釋，例如：在 CSS 代碼中空格是不被的，花括號以及分號前后的空格可有可無。因此，可以使用空格鍵、Tab 鍵、回車鍵等對樣式代碼進行排版，即所謂的格式化 CSS 代碼，這樣可以提高代碼的可讀性。例如：和上述兩段代碼所呈現(xiàn)的效果是一樣的，但是，第二種書寫方式的可讀性更高。需要注意的是，屬性的值和之間是不允許出現(xiàn)空格的，否則瀏覽器時會出錯。例如，下面這h1font-size:20px;/* 定義字體大小屬性 */color:red;/*

9、 定義顏色屬性 */h1font-size:20px; color:red; /* 這是 CSS 注釋文本,此文本不會顯示在瀏覽器窗口中 */p font-family:Times New Roman;h2color:red;font-size:100px;選擇器屬性 1:屬性值;屬性 2:屬性值;.行代碼就是不正確的。1.2.3.4 引入 CSS 樣式CSS 使用非常靈活，及可以嵌入在 HTML 文檔中，也可以是一個單獨的文件，如果是單獨的文件，則必須以.css 為擴展名。CSS 和 HTML 的結(jié)合 3 種常用方式：1)行內(nèi)樣式行內(nèi)樣式，是通過的 style 屬性來設(shè)置元素的樣式。行內(nèi)樣式

10、通過的屬性來控制樣式，這樣并沒有做到結(jié)構(gòu)與表現(xiàn)（HTML 展示結(jié)構(gòu)、CSS 顯示效果）相分離，所以一般很少使用。學習階段有時候為了快速編程，偶有使用。2)內(nèi)部樣式內(nèi)部樣式又稱為內(nèi)嵌式，是將 CSS 代碼集中寫在 HTML 文檔的頭部定義。體中，并且使用給當前 html 文件中的多個設(shè)置樣式。在 html 的中使用來定義CSS內(nèi)嵌式 CSS 樣式只對其所在的 HTML 頁面有效，可以對多處設(shè)置樣式，因此，僅設(shè)計一個頁面時，使用內(nèi)嵌式是個不錯的選擇。但如果是一個，不建議使用這種方式，因為他不能 bodybackground-color: #ddd;播客h1 font-size:20 px; /*

11、20 和px 之間有空格 */充分發(fā)揮CSS 代碼的重用優(yōu)勢。3)外部樣式外部樣式又稱為鏈入式，是將所有的樣式放在一個或多個以.css 為擴展名的外部樣式表文件中，通過將樣式連接到 HTML 文檔中。鏈入式最大的好處是同一個 CSS 樣式表可以被不同的 HTML 頁面使用，同時一個 HTML 頁面也可以通過多個標記多個CSS 樣式表。優(yōu)先級1.2.4 選擇器要想將 CSS 樣式應(yīng)用于特定的 HTML 元素，首先需要找到該目標元素。在 CSS 中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器，本小節(jié)將對CSS 基礎(chǔ)選擇器進行詳細地講解，具體如下：1.2.4.1 元素選擇器標記選擇器是指用 HTML 標

12、記名稱作為選擇器，按標記名稱分類，為頁面中某一類標記指定統(tǒng)一的 CSS 樣式。其基本語法格式如下：該語法中，所有的 HTML 標記名都可以作為標記選擇器，例如 body、h1、p、strong 等。用標記選擇器定義的樣式對頁面中該類型的所有標記都有效。例如：標記選擇器最大的優(yōu)點是能快速為頁面中同類型的標記設(shè)計差異化樣式。樣式，同時這也是他的缺點，不能1.2.4.2 ID 選擇器id 選擇器使用“#”進行標識，后面緊跟 id 名，其基本語法格式如下：該語法中，id 名即為 HTML 元素的 id 屬性值，大多數(shù)HTML 元素都可以定義 id 屬性，元素的 id值是唯一的，只能對應(yīng)于文檔中某一個具

13、體的元素。即使在頁面中使用多個相同 id 值也不會報錯,但是會影響到 javascript 的網(wǎng)頁特效.例如：“選擇器”和“id 選擇器”共同作用的效果1.2.4.3 類選擇器類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：該語法中，類名即為 HTML 元素的 class 屬性值，大多數(shù) HTML 元素都可以定義 class 屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。例如：.類名屬性 1:屬性值 1; 屬性 2:屬性值 2; 屬性 3:屬性值 3; #demo1color:#0f0;#id 名屬性 1:屬性值 1; 屬性 2:屬性值 2; 屬性 3

14、:屬性值 3; h1color: #F00; font-size: 50px;播客標記名屬性 1:屬性值 1; 屬性 2:屬性值 2; 屬性 3:屬性值 3; “選擇器”和“類選擇器”共同作用的效果類選擇器的高級用法：給指定的設(shè)置 class 樣式1.2.4.4 擴展：屬性選擇器屬性選擇器，在后面使用中括號標記，其基本語法格式如下：該選擇器，是對“元素選擇器”的擴展，對一組例如：進一步過濾。1.2.4.5 擴展：包含選擇器包含選擇器，兩個編寫樣式。之間使用空格，給指定父的后代設(shè)置樣式，可以方便在區(qū)域內(nèi)該選擇器，是對“元素選擇器”的擴展，對一個內(nèi)部所有后代進行過濾。#d1 divcolor: r

15、ed;父后代屬性 1:屬性值 1; 屬性 2:屬性值 2; 屬性 3:屬性值 3; inputtype=text background-color: yellow;inputtype=password background-color: green;名屬性=屬性值屬性 1:屬性值 1; 屬性 2:屬性值 2; 屬性 3:屬性值 3; .類名屬性 1:屬性值 1; 屬性 2:屬性值 2; 屬性 3:屬性值 3; .myClassfont-size: 25px;Java 培訓(xùn)1.2.4.6 擴展：偽類選擇器在支持 CSS 的瀏覽器中，的不同狀態(tài)都可以不同的方式顯示，這些狀態(tài)包括：活動狀態(tài)，已被狀態(tài)

16、，未被狀態(tài)，和鼠標懸停狀態(tài)。書寫有順序! 必須是 l v h a1.2.5 CSS 的樣式:1.2.5.1 邊框和尺寸：border、width、heightborder ：設(shè)置邊框的樣式格式：寬度 樣式 顏色例如：style=”border:1px solid #f00”，1 像素實邊紅色。樣式取值：solid 實線，none 無邊，double 雙線 等width、height：用于設(shè)置的寬度、高度。 divborder:1px solid #000; /*1 像素，實邊，黑色*/width:200px; height:200px;a:link color: #FF0000/* 未的*/

17、a:visited color: #00FF00/* 已的*/ a:hover color: #FF00FF /* 鼠標移動到上 */a:active color: #0000FF /* 選定的*/1.2.5.2 轉(zhuǎn)換：displayHTML 提供豐富的，這些被定義成了不同的類型，一般分為：塊和行內(nèi)。塊：以區(qū)域塊方式出現(xiàn)。每個塊獨自占據(jù)一整行或多整行。常見的塊元素：、等行內(nèi)元素：不必在新的一行開始，同時也不強迫其他元素在新的一行顯示。常見的行內(nèi)元素：、 等在開發(fā)中，希望行內(nèi)元素具有塊元素的特性，需要使用 display 進行轉(zhuǎn)換例如： spanborder :1px solid #000; w

18、idth:100px; height:40px;顯示 1-1顯示 1-2顯示 2-1顯示 2-2選擇器display:屬性值常用的屬性值：inline：此元素將顯示為行內(nèi)元素（行內(nèi)元素默認的 display 屬性值）block：此元素將顯為塊元素（塊元素默認的 display 屬性值）none：此元素將被隱藏，不顯示，也不占用頁面空間。1.2.5.3 字體：color、font-size例如：1.2.5.4 背景ackground-color點擊點擊點擊點擊點擊點擊點擊點擊color：顏色，字體顏色1.2.5.5 布局：float、clear通常默認的排版方式，將頁面中的元素從上到下一一羅列，

19、而實際開發(fā)中，需要左右方式進行排版，就需要使用浮動由于浮動元素不再占用原文檔流的位置，所以它會對頁面中其他元素的排版產(chǎn)生影響。如果要避免影響，需要使用clear 屬性進行清除浮動。例如：區(qū)域 1-1區(qū)域 1-2區(qū)域 2-1區(qū)域 2-2選擇器clear:屬性值;常用屬性值：left：不允許左側(cè)有浮動元素（清除左側(cè)浮動的影響） right：不允許右側(cè)有浮動元素（清除右側(cè)浮動的影響）both：同時清除左右兩側(cè)浮動的影響選擇器float:屬性值;常用屬性值：left：元素向左浮動 right：元素向右浮動none：元素不浮動（默認值）1.2.6 CSS 的盒子模型1.2.6.1盒子模型CSS 框模型 (Box M) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。區(qū)域 2-1區(qū)域 2-2區(qū)域 2-31.2.6.2 內(nèi)邊距：padding.1.2.6.3 邊框：border1.2.6.4 外邊距：margin1.3 案例分析1.3.1 知識點分析為了結(jié)構(gòu)更好的顯示表單，本案例需要使用 table 表格布局。根據(jù)“”需