javaweb(2)：HTML、CSS

印度阿三17 2019-10-15

展開(kāi)全文

1.HTML

1.1 表單標(biāo)簽：form

<form> 表單標(biāo)簽，在html頁(yè)面創(chuàng)建一個(gè)表單，表單標(biāo)簽在瀏覽器上沒(méi)有任何顯示。如果數(shù)據(jù)需要提交到服務(wù)器，負(fù)責(zé)收集數(shù)據(jù)的標(biāo)簽必須放在表單標(biāo)簽體內(nèi)容。

　　action屬性：請(qǐng)求路徑，確定表單提交到服務(wù)器的地址(路徑)

　　method屬性：請(qǐng)求方式。常用的取值：get、post

　　　　get:默認(rèn)值

　　　　　　提交的數(shù)據(jù)追加在請(qǐng)求路徑上。例如：/1.html?username=alex&password=1234,數(shù)據(jù)格式k/v，追加是使用?連接，之后每一對(duì)數(shù)據(jù)使用&連接

　　　　　　因?yàn)檎?qǐng)求路徑長(zhǎng)度有限，所有g(shù)et請(qǐng)求提交的數(shù)據(jù)有限。

　　　　post：

　　　　　　提交的數(shù)據(jù)不再請(qǐng)求路徑上追加(既不顯示在地址欄上)

　　　　　　提交的數(shù)據(jù)大小不顯示

<body>
      <!-- 表單 -->
      <form action="" method="">
            <!-- 此處的內(nèi)容可能被提交到服務(wù)器 -->
      </form>
      <!-- 此處的內(nèi)容在<form>標(biāo)簽外部，此處數(shù)據(jù)不能提交到表單 -->
</body>

1.2 輸入域標(biāo)簽：input

<input> 標(biāo)簽用于獲得用戶(hù)輸入信息，type屬性值不同，收集方式不同。最常用的標(biāo)簽。

　　　rype屬性

　　　　　　text：文本框，單行的輸入字段，用戶(hù)可在其中輸入文本。默認(rèn)寬度為20個(gè)字符

　　　　　　password：密碼框，密碼字段。該字段中的字符以黑圓顯示。

　　　　　　radio：?jiǎn)芜x框，表示一組互斥選項(xiàng)按鈕中的一個(gè)。當(dāng)一個(gè)按鈕被選中，之前選中的按鈕就變?yōu)榉沁x中的。

　　　　　　submit：提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。一般不寫(xiě)name屬性，否則將"提交"兩個(gè)字提交到服務(wù)器。

因?yàn)椴煌?xiàng)目需要的字段不同，所以我沒(méi)有把所有的表單元素寫(xiě)出來(lái)，以下標(biāo)簽使用也需要大家掌握。

　　　　　　checkbox：復(fù)選框

　　　　　　filee：文件上傳組件，提供"瀏覽"，按下可以選擇需要上傳的文件。

　　　　　　hidden：隱藏字段，數(shù)據(jù)會(huì)發(fā)送給服務(wù)器，但是瀏覽器不進(jìn)行顯示。

　　　　　　reset：重置按鈕。將表單恢復(fù)到默認(rèn)值。

　　　　　　image：圖像提交按鈕，通過(guò)src給按鈕設(shè)置圖片。

　　　　　　button：普通按鈕，常用于與JavaScript結(jié)合使用。

　　name：元素名，如果需要表單數(shù)據(jù)提交到服務(wù)器，必須提供name屬性值，服務(wù)器通過(guò)屬性值獲得提交的數(shù)據(jù)。

　　value：設(shè)置input標(biāo)簽的默認(rèn)值。submit和reset按鈕提交數(shù)據(jù)

　　size：大小

　　checked屬性：?jiǎn)芜x框或者復(fù)選框被選中。

　　readonly：是否只讀

　　disabled：是否可用

　　maxlength：允許輸入的最大長(zhǎng)度

1.3 下拉列表標(biāo)簽：select

<select> 下拉列表?？捎眠M(jìn)行單選或多選。需要使用子標(biāo)簽<option>指定列表項(xiàng)

　　name 屬性：發(fā)送給服務(wù)器的名稱(chēng)

　　multiple屬性：不寫(xiě)默認(rèn)單選，取值為"multiple"表示多選

　　size屬性：多選時(shí)，可見(jiàn)選項(xiàng)的數(shù)目。

　　<option> 子標(biāo)簽：下拉列表中的一個(gè)選項(xiàng)(一個(gè)條目)

　　　　selected:勾選當(dāng)前列表項(xiàng)

　　　　value:發(fā)送給服務(wù)器的選項(xiàng)值。

1.4 文本域標(biāo)簽：textarea

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

　　cols屬性：文本域的列數(shù)

　　rows屬性：文本域的行數(shù)

1.5 按鈕標(biāo)簽：button(了解)

<button type="button|reset|submit"> 按鈕標(biāo)簽一般很少使用，提供"普通|重置|提交"功能，不同的瀏覽器默認(rèn)值不同。

2. DIV CSS

2.1 什么是div

div就是html一個(gè)普通標(biāo)簽，進(jìn)行區(qū)域劃分。特性：獨(dú)占一行。獨(dú)自不能實(shí)現(xiàn)復(fù)雜效果。必須結(jié)合CSS樣式進(jìn)行渲染。

div通常其是塊級(jí)元素

<div> 可定義文檔中的分區(qū)或節(jié)（division/section）。 <div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來(lái)標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。

2.2 CSS的概述

2.2.1 CSS是什么

CSS通常稱(chēng)為CSS樣式或?qū)盈B樣式表，主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容(字體、大小、對(duì)齊方式等)、圖片的外形(高寬、邊框樣式、邊距等)以及版面的布局等外觀(guān)顯示樣式。

CSS可以使HTML頁(yè)面更好看，CSS色系的搭配可以讓用戶(hù)更舒服，CSS DIV布局更加靈活，更容易繪制出用戶(hù)需要的結(jié)構(gòu)。

2.2.2 CSS名詞解釋

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

　　樣式：給HTML標(biāo)簽添加需要顯示的效果。

　　層疊：使用不同的添加方式，給同一個(gè)HTML標(biāo)簽添加樣式，最后所有的樣式都疊加到一起，共同作用于該標(biāo)簽。

2.2.3 CSS樣式規(guī)則

使用HTML時(shí)，需要遵從一定的規(guī)范。CSS亦如此，想要熟練的使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行修飾，首先需要了解CSS樣式規(guī)則。具體格式如下

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

在上面的樣式規(guī)則中，“選擇器”用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。屬性和屬性值以鍵值對(duì)方式出現(xiàn)，使用英文冒號(hào)“:”分隔。多個(gè)屬性之間使用英文分號(hào)“;”分隔。例如：

<style>
        h2{
            color: red;
            font-size: 100px;
        }
</style>

初學(xué)者在書(shū)寫(xiě)CSS樣式時(shí)，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼結(jié)構(gòu)中的幾個(gè)特點(diǎn)，具體如下：

CSS樣式“選擇器”嚴(yán)格區(qū)分大小寫(xiě)，“屬性”和“屬性值”不區(qū)分大小寫(xiě)。

多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后一個(gè)屬性后的分號(hào)可以省略，但是，為了便于增加新樣式最好保留。

如果屬性的值由多個(gè)單詞組成且之間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。例如：

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

在編寫(xiě)CSS代碼時(shí)，為了提高代碼的可讀性，通常會(huì)加上CSS注釋?zhuān)纾?/p>

/* 這是css注釋文本，此文本不會(huì)顯示在瀏覽器窗口中 */

在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無(wú)。因此，可以使用空格鍵、Tab鍵、回車(chē)鍵等對(duì)樣式代碼進(jìn)行排版，即所謂的格式化CSS代碼，這樣可以提高代碼的可讀性。例如：

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

和

<style>
        h1{
            color: red;             /* 定義字體大小屬性 */
            font-size: 20px;     /* 定義顏色屬性 */
        }
</style>

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

h1{ font-size:20 px;}    /* 20和單位px之間有空格 */

2.2.4 引入CSS樣式

CSS使用非常靈活，即可以嵌入在HTML文檔中，也可以是一個(gè)單獨(dú)的文件，如果是單獨(dú)的文件，則必須以.css為擴(kuò)展名。CSS和HTML的結(jié)合3種常用方式：

(1)行內(nèi)樣式

行內(nèi)樣式，是通過(guò)標(biāo)簽的style屬性來(lái)設(shè)置元素的樣式。

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

?行內(nèi)樣式通過(guò)標(biāo)簽的屬性來(lái)控制樣式，這樣并沒(méi)有做到結(jié)構(gòu)與表現(xiàn)(HTML展示結(jié)構(gòu)、CSS顯示效果)相分離，所有一般很少使用。學(xué)習(xí)階段有時(shí)候?yàn)榱丝焖倬幊蹋紶柺褂谩?/p>

(2)內(nèi)部樣式

內(nèi)部樣式又稱(chēng)為內(nèi)嵌式，是將CSS代碼集中卸載HTML文檔的<head>頭部標(biāo)簽體中，并且使用<style>標(biāo)簽定義。

給當(dāng)前html文件中的多個(gè)標(biāo)簽設(shè)置樣式。

在html的<head>標(biāo)簽中使用<style>標(biāo)簽來(lái)定義CSS

<!-- 方式2：內(nèi)部樣式
          background-color ：表示背景色
-->
<style type="text/css">
          body{
              background-color: #ddd;
          }
</style>

?(3)外部樣式

　外部樣式又稱(chēng)為鏈入式，是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)<link>標(biāo)簽將樣式連接到HTML文檔中。

<!-- 方式3：外部樣式
          rel="stylesheet",固定值，表示樣式表
          type="text/css"，固定值，表示css類(lèi)型
          href，表示css文件位置
          font-family 表示使用的字體系列，多個(gè)字體使用逗號(hào)分隔。例如："字體1,字體2,字體3"，此時(shí)優(yōu)先使用"字體1",如果"字體1"系統(tǒng)不存在，再使用"字體2"，以此類(lèi)推。
          -->
<link rel="stylesheet" type="text/css" href="css/demo00.css"/>

?鏈入式最大的好處是同一個(gè)CSS樣式表可以被不同的HTML頁(yè)面鏈接使用，同時(shí)一個(gè)HTML頁(yè)面也可以通過(guò)多個(gè)<link/>標(biāo)記鏈接多個(gè)CSS樣式表。

2.3 選擇器

想要將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則不符被稱(chēng)為選擇器，本小節(jié)將對(duì)CSS基礎(chǔ)選擇器進(jìn)行詳細(xì)地講解，具體如下：

2.3.1 元素選擇器

標(biāo)記選擇器是指用HTML標(biāo)記名稱(chēng)作為選擇器，按標(biāo)記名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)記指定統(tǒng)一的CSS樣式。其基本語(yǔ)法格式如下：

標(biāo)記名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語(yǔ)法中，所有的HTML標(biāo)記名都可以作為標(biāo)記選擇器，例如body、h1、p、strong等。用標(biāo)記選擇器定義的樣式對(duì)頁(yè)面中該類(lèi)型的所有標(biāo)記都有效

例如：

<head>
        <style type="text/css">
            h1{
                color: #F00;
                font-size: 50px;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
 </head>
<body>
        <h1>小灰灰一號(hào)</h1>
        <h1>小灰灰二號(hào)</h1>
        <h1>小灰灰三號(hào)</h1>
</body>

?標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁(yè)面中同類(lèi)型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是他的缺點(diǎn)，不能設(shè)計(jì)差異化樣式

2.3.2 ID選擇器

?id選擇器使用"#"進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語(yǔ)法格式如下：

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

該語(yǔ)法中，id名即為HTML元素的id屬性值,大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。

例如：

<head>
        <style type="text/css">
            #demo1{
                color: #0f0;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
</head>
<body>
        <h1 id="demo1">小灰灰</h1>
</body>

?2.3.3 類(lèi)選擇器

類(lèi)選擇器使用“.”(英文點(diǎn)號(hào))進(jìn)行標(biāo)識(shí)，后面緊跟類(lèi)名，其基本語(yǔ)法格式如下：

.類(lèi)名{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語(yǔ)法中，id名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義class屬性。類(lèi)選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。

例如：

<head>
        <style type="text/css">
            .myClass{
                font-size: 25px;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
 </head>
<body>
        <h1 class="myClass">小灰灰</h1>
</body>

?類(lèi)選擇器的高級(jí)用法：給指定的標(biāo)簽設(shè)置class樣式

標(biāo)簽.類(lèi)名 { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

2.3.4 擴(kuò)展：屬性選擇器

屬性選擇器，在標(biāo)簽后面是有中括號(hào)標(biāo)記，其基本語(yǔ)法格式如下：

標(biāo)簽名 [標(biāo)簽屬性='標(biāo)簽屬性值'] {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}

該選擇器，是對(duì)"元素選擇器"的擴(kuò)展，對(duì)一組標(biāo)簽進(jìn)一步過(guò)濾。

例如：

<head>
        <style type="text/css">
            input[type="text"]{
                background-color: yellow;
            }
            input[type="password"]{
                background-color: green;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" id="" value="" />
            <input type="password" name="" />
        </form>
    </body>

?2.3.5 擴(kuò)展：包含選擇器

包含選擇器，兩個(gè)標(biāo)簽之間使用空格，給指定父標(biāo)簽的后代標(biāo)簽設(shè)置樣式，可以方便在區(qū)域內(nèi)編寫(xiě)樣式。

父標(biāo)簽 后代標(biāo)簽{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該選擇器，是對(duì)"元素選擇器"的擴(kuò)展，對(duì)一個(gè)標(biāo)簽內(nèi)部所有后代標(biāo)簽進(jìn)行過(guò)濾。

<head>
        <style type="text/css">
            #d1 div{
                color: red;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                小灰灰1
            </div>
            <span id="s1">
                小灰灰2
            </span>
        </div>
    </body>

2.4 CSS的樣式：

2.4.1 邊框和尺寸：border、width、height

border：設(shè)置邊框的樣式

　格式：寬度樣式顏色

　例如：style="border:1px solid #f00" ，1像素實(shí)邊紅色。

　　　　樣式取值：solid 實(shí)線(xiàn)，none 無(wú)邊， double 雙線(xiàn) 等

width、height：用于設(shè)置標(biāo)簽的寬度、高度。

<head>
        <style type="text/css">
            div{
                border: 1px solid #000; /* 1像素，實(shí)邊，黑色*/
                width:200px;
                height:200px;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
    </head>
    <body>
        <div id="">
            小灰灰
        </div>
    </body>

?2.4.2 布局：float、clear

通常默認(rèn)的排版方式，將頁(yè)面中的元素從上到下一一羅列，而實(shí)際開(kāi)發(fā)中，需要左右方式進(jìn)行排版，就需要使用浮動(dòng)

選擇器{float:屬性值}
    常用屬性值：
            left:元素向左浮動(dòng)
            right:元素向右浮動(dòng)
            none:元素不浮動(dòng)(默認(rèn)值)

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對(duì)頁(yè)面中其他元素的排版產(chǎn)生影響。如果要避免影響，需要使用clear屬性進(jìn)行清除浮動(dòng)。

選擇器{clear:屬性值;}
    常用屬性值：
            left：不允許左側(cè)有浮動(dòng)元素(清除左側(cè)浮動(dòng)的影響)
            right：不允許右側(cè)有浮動(dòng)元素(清除右側(cè)浮動(dòng)的影響)
            both：同時(shí)清除左右兩側(cè)浮動(dòng)的影響

例如：

?2.4.3 轉(zhuǎn)換：display

HTML提供豐富的標(biāo)簽，這些標(biāo)簽被定義成了不同的類(lèi)型，一般分為：塊標(biāo)簽和行內(nèi)標(biāo)簽。

塊標(biāo)簽：以區(qū)域塊方式出現(xiàn)。每個(gè)塊標(biāo)簽獨(dú)占一整行或多整行。

　　常見(jiàn)的塊元素：<h1>、<div>、<ul>等

行內(nèi)元素：不必再新一行開(kāi)始，同時(shí)也不強(qiáng)迫其他元素在新的一行顯示。

　　常見(jiàn)的行內(nèi)元素：<span>、<a>等

在開(kāi)發(fā)中，希望行內(nèi)元素具有塊元素的特性，需要使用display進(jìn)行轉(zhuǎn)換

選擇器{ display:屬性值}
   常用的屬性值：
            inline:此元素將顯示為行內(nèi)元素(行內(nèi)元素默認(rèn)的display屬性值)
            block：此元素將顯示為塊元素(塊元素默認(rèn)的display屬性值)
            inline-block:將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。
            none：此元素將被隱藏，不顯示，也不占用頁(yè)面空間。

例如：

<head>
        <style type="text/css">
            span{
                border: 1px solid #000;
                width: 100px;
                height: 40px;
            }
        </style>
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
    </head>
    <body>
        <!-- 默認(rèn)顯示一行、邊框環(huán)繞，高寬沒(méi)有作用 -->
        <span>顯示1-1</span>
        <span>顯示1-2</span>
        <!-- 每一行顯示，高寬有作用 -->
        <span style="display: block;">顯示2-1</span>
        <span style="display: block;">顯示2-2</span>
    </body>

?2.4.4 字體：color、font-size

color：顏色，字體顏色

例如：

<head>
        
        <meta charset="utf-8" /> 
        <title>超鏈接</title>
    </head>
    <body>
        <div style="height: 50px;width: 200px;border: 1px solid #000;"> 
            <a href="">點(diǎn)擊</a>
            <a href="" style="text-decoration: none;">點(diǎn)擊</a>
        </div>
        <div style="height: 50px;width: 200px;border: 1px solid #000;"> 
            <a href="" style="line-height: 50px;">點(diǎn)擊</a>
            <a href="" style="color: red;">點(diǎn)擊</a>
        </div>
    </body>

?2.4.5 背景色：background-color

<ul style="background-color: #999;color: #FFF;">
      <li>點(diǎn)擊</li>
      <li>點(diǎn)擊</li>
      <li style="background-color: #000;">點(diǎn)擊</li>
      <li>點(diǎn)擊</li>
</ul>

2.5 CSS的盒子模型

2.5.1 什么是盒子模型

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

?2.5.2 內(nèi)邊距：padding

例如，如果您希望所有h1元素的個(gè)邊都有10px的內(nèi)邊距，只需要這樣：

h1{ padding:10px;}

還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，各邊均可以使用不同的單位或百分比值：

h1 {padding:10px 0.25em 2ex 20%}

單邊內(nèi)邊距屬性

也通過(guò)使用下面四個(gè)單獨(dú)的屬性，分別設(shè)置上、右、下、左內(nèi)邊距：

padding-top

padding-right

padding-bottom

padding-left

2.5.3 邊框：border

border-top-style

border-right-style

border-bottom-style

border-left-style

2.5.4 外邊距：margin

margin-top

margin-right

margin-bottom

margin-left

來(lái)源：https://www./content-1-510101.html

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀(guān)點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：印度阿三17 > 《開(kāi)發(fā)》

舉報(bào)/認(rèn)領(lǐng)