HTML總結
即使再小的帆也能遠航~
一.目錄
1.網頁
1.1什么是網頁
1.2什么是html
1.3網頁的形成
2.Web標準
2.1web標準的構成
3.HTML語法規范
3.1基本語法概念
3.2標簽關系
4.HTML基本結構標簽
4.1第一個HTML
5.網頁開發工具
5.1 檔案型別宣告標簽
5.2 lang 語言種類
5.3字符集
5.4總結
6.HTML常用標簽
6.1標題標簽 <h1> - <h6>（重要）
6.2段落和換行標簽（重要）
6.3文本格式化標簽
6.4<div> 和<span>標簽
6.5影像標簽和路徑 (重點）
6.6超鏈接標簽 (重點）
7.HTML的注釋和特殊字符
7.1注釋
7.2特殊字符
8.表格標簽
8.1表格基本語法
8.2表頭單元格標簽
8.3表格屬性
8.4表格結構標簽
8.5合并單元格
9.串列標簽
9.1無序串列
9.2有序串列
9.3自定義串列
10.表單標簽
10.1表單域
10.2表單的組成
10.3表單控制元件(表單元素)
10.4<input> 表單元素
10.5<label> 標簽
10.6 <select> 表單元素
10.7<textarea> 表單元素
10.8表單元素幾個總結點
11HTML新特性
11.1HTML5 新增的語意化標簽
11.2HTML5 新增的多媒體標簽
11.3 HTML5 新增的 input 型別
11.4HTML5 新增的表單屬性
二.內容
1.網頁
1.1什么是網頁
網站是指在因特網上根據一定的規則，使用 HTML 等制作的用于展示特定內容相關的網頁集合，
網頁是網站中的一“頁”，通常是 HTML 格式的檔案，它要通過瀏覽器來閱讀，
網頁是構成網站的基本元素，它通常由圖片、鏈接、文字、聲音、視頻等元素組成，通常我們看到的網頁，常見以 .htm 或 .html 后綴結尾的檔案，因此將其俗稱為 HTML 檔案，
1.2什么是html
HTML 指的是**超文本標記語言 (Hyper Text Markup Language) **，它是用來描述網頁的一種語言， HTML 不是一種編程語言，而是一種標記語言 (markup language)， 標記語言是一套標記標簽 (markup tag)，
所謂超文本，有 2 層含義:
- 它可以加入圖片、聲音、影片、多媒體等內容（超越了文本限制 ），
- 它還可以從一個檔案跳轉到另一個檔案，與世界各地主機的檔案連接（超級鏈接文本 ），
1.3網頁的形成
網頁是由網頁元素組成的，這些元素是利用 html 標簽描述出來，然后通過瀏覽器決議來顯示給用戶的，
前端人員開發代碼 ----> 瀏覽器顯示代碼（決議、渲染） -----> 生成最后的 Web 頁面
2.Web標準
eb 標準是由 W3C 組織和其他標準化組織制定的一系列標準的集合，**W3C（萬維網聯盟）**是國際最著名的標準化組織
2.1web標準的構成
主要包括**結構（Structure） 、表現（Presentation）和行為（Behavior）**三個方面，
| 標準 | 說明 |
|---|---|
| 結構 | 結構用于對頁面整理和分類,現階段主要學HTML |
| 表現 | 表現用于設定網頁元素的版式,顏色,大小等外觀樣式,主要指的是CSS |
| 行為 | 行為是指網頁模型的定義以及互動的撰寫,現階段主要學的是JavaScript |
Web 標準提出的最佳體驗方案：結構、樣式、行為相分離， 簡單理解： 結構寫到 HTML 檔案中， 表現寫到 CSS 檔案中， 行為寫到 JavaScript 檔案中，
3.HTML語法規范
3.1基本語法概念
1.HTML 標簽是由尖括號包圍的關鍵詞，例如 <html>，
2.HTML 標簽通常是成對出現的，例如 <html> 和 </html> ，我們稱為雙標簽，標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽，
3.有些特殊的標簽必須是單個標簽（極少情況），例如 <br />，我們稱為單標簽，
3.2標簽關系
包含,并列
4.HTML基本結構標簽
4.1第一個HTML
每個網頁都會有一個基本的結構標簽（也稱為骨架標簽），頁面內容也是在這些基本標簽上書寫， HTML頁面也稱為 HTML 檔案.
<html>
<head>
<title>我的第一個頁面</title>
</head>
<body> 你我之間,黑馬洗練,月薪過萬,一飛沖天 </body> </html>
| 標簽名 | 定義 | 說明 |
|---|---|---|
| <html></html> | HTML標簽 | 根標簽 |
| <head></head> | 檔案頭部 | 注意在head標簽中必須設定的標簽是title |
| <title></title> | 檔案標題 | 讓頁面擁有一個屬于自己網頁標題 |
| <body></body> | 檔案的主體 | 元素包含檔案的所有內容,頁面內容 |
HTML 檔案的的后綴名必須是 .html 或 .htm ，瀏覽器的作用是讀取 HTML 檔案，并以網頁的形式顯示出它們，
5.網頁開發工具
5.1 檔案型別宣告標簽
<!DOCTYPE> 檔案型別宣告，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁
<!DOCTYPE html>
這句代碼的意思是: 當前頁面采取的是 HTML5 版本來顯示網頁. 注意:
- <!DOCTYPE> 宣告位于檔案中的最前面的位置，處于 <html> 標簽之前，
- <!DOCTYPE>不是一個 HTML 標簽，它就是 檔案型別宣告標簽，
5.2 lang 語言種類
用來定義當前檔案顯示的語言，
1.en定義語言為英語
2.zh-CN定義語言為中文
簡單來說,定義為en 就是英文網頁, 定義為 zh-CN 就是中文網頁
其實對于檔案顯示來說，定義成en的檔案也可以顯示中文，定義成zh-CN的檔案也可以顯示英文
這個屬性對瀏覽器和搜索引擎(百度.谷歌等)還是有作用的
5.3字符集
字符集 (Character set)是多個字符的集合，以便計算機能夠識別和存盤各種文字， 在<head>標簽內，可以通過<meta> 標簽的 charset 屬性來規定 HTML 檔案應該使用哪種字符編碼，
<meta charset=" UTF-8" />
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符.
注意：上面語法是必須要寫的代碼，否則可能引起亂碼的情況，一般情況下，統一使用“UTF-8”編碼，盡量統一寫成標準的 “UTF-8”，不要寫成 “utf8” 或 “UTF8”，
5.4總結
6.HTML常用標簽
6.1標題標簽 <h1> - <h6>（重要）
為了使網頁更具有語意化，我們經常會在頁面中用到標題標簽，HTML 提供了 6 個等級的網頁標題，即<h1> - <h6> ，
單詞 head 的縮寫，意為頭部、標題， 標簽語意：作為標題使用，并且依據重要性遞減，
特點：
- 加了標題的文字會變的加粗，字號也會依次變大，
- 一個標題獨占一行
6.2段落和換行標簽（重要）
在網頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示，在 HTML 標簽中，<p>標簽用于定義段落，它可以將整個網頁分為若干個段落，
在 HTML 中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然后才自動換行，如果希望某段文本強制換行顯示，就需要使用換行標簽 <br />，
6.3文本格式化標簽
在網頁中，有時需要為文字設定粗體、斜體 或下劃線等效果，這時就需要用到 HTML 中的文本格式化標簽，使文字以特殊的方式顯示， 標簽語意: 突出重要性, 比普通文字更重要.
| 語意 | 標簽 |
|---|---|
| 加錯 | <strong></strong>或者<b></b> |
| 傾斜 | <em></em>或者<i></i> |
| 洗掉線 | <del></del>或者<s></s> |
| 下劃線 | <ins></ins>或者<u></u> |
6.4<div> 和<span>標簽
<div> 和 <span> 是沒有語意的，它們就是一個盒子，用來裝內容的，
div 是 division 的縮寫，表示分割、磁區，span 意為跨度、跨距，
特點：
-
<div> 標簽用來布局，但是現在一行只能放一個<div>， 大盒子
-
<span> 標簽用來布局，一行上可以多個 <span>，小盒子
6.5影像標簽和路徑 (重點）
在 HTML 標簽中，<img> 標簽用于定義 HTML 頁面中的影像，
<img src="影像URL" />
| 屬性 | 屬性值 | 說明 |
|---|---|---|
| src | 圖片路徑 | 必須屬性 |
| alt | 文本 | 影像不能顯示時的替換文本 |
| title | 文本 | 滑鼠放到影像上時,顯示的提示文本 |
| width | 像素 | 設定影像寬度 |
| height | 像素 | 設定影像高度 |
| border | 像素 | 設定影像邊框粗細 |
影像圖示
影像標簽屬性注意點：
①影像標簽可以擁有多個屬性，必須寫在標簽名的后面，
②屬性之間不分先后順序，標簽名與屬性、屬性與屬性之間均以空格分開，
③屬性采取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”，
路徑
相對路徑
相對路徑：以參考檔案所在位置為參考基礎，而建立出的目錄路徑， 這里簡單來說，圖片相對于 HTML 頁面的位置
| 相對路徑的分類 | 符號 | 說明 |
|---|---|---|
| 同一級路徑 | 影像檔案位于HTML檔案同一級,如<img src=“xxxx”> | |
| 下一級路徑 | / | 影像檔案位于HTML檔案下一級,如<img src=“yyy/xxxx”> |
| 上一級路徑 | …/ | 影像檔案位于HTML檔案上一級,如<img src="…/xxxx"> |
相對路徑是從代碼所在的這個檔案出發，去尋找目標檔案的，而我們這里所說的上一級 、下一級和同一級就是 圖片相對于 HTML 頁面的位置，
絕對路徑
絕對路徑：是指目錄下的絕對位置，直接到達目標位置，通常是從盤符開始的路徑， 例如，“D:\web\img\logo.gif”或完整的網路地址
“http://www.itcast.cn/images/logo.gif”，
6.6超鏈接標簽 (重點）
鏈接的語法格式
<a href="跳轉目標" target="目標視窗的彈出方式"> 文本或影像 </a>
兩個屬性的作用如下：
| 屬性 | 作用 |
|---|---|
| href | 用于指定連接目標的url地址(必須屬性) |
| target | 用于指定鏈接頁面的打開方式,其中_self為默認值,_blank為在新視窗中打開方式 |
鏈接分類
1.外部鏈接: 例如
< a href="http:// www.baidu.com "> 百度</a >，
2.內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如
< a href="index.html"> 首頁 </a >，
3.空鏈接: 如果當時沒有確定鏈接目標時，
< a href="#"> 首頁 </a >
4.下載鏈接: 如果 href 里面地址是一個檔案或者壓縮包，會下載這個檔案，
5.網頁元素鏈接: 在網頁中的各種網頁元素，如文本、影像、表格、音頻、視頻等都可以添加超鏈接.
6.錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置. 4.9 超鏈接標簽 (重點）
?在鏈接文本的 href 屬性中，設定屬性值為 #名字 的形式，如
<a href="#two"> 第2集 </a>
?找到目標位置標簽，里面添加一個 id 屬性 = 剛才的名字 ，如：
<h3 id="two">第2集介紹</h3>
7.HTML的注釋和特殊字符
7.1注釋
如果需要在 HTML 檔案中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽， HTML中的注釋以“<!–”開頭，以“ -->”結束，
7.2特殊字符
特殊字符略
8.表格標簽
表格主要用于顯示、展示資料
8.1表格基本語法
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
1.<table> </table> 是用于定義表格的標簽，
2.<tr></tr> 標簽用于定義表格中的行，必須嵌套在 <table> </table>標簽中，
3.<td> </td> 用于定義表格中的單元格，必須嵌套在<tr></tr>標簽中，
4.字母 td 指表格資料（table data），即資料單元格的內容，
8.2表頭單元格標簽
一般表頭單元格位于表格的第一行或第一列，表頭單元格里面的文本內容加粗居中顯示. <th> 標簽表示 HTML 表格的表頭部分(table head 的縮寫)
8.3表格屬性
表格標簽這部分屬性我們實際開發我們不常用，后面通過 CSS 來設定.
目的有2個:
1.記住這些英語單詞,后面 CSS 會使用.
2.直觀感受表格的外觀形態.
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left,center,right | 規定表格內容相對周圍元素的對齊方式 |
| border | 1或者"" | 規定表格單元是否擁有邊框,默認為"",表示沒有邊框 |
| cellpadding | 像素值 | 規定單元邊與其內容之間的空白,默認1px |
| cellspacing | 像素值 | 規定單元格之間的空白,默認2px |
| width | 像素值或者百分比 | 規定表格的寬度 |
8.4表格結構標簽
- <thead></thead>：用于定義表格的頭部，<thead> 內部必須擁有 <tr> 標簽， 一般是位于第一行，
- <tbody></tbody>：用于定義表格的主體，主要用于放資料本體 ，
- 以上標簽都是放在 <table></table> 標簽中，
8.5合并單元格
合并單元格方式：
?跨行合并：rowspan=“合并單元格的個數”
?跨列合并：colspan=“合并單元格的個數”
table綜合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.td_padding{
padding-left: 2em;
height: 30px;
}
.right_padding{
padding-left: 2em;
}
body{
font-size: 13px;
}
</style>
</head>
<body style="background-color: rgb(238,238,238);">
<table width="900px" cellpadding="0" cellspacing="0" align="center">
<tr>
<!-- 左側內容區域 -->
<td width="300px" valign="top">
<!-- 嵌套一個帶有圖片的表格，該表格兩行一列 -->
<table cellpadding="0" cellspacing="0">
<!-- 單元格放入圖片 -->
<tr><td height="213px">
<img src="image/pig.jpg" width="300px" align="left"/>
</td></tr>
<!-- 繼續嵌套一個表格 -->
<tr><td>
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>個人資訊</h3></td></tr>
<tr><td class="td_padding">姓 名：張三</td></tr>
<tr><td class="td_padding">性 別：男</td></tr>
<tr><td class="td_padding">年 齡：22歲</td></tr>
<tr><td class="td_padding">電 話：136456878952</td></tr>
<tr><td class="td_padding">郵 箱：service@qq.com</td></tr>
<tr><td class="td_padding">作業年齡：7年</td></tr>
<tr><td class="td_padding">現在城市：北京</td></tr>
</table>
</td></tr>
</table>
<br />
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>求職意向</h3></td></tr>
<tr><td class="td_padding">職位名稱：建筑結構工程師</td></tr>
<tr><td class="td_padding">期望月薪：20K-25K</td></tr>
</table>
<br />
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>教育背景</h3></td></tr>
<tr><td class="td_padding">學校名稱：背景某大學</td></tr>
<tr><td class="td_padding">學歷學位：本科</td></tr>
<tr><td class="td_padding">所屬專業：土木工程</td></tr>
<tr><td class="td_padding">就讀時間：2017.09———2021.07</td></tr>
</table>
<br />
<table width="100%" style="background-color: rgb(27,37,64);color: white;">
<tr><td class="td_padding"><h3>證 書</h3></td></tr>
<tr><td class="td_padding">職位名稱：建筑結構工程師</td></tr>
<tr><td class="td_padding">期望月薪：20K-25K</td></tr>
</table>
</td>
<!-- 右側內容區域 -->
<td valign="top" style="padding-left: 16px;">
<table width="100%">
<tr><td height="213px" class="right_padding">
<h3>自我評價</h3>
<p>
1.相關系統分析員向用戶初步了解需求，然后用word列出要開發的系統的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關的界面時，在這一步里面可以初步定義好少量的界面，
2.系統分析員深入了解和分析需求，根據自己的經驗和需求用WORD或相關的工具再做出一份檔案系統的功能需求檔案，這次的檔案會清楚列出系統大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關的界面和界面功能，
3.系統分析員向用戶再次確認需求，
</p>
</td></tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>作業經歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結構工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">作業描述：<br />
1.相關系統分析員向用戶初步了解需求，然后用word列出要開發的系統的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關的界面時，在這一步里面可以初步定義好少量的界面，<br />
2.系統分析員深入了解和分析需求，根據自己的經驗和需求用WORD或相關的工具再做出一份檔案系統的功能需求檔案，這次的檔案會清楚列出系統大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關的界面和界面功能，
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>作業經歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結構工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">作業描述：<br />
1.相關系統分析員向用戶初步了解需求，然后用word列出要開發的系統的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關的界面時，在這一步里面可以初步定義好少量的界面，<br />
2.系統分析員深入了解和分析需求，根據自己的經驗和需求用WORD或相關的工具再做出一份檔案系統的功能需求檔案，這次的檔案會清楚列出系統大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關的界面和界面功能，
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>作業經歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結構工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">作業描述：<br />
1.相關系統分析員向用戶初步了解需求，然后用word列出要開發的系統的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關的界面時，在這一步里面可以初步定義好少量的界面，<br />
2.系統分析員深入了解和分析需求，根據自己的經驗和需求用WORD或相關的工具再做出一份檔案系統的功能需求檔案，這次的檔案會清楚列出系統大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關的界面和界面功能，
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>作業經歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結構工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">作業描述：<br />
1.相關系統分析員向用戶初步了解需求，然后用word列出要開發的系統的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關的界面時，在這一步里面可以初步定義好少量的界面，<br />
2.系統分析員深入了解和分析需求，根據自己的經驗和需求用WORD或相關的工具再做出一份檔案系統的功能需求檔案，這次的檔案會清楚列出系統大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關的界面和界面功能，
<br/></td>
</tr>
</table>
<table width="100%" style="background-color: rgb(210,205,202);">
<tr><td class="right_padding" colspan="2">
<h3>作業經歷</h3>
</td></tr>
<tr><td class="right_padding" width="50%">公司名稱：北京某建筑設計院</td>
<td class="right_padding">在職時間：2010.07——至今</td></tr>
<tr><td class="right_padding">職位名稱：結構工程師</td>
<td class="right_padding">稅前月薪：15K-20K</td></tr>
<tr><td class="right_padding" colspan="2">作業描述：<br />
1.相關系統分析員向用戶初步了解需求，然后用word列出要開發的系統的大功能模塊，每個大功能模塊有哪些小功能模塊，對于有些需求比較明確相關的界面時，在這一步里面可以初步定義好少量的界面，<br />
2.系統分析員深入了解和分析需求，根據自己的經驗和需求用WORD或相關的工具再做出一份檔案系統的功能需求檔案，這次的檔案會清楚列出系統大致的大功能模塊，大功能模塊有哪些小功能模塊，并且還列出相關的界面和界面功能，
<br/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
游戲注冊頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>游戲注冊</title>
<style type="text/css">
/*
類選擇器：使用圓點來定義，定義一個類名
*/
.title{
font-size: 23px;
}
.small-font{
font-size: 12px;
color:darkgrey;
}
.td-height{
height: 65px;
}
.label-font{
font-size: 14px;
}
label{
color:darkgray;
}
input{
height: 30px;
border: 1px solid rgb(218,218,218);
width: 350px;
margin-left: 3px;
border-radius: 3px;
padding: 5px 15px;
font-size: 14px;
color: gainsboro;
}
/**
* 屬性選擇器
*/
.btn{
margin-left: 20px;
color: white;
width: 146px;
height: 42px;
border: 1px solid rgb(56,126,232);
background-color: rgb(56,126,232);
}
/**
* position屬性表示對當前的這個標簽在瀏覽器中的位置，進行修飾，
*/
.potion-top{
position: relative;
top: -4px;
}
</style>
</head>
<body>
<table align="center" width="1190px" style="margin-top: 100px;">
<tr><td colspan="4" class="title">游戲賬號注冊說明</td></tr>
<tr><td colspan="4" style="height: 50px;"><hr width="100%" color="gainsboro"/></td></tr>
<tr><td colspan="4" class="small-font" style="height: 40px;">為回應國家文化部實名認證號召，自4月1日起用戶申請注冊網易云游戲中心務必請填寫真實個人資訊，以備網易云游戲中心配合國家相關部門核查身份資訊，網易云游戲中心將會保證您的個人資訊將不會泄露</td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請輸入你的手機號</td>
<td width="450px"><input type="text" id="telphone" name="telphone" placeholder="11位手機號" /></td>
<td width="260px"></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"><label>*</label> 請輸入收到的短信驗證碼</td>
<td><input type="text" id="code" name="code" placeholder="收到的短信驗證碼" style="width:180px;" />
<input type="button" class="btn" value="獲取驗證碼" />
</td>
<td></td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請輸入你的昵稱</td>
<td width="450px"><input type="text" id="nikeName" name="nikeName" placeholder="中英文,長度不超過12個字符" /></td>
<td width="260px"></td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請輸入你的密碼</td>
<td width="450px"><input type="password" id="password" name="password" placeholder="中英文數字字符,區分大小寫" /></td>
<td width="260px"></td></tr>
<tr><td width="260px" class="td-height"></td>
<td width="220px" align="right" class="label-font"><label>*</label> 請確認密碼</td>
<td width="450px"><input type="password" id="checkPass" name="checkPass" placeholder="再次輸入你的密碼" /></td>
<td width="260px"></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"><label>*</label> 請輸入你的身份證號</td>
<td><input type="text" id="cardId" name="cardId" placeholder="18位身份證號碼" /></td>
<td></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"><label>*</label> 請輸入你的真實姓名</td>
<td><input type="text" id="realName" name="realName" placeholder="你的真實姓名" /></td>
<td></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"></td>
<td style="font-size: 12px;">
<input type="checkbox" id="xieOne" name="xieOne" style="width: 15px;height: 15px;"/>
<label class="potion-top">我同意《用戶協議》</label> <br/>
<input type="checkbox" id="xieOne" name="xieOne" style="width: 15px;height: 15px;"/>
<label class="potion-top">我同意《另外一個用戶協議》</label> <br/>
</td>
<td></td></tr>
<tr><td class="td-height"></td>
<td align="right" class="label-font"></td>
<td style="font-size: 12px;"><input type="button" value="注冊" class="btn" style="margin-left: 0px;width: 80px;" />
</td>
<td></td></tr>
</table>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>
9.串列標簽
表格是用來顯示資料的，那么串列就是用來布局的，
9.1無序串列
<ul> 標簽表示 HTML 頁面中專案的無序串列，一般會以專案符號呈現串列項，而串列項使用 <li> 標簽定義， 無序串列的基本語法格式如下：
<ul>
<li>串列項1</li>
<li>串列項2</li>
<li>串列項3</li>
...
</ul>
1.無序串列的各個串列項之間沒有順序級別之分，是并列的，
2.<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標簽中輸入其他標簽或者文字的做法是不被允許的，
3.<li> 與 </li> 之間相當于一個容器，可以容納所有元素，
4.無序串列會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設定，
9.2有序串列
有序串列即為有排列順序的串列，其各個串列項會按照一定的順序排列定義， 在 HTML 標簽中，<ol> 標簽用于定義有序串列，串列排序以數字來顯示，并且使用 <li> 標簽來定義串列項， 有序串列的基本語法格式如下：
<ol>
<li>串列項1</li>
<li>串列項2</li>
<li>串列項3</li>
...
</ol>
1.<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標簽中輸入其他標簽或者文字的做法是不被允許的， 2.<li> 與 </li>之間相當于一個容器，可以容納所有元素， 3.有序串列會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設定，
9.3自定義串列
自定義串列的使用場景: 自定義串列常用于對術語或名詞進行解釋和描述，定義串列的串列項前沒有任何專案符號，
在 HTML 標簽中，<dl> 標簽用于定義描述串列（或定義串列），該標簽會與 <dt>（定義專案/名字）和 <dd>（描述每一個專案/名字）一起使用，
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
</dl>
1.<dl></dl> 里面只能包含 <dt> 和 <dd>，
2.<dt> 和 <dd>個數沒有限制，經常是一個<dt> 對應多個<dd>，
在 HTML 標簽中，<dl> 標簽用于定義描述串列（或定義串列），該標簽會與 <dt>（定義專案/名字）和 <dd>（描述每一個專案/名字）一起使用，
10.表單標簽
使用表單目的是為了收集用戶資訊， 在我們網頁中， 我們也需要跟用戶進行互動，收集用戶資料，此時就需要表單
在 HTML 中，一個完整的表單通常由表單域、表單控制元件（也稱為表單元素）和 提示資訊3個部分構成，
10.1表單域
表單域是一個包含表單元素的區域， 在 HTML 標簽中， <form> 標簽用于定義表單域，以實作用戶資訊的收集和傳遞， <form> 會把它范圍內的表單元素資訊提交給服務器.
<form action=“url地址” method=“提交方式” name=“表單域名稱"> 各種表單元素控制元件
</form>
常用屬性
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接受并處理表單資料的服務器程式的url地址 |
| method | get/post | 用于設定表單資料的提交方式,其取值為get或post |
| name | 名稱 | 用于指定表單名稱,以區分同一個頁面中的多個表單域 |
10.2表單的組成
在 HTML 中，一個完整的表單通常由表單域、表單控制元件（也稱為表單元素）和 提示資訊3個部分構成，
10.3表單控制元件(表單元素)
在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內容控制元件，
10.4<input> 表單元素
在英文單詞中，input 是輸入的意思，而在表單元素中 <input> 標簽用于收集用戶資訊， 在 <input> 標簽中，包含一個 type 屬性，根據不同的 type 屬性值，輸入欄位擁有很多種形式（可以是文本欄位、復選框、掩碼后的文本控制元件、單選按鈕、按鈕等），
<input type="屬性值" />
?<input /> 標簽為單標簽
? type 屬性設定不同的屬性值用來指定不同的控制元件型別
type屬性的屬性值及其描述
| 屬性值 | 描述 |
|---|---|
| button | 定義點擊按鈕(多數情況下,用于通過JavaScript啟動腳本) |
| checkbox | 定義復選框 |
| file | 定義輸入欄位和"瀏覽"按鈕,供檔案上傳 |
| hidden | 定義隱藏的輸入欄位 |
| image | 定義影像形式的提交按鈕 |
| password | 定義密碼欄位,該欄位中的字符被掩碼 |
| radio | 定義單選按鈕 |
| reset | 定義重置按鈕.重置按鈕會清除表單中的所有資料 |
| submit | 定義提交按鈕,提交按鈕會把表單資料發送到服務器 |
| text | 定義單行的輸入欄位,用戶可在其中輸入文本.默認寬度為20個字符 |
除 type 屬性外，<input>標簽還有其他很多屬性，其常用屬性如下：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| name | 由用戶自定義 | 定義input元素的名稱 |
| value | 由用戶自定義 | 規定input元素的值 |
| checked | checked | 規定此input元素首次加載時應當被選中 |
| maxlength | 正整數 | 規定輸入欄位中的元素的最大長度 |
1.name 和value 是每個表單元素都有的屬性值,主要給后臺人員使用. 2.name 表單元素的名字, 要求 單選按鈕和復選框要有相同的name值. 3.checked屬性主要針對于單選按鈕和復選框, 主要作用一打開頁面,就要可以默認選中某個表單元素.
4.maxlength 是用戶可以在表單元素輸入的最大字符數, 一般較少使用.
10.5<label> 標簽
<label> 標簽為 input 元素定義標注（標簽）， <label> 標簽用于系結一個表單元素, 當點擊<label> 標簽內的文本時，瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
核心： <label> 標簽的 for 屬性應當與相關元素的 id 屬性相同，
10.6 <select> 表單元素
使用場景: 在頁面中，如果有多個選項讓用戶選擇，并且想要節約頁面空間時，我們可以使用<select>標簽控制元件定義下拉串列，
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
1.<select> 中至少包含一對<option> ，
2.在<option> 中定義 selected =“ selected " 時，當前項即為默認選中項，
<html>
<head>
<title>選擇下拉選單</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by hill">
</head>
<body>
<p>選定一項或多項然后點擊添加或移除(按住shift或ctrl可以多選)，或在選擇項上雙擊進行添加和移除，</p>
<form method="post" name="myform">
<table border="0" width="400">
<tr>
<td width="40%">
<select style="height:200px;WIDTH:300px" multiple name="list1" size="10" οndblclick="moveOption(document.myform.list1, document.myform.list2)">
<!--用forEach遍歷出所有的option-->
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="山東">山東</option>
<option value="安徽">安徽</option>
<option value="重慶">重慶</option>
<option value="福建">福建</option>
<option value="甘肅">甘肅</option>
<option value="廣東">廣東</option>
<option value="廣西">廣西</option>
<option value="貴州">貴州</option>
<option value="海南">海南</option>
<option value="河北">河北</option>
<option value="黑龍江">黑龍江</option>
</select>
</td>
<td width="20%" align="center">
<input type="button" value="全部添加" οnclick="moveAllOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value="添加" οnclick="moveOption(document.myform.list1, document.myform.list2)"><br/>
<br/>
<input type="button" value="移除" οnclick="moveOption(document.myform.list2, document.myform.list1)"><br/>
<br/>
<input type="button" value="全部移除" οnclick="moveAllOption(document.myform.list2, document.myform.list1)">
</td>
<td width="40%">
<select style="height:200px;WIDTH:300px" multiple name="list2" size="12" οndblclick="moveOption(document.myform.list2, document.myform.list1)">
</select>
</td>
</tr>
</table>
值：<input type="text" name="city" size="40">
</form>
<script language="JavaScript">
<!--操作全部-->
function moveAllOption(e1, e2){
var fromObjOptions=e1.options;
for(var i=0;i<fromObjOptions.length;i++){
fromObjOptions[0].selected=true;
e2.appendChild(fromObjOptions[i]);
i--;
}
document.myform.city.value=getvalue(document.myform.list2);
}
<!--操作單個-->
function moveOption(e1, e2){
var fromObjOptions=e1.options;
for(var i=0;i<fromObjOptions.length;i++){
if(fromObjOptions[i].selected){
e2.appendChild(fromObjOptions[i]);
i--;
}
}
document.myform.city.value=getvalue(document.myform.list2);
}
function getvalue(geto){
var allvalue = "";
for(var i=0;i<geto.options.length;i++){
allvalue +=geto.options[i].value + ",";
}
return allvalue;
}
function changepos1111(obj,index)
{
if(index==-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1))
}
}
else if(index==1){
if (obj.selectedIndex<obj.options.length-1){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1))
}
}
}
</script>
</body>
</HTML>
10.7<textarea> 表單元素
使用場景: 當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用 <textarea> 標簽， 在表單元素中，<textarea> 標簽是用于定義多行文本輸入的控制元件， 使用多行文本輸入控制元件，可以輸入更多的文字，該控制元件常見于留言板，評論，
<textarea rows="3" cols="20">
文本內容
</textarea>
1.通過 <textarea> 標簽可以輕松地創建多行文本輸入框，
2.cols=“每行中的字符數” ，rows=“顯示的行數”，我們在實際開發中不會使用
<h3>設計理念說明（200字以內）</h3>
<textarea οnkeyup="checkLen(this)"></textarea>
<div>您還可以輸入 <span id="count">200</span> 個文字</div>
<script type="text/javascript">
function checkLen(obj)
{
var maxChars = 200;//最多字符數
if (obj.value.length > maxChars)
obj.value = obj.value.substring(0,maxChars);
var curr = maxChars - obj.value.length;
document.getElementById("count").innerHTML = curr.toString();
}
</script>
10.8表單元素幾個總結點
1.表單元素我們學習了三大組 input 輸入表單元素 select 下拉表單元素 textarea 文本域表單元素.
2.這三組表單元素都應該包含在form表單域里面,并且有 name 屬性.
<form>
<input type=“text " name=“username”>
<select name=“jiguan”>
<option>北京</option>
</select>
<textarea name= "message"></textarea>
</form>
- 有三個名字非常相似的標簽:
(1)表單域 form 使用場景: 提交區域內表單元素給后臺服務器
(2)檔案域 file 是input type 屬性值 使用場景: 上傳檔案
(3)文本域 textarea 使用場景: 可以輸入多行文字, 比如留言板 網站介紹等…
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form表單</title>
</head>
<body>
<!--action是資料提交的網址,method是動作,其中有get和post,get提交的資料會顯示,不安全,post不顯示,相對安全-->
<form action="資料提交的地址" method="post" enctype="multipart/form-data">
<!--用enctype屬性,來標志當前的附件是特殊檔案,和普通傳遞的資料不一樣-->
<!--required當資料為空時,不允許提交 autofocus自動獲得焦點 -->
用戶:<input type="text" name="username" value="" autofocus required placeholder="請輸入用戶名"/><br /><br />
頭像:<input type="file" name="userpic" multiple accept="image/*"><br /><br />
密碼:<input type="password" name="password" value="" placeholder="請輸入密碼"/><br /><br />
性別:
<input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女" />女<br /><br />
年齡:<input type="number" name="age" min="1" max="200"/><br /><br />
愛好:
<select name="like" multiple>
<option value="游泳" selected>游泳</option>
<option value="健身">健身</option>
<option value="滑輪">滑輪</option>
<option value="籃球">籃球</option>
</select><br /> <br />
喜歡的明星:
<input type="checkbox" name="start" value="迪麗熱巴" />迪麗熱巴
<input type="checkbox" name="start" value="易烊千璽" />易烊千璽
<input type="checkbox" name="start" value="羅志祥" />羅志祥
<input type="checkbox" name="start" value="張藝興" />張藝興
<br /><br />
學歷:
<select name="edu">
<option value="專科">專科</option>
<option value="本科">本科</option>
<option value="研究生">研究生</option>
<option value="碩士">碩士</option>
<option value="博士">博士</option>
</select><br /> <br />
簽名:<textarea name="qianming" rows="5" cols="3"></textarea><br /> <br />
<!--
disable 禁止
readonly 只讀
-->
郵箱：<input type="email" name="email" value="1140841562@qq.com" disabled /><br /> <br />
QQ:<input type="number" name="qq" value="" /><br /><br />
博客:<input type="url" name="url" /><br /><br />
年月日:<input type="date" name="date" /><br /><br />
時分秒:<input type="time" name="time" /><br /><br />
星期:<input type="week" name="week" /><br /><br />
月份:<input type="month" name="month"/><br /><br />
喜歡的顏色:<input type="color" name="color" /><br /><br />
范圍:0<input type="range" value="30" max="100" />100<br /><br />
<button>這是button按鈕</button>
<input type="submit" value="注冊" />
<input type="reset" value="重置" />
<input type="image" src="img/.." />
</form>
</body>
</html>
11HTML新特性
HTML5 的新增特性主要是針對于以前的不足，增加了一些新的標簽、新的表單和新的表單屬性等， 這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性，
11.1HTML5 新增的語意化標簽
以前布局，我們基本用 div 來做，div 對于搜索引擎來說，是沒有語意的，
<div class=“header”> </div>
<div class=“nav”> </div>
<div class=“content”> </div>
<div class=“footer”> </div>
?<header>：頭部標簽
?<nav>：導航標簽
?<article>：內容標簽
?<section>：定義檔案某個區域
?<aside>：側邊欄標簽
?<footer>：尾部標簽
注意：
?這種語意化標準主要是針對搜索引擎的
?這些新標簽頁面中可以使用多次
?在 IE9 中，需要把這些元素轉換為塊級元素
?其實，我們移動端更喜歡使用這些標簽
?HTML5 還增加了很多其他標簽，我們后面再慢慢學
11.2HTML5 新增的多媒體標簽
視頻<video>
<video src="檔案地址" controls="controls"></video>
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的瀏覽器暫不支持 <video> 標簽播放視頻
</ video >
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 視頻就緒自動播放(谷歌瀏覽器需要添加muted來解決自動播放的問題) |
| controls | controls | 向用戶顯示播放插件 |
| width | 像素 | 設定播放器寬度 |
| height | 像素 | 設定播放器高度 |
| loop | loop | 播放完是否繼續播放該視頻,回圈播放 |
| preload | auto(預先加載視頻) 或者 none(預先不加載視頻) | 規定是否預加載視頻(如果有了autoplay,就忽略該屬性) |
| src | url | 視頻url地址 |
| poster | imgurl | 加載等待的畫面圖片 |
| muted | muted | 靜音播放 |
音頻<audio>
<audio src="檔案地址" controls="controls"></audio>
< audio controls="controls" >
<source src="happy.mp3" type="audio/mpeg" >
<source src="happy.ogg" type="audio/ogg" >
您的瀏覽器暫不支持 <audio> 標簽，
</ audio>
常見屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出現該屬性,則音頻在就緒后馬上播放 |
| controls | controls | 如果出現該屬性,則向用戶顯示控制元件,比如播放按鈕 |
| loop | loop | 如果出現該屬性,每當音頻結束時重新開始播放 |
| src | url | 地址 |
?谷歌瀏覽器把音頻和視頻自動播放禁止了
11.3 HTML5 新增的 input 型別
| 屬性值 | 說明 |
|---|---|
| type=“email” | 限制用戶輸入必須為Email型別 |
| type=“url” | 限制用戶輸入必須為URL型別 |
| type=“data” | 限制用戶輸入必須為日期型別 |
| type=“time” | 限制用戶輸入必須為時間型別 |
| type=“month” | 限制用戶輸入必須為月型別 |
| type=“week” | 限制用戶輸入必須為周型別 |
| type=“number” | 限制用戶輸入必須為數字型別 |
| type=“tel” | 手機號碼 |
| type=“search” | 搜索框 |
| type=“color” | 生成一個顏色選擇表單 |
?重點記住： number tel search 這三個
11.4HTML5 新增的表單屬性
| 屬性 | 值 | 說明 |
|---|---|---|
| required | required | 表單擁有該屬性表示其內容不能為空,必填 |
| placeholder | 提示文本 | 表單的提示資訊,存在默認值將不顯示 |
| autofocus | autofocus | 自動聚焦屬性,頁面加載完成自動聚焦到指定表單 |
| autocomplete | off/on | 當用戶在欄位開始鍵入時,瀏覽器基于之前鍵入過得值,應該顯示出在欄位填寫的選項;默認已經打開, 如autocomplete=“on”,關閉autocomplete="off"需要放在表單內,同時加上name屬性,同時成功提交 |
| ,multiple | multiple | 可以多選檔案提交 |
可以通過以下設定方式修改placeholder里面的字體顏色：
input::placeholder {
color: pink;
}
小綜合
<html>
<head>
<title>個人簡歷</title>
<meta charset="utf-8">
<style>
body{
margin:0;
padding:0;
}
td{
width:160px;
height:30px;
font-size:20px;
}
input{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<table border=2; cellpadding=0; cellspacing=0; align=center>
<caption><h2>個人簡歷</h2></caption>
<tr align=center>
<td colspan="5">基本資訊</td>
</tr>
<tr align=center>
<td>姓名:</td><td><input type="text" name="username"></td>
<td>性別:</td><td><input type="text" name="sex"></td>
<td rowspan="5"><div><input type="file"></div></td>
</tr>
<tr align=center>
<td>畢業院校:</td><td><input type="text" name="school"></td>
<td>民族:</td><td><input type="text" name="minzu"></td>
</tr>
<tr align=center>
<td>最高學歷:</td><td><input type="text" name="xueli"></td>
<td>政治面貌:</td><td><select style="width: 100% ; height: 100%;">
<option value ="">--選擇--</option>
<option value ="dang">黨員</option>
<option value ="tuan">團員</option>
<option value ="min">民眾</option>
</select></td>
</tr>
<tr align=center>
<td>專業:</td><td><input type="text" name="zhuanye"></td>
<td>出生年月:</td><td><input type="date" name="birthday" ></td>
</tr>
<tr align=center>
<td>籍貫:</td><td><input type="text" name="county"></td>
<td>手機號碼:</td><td><input type="tel" name="tell"></td>
</tr>
<tr align=center>
<td>通訊地址:</td><td colspan="4"><input type="text" name="addr"></td>
</tr>
<tr align=center>
<td>電子信箱:</td><td colspan="4"><input type="email" name="emadd" ></td>
</tr>
<tr align=center>
<td colspan="5">教育背景</td>
</tr>
<tr align=center>
<td colspan="5" style="height:100px"><textarea rows="5" cols="115"style="border: 0px;">
</textarea></td>
</tr>
<tr align=center>
<td colspan="5">專業課程</td>
</tr>
<tr>
<td colspan="6" style="height:100%"><textarea rows="5" cols="115" name="zhunyeke" style="border: 0px solid black;">
</textarea></td>
</tr>
<tr align=center>
<td colspan="5">主要技能</td>
</tr>
<tr>
<td colspan="5" style="height:100%"><textarea rows="5" cols="115" name="jineng" style="border: 1px solid black">
</textarea>
</tr>
<tr align=center>
<td colspan="5">專案經驗</td>
</tr>
<tr>
<td colspan="6" style="height:100%"><textarea rows="5" cols="115" name="jingyan" style="border: 1px solid black;">
</textarea></td>
</tr>
<tr style="border: 0px;">
<td colspan="3"></td>
<td ><input type="submit" value="登錄"></td>
<td><input type="reset" value="重置"></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form >
<h1>
青春不常在，抓緊談戀愛
</h1>
<hr>
昵稱：<input type="text" placeholder="請輸入昵稱"><br><br>
性別：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br><br>
所在城市：<select >
<option value="">太原</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">深圳</option>
</select>
<br><br>
婚姻狀況：<input type="radio" name="hunyin">已婚
<input type="radio" name="hunyin">未婚
<input type="radio" name="hunyin">保密
<br><br>
喜歡的型別：<input type="checkbox">可愛
<input type="checkbox" checked>御姐
<input type="checkbox">性感
<input type="checkbox">蘿莉
<input type="checkbox">大叔
<br><br>
個人介紹：
<br><br>
<textarea name="" id="" cols="30" rows="10"></textarea>
<br><br>
<h3>我承諾</h3>
<ul>
<li>年滿十八</li>
<li>態度嚴肅</li>
<li>認真負責</li>
</ul>
<input type="checkbox">我同意以上條款
<br><br>
<button type="submit">免費注冊</button>
<button type="reset">重置</button>
</form>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/304539.html
標籤：其他
上一篇：手把手寫C++服務器(37)：手撕代碼——高并發多執行緒技識訓石之異步connect【萬字長文】
下一篇：一些擠壓很久的心里話