前言：

1.HTML結構

1.1認識HTML標簽

1.2HTML文件基本結構

1.3標簽層次結構

1.4快速生成代碼框架

2.HTML常見標簽

2.1注釋標簽

2.2標題標簽：h1-h6

2.3段落標簽：p

2.4換行標簽：?br

2.5格式化標簽

2.6圖片標簽：img

2.7超鏈接標簽：a

2.7.1外部鏈接

2.7.2內部鏈接

2.7.3空鏈接

2.7.4下載鏈接

2.7.5網頁元素鏈接

2.7.6錨點鏈接

2.8表格標簽

2.9合并單元格

2.10列表標簽

2.10.1無序標簽

2.10.2有序列表

2.10.3自定義列表

2.11表單標簽

2.11.1 from標簽

2.11.2 input標簽

2.11.3 label標簽

2.11.4 select標簽

2.11.5 textarea標

2.12無語義標簽：div &?span

2.13HTML特殊字符

3.綜合案例展示

3.1展示簡歷信息

3.2填寫簡歷

結束語：

前言：

在前幾節中小編主要是與大家介紹了有關于網絡方面的知識以及如何進行編程，那么想要做出來一個網站那么就離不開前端的知識，如HTML、CSS已經JavaScript。所以從這節開始小編將與大家分享一些前端的一些基礎知識，這節我們就先從HTML開始吧！

1.HTML結構

1.1認識HTML標簽

在HTML中代碼是由“標簽”來構成的。如下所示：

<body>hello</body>

標簽名body是放到<>里面的。
大部分標簽成對出現，<body>為開始標簽，</body>為結束標簽。
少數標簽只有開始標簽，稱為“單標簽”。
開始標簽和結束標簽之間，寫的是標簽的內容。
開始標簽中可能帶有“屬性”，id屬性相當于給這個標簽設置了一個唯一的標識符（身份證號）。

如下所示：

<body id = "myId">hello</body>

1.2HTML文件基本結構

如下代碼所示：

<html><head><title>第一個頁面</title></head><body>Hello World!</body>
</html>

運行結果展示：

html標簽是整個html文件根標簽（最頂層標簽）。
head標簽中寫頁面的屬性。
body標簽中寫的是頁面上顯示的內容。
title標簽中寫的是頁面的標題。

1.3標簽層次結構

一般是分為父子關系和兄弟關系。

?對于上述的代碼來說：

head和body是HTML的子標簽（HTML就是head和body的父標簽）。
title是head的子標簽，head是title的父標簽。
head和body之間是兄弟關系。

標簽之間構成了一個DOM樹，如下圖所示：

DOM是Document?Object?Mode（文本對象模型）的縮寫。?

1.4快速生成代碼框架

那么這里我們編寫代碼使用的是VScode編輯器。在其中可以使我們快速生成代碼。如下實例所示：

按住shift+！然后點擊回車，就可以自動生成了。

2.HTML常見標簽

2.1注釋標簽

注釋是不會顯示在界面上的，目的是為了提高代碼的可讀性。

在VScode中我們只要按住Ctrl + /?即可生成。

注釋的原則：

要和代碼邏輯一致。
盡量使用中文。
不要傳遞負能量。

2.2標題標簽：h1-h6

標題標簽一共有六個，從h1-h6，數字越大，字體就越小。

代碼演示：

<!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><!-- 我是注釋  --><h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>
</body>
</html>

結果展示：

2.3段落標簽：p

如果我們在文本中顯示一段比較長的文字在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>在css中我們一般使用px作為單位,在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像
素,這可能會造成我們的一個錯覺,那就是css中的像素就是設備的物理像素。但實際情況卻并非如此,css中的像素只是一個抽象的單位,在不同的設備或不同的環境中,css中的1px所代表的設備物理像素是不同
的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。在早先的移動設備中,屏幕像素密度都比較低,如iphone3,它的分辨率為320x480,在iphone3上,一個css像素確
實是等于一個屏幕物理像素的。
</body>
</html>

結果展示：

?即使是在代碼中進行手動換行在執行出來的結果還是一樣的。這里我們是想要讓段落之間進行分隔清楚。?所以這里我們只要使用<p>標簽就可以進段落操作了。

代碼展示：

<!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>在css中我們一般使用px作為單位,在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像
素,這可能會造成我們的一個錯覺,那就是css中的像素就是設備的物理像素。<p></p>但實際情況卻并非如此,css中的像素只是一個抽象的單位,在不同的設備或不同的環境中,css中的1px所代表的設備物理像素是不同
的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。<p></p>在早先的移動設備中,屏幕像素密度都比較低,如iphone3,它的分辨率為320x480,在iphone3上,一個css像素確
實是等于一個屏幕物理像素的。
</body>
</html>

結果展示：

2.4換行標簽：?br

上述是段落標簽，那么如果我們只是向要換行呢？此時我們就可以使用<br>標簽來進行換行了。

代碼展示：

<!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><!-- 換行標簽 -->在css中我們一般使用px作為單位,在桌面瀏覽器中css的1個像素往往都是對應著電腦屏幕的1個物理像
素,這可能會造成我們的一個錯覺,那就是css中的像素就是設備的物理像素。<br>但實際情況卻并非如此,css中的像素只是一個抽象的單位,在不同的設備或不同的環境中,css中的1px所代表的設備物理像素是不同
的。在為桌面瀏覽器設計的網頁中，我們無需對這個津津計較，但在移動設備上，必須弄明白這點。<br>在早先的移動設備中,屏幕像素密度都比較低,如iphone3,它的分辨率為320x480,在iphone3上,一個css像素確
實是等于一個屏幕物理像素的。
</body>
</html>

結果展示：

可能有人覺得好像沒有太大的區別啊？

注意了！！！

在段落標簽中是行與行之間還是有一定的縫隙的，但是換行是沒有縫隙的。

2.5格式化標簽

格式標簽主要的功能有以下幾點：

加粗：strong標簽和b標簽。
傾斜：em標簽和i標簽。
刪除線：del標簽和s標簽。
下換線：ins標簽和u標簽。

代碼展示：

<!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><!-- 格式化標簽 --><strong>strong 加粗</strong><b>b 加粗</b><em>傾斜</em><i>傾斜</i><del>刪除線</del><s>刪除線</s><ins>下劃線</ins><u>下劃線</u>
</body>
</html>

結果展示：

2.6圖片標簽：img

img標簽必須帶有scr屬性，表示圖片路徑。該圖片路徑需要我們放置到與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><!-- 圖片標簽 --><img src="dog.jpg" alt="薩摩耶" title="這是一只薩摩耶" width="500px" height="400px" border = "5px">
</body>
</html>

結果展示：
?在img標簽中還要其他屬性：

alt：替換文本。當文本不能正確顯示的時候，會顯示一個替換的文字。
title：提示文本，鼠標放到圖片上時就會有一個提示語。
width/height：控制寬度高度，高度和寬度一般改一個就行，另外一個會等比例縮放，否則就會圖片失衡。
border：邊框，參數是寬度的像素，但是一般使用CSS來設定。

注意：

屬性可以有多個，不能寫到標簽之前。
屬性之間用空格分隔，可以是多個空格，也可以是換行。
屬性之間不分先后順序。
屬性使用“鍵值對”的格式來表示。
關于目錄的表示可以使用絕對路徑也可以使用相對路徑的表示方式。

2.7超鏈接標簽：a

2.7.1外部鏈接

外部鏈接是由href引用其他網站的地址。

href：表示點擊后會跳轉到哪個頁面。
target：打開方式，默認是_self，如果是_blank則用新的標簽打開。

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

代碼展示：
結果展示：

鼠標點擊之后就會跳轉到百度的界面，并且沒有打開新的標簽。

2.7.2內部鏈接

內部鏈接是指網站內部頁面之間的鏈接，寫相對路徑即可。

代碼展示：

1.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><a href="2.html">點我跳轉到2.html</a>
</body>
</html>

2.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><a href="1.html">點我跳轉到1.html</a>
</body>
</html>

結果展示：

2.7.3空鏈接

空鏈接是指使用#在href中占位。

代碼展示：

<!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><a href="#">空鏈接</a>
</body>
</html>

結果展示：

你會發現點擊沒有出現任何的效果，這就是空鏈接。

2.7.4下載鏈接

href對應的路徑是一個文件（可以使用zip文件）。

我們先來在改目錄下創建一個test.zip文件。

代碼展示：

<!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><a href="test.zip">下載文件</a>
</body>
</html>

結果展示：

2.7.5網頁元素鏈接

可以給圖片等任何元素添加鏈接(把元素放置到a?標簽中)。

代碼展示：
結果展示：

點擊圖片之后就會跳轉：

2.7.6錨點鏈接

可以快速定位到頁面中的某個位置。

代碼展示：

<!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><a href="#dog">dog</a><img src="dog.jpg">
</body>
</html>

結果展示：

這里的效果不明顯，大概就是你點擊文字之后就會定位了圖片所在的位置。后面的案例里大家會體會到的。

2.8表格標簽

table標簽：表示整個表格。
tr：表示表格的一行。
td：表示一個單元格。
th：表示表頭單元格，會居中加粗。
thead：表格的頭部區域（注意和th區分，范圍是比th要大的）
tbody：表格得到主體區域。

table包含tr，tr包含td或者是th。

在表格標簽匯總有一些屬性，可以用于設置大小邊框等，但是一般使用CSS的方式倆設置這些屬性都要放置在table標簽中。

align是表格相對于周圍元素的對齊方式，align="center"（不是內部元素的對齊方式）。
border表示邊框，1表示有邊框（數字越大，邊框越粗），""表示沒邊框。
cellpadding：內容距離邊框的距離，默認1像素。
cellspacing：單元格之間的距離，默認為2像素。
width/height：設置尺寸。

注意，以上這些屬性，在VScode中都沒有提示。

代碼展示：

<!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><!-- 表格標簽 --><!-- 創建一個三行三列的表格 --><table border="1" width="400px" height="200px"><!-- 表頭 --><thead><!-- 表頭內容 --><th>姓名</th><th>年齡</th><th>性別</th></thead><!-- 表單 --><tbody><!-- 第一行信息 --><tr><td>張三</td><td>18</td><td>男</td></tr><!-- 第二行信息 --><tr><td>王五</td><td>20</td><td>男</td></tr><!-- 第三行信息 --><tr><td>李四</td><td>18</td><td>女</td></tr></tbody></table>
</body>
</html>

結果展示：

2.9合并單元格

如果現在我想合并單元格該怎么合并呢？有以下兩種方式可以進行合并。

跨行合并：rowspan="n"。
跨列合并：colspan="n"。

合并步驟入下所示：

先確定到底是合并行（rowspan）還是列（colspan）。
找對單元格，如果是合并，那么先去找最上面的行信息，如果是列合并，那么先去找最左邊的列。
刪除后面合并的行或者是列。

代碼展示：

<!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><!-- 表格標簽 --><!-- 創建一個三行三列的表格 --><table border="1" width="400px" height="200px"><!-- 表頭 --><thead><!-- 表頭內容 --><th>姓名</th><th>年齡</th><th>性別</th></thead><!-- 表單 --><tbody><!-- 第一行信息 --><tr><td>張三</td><td>18</td><td rowspan="2">男</td></tr><!-- 第二行信息 --><tr><td>王五</td><td>20</td></tr><!-- 第三行信息 --><tr><td colspan="2">李四   |   18</td><td>女</td></tr></tbody></table>
</body>
</html>

結果展示：

2.10列表標簽

2.10.1無序標簽

他是通過<ul></ul>和<li></li>來組成，其中ul表示unorderedlist，li?表示list。

代碼展示：

<!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><h3>無序列表</h3><ul><li>唐僧</li><li>孫悟空</li><li>豬八戒</li><li>沙師弟</li></ul>
</body>
</html>

結果展示：

2.10.2有序列表

它是由<ol></ol>和<li></li>來組成，其中ol就和上面ul的意思相反，他是orderedlist的縮寫。

代碼展示：

<!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><h3>MYSQL中事務具備以下四大特性：</h3><ol><li>原子性</li><li>一致性</li><li>持久性</li><li>隔離性</li></ol>
</body>
</html>

結果展示：

2.10.3自定義列表

它是由<dl></dl>和<dt></dt>組成的。

代碼展示：

<!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><h3>自定義列表</h3><dl><dt>標題</dt><dt>聯表查詢</dt><dt>索引</dt><dt>事務</dt></dl>
</body>
</html>

結果展示：

2.11表單標簽

表單就是讓用戶輸入信息的重要途徑。

分成兩個部分：

表單域：包含表單元素的區域，重點是form標簽。
表單控件：輸入框，提交按鈕等，重點是input標簽。

接下來我們一一給大家講解一下。

2.11.1 from標簽

from標簽是描述了要把數據按照什么方式，提交到哪個頁面中。下面是一個綜合展示，如果不清楚同學可以先看下面的內容。

代碼展示：

<!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 action="https://www.baidu.com" method="get">姓名：<input type="text" id="username" name="name"> <br>密碼：<input type="password"><br>性別：<input type="radio" name="sex" value="男">男&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="女">女&nbsp;&nbsp;&nbsp;<br>愛好：<input type="checkbox">聽音樂&nbsp;&nbsp;<input type="checkbox">看書&nbsp;&nbsp;<input type="checkbox">跳舞&nbsp;&nbsp;<input type="checkbox">閱讀<br>頭像：<input type="file"><br>大學：<select><option>北京大學</option><option selected="selected">清華大學</option><option>陜西師范大學</option></select><br>備注：<textarea cols="30" rows="10"></textarea><br><input type="button" value="普通按鈕">&nbsp;&nbsp;<input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="清空"></form>
</body>
</html>

結果展示：

2.11.2 input標簽

各種輸入控件，單行文本框，按鈕，單選框，復選框。

type（必須有），取值種類很多，有button，checkbox，text，file，image，password，?radio等。
name：給input起了個名字，尤其是對于單選按鈕，具有相同的name才能多選一。
value：input中的默認值。
checked：默認被選中。（用于單選按鈕和多選按鈕）。
maxlength：設定最大長度。

代碼展示：

<!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><!-- 文本框 --><h3>文本框</h3><input type="text"><!-- 密碼框 --><h3>密碼框</h3><input type="password"><!-- 單選框 --><h3>單選框</h3><!-- 注意：單選框之間必須具備相同的name屬性，才能實現 多選一 的效果 --><input type="radio" name="sex"> 男<input type="radio" name="sex"> 女<!-- 復選框 --><h3>復選框</h3>愛好：<input type="checkbox">跳舞&nbsp;&nbsp;&nbsp;<input type="checkbox">畫畫&nbsp;&nbsp;&nbsp;<input type="checkbox">運動&nbsp;&nbsp;&nbsp;<input type="checkbox">唱歌&nbsp;&nbsp;&nbsp;<!-- 普通按鈕 --><h3>普通按鈕</h3><!-- 此時點擊是沒有效果的，這個要配合后期學習的JS才會有效果，這個后面會給大家講解 --><input type="button" value="我是一個普通按鈕"><!-- 提交按鈕 --><!-- 注意：提交按鈕必須放置在form標簽中，他是點擊之后要嘗試交給服務器的 --><h3>提交按鈕</h3><form action="http://www.baidu.com"><input type="text" name="username"><input type="submit" value="提交"></form><!-- 清空按鈕 --><!-- 注意：清空按鈕必須放置在form標簽中，點擊后會將form內所有用戶輸入的內容重置--><h3>提交按鈕</h3><form action="http://www.baidu.com"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空"></form></body>
</html>

結果展示

2.11.3 label標簽

label標簽是搭配input使用，點擊label也能選中對應的單選/復選框，能夠提升用戶體驗。

for屬性：指定當前label和哪個相同id的input標簽對應。（此時的點擊才是有用的）

代碼展示：

<!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><!-- label標簽 --><label for="male">男</label><input type="radio" name="sex" id="male">
</body>
</html>

結果展示：

2.11.4 select標簽

下拉菜單：
option中定義selected="selected"表示默認選中。

代碼展示：

<!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><!-- selected下拉菜單 --><select><option>北京</option><option selected="selected">上海</option><option>天津</option><option>上海</option><option>杭州</option></select>
</body>
</html>

結果展示：

2.11.5 textarea標

textarea就是一個文本域，就是默認內容。

代碼展示：

<!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><!-- textarea標簽 --><textarea  cols="30" rows="10"></textarea>
</body>
</html>

結果展示：

2.12無語義標簽：div &?span

div標簽，他是divsion的縮寫，含義是分隔的意思。

span標簽，含義是跨度的意思。

它兩就像是兩個盒子，用于網頁的布局。

div是獨占一行的，是一個大盒子。
span不獨占一行，是一個小盒子。

代碼展示：

<!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><!-- 無語義標簽 div&span --><div><span>hello1</span><span>hello2</span><span>hello3</span></div><div><span>world1</span><span>world2</span><span>world3</span></div>
</body>
</html>

結果展示：

2.13HTML特殊字符

空格： 
小于號：<
大于號：>
按位與：&

還有許多，這里小編就不給大家展示了，如果還有不會的可以直接點擊這個鏈接（?HTML 教程 | 菜鳥教程）進行學習哦！

3.綜合案例展示

下面小編就帶領著大家一起來運用上述的知識來進行簡單的編寫。

3.1展示簡歷信息

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的簡歷 HTML版本</title>
</head>
<body><div><div><h1>李四</h1></div><div><h2>基本信息</h2><img src="dog.jpg" width="200px" height="180px"><p></p>求職意向：Java工程師<p></p>聯系電話：111-2222-3333<p></p>郵箱：xxxxxxx@163.com<p></p><a href="https://gitee.com/YAUGAOLELE" target="_blank">我的gitee賬號</a><p></p><a href="https://blog.csdn.net/weixin_61599986?spm=1000.2115.3001.5343" target="_blank">我的個人博客</a></div><div><h2>教育背景</h2><ol><li>xxxx-xxxx 某某大學</li><li>xxxx-xxxx 某某高中</li></ol></div><div><h2>專業技能 </h2><ul><li>JavaSE...</li><li>數據結構</li><li>MySQL</li><li>網絡</li><li>JavaEE...</li></ul></div><div><h2>所獲獎項</h2><ul><li>xxxx一等獎</li><li>xxxx二等獎</li><li>xxxx三等獎</li></ul></div></div>
</body>
</html>

結果展示：

3.2填寫簡歷

代碼展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>在線簡歷填寫</title>
</head>
<body><table width="500px" cellapacing="0"><thead><h3>請填寫簡歷信息</h3></thead><tbody><tr><td><label for="name"> 姓名 </label></td><td><input type="text" id="name"></td></tr><tr><td>性別</td><td><input type="radio" name="sex" value="男">男&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="女">女</td></tr><tr><td>出生日期</td><td><select><option>--請選擇年份--</option><option>1998</option><option>1999</option><option>2000</option><option>2001</option><option>2002</option><option>2003</option><option>2004</option><option>2005</option><option>2006</option><option>2007</option><option>2008</option><option>2009</option><option>2010</option></select><select><option>--請選擇月份--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option></select><select><option>--請選擇日期--</option><option value="">1</option><option value="">2</option><option value="">3</option><option value="">4</option><option value="">5</option><option value="">6</option><option value="">7</option><option value="">8</option><option value="">9</option><option value="">10</option><option value="">11</option><option value="">12</option><option value="">13</option><option value="">14</option><option value="">15</option><option value="">16</option><option value="">17</option><option value="">18</option><option value="">19</option><option value="">20</option><option value="">21</option><option value="">22</option><option value="">23</option><option value="">24</option><option value="">25</option><option value="">26</option><option value="">27</option><option value="">28</option><option value="">29</option><option value="">30</option><option value="">31</option></select></td></tr><tr><td>就讀學校</td><td><input type="text"></td></tr><tr><td>應聘崗位</td><td><input type="checkbox">前端開發<input type="checkbox">后端開發<input type="checkbox">測試開發<input type="checkbox">運維開發</td></tr><tr><td>掌握的技能</td><td><textarea cols="30" rows="10"></textarea></td></tr><tr><td>項目經歷</td><td><textarea cols="30" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="lisence"><label for="lisence"> 我已仔細閱讀過公司的招聘要求</label></td></tr><tr><td></td><td><h3>應聘者確認：</h3><ul><li>以上信息真實有效</li><li>能夠盡早去公司實習</li><li>能接受公司的加班文化</li></ul></td></tr></tbody></table>
</body>
</html>

結果展示：

結束語：

好啦！?這節的HTML基礎知識小編就與大家分享到這里啦，后期小編會繼續帶著大家一起學習JS和CSS有關的基礎知識的，大家有啥不會的可以在評論區留言給小編，希望這節對大家了解網絡有一定幫助，想要學習的同學記得關注小編和小編一起學習吧！如果文章中有任何錯誤也歡迎各位大佬及時為小編指點迷津（在此小編先謝過各位大佬啦！）