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類似，也是個白板標籤，不過它屬於塊級標籤

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}。這樣服務端就知道提交的每個信息都是分別做什麼用的。

上圖：輸入框是我們要提交的信息。點擊登錄1按鈕沒有任何反應，因爲button本身默認是沒有任何功能作用的。需要點擊登錄2（submit）來提交。

上圖：信息以提交，通過地址欄可以看到，提交的信息拼接到了連接的後面。

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

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

1-11

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


<!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的信息提交給服務端

上2圖：這裏看到通過自己的web代碼實現了內容搜索

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'，效果是單選項

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

<!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這個標籤很少能用到。

9-17

1-9

1-10

1-11

1-12

1-13

1-14

1-15

1-16

一個簡單的MD5加鹽

C# 代碼學習

藍橋15屆stema編程題密碼鎖-動態規劃 C++和Python最後一道題

2021看雪SDC議題回顧 | SaTC：一種全新的物聯網設備漏洞自動化挖掘方法

Kafka存儲機制

aws語音呼叫調用，告警電話

【轉】[C#] WebAPI 防止併發調用二（冥等性）

C#/.NET/.NET Core優秀項目和框架2024年4月簡報

HTTP URL 詳解

得物 ZooKeeper SLA 也可以 99.99%

95-96

66-69

92-94

28-34

9-17

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結