9-17

時間 2020-02-02

原文原文鏈接

1-9

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>123123</div>
    <div>123123</div>
    <div>123123</div>
    <div>123123</div>

</body>
</html>

代碼：div標籤與span相似，也是個白板標籤，不過它屬於塊級標籤html

1-10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="GET">
        <input type="text" name="user">
        <input type="text" name="email">
        <input type="password" name="pwd">
        <input type="button" value="登錄1">
        <input type="submit" value="登錄2" >
    </form>

</body>
</html>

代碼：
text 能夠輸入文本內容
password 能夠輸入密碼，在瀏覽器上輸入的內容是隱藏的
buttom 是普通點擊按鈕，默認沒有任何做用，能夠經過JS賦予功能。
submit 能夠將輸入的信息提交給服務端，可是必需要在父集設置一個form標籤，才能夠將input標籤用戶中輸入的信息給提交。
form 標籤的action是指定的服務端鏈接，好比能夠是http://1.1.1.1:8888/index。 # 符號是跳轉到本地。
form 標籤的method指定提交的方式。GET會將輸入的信息拼接到鏈接的後面並提交到服務端；POST會將輸入的信息放入內容中提交到服務端（沒有加密，抓包能夠抓到）。
name是用於以字典格式數據，提示服務端來識別用戶輸入的是什麼信息的，如：{'user':'111','email':''2222','pwd':333}。這樣服務端就知道提交的每一個信息都是分別作什麼用的。web

上圖：輸入框是咱們要提交的信息。點擊登陸1按鈕沒有任何反應，由於button自己默認是沒有任何功能做用的。須要點擊登陸2（submit）來提交。瀏覽器

上圖：信息以提交，經過地址欄能夠看到，提交的信息拼接到了鏈接的後面。ide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="POST">
        <input type="text" name="user">
        <input type="text" name="email">
        <input type="password" name="pwd">
        <input type="button" value="登錄1">
        <input type="submit" value="登錄2" >
    </form>

</body>
</html>

代碼：method="POST"ui

上圖：提交過數據後，數據會在http的內容中發送到服務端（未加密）。加密

1-11

上2圖：這是在一個搜狗搜索中去搜索天氣預報；圖中地址欄紅框中的query=天氣預報就是咱們搜索的內容spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="https://www.sogou.com/web">
        <input type="text" name="query">
        <input type="submit" value="搜索">
    </form>
</body>
</html>

代碼：
action 指定了搜狗搜索（服務端地址）
name="query" 將名爲query的信息提交給服務端code

上2圖：這裏看到經過本身的web代碼實現了內容搜索orm

radio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>請選擇性別：</p>
            男：<input type="radio">
            女：<input type="radio">
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代碼：type='radio'，效果是單選項htm

上圖：圖中能夠看到雖然效果是單選項的，可是兩個選項均可以同時選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>請選擇性別：</p>
            男：<input type="radio" name="test">
            女：<input type="radio" name="test">
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代碼：將這兩個radio 都設置name屬性，且值相同，這樣再去選擇的時候，就只能選擇其中一個選項了。

上圖：當前只能選擇一個；

雖然當前能夠選擇一個選項了，可是當你提交後，對於服務端來講，你的name都是相同的，沒法對其做出區分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>請選擇性別：</p>
            男：<input type="radio" name="test" value="1">
            女：<input type="radio" name="test" value="2">
        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代碼：加上value，能夠根據value來區分用戶選擇的是哪個選項。

CheckBox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>請選擇性別：</p>
            男：<input type="radio" name="test" value="1">
            女：<input type="radio" name="test" value="2">

            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1">
            足球：<input type="checkbox" name="favor" value="2">
            網球：<input type="checkbox" name="favor" value="3">
            檯球：<input type="checkbox" name="favor" value="4">

            <p>其餘</p>
            吃飯：<input type="checkbox" name="other" value="1">
            睡覺：<input type="checkbox" name="other" value="2">

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代碼：多選框，也能夠將其name設置爲相同，這樣若是有不一樣類型的多選框，就能夠經過相同的name來分類了，而後用value來區分你選擇的是什麼。

上2圖：多選擇後提交，能夠看到地址欄中將favor=1和favor=2提交了。
服務端會拿到一個favor的列表 [1,2]

checked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form>
        <div>
            <p>請選擇性別：</p>
            男：<input type="radio" name="test" value="1" checked="checked">
            女：<input type="radio" name="test" value="2">

            <p>愛好</p>
            籃球：<input type="checkbox" name="favor" value="1" checked="checked">
            足球：<input type="checkbox" name="favor" value="2">
            網球：<input type="checkbox" name="favor" value="3" checked="checked">
            檯球：<input type="checkbox" name="favor" value="4">

            <p>其餘</p>
            吃飯：<input type="checkbox" name="other" value="1">
            睡覺：<input type="checkbox" name="other" value="2">

        </div>
        <input type="submit" value="提交">
    </form>
</body>
</html>

代碼：checked可讓選項默認是被選中狀態

file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <input type="file" name="fname">

    <input type="submit" value="提交">

</form>
</body>
</html>

代碼：
file能夠選擇文件；服務端經過定義的name來選擇文件。
在form標籤中定義enctype="multipart/form-data" 表示在你提交後，會將文件一點一點的提交到服務端

上圖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <input type="text" value="">
    <input type="reset" value="重置">

</form>
</body>
</html>

代碼：reset能夠用於將你輸入的信息重置（刪除）

上圖：點擊文字旁邊的重置，輸入的信息就會被刪除掉。

1-12

textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <textarea>默認值</textarea>

</form>
</body>
</html>

代碼：textarea用於可輸入多行內容的標籤；由於後面有閉合標籤，因此默認的文字，要放在中間。

上圖：有默認文字，能夠輸入多行內容。

select

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <select name="city">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">深圳</option>
    </select>
    <br>
    <br>
    <br>
    <input type="submit" value="提交">

</form>
</body>
</html>

代碼：
select中設置option，用於點擊後出現下拉框可供選擇。
要設置name和value，這樣提交後服務端才知道你提交的是什麼內容。

上2圖：點擊了上海提交，能夠看到地址欄的值 city=2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <select name="city" size="10" multiple="multiple">
        <option value="1">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="3">深圳</option>
    </select>
    <br>
    <br>
    <br>
    <input type="submit" value="提交">

</form>
</body>
</html>

代碼：
size調整大小
multiple="multiple" 這樣就能夠多選了

上圖：按住ctrl鍵就能夠選擇多個內容了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <select>
        <optgroup label="河北省">
            <option>石家莊</option>
            <option>廊坊</option>
        </optgroup>
    </select>
    <br>
    <br>
    <br>
    <br>
    <br>
    <input type="submit" value="提交">

</form>
</body>
</html>

代碼：optgroup能夠分組，河北省在這裏只是個標題，是不可選擇的，只有石家莊和廊坊是可選的。

1-13

a標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <a href="https://www.baidu.com">百度</a>

</form>
</body>
</html>

代碼：a標籤是用於作超連接的

上圖：點擊就能夠跳轉到百度了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form enctype="multipart/form-data">

    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.baidu.com" target="_self">百度</a>

</form>
</body>
</html>

代碼：target="_blank"使用新的標籤頁跳轉； target="_self"使用當前標籤頁跳轉。

錨點

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <a href="#i1">第1章</a>
    <a href="#i2">第2章</a>
    <a href="#i3">第3章</a>
    <a href="#i4">第4章</a>
    <div id="i1" style="height: 600px">第1章的內容</div>
    <div id="i2" style="height: 600px">第2章的內容</div>
    <div id="i3" style="height: 600px">第3章的內容</div>
    <div id="i4" style="height: 600px">第4章的內容</div>

</body>
</html>

代碼：將div設置id；而後在a標籤中設置#+idx，#表示跳轉到當前頁面，而後加上後面的id幾，就是跳轉到相應的div標籤。

上圖：當你點擊a標籤的超連接時，就會跳轉到對應id的div標籤位置。

上圖：跳轉到第4章內容的位置，這個具體的位置叫作錨點

1-14

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E7%86%8A%E7%8C%AB">
        <img src="1.jpg" style="height: 300px; width: 400px">
    </a>

</body>
</html>

代碼：img src能夠選擇顯示的圖片；外面套一個a標籤指定連接，這樣就能夠經過點擊圖片跳轉頁面了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E7%86%8A%E7%8C%AB">
        <img src="" style="height: 300px; width: 400px" alt="熊貓">
    </a>

</body>
</html>

代碼：將圖片去掉；加個 alt=「熊貓」

上圖：若是圖片能夠正常顯示，就看到alt的內容，若是圖片不能正常顯示，則會看到alt的內容；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E7%86%8A%E7%8C%AB">
        <img src="1.jpg" style="height: 300px; width: 400px" alt="熊貓" title="大熊貓">
    </a>

</body>
</html>

代碼：增長title=「大熊貓」

上圖：當鼠標懸浮在圖片上面的時候，就能夠看到title的內容

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>

    <ol>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ol>

    <dl>
        <dt>標題1</dt>
        <dd>內容1</dd>
        <dd>內容2</dd>
        <dd>內容3</dd>
        <dt>標題2</dt>
        <dd>內容1</dd>
        <dd>內容2</dd>
        <dd>內容3</dd>
    </dl>

</body>
</html>

代碼：ul是無序列表； ol是有序列表； dl是層級列表。

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table border="1">
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </table>

</body>
</html>

上圖：table聲明是個表格；每一個tr是一行； td是一列； border設置邊框大小；

1-15

表格表頭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td>第1行，第2列</td>
            <td>第1行，第3列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

代碼：
頁面的表格須要定義head和body，head就是表頭，body就是內容；
head中使用th來定義表頭

上圖：能夠看到表頭與body明顯不一樣。

表格合併

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
            <th>表頭4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td colspan="2">第1行，第2列</td>
            <td>第1行，第3列</td>
            <td>第1行，第4列</td>
        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

上圖：
咱們將第一行的第二列設置colspan="2"，表示佔用兩列，這就起到了合併的效果；
可是最後面多出了一列，因此下面須要將第一行的最後一列給刪除掉。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
            <th>表頭4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td colspan="2">第1行，第2列</td>
            <td>第1行，第3列</td>

        </tr>
        <tr>
            <td>第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

代碼：colspan橫向合併

上圖：這樣就實現了合併的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1">
    <thead>
        <tr>
            <th>表頭1</th>
            <th>表頭2</th>
            <th>表頭3</th>
            <th>表頭4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第1行，第1列</td>
            <td colspan="2">第1行，第2列</td>
            <td>第1行，第3列</td>

        </tr>
        <tr>
            <td rowspan="2">第2行，第1列</td>
            <td>第2行，第2列</td>
            <td>第2行，第3列</td>
            <td>第2行，第4列</td>
        </tr>
        <tr>

            <td>第3行，第2列</td>
            <td>第3行，第3列</td>
            <td>第3行，第4列</td>
        </tr>
        <tr>
            <td>第4行，第1列</td>
            <td>第4行，第2列</td>
            <td>第4行，第3列</td>
            <td>第4行，第4列</td>
        </tr>
        <tr>
            <td>第5行，第1列</td>
            <td>第5行，第2列</td>
            <td>第5行，第3列</td>
            <td>第5行，第4列</td>
        </tr>
    </tbody>

</table>

</body>
</html>

代碼：rowspan豎向合併

1-16

lable標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <label for="username">用戶名：</label>
    <input id="username" type="text" name="user">
</body>
</html>

代碼：
label標籤通常與input一塊兒使用。
input標籤生成一個輸入框，能夠點擊後輸入；若是想要點擊label標籤的內容也能夠在input的輸入框輸入內容的話，須要label設置for屬性，且值等於input標籤的id值。

上圖：label與input沒有關聯時，只能點擊輸入框輸入；關聯後點擊用戶名（label標籤）也能夠在輸入框輸入內容了。

fieldset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <fieldset>
        <legend>登錄</legend>
        <label for="username">用戶名：</label>
        <input id="username" type="text" name="user">
        <br>
        <label for="pwd">密碼：</label>
        <input id="pwd" type="text" name="pwd">
    </fieldset>

</body>
</html>

代碼：
fieldset提供邊框； legend邊框內設置標題
fieldset這個標籤不多能用到。

相關標籤/搜索

leetcode.917

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。