用 CSS 實(shí)現(xiàn)傾斜的背景顏色

們?cè)谠O(shè)計(jì)網(wǎng)站的時(shí)候，有時(shí)候?yàn)榱梭w現(xiàn)出別具一格的風(fēng)格，往往會(huì)設(shè)計(jì)出一些特殊的風(fēng)格。這里就舉一個(gè)比較常見的例子 —— 傾斜的背景顏色。

在CSS中，沒有某一個(gè)屬性能夠直接實(shí)現(xiàn)傾斜的背景顏色，而是需要通過一些“手段”來實(shí)現(xiàn)。最常想到的方案就是在內(nèi)容的底部放置一個(gè)div，給這個(gè)div設(shè)定一個(gè)背景顏色，然后讓這個(gè)div傾斜一個(gè)角度，從而實(shí)現(xiàn)傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來用一個(gè)基本的實(shí)例來解釋并實(shí)現(xiàn)傾斜背景的效果：

首先要說明一下，頁面導(dǎo)航條是固定在頁面頂部的，導(dǎo)航條不會(huì)隨著頁面的滾動(dòng)而移動(dòng)。這個(gè)效果的實(shí)現(xiàn)非常簡(jiǎn)單，就是利用了 position 這個(gè)屬性的 fixed 值來實(shí)現(xiàn)的。

我下面的代碼實(shí)例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細(xì)化的設(shè)定屬性的參數(shù)值，而且需要若干個(gè)HTML標(biāo)簽的CSS來配合，從而實(shí)現(xiàn)傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時(shí)候可以將 CSS 結(jié)合著 HTML 一起來理解?；蛘呖梢灾苯幽梦业倪@個(gè)實(shí)例作為一個(gè)模板來使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

為了讓導(dǎo)航條和其他元素都能夠與頁面的兩邊留出距離，我在實(shí)際內(nèi)容標(biāo)簽的外圍又包裹了一層div，主要在這個(gè)包裹的div里設(shè)定左右內(nèi)間距，從而實(shí)現(xiàn)兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會(huì)有一個(gè)后綴 "-bg"。

在實(shí)際內(nèi)容的排列時(shí)，我采用了更加方便靈活的彈性布局，這樣會(huì)相對(duì)的減少HTML和CSS的代碼量。

另外，如果想要實(shí)現(xiàn)傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標(biāo)簽。傾斜這些 div 其實(shí)很簡(jiǎn)單，只需要設(shè)定一個(gè) transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長(zhǎng)方形的 div 按照 Y 軸逆時(shí)針旋轉(zhuǎn)了一個(gè)弧度（-9deg）后，它會(huì)變成一個(gè)平行四邊形，這個(gè)平行四邊形是左邊低右邊高。這樣就會(huì)露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個(gè) CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個(gè)HTML對(duì)應(yīng)的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個(gè)原理圖來解釋一下其中的原理：

當(dāng)外圍的 div 傾斜了之后，就需要把內(nèi)容部分的div的上部的內(nèi)間距增大，以此來遮住平行四邊形的左側(cè)露出的白色區(qū)域。這是頁面上部區(qū)域的原理。

那么頁面底部也同樣需要實(shí)現(xiàn)這樣傾斜背景顏色的設(shè)計(jì)，這樣才能將風(fēng)格一致，產(chǎn)生美感。原理還是這個(gè)原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個(gè)屬性，height 和 overflow-y，并且這個(gè) div 不能帶有背景顏色。它們的作用是當(dāng)它里面的內(nèi)容超出這個(gè) div 的區(qū)域時(shí)就不顯示，這樣就會(huì)讓上圖中藍(lán)色的平行西變形的左下角區(qū)域被紅色的框線裁剪掉，從而讓這個(gè)div 乖乖的呆在頁面的底部。而這個(gè) div 里面一層的 div 需要讓它傾斜，而且還帶有一個(gè)背景顏色。這樣組合出來的效果就是一個(gè)看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個(gè)四邊形里面是實(shí)際的頁面內(nèi)容。

最終的樣子在這篇 CSS 代碼的最后展示出來了。

CSS

局一張圖

上圖是京東的登錄頁面，這和我們接下來要學(xué)習(xí)的東西有關(guān)系。

《踏上編程之路的必經(jīng)之路之html篇六》中我們學(xué)習(xí)了table表格，今天我們要學(xué)習(xí)的這叫做form表單。

form表單就是專門用來實(shí)現(xiàn)用戶登錄、用戶注冊(cè)、信息收集之類的頁面的。

日常網(wǎng)購一般都要求我們先登錄，輸入用戶名和密碼，點(diǎn)擊登錄后才可以進(jìn)行物品的購買，那我們就用form表單來實(shí)現(xiàn)一下登錄。

form表單中包含了input標(biāo)簽，input標(biāo)簽屬于單標(biāo)簽。單標(biāo)簽是相對(duì)于雙標(biāo)簽來講的。以前的a標(biāo)簽、p標(biāo)簽、span標(biāo)簽等，都屬于雙標(biāo)簽，它們的特點(diǎn)是一對(duì)一對(duì)的，比如a標(biāo)簽，要寫成<a></a>。比如p標(biāo)簽，要寫成<p></p>，它們都是有一個(gè)開始，有一個(gè)結(jié)束。都是成雙入對(duì)的。

單標(biāo)簽則沒有結(jié)束標(biāo)簽，比如上面的input標(biāo)簽，它就沒有</input>這樣的結(jié)束。單標(biāo)簽還有我們之前學(xué)的img圖片標(biāo)簽，br換行標(biāo)簽等。

input標(biāo)簽只能包含在form標(biāo)簽中，也就是說只要有input出現(xiàn)的地方，必定會(huì)有一個(gè)form標(biāo)簽包圍著它。

而上一篇中的tr和td標(biāo)簽只能包含在table表格標(biāo)簽中，它們是組合。不能分開單獨(dú)使用。

同樣的情況還有l(wèi)i標(biāo)簽，只能包含在ul無序列表標(biāo)簽，ol有序列表標(biāo)簽中，dt標(biāo)簽和dd標(biāo)簽只能包含在dl標(biāo)簽中。

上面代碼在瀏覽器中的效果：

這樣一個(gè)簡(jiǎn)易的登錄頁面就做出來了，是不是很簡(jiǎn)單啊，我們?cè)囍顚懹脩裘兔艽a來嘗試一下登錄。

你會(huì)發(fā)現(xiàn)，你輸入的密碼并不是明文的，也就是說你輸入的密碼會(huì)以黑點(diǎn)的形式呈現(xiàn)，這是為了安全，如果不這樣，你輸密碼的時(shí)候很可能會(huì)被你背后的人看到。

那這個(gè)是怎么實(shí)現(xiàn)的呢？其實(shí)你應(yīng)該已經(jīng)發(fā)現(xiàn)了，input標(biāo)簽里面有個(gè)type屬性，type設(shè)置為password就是以密碼形式呈現(xiàn)。type設(shè)置為text就是以明文顯示，type設(shè)置為submit就是一個(gè)按鈕。

提交按鈕的input里面我們還設(shè)置了一個(gè)value屬性，這個(gè)屬性用來設(shè)置，按鈕的文字，我們這里設(shè)置的是登錄，為了加深理解，我們給它改為登入。

瀏覽器中就會(huì)相應(yīng)地顯示為登入：

form表單中除了可以寫input外，還可以有select下拉選擇標(biāo)簽、textarea文本域標(biāo)簽、button按鈕標(biāo)簽（這個(gè)按鈕和<input type="submit">都是按鈕，用的時(shí)候看你自己喜好）。

下面通過一個(gè)例子來了解上面的各種標(biāo)簽的使用。

案例：添加一篇文章，要求填寫文章標(biāo)題、文章分類、發(fā)表頻道、文章內(nèi)容。

瀏覽器中的效果：

上述代碼中form標(biāo)簽中有select標(biāo)簽，這個(gè)的作用是產(chǎn)生一個(gè)下拉框，供用戶選擇。

select里面包含option標(biāo)簽，這個(gè)就是具體可以選擇項(xiàng)。我們這里設(shè)置了三個(gè)：財(cái)經(jīng)、教育、歷史。同我們前面講的一樣，option必須包含在select里面，而select必須包含在form表單標(biāo)簽中，它們是組合，不能打單獨(dú)使用。

在這個(gè)例子中，我們還是用到了單選。

紅框框住的就是我們?cè)O(shè)置的單選，具體對(duì)應(yīng)代碼中的：

單選也是用的input標(biāo)簽，只不過它的type是radio，還有一個(gè)要注意的地方就是name屬性，我們這里可以選擇的項(xiàng)是：新視覺、獵奇、雜說，它們?nèi)齻€(gè)的name屬性都設(shè)置為了：channel。只有設(shè)置name都一樣，才能單選，否則就成了多選了。

文章內(nèi)容我們使用到了textarea文本域標(biāo)簽，它和<iniput type="text">的區(qū)別是，textarea可以放更多的文字。

textarea標(biāo)簽有兩個(gè)屬性需要說一下，cols代表的是列，rows代表的是行，cols設(shè)置的值越大，textarea的框越寬，rows的值設(shè)置的越大，textarea的框越高。我們來嘗試一下：

先把cols設(shè)置成60，textarea就會(huì)變寬。

rows設(shè)置為30，textarea就會(huì)變高 :

form表單中還可以設(shè)置多選，我們也來嘗試一下：

瀏覽器中的效果：

紅框框住的部分就是我們實(shí)現(xiàn)的多選，多選用的也是input標(biāo)簽，type為checkbox

你可以自己動(dòng)手嘗試一下

我們整體的需求都實(shí)現(xiàn)了，但是整個(gè)頁面看起來很不美觀，所以我們需要調(diào)整一下，我決定采用table表格來調(diào)整，把文章標(biāo)題、請(qǐng)選擇分類、內(nèi)容這些文字性的東西放到一列，input、select等標(biāo)簽放在另一列里面，使整個(gè)頁面看起來更加整齊。

瀏覽器中的效果：

經(jīng)過調(diào)整以后，看起來已經(jīng)不那么丑了，在《做網(wǎng)站需要學(xué)習(xí)哪些知識(shí)》中，我們介紹過美化頁面需要用Css和JavaScript，光用html是不可能做到很美觀的。

在講完html后，我們就會(huì)講Css和JavaScript。

今天的內(nèi)容就到這里了，記得要?jiǎng)邮謱?shí)踐哦！

們?cè)跒g覽網(wǎng)頁的時(shí)候，可以看到頁面上有導(dǎo)航欄，逛商城的時(shí)候會(huì)看到商品的詳情頁里有商品的簡(jiǎn)介，以及在注冊(cè)或者申請(qǐng)一個(gè)網(wǎng)站會(huì)員的時(shí)候會(huì)讓我們填寫各種各樣的信息，這些分別由列表、表格、表單來完成的，今天我學(xué)習(xí)了這些知識(shí)，下面我把我學(xué)到的知識(shí)梳理一下，以及在學(xué)習(xí)中遇到的坑總結(jié)一下，希望能給其他初學(xué)者一些幫助，同時(shí)，如有不足之處，也請(qǐng)各位大神指出來，我也好學(xué)習(xí)學(xué)習(xí)，提升自我。

網(wǎng)站導(dǎo)航欄

HTML列表在網(wǎng)站頁面中使用的是相當(dāng)廣泛。如上圖的網(wǎng)站導(dǎo)航欄，就是使用了列表實(shí)現(xiàn)的，再比如說，一個(gè)欄目的文章列表等等，都是使用了列表功能，根據(jù)我今天學(xué)到的內(nèi)容，我總結(jié)了一下，總共三大知識(shí)點(diǎn)：

一、HTML列表分為三種：

1.無序列表：

無序列表是由標(biāo)簽<ul>和<li>組成的；
<ul>標(biāo)簽是聲明無序列表的，<li>標(biāo)簽作為列表中每一項(xiàng)的起始項(xiàng)。

可以在<ul>標(biāo)簽中使用type屬性來控制每一項(xiàng)前面的圓點(diǎn)的樣式:

1.disc 默認(rèn)值，每一項(xiàng)前面的圓點(diǎn)為黑色實(shí)心圓。
2.square 每一項(xiàng)前面的圓點(diǎn)為實(shí)體方心。
3.circle 每一項(xiàng)前面的圓點(diǎn)為空心圓。

<h3>商品列表</h3>
<ul start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ul>

效果如圖：

2.有序列表：

與無序列表有區(qū)別的是有序列表，他的每一項(xiàng)都是由它是有先后順序進(jìn)行排列的，并且會(huì)用數(shù)字依次進(jìn)行標(biāo)記；
有序列表由標(biāo)簽<ol>和<li>組成。

<h3>商品列表</h3>
<ol>
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ol>

效果如圖：

有序列表

可以在<ol>標(biāo)簽中使用start屬性來控制第一項(xiàng)數(shù)字起始值：

<h3>商品列表</h3>
<ol start="2">
    <li>iPhone 12</li>
    <li>MacBook Air</li>
    <li>AirPods Pro</li>
</ol>

效果如圖：

start=2

可以使用type規(guī)定在列表中使用的標(biāo)記類型，type值有五種：

1 默認(rèn)值，以數(shù)字樣式標(biāo)記；
A 以大寫字母作為每一項(xiàng)前面的標(biāo)記；
a 以小寫字母作為每一項(xiàng)前面的標(biāo)記；
I 以大寫的羅馬數(shù)字作為標(biāo)記；
i 以小寫的羅馬數(shù)字作為標(biāo)記。

不過我個(gè)人感覺，這個(gè)type屬性的作用貌似不多大，基本上都是以默認(rèn)值，就是數(shù)字來作為每一項(xiàng)的標(biāo)記了吧。

3.自定義列表：

<dl>
    <dt>名稱：</dt>
    <dd>小白學(xué)編程</dd>
    <dt>地址：</dt>
    <dd>河南省鄭州市二七區(qū)</dd>
    <dt>聯(lián)系</dt>
    <dd>電話：<a href="tel:189****1122">189****1122</a></dd>
    <dd>郵箱：<a href="mailto:admin@admin.com">admin@admin.com</a></dd>
</dl>

效果如圖：

自定義列表

備注：根據(jù)本小白查的文檔，a標(biāo)簽的href屬性，不僅可以填寫鏈接，還可以用：

【tel:電話號(hào)碼】的格式點(diǎn)擊進(jìn)行撥號(hào)，只不過是在電腦上需要有能撥號(hào)的軟件；

撥號(hào)

【mailto:郵箱地址】的格式可以快速拉起發(fā)送郵件的軟件。

發(fā)送郵件

不過我不知道這個(gè)的兼容性怎么樣，如果有知道的大佬，可以在評(píng)論區(qū)指導(dǎo)一下，跪謝！

二、HTML表格：

<table>標(biāo)簽定義一個(gè)HTML表格；
一個(gè)HTML表格由table以及一個(gè)或多個(gè)tr、th或者td組成
tr元素定義表格行，th元素定義表頭，td元素定義表格單元格。

一個(gè)表格的基本結(jié)構(gòu)：

<table class="table">
    <!-- caption：表格標(biāo)題 -->
    <caption>
        商品信息表
    </caption>
    <!-- 表頭 -->
    <thead>
        <!-- 添加表格數(shù)據(jù)的時(shí)候必須先添加一行 -->
        <tr>
            <td>ID</td>
            <td>商品名稱</td>
            <td>單價(jià)</td>
            <td>單位</td>
            <td>數(shù)量</td>
            <td>金額</td>
        </tr>
    </thead>
    <!-- 一個(gè)表格可以有多個(gè)tbody，但是只能有一個(gè)thead -->
    <tbody>
        <tr>
            <td>1</td>
            <td>iPhone 12 mini</td>
            <td>5499</td>
            <td>部</td>
            <td>100</td>
            <td>549900</td>
        </tr>
    </tbody>
</table>

總結(jié)：
1.一個(gè)表格允許有多個(gè)<tbody>，但是有且只能有一個(gè)<thead>；
2.添加表格數(shù)據(jù)的時(shí)候必須先添加一行；
3.所有的數(shù)據(jù)必須填充到<td>或者<th>標(biāo)簽中；
4.th是td元素的一個(gè)加強(qiáng)版，<th>比<td>多了個(gè)加粗和居中的效果。

Excel里的表格可以進(jìn)行行與列的合并，單元格直接也能合并，那么HTML表格也是可以的，可以使用colspan進(jìn)行列合并，rowspan進(jìn)行行的合并。利用這兩個(gè)屬性，我們可以使用<table>標(biāo)簽寫一個(gè)課程表。

三、HTML表單與常用控件

HTML表單是用于搜集用戶輸入的不同類型數(shù)據(jù)的，它包含了不同類型的<input>元素，如:文本框、單選框、復(fù)選框、提交按鈕等等。因此可以看出，<input>元素是表單中最重要的元素。

表單的基本格式：

<form action="" method="POST" class="register">
    <!-- 這里面可以放input元素 -->
</form>

action：處理表單的程序，通知表單往何處發(fā)送數(shù)據(jù)；
method：表單數(shù)據(jù)提交類型，有兩個(gè)值：
- GET：數(shù)據(jù)直接顯示在url地址中；
- POST：表單數(shù)據(jù)在請(qǐng)求頭體中。

根據(jù)我學(xué)習(xí)的成果，我總結(jié)出了input元素的七種type類型并一一做了記錄：

1.type="text" 單行文本框

<label for="username">賬號(hào)：</label>
<input type="text" name="username" id="username" value="admin" required>

單行文本框

2.type="email" 郵箱型文本框

<label for="email">郵箱：</label>
<input type="email" name="email" id="email" value="html@html.cn" required>

郵箱型文本框還會(huì)對(duì)輸入的內(nèi)容進(jìn)行校驗(yàn)，如果不符合郵件地址的格式會(huì)彈出如上圖提示。

3.type="password" 密碼型文本框/非明文

<label for="password">密碼：</label>
<input type="password" name="password" id="password" value="" placeholder="密碼不少于6位" required>

密碼型文本框

輸入內(nèi)容

值得注意的是，密碼型文本框在輸入密碼的時(shí)候都是以小黑點(diǎn)進(jìn)行替換的，并不會(huì)顯示我們輸入的內(nèi)容。

4.type="radio" 單選框

<label for="">性別：</label>
<div>
    <input type="radio" name="gender" value="male" id="male">
    <label for="male">男</label>
    <input type="radio" name="gender" value="male" id="male">
    <label for="female">女</label>
    <input type="radio" name="gender" value="male" id="male" checked>
    <label for="secret">保密</label>
</div>

單選框

單選框（radio）的name值必須都相同才能保證值的唯一性，默認(rèn)選中使用checked屬性。

5.type="checkbox" 復(fù)選框

<label for="#">興趣：</label>
<div>
    <input type="checkbox" name="hobby[]" value="basketball" id="basketball">
    <label for="basketball">籃球</label>
    <input type="checkbox" name="hobby[]" value="game" id="game">
    <label for="game">游戲</label>
    <input type="checkbox" name="hobby[]" value="travel" id="travel">
    <label for="travel">旅游</label>
    <input type="checkbox" name="hobby[]" value="program" id="program">
    <label for="program">編程</label>
</div>

復(fù)選框

復(fù)選框的name值一定要用數(shù)組表示，否則，服務(wù)器在接收數(shù)據(jù)的時(shí)候不能獲取所有選中的值。

6.type="file" 文件域

<label for="user-pic">頭像：</label>
<input type="file" name="user_pic" id="user-pic" />

上傳文件

7.type="hidden" 隱藏域

<input type="hidden" name="MAX_FILE_ZIE" value="80000" />

隱藏域在頁面是看不到的，是服務(wù)器端進(jìn)行處理的一項(xiàng)數(shù)據(jù)。

通過上述的七種<input>元素類型，我得出一個(gè)結(jié)論就是一個(gè)<input>元素至少包含有三個(gè)屬性：

type 控件的類型；
name 相當(dāng)于變量名稱，用于后端服務(wù)器接收時(shí)使用；
value 控件的值。

除了上述的<input>元素的7種標(biāo)簽類型，還有下拉列表、文本域這些常用的控件。

下拉列表/下拉框

<label for="">學(xué)歷：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司機(jī)">博士</option>
</select

下拉列表/下拉框

注意：
如果option里有l(wèi)abel值，label屬性的優(yōu)先級(jí)于option里的內(nèi)容。因此，上述列表第5項(xiàng)應(yīng)該顯示“老司機(jī)”。
HTML5中新屬性：
multiple multiple可以選擇多個(gè)選項(xiàng)
size 數(shù)值，如：3，下拉框里可見的選項(xiàng)數(shù)量

<label for="">學(xué)歷：</label>
<select name="edu" id="eud">
    <option value="1">初中</option>
    <option value="2">高中</option>
    <option value="3" selected>本科</option>
    <option value="4">研究生</option>
    <option value="5" label="老司機(jī)">博士</option>
</select>

multiple、size用法

文本域（多行文本框）

<label for="comment">備注：</label>
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>

文件域與隱藏域

上傳文件需要注意兩點(diǎn)：

請(qǐng)求類型必須為POST類型；
form表單必須有enctype屬性，并且數(shù)據(jù)編碼設(shè)置為：enctype=”multipart/form-data”；

<form action="" method="POST" class="register" enctype="multipart/form-data">
    <label for="user-pic">頭像：</label>
    <!-- 隱藏域在頁面是看不到的，是服務(wù)器端進(jìn)行處理的一項(xiàng)數(shù)據(jù)。 -->
    <input type="hidden" name="MAX_FILE_ZIE" value="80000" />
    <input type="file" name="user_pic" id="user-pic" />
    <div class="user-pic" style="grid-column: 2;"></div>
    <button>提交</button>
</form>

enctype有3個(gè)值：

application/x-www-form-urlencoded 默認(rèn)值，在發(fā)送前對(duì)所有字符進(jìn)行編碼；
multipart/form-data 使用上傳文件空間時(shí)必須用該值；
text/plain 將空格轉(zhuǎn)換為“+”，但不對(duì)特殊字符編碼。

四、表單的form屬性

<form action="check.php" method="get" id="register">
  <div class="box">
  	<label for="email">郵箱:</label>
		<input type="email" form="register" name="email" id="email" placeholder="demo@email.com" />
  	<label for="password">密碼:</label>
		<input type="password" form="register" name="password" id="password" placeholder="至少8位" />
  	<button form="register">提交</button>
	</div>
</form>
<label for="username">帳號(hào):</label>
<input type="text" name="username" id="username" placeholder="不能為空" />

注冊(cè)表單

如果某個(gè)控件寫在form表單的外部，則該控件需要使用form屬性：form=”表單的id值”，才可以在表單提交時(shí)傳該控件的值，否則無法進(jìn)行傳值。

例如：以下情況就是沒有在空間中寫form屬性的情況，我們可以看到，在瀏覽器里沒有獲取到密碼password的值，只獲取到了username和email的值：

沒有獲取到password的值

我個(gè)人的理解是：如果不把表單控件寫到form內(nèi)部，這樣會(huì)方便js獲取表單元素的值，但是這樣寫會(huì)容易影響布局，造成布局混亂，建議還是按照標(biāo)準(zhǔn)的寫法，把所有的控件都寫到form表單內(nèi)部。

至于什么時(shí)候使用GET方法，什么時(shí)候使用POST方法呢？通過今天的學(xué)習(xí)，我做了如下總結(jié)：

GET方法傳輸?shù)臄?shù)據(jù)相對(duì)于POST要小的很多，并且是明文傳輸?shù)模侵苯訉?shù)放在應(yīng)用程序的URL中傳輸?shù)?，一眼就能看見，因此?duì)于小一些的表單，對(duì)安全性要求不高的，可以使用GET方法。
POST方法可以發(fā)送大文件，并且在請(qǐng)求的URL中看不到發(fā)送的數(shù)據(jù)，安全性高，因此建議使用POST方法。當(dāng)然這個(gè)安全性也是相對(duì)來說的，對(duì)于一些網(wǎng)絡(luò)黑客高手，還是有辦法獲取這些傳輸內(nèi)容，至于怎么獲取的，我也不清楚，畢竟咱還是小白。
還有一點(diǎn)就是在上傳文件的時(shí)候必須使用POST方法，因?yàn)槲募话愣急容^大，GET方法最大大概只能發(fā)送32K的數(shù)據(jù)，POST方法可以達(dá)到1G。

作業(yè)：用表格寫一個(gè)課程表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/table.css">
    <title>表格：行與列的合并</title>
</head>
<body>
    <table class="lesson">
        <caption>
            xxxx小學(xué)課程表
        </caption>
        <thead>
            <tr>
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>語文</td>
                <td>數(shù)學(xué)</td>
                <td>音樂</td>
                <td>社會(huì)</td>
                <td>科學(xué)</td>
            </tr>
            <tr>
                <td>2</td>
                <td>數(shù)學(xué)</td>
                <td>語文</td>
                <td>音樂</td>
                <td>語文</td>
                <td>數(shù)學(xué)</td>
            </tr>
            <tr>
                <td>3</td>
                <td>美術(shù)</td>
                <td>音樂</td>
                <td>音樂</td>
                <td>數(shù)學(xué)</td>
                <td>音樂</td>
            </tr>
            <tr>
                <td>4</td>
                <td>社會(huì)</td>
                <td>體育</td>
                <td>音樂</td>
                <td>體育</td>
                <td>語文</td>
            </tr>

            <tr class="rest">
                <td colspan="7">中午休息</td>
            </tr>

            <tr>
                <td rowspan="4">下午</td>
                <td>5</td>
                <td>語文</td>
                <td>數(shù)學(xué)</td>
                <td>音樂</td>
                <td>社會(huì)</td>
                <td>科學(xué)</td>
            </tr>
            <tr>
                <td>6</td>
                <td>數(shù)學(xué)</td>
                <td>語文</td>
                <td>音樂</td>
                <td>語文</td>
                <td>數(shù)學(xué)</td>
            </tr>
            <tr>
                <td>7</td>
                <td>課外活動(dòng)：</td>
                <td colspan="4">各班自行組織，自愿參加</td>
                <td>數(shù)學(xué)</td>
                <td>音樂</td> -->
            </tr>
        </tbody>
    </table>
</body>
</html>

效果：

用HTML表格寫一個(gè)課程表

個(gè)人總結(jié)：為了學(xué)習(xí)這些表單知識(shí)，真真的是看了一天，頭都懵了，還有不少內(nèi)容沒有記住，還是需要多寫多練，其中我認(rèn)為比較坑的幾個(gè)地方是：

表格的行與列的合并，colspan、rowspan，如果能熟練的用好這兩個(gè)屬性，相信寫出上面課程表實(shí)例也不難；
表單的屬性太多了，一時(shí)半會(huì)真的是記不??；
上傳文件需要注意的兩點(diǎn)：請(qǐng)求類型必須為POST；form表單加上enctype=”multipart/form-data”；
表單控件的form屬性，這個(gè)可能是因?yàn)槲疫€是個(gè)小白，才接觸這些東西，不知道這些知識(shí)點(diǎn)，不知道今后的工作中用到這個(gè)屬性的情況多不多。

在看視頻教程的過程中，我看到好多大佬在用VS Code的時(shí)候都是使用了快捷鍵，后來網(wǎng)上搜了一下，原來官方給的就有一個(gè)PDF文檔，從VS里就可以進(jìn)去，在工具的頂部導(dǎo)航欄幫助里，如下圖：

快捷鍵

為了方便大家快速找到，我把官方地址貼出來吧，VS Code快捷鍵PDF文檔：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

VS Code快捷鍵

在線咨詢

上一篇：手把手教你D3.js 實(shí)現(xiàn)數(shù)據(jù)可視化極速上手到Vue應(yīng)用
下一篇：php調(diào)用python腳本將word轉(zhuǎn)為html代碼

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

用 CSS 實(shí)現(xiàn)傾斜的背景顏色

HTML

CSS

《踏上編程之路的必經(jīng)之路之html篇六》中我們學(xué)習(xí)了table表格，今天我們要學(xué)習(xí)的這叫做form表單。

今天的內(nèi)容就到這里了，記得要?jiǎng)邮謱?shí)踐哦！

一、HTML列表分為三種：

二、HTML表格：

三、HTML表單與常用控件

下拉列表/下拉框

文本域（多行文本框）

文件域與隱藏域

四、表單的form屬性

作業(yè)：用表格寫一個(gè)課程表

您的項(xiàng)目需求

《踏上編程之路的必經(jīng)之路之html篇六》中我們學(xué)習(xí)了table表格，今天我們要學(xué)習(xí)的這叫做form表單。

今天的內(nèi)容就到這里了，記得要?jiǎng)邮謱?shí)踐哦！

二、HTML表格：

三、HTML表單與常用控件

四、表單的form屬性