javaweb的HTML和CSS知識(shí)點(diǎn)有哪些

這篇文章主要介紹“java web的HTML和CSS知識(shí)點(diǎn)有哪些”，在日常操作中，相信很多人在java web的HTML和CSS知識(shí)點(diǎn)有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”java web的HTML和CSS知識(shí)點(diǎn)有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

從網(wǎng)站建設(shè)到定制行業(yè)解決方案，為提供網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)服務(wù)體系，各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案，助力業(yè)務(wù)快速發(fā)展。成都創(chuàng)新互聯(lián)公司將不斷加快創(chuàng)新步伐，提供優(yōu)質(zhì)的建站服務(wù)。

1.HTML

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

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

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

method屬性：請求方式。常用的取值：get、post

get:默認(rèn)值

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

因?yàn)檎埱舐窂介L度有限，所有g(shù)et請求提交的數(shù)據(jù)有限。

post：

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

提交的數(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)簽用于獲得用戶輸入信息，type屬性值不同，收集方式不同。最常用的標(biāo)簽。

rype屬性

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

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

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

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

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

checkbox：復(fù)選框

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

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

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

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

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

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

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

size：大小

checked屬性：單選框或者復(fù)選框被選中。

readonly：是否只讀

disabled：是否可用

maxlength：允許輸入的最大長度

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

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

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

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

size屬性：多選時(shí)，可見選項(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 來標(biāo)記 <div>，那么該標(biāo)簽的作用會(huì)變得更加有效。

2.2 CSS的概述

2.2.1 CSS是什么

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

CSS可以使HTML頁面更好看，CSS色系的搭配可以讓用戶更舒服，CSS+DIV布局更加靈活，更容易繪制出用戶需要的結(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對網(wǎng)頁進(jìn)行修飾，首先需要了解CSS樣式規(guī)則。具體格式如下

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

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

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

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

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

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

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

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

在編寫CSS代碼時(shí)，為了提高代碼的可讀性，通常會(huì)加上CSS注釋，例如：

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

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

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

和

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

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

h2{ 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)樣式，是通過標(biāo)簽的style屬性來設(shè)置元素的樣式。

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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

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

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

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

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

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

(3)外部樣式

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

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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

2.3 選擇器

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

2.3.1 元素選擇器

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

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

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

例如：

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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

2.3.2 ID選擇器

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

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

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

例如：

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

2.3.3 類選擇器

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

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

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

例如：

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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

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

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

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

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

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

例如：

<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>

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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

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

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

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

<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>

java web的HTML和CSS知識(shí)點(diǎn)有哪些

2.4 CSS的樣式：

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

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

格式：寬度樣式顏色

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

樣式取值：solid 實(shí)線，none 無邊， double 雙線等

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>

java web的HTML和CSS知識(shí)點(diǎn)有哪些

2.4.2 布局：float、clear

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

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

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對頁面中其他元素的排版產(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)的影響

例如：

java web的HTML和CSS知識(shí)點(diǎn)有哪些

2.4.3 轉(zhuǎn)換：display

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

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

常見的塊元素：<h2>、<div>、<ul>等

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

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

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

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

例如：

<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)繞，高寬沒有作用 -->
        <span>顯示1-1</span>
        <span>顯示1-2</span>
        <!-- 每一行顯示，高寬有作用 -->
        <span style="display: block;">顯示2-1</span>
        <span style="display: block;">顯示2-2</span>
    </body>

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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>

java web的HTML和CSS知識(shí)點(diǎn)有哪些

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>

java web的HTML和CSS知識(shí)點(diǎn)有哪些

2.5 CSS的盒子模型

2.5.1 什么是盒子模型

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

java web的HTML和CSS知識(shí)點(diǎn)有哪些

2.5.2 內(nèi)邊距：padding

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

h2{ padding:10px;}

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

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

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

也通過使用下面四個(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

到此，關(guān)于“java web的HTML和CSS知識(shí)點(diǎn)有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

網(wǎng)頁標(biāo)題：javaweb的HTML和CSS知識(shí)點(diǎn)有哪些
標(biāo)題鏈接：http://muchs.cn/article0/ighoio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、定制開發(fā)、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、微信小程序、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

javaweb的HTML和CSS知識(shí)點(diǎn)有哪些

1.HTML

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

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

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

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

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

2. DIV+CSS

2.1 什么是div

2.2 CSS的概述

2.2.1 CSS是什么

2.2.2 CSS名詞解釋

2.2.3 CSS樣式規(guī)則

2.2.4 引入CSS樣式

2.3 選擇器

2.3.1 元素選擇器

2.3.2 ID選擇器

2.3.3 類選擇器

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

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

2.4 CSS的樣式：

2.4.1 邊框和尺寸：border、width、height

2.4.2 布局：float、clear

2.4.3 轉(zhuǎn)換：display

2.4.5 背景色：background-color

2.5 CSS的盒子模型

2.5.1 什么是盒子模型

2.5.2 內(nèi)邊距：padding

2.5.3 邊框：border

2.5.4 外邊距：margin

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