結(jié)束課堂上的HTML部分，開始CSS部分

HTML表格和表單

一、表格
table標(biāo)簽代表一個表格，在table標(biāo)簽中配合 tr th td 標(biāo)簽來制作一個表格

• tr 即 table row, 代表表格中的一行
• td 即 table data cell ,代表一行中的一個單元格
• th 即 table header cell, 代表表格中的一個表頭
• 對 單元格設(shè)置 rowspan colspan可實現(xiàn)單元格之間的合并效果

實例 ：

Table.PNG

具體的代碼如下 :

        <table border="1px">
            <tr>  <!-- 每一個 tr 標(biāo)簽定義一行的內(nèi)容 -->
                <th>姓名</th>
                <th>科目</th>
                <th>成績</th>
            </tr>
            <tr>
                <td>學(xué)生A</td>
                <td>大學(xué)英語</td>
                <td>0x208</td>
            </tr>
            <tr>
                <td>學(xué)生B</td>
                <td>大學(xué)英語</td>
                <td>1000001000</td>
            </tr>
            <tr>
                <td>學(xué)生C</td>
                <td>大學(xué)英語</td>
                <td>01010</td>
            </tr>
            <tr>
                <td>學(xué)生S</td>
                <td>大學(xué)英語上</td>
                <td rowspan="2">91</td>
            </tr>
            <tr>
                <td>學(xué)生S</td>
                <td>大學(xué)英語下</td>
            </tr>
        </table>

用于修飾的CSS樣式表:

table{
            border: 3px crimson solid;
            border-collapse: collapse;            <!-- 表示單元格之間只保留一個邊框 -->
            color: purple;
            font-size: 20px;
            text-align: center;
            width: 500px;
        }

表單 form

表單是為了讓使用者填寫數(shù)據(jù)，并將數(shù)據(jù)發(fā)送到指定的網(wǎng)頁，可以在設(shè)計表單時對輸入信息做諸多的限制(長度、內(nèi)容等)，在填寫完表單之后需要通過點擊 submit 按鈕進(jìn)行提交操作。
一個簡單的表單：

<form action="emailList" method="post">
              <%--這里的 type 表示用戶輸入域的類型
                  不同的輸入內(nèi)容根據(jù)不同的 name 分開
                  value屬性決定了這個輸入的值是什么，所以文本框不會設(shè)置value的值
                  因為要等待用戶的輸入
              --%>
              <label>用戶名</label> <input type="text" name="userName">
              <label>密碼</label> <input type="password" name="password">
              <label>郵箱</label> <input type="email" name="email">

              <%--type = submit 點擊按鈕之后表單信息就會被發(fā)送--%>
              <%--也可以通過 input 設(shè)置 type = submit 來進(jìn)行提交--%>
              <button type="submit">提交</button>
              <button type="reset">重置</button>
          </form>

這里的action屬性制定了表單中的數(shù)據(jù)會被發(fā)送到哪里，而method屬性決定如何發(fā)送。如果選擇 method = "get"的話，表單數(shù)據(jù)就會以字符串的形式顯示在瀏覽器的地址欄上。
例如：

• 輸入數(shù)據(jù)：

  
  
  get2.PNG

• 數(shù)據(jù)顯示在地址欄中，通過字符串拼接的方式發(fā)送過去

  
  
  get.PNG

至于表單與目標(biāo)頁面的工作原理，見Java web 系列 No.1

第二部分 ：CSS3

一個形象的比喻：HTML就像一個剛買到的裸車，CSS與Javascript一個讓車子變得好看，一個讓車子成為變形金剛。
嚴(yán)肅一些，CSS就是規(guī)定了HTML中各種標(biāo)簽的樣式，并能賦予HTML元素一些交互性。
一、如何使用CSS

1.外部樣式表：
將CSS文件與HTML文件分開來，將需要使用的CSS文件通過link標(biāo)簽鏈接到HTML文件中，這種方法好處在于靈活性和可重用性高。
2.內(nèi)嵌樣式表：
通過在head標(biāo)簽里寫一個 style 標(biāo)簽，然后在里面寫CSS樣式代碼即可
3.內(nèi)聯(lián)樣式表：
通過直接在元素標(biāo)簽里面指定 style 屬性(HTML標(biāo)簽都有一個style屬性，其值即為規(guī)定的樣式)

CSS樣式很豐富，對于不同的標(biāo)簽有很多很多的樣式可以選擇，具體可以查看一些手冊和在線教程。
二、CSS選擇器：
1.元素/標(biāo)簽選擇器：
這種選擇器會將樣式應(yīng)用到這種元素或標(biāo)簽的所有實例上，例如：

table{
            border: 3px crimson solid;
            border-collapse: collapse;
            color: purple;
            font-size: 20px;
            text-align: center;
            width: 500px;
        }

2.類選擇器：
實際上就是選定一類的元素，給他們加上同樣的樣式。類選擇器選中所有設(shè)置了相同類名的元素。

(1) 部分CSS樣式
.content{
            width: 1100px;
            height: 500px;
            margin: 0 auto;
            background: lightgray;
            padding: 20px;
        }
(2)對應(yīng)的HTML部分
<div class="content-wrapper">
    <div class="content">內(nèi)容一</div>
    <div class="content">內(nèi)容二</div>
    <div class="content">內(nèi)容三</div>
    <div class="content">內(nèi)容四</div>
</div>

3.id選擇器：
每一個元素只能有一個唯一的id，通過id屬性來設(shè)置。id選擇器為某個元素單獨地設(shè)置樣式

#content-wrapper{
            border: 3px crimson solid;
            border-collapse: collapse;
            color: purple;
            font-size: 20px;
            text-align: center;
            width: 500px;
        }
<div id="content-wrapper">
    <div class="content">內(nèi)容一</div>
    <div class="content">內(nèi)容二</div>
    <div class="content">內(nèi)容三</div>
    <div class="content">內(nèi)容四</div>
</div>

總體來說，類選擇器更加經(jīng)常使用。還有很多的選擇器，能夠?qū)崿F(xiàn)更多樣的功能，因為課程上沒有涉及到，可以參考相關(guān)教程。
三、三種方式的優(yōu)先級：

使用的優(yōu)先順序:
外部 -> 內(nèi)斂 -> 內(nèi)聯(lián) 是應(yīng)用順序，而最后使用的是最后定義的樣式
也就是說內(nèi)聯(lián)樣式覆蓋之前的所有樣式定義
使用外部的樣式表更佳，這樣可以將樣式和HTML更好地分離開來，也可以增加樣式的重用性
如果同一樣式定義中，多次重復(fù)定義了同一樣式，那么后面的會覆蓋前面的定義

四、一個小技巧：
在工程中，某些元素可能會默認(rèn)擁有一些 margin 和 padding ，所以為了不影響我們自己的設(shè)計，需要首先清除所有元素的 padding 和 margin 屬性：
使用 * 可以選中所有標(biāo)簽：

*{
    margin:0;
    padding:0;
}

五、CSS注釋：
與很多高級語言相同： /**/
這樣既可以是多行，也可以是單行
六、一個小栗子
使用CSS簡單 美化表格：

.demo-table1{
    /*邊框是否重疊，選擇separate是不重疊的,也就是默認(rèn)的效果,雙邊框*/
    border-collapse: collapse;
    /*單元格內(nèi)容和單元格邊框的的內(nèi)容的距離*/
    padding: 10px;
    border: 1px solid lightcoral;
}

td,tr{
    border: 1px solid black;
    /*控制 td tr中的內(nèi)容居中?*/
    text-align: center;
}

第三部分：有關(guān)HTML的補(bǔ)充

有關(guān)表單中的 button、復(fù)選框checkbox、單選框radio
(1) Buttons :

有四種按鈕 ：設(shè)置屬性 type =
(1) Submit : 觸發(fā)表單提交信息
(2) Reset : 觸發(fā)表單重置所有信息默認(rèn)值
(3) button : 不具有任何功能，留給JS代碼去觸發(fā)函數(shù)使用
(4) image : 一個圖片按鈕

表單中經(jīng)常使用 submit按鈕進(jìn)行提交，當(dāng)然也可以通過 input標(biāo)簽 (type = submit) 進(jìn)行提交

<button type="submit">提交</button>
<button type="reset">重置</button>

(2) 單選框：radio

<input type="radio" name="radio1" value="dish1">小米粥
<input type="radio" name="radio1" value="dish2">雁北媽媽菜
<input type="radio" name="radio1" value="dish3">京醬肉絲

值得注意的是，只有當(dāng)一組 radio 的name屬性一樣時，才能構(gòu)成一組單選框，否則會變成多選框，而我們點擊了某一個選項的時候，這個選項對應(yīng)的 value 值會傳送到服務(wù)器端，所以使用時要注意： 至少同時設(shè)置 name 和 value
(3) 有關(guān)復(fù)選框、Combo box、list box等可以參考相關(guān)教程 (偷個懶~~~)