前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写
文章目錄
- 回顧復習
- 超鏈接標簽a（補充）
- 表格標簽
- 列表標簽
- 表單標簽
- label標簽
- select標簽
- textarea標簽
- 無語義標簽 div&& span
- 實戰案例
- 個人簡歷網頁展示
- 個人簡歷網頁填寫
回顧復習
由上文我們已經知道
- HTML是由標簽構成的。
- 并且標簽一般是成對出現的，但是也有些標簽是“單標簽”
- 標簽是可以嵌套的~（樹形結構.DOM樹等）
- HTML是運行在瀏覽器中的。
已經了解到了HTML的基本結構如下：
<html><head><body>//需要編寫的內容</body></head> </html>上述基本結構不需要每次都寫出，可以通過！+tab鍵快速生成。
在上文中我們學習了一些基本的標簽：h1-h6的標題標簽，超鏈接標簽a,段落標簽p ,圖片標簽img,換行標簽br,基本的格式標簽加粗、斜杠、下劃線等等。
超鏈接標簽a（補充）
- herf屬性：表示點擊后會跳轉到哪個頁面（必備的屬性）
- taget屬性：描述了超鏈接的打開方式，是直接在本標簽頁打開，還是用新的標簽頁打開。一般默認是_self.如果是_blank則用新的標簽頁打開。
示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>代碼示例</title> </head> <body> <a href="https://www.baidu.com/" target="_self">這是百度的鏈接</a> </body> </html>taget默認self 點擊后會在本標簽頁跳轉鏈接
taget設置為_blank,點擊后會打開新的標簽頁，并跳轉鏈接。
鏈接的幾種形式
- 外部鏈接：href引用其他網站的地址。（上文已提到）
- 內部鏈接：網頁內部頁面之間的鏈接。在href中寫入相對路徑即可。
在一個目錄中，先創建1.html,再創建一個2.html.
<!-- 1.html --> 我是 1.html <a href="2.html">點我跳轉到 2.html</a> <!-- 2.html --> 我是 2.html <a href="1.html">點我跳轉到 1.html</a>- 空鏈接：使用“ # ”在href中占位。點擊后不會鏈接到其他網址。
- 下載鏈接：href路徑中寫入一個文件。（可以使用zip文件）
- 網頁元素鏈接：可以給圖片等任何元素添加鏈接（把元素放入a標簽中）
- 錨點鏈接：可以快速定位到頁面中的某個位置。
表格標簽
基本使用
- table 標簽：表示整個表格
- tr：表示表格的一行(table row)
- td:表示一個單元格
- th:表示表頭單元格。會居中加粗
- thread:表格的頭部區域（不是th,范圍比th要大一些）
- tbody：表格得到主體區域
后兩個用到的不多。
table包含tr,tr包含td或者th.
表格屬性
改變尺寸：width、heigth
單位是px像素。
加上邊框
border
列表標簽
無序列表標簽(重要)：ul和li
ul:整個無序列表(u:unordered)
li:列表項，一個列表包含多個列表項(li:l是list,i是item列表項)
有序列表標簽（用的不多）：ol和li
ol:整個有序列表(o:ordered)
li:列表項，一個列表項中包含多個表項。
代碼示例：
<ol><li>吃飯</li><li>睡覺</li><li>喝奶茶</li> </ol><!-- 無序列表--> <ul><li>吃飯</li><li>睡覺</li><li>喝奶茶</li> </ul>效果：
自定義列表標簽（重要）： dl dt dd
dl:整個表項
dt:小標題
dd:標題里的內容
表單標簽
表單標簽就是讓用戶“填表”。此處 的填表并不是讓用戶填表格，而是讓用戶輸入一些信息。
通過表單，就可以讓用戶和服務器之間進行一些簡單的交互。
表單標簽包括好幾個標簽，統稱為標簽。
分成兩個部分：
- 表單域：包含表單元素的區域。重點是form標簽
- 表單控件：輸入框，提交按鈕等。重點是input標簽
form標簽
<form action="test.html">...form的內容 </form>描述了要把數據按照什么方式 提交到哪個頁面中。
關于form需要結合 服務器&網絡編程 來進一步理解。后面再詳細介紹
imput標簽
input標簽可以用來表示各種輸入的控件~
"控件"是在以前的圖形化界面編程中的詞，簡單來說，一個按鈕、一個文本框、就是一個控件，一個單選框、復選框也都是控件~
表示一個圖形界面的基本元素，都可以稱為控件~
input最核心的屬性，叫做type.
type不同的取值就能表示不同的控件類型~
- type(必須有)：取值種類很多，button,checkbox,text,file,image,password,radio等。
- name:給input命名，尤其是 對于 單選按鈕，具有相同的那么才能多選一。
- value:input中的默認值。
- checked:默認被選中（用于單選按鈕和多選按鈕）
- maxlength:設定最大長度
下面介紹input標簽中幾種常用的type。
1）文本框
最基本輸入框，只能保存1行內容，不能換行
2）密碼框
密碼框中輸入的內容會隱藏。表示輸入的內容為密碼時，使用密碼框。
<input type="password">如果有一個網頁默認保存了密碼，又忘記了具體是啥，可以通過chrome的開發者工具，把input的type改了，就可以看到內容。
3）單選框
<input type="radio">通常情況下，需要把多個input type=“radio” 關聯起來 ，才能達到“N選1”的效果。
多個單選框的關聯，需要用到name屬性。
如果多個單選框的name相同，那么就只能取其中一個~
checked屬性 ：默認。即選項默認位置。
4）復選框
checkbox,可以選擇多個選項。
5)普通按鈕
button.
value屬性：在按鈕上顯示 的文字。
onclick:綁定了一個點擊事件。調用后面的alert函數，打印一個字符串“hello”
效果如下：
6）提交按鈕
submit.
提交按鈕就是把當前表單里的用戶輸入數據，包裝成一個http請求，發送給服務器~
7）清空按鈕
8）選擇文件
一般在上傳文件的時候用到。
點擊選擇文件后，就會讓我們選擇一個文件
label標簽
一般搭配input使用。具體來說，是搭配input中的單選框或者復選框使用
label標簽的作用：當我們點擊單選框/或者復選框后面的文字時，等同于我們直接點擊單選框/復選框。
其實就是為了讓用戶更方便的選中選項。
for屬性表示當前的label要和哪個input標簽關聯起來~
這里就需要給對應的input標簽起一個唯一的身份標識id
select標簽
select標簽：下拉框/下拉菜單。
<select name="" id=""><option value="">北京</option><option value="" selected="selected">上海</option><option value="">深圳</option><option value="">廣州</option><option value="">杭州</option></select>select是標識下拉框本身。
里面的選項是一個一個的option標簽。
通過selected屬性來指定默認的選項，如果沒有指定，那么會默認選中第一項。
textarea標簽
多行文本編輯框
<textarea name="" id="" cols="30" rows="10"></textarea>cols屬性：規定有幾列。row屬性：規定有幾行。
無語義標簽 div&& span
上面介紹的 很多標簽，都是有語義標簽，即標簽有明確的意義，功能明確，作用明顯。
而無語義標簽的功能并不明確，或者說，無語義標簽啥都能干，有語義標簽的功能都能用無語義標簽來實現。（大部分標簽都可以使用div和span來代替）
無語義標簽沒有專門的用途。
div和span標簽往往用來對頁面結構進行布局~（雖然也可以實現上述標簽功能）
div可以視為是一個獨占一行的“大盒子”
span可以視為是一個不獨占一行的“小盒子”。
"盒子"里面又可以裝其他標簽，或者盒子里面也可以再裝盒子~
實戰案例
個人簡歷網頁展示
代碼如下
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>個人簡歷</title> </head> <body><h1>湯老濕</h1><h3>基本信息</h3><img src="0191b65d392b63a80120695c1316f3.jpg@1280w_1l_2o_100sh.jpg" alt="我的頭像" width="200px" height="130px"><p>求職意向：Java開發工程師</p><p>聯系電話：911</p><p>郵箱：123qq.com</p><a href="https://github.com">我的github</a><br><a href="https://csdn.com">我的博客</a><h3>教育背景</h3><ol><li>小葵花幼兒園</li><li>小葵花小學</li><li>小葵花中學</li><li>小葵花高中</li><li>小葵花大學</li></ol><h3>專業技能</h3><ul><li>熟練掌握Java的基礎語法</li><li>熟練掌握常用的數據結構，例如鏈表，二叉樹，哈希表等</li><li>熟練掌握操作系統原理，熟悉多線程編程，理解線程安全的相關問題</li><li>熟練掌握網絡原理，熟悉網絡編程，熟悉TCP/IP協議棧的基本原理</li><li>熟練掌握MySql數據庫，能夠進行簡單的增刪改查操作，理解索引和事物的底層原理。</li></ul><h3>我的項目</h3><ol><!--第一個項目--><li><h4>留言墻</h4><p>開發時間：2021年11月10號</p><p>功能介紹：<ul><li>支持留言發布</li><li>支持匿名留言</li></ul></p></li><!--第二個項目--><li><h4>學習小助手</h4><p>開發時間：2021年11月10號</p><p>功能介紹：<ul><li>支持錯題檢索</li><li>支持復習預習</li></ul></p></li></ol><h3>個人評價</h3><p>在校期間，學習成績優良，多次獲得獎學金</p></body> </html>效果及鏈接如下:
鏈接:http://localhost:63342/TestDemo_20220302/DemoTest10.html?_ijt=5o4khccd1t4qv6osmu5odcfuc5
個人簡歷網頁填寫
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>填寫簡歷信息</title> </head> <body> <h3>請填寫簡歷信息</h3><table width="500px"><tr><td>姓名</td><td><input type="text"></td></tr><tr><td>性別</td><td><input type="radio" name="gender" checked="checked" id="male"> <label for="male"><img src="male.png" alt="" width="20px" height="20px">男</label><input type="radio" name="gender" id="female"><label for="female"><img src="female.png" alt="" width="20px" height="20px">女</label></td></tr><tr><td>出生日期</td><td><select name="" id=""><option value="">--請選擇年份--</option><option value="">1999</option><option value="">2000</option><option value="">2001</option><option value="">2002</option><option value="">2003</option><option value="">2004</option><option value="">2005</option><option value="">2006</option></select><select name="" id=""><option value="">--請選擇月份--</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 name="" id=""><option value=""> --請選擇日期--</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" id="frontend"> <label for="frontend">前端開發</label><input type="checkbox" id="backend"> <label for="backend">后端開發</label><input type="checkbox" id="qa"><label for="qa">測試開發</label><input type="checkbox" id="op"> <label for="op">運維開發</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>項目經歷</td><td><textarea name="" id="" cols="50" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="confirm"><label for="confirm">我已仔細閱讀過公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的狀態</a></td></tr><tr><td></td><td><h4>應聘者確認：</h4><ul><li>以上信息真實有效</li><li>能夠盡早來公司實習</li><li>能夠接受公司的加班文化</li></ul></td></tr></table> </body> </html>效果如下:
總結
以上是生活随笔為你收集整理的前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSDN 软件开发新手赛正式启动，召集热
- 下一篇： 关于Chrome浏览器调用IE浏览器