當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写

發(fā)布時間：2023/12/20 HTML 31 豆豆

生活随笔收集整理的這篇文章主要介紹了前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

回顧復(fù)習(xí)
超鏈接標(biāo)簽a（補(bǔ)充）
- 表格標(biāo)簽
- 列表標(biāo)簽
- 表單標(biāo)簽
- label標(biāo)簽
- select標(biāo)簽
- textarea標(biāo)簽
無語義標(biāo)簽 div&& span
實戰(zhàn)案例
- 個人簡歷網(wǎng)頁展示
- 個人簡歷網(wǎng)頁填寫

回顧復(fù)習(xí)

由上文我們已經(jīng)知道

HTML是由標(biāo)簽構(gòu)成的。
并且標(biāo)簽一般是成對出現(xiàn)的，但是也有些標(biāo)簽是“單標(biāo)簽”
標(biāo)簽是可以嵌套的~（樹形結(jié)構(gòu).DOM樹等）
HTML是運行在瀏覽器中的。

已經(jīng)了解到了HTML的基本結(jié)構(gòu)如下：

<html><head><body>//需要編寫的內(nèi)容</body></head> </html>

上述基本結(jié)構(gòu)不需要每次都寫出，可以通過！+tab鍵快速生成。

在上文中我們學(xué)習(xí)了一些基本的標(biāo)簽：h1-h6的標(biāo)題標(biāo)簽，超鏈接標(biāo)簽a,段落標(biāo)簽p ,圖片標(biāo)簽img,換行標(biāo)簽br,基本的格式標(biāo)簽加粗、斜杠、下劃線等等。

超鏈接標(biāo)簽a（補(bǔ)充）

herf屬性：表示點擊后會跳轉(zhuǎn)到哪個頁面（必備的屬性）
taget屬性：描述了超鏈接的打開方式，是直接在本標(biāo)簽頁打開，還是用新的標(biāo)簽頁打開。一般默認(rèn)是_self.如果是_blank則用新的標(biāo)簽頁打開。

示例：

<!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默認(rèn)self 點擊后會在本標(biāo)簽頁跳轉(zhuǎn)鏈接

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>代碼示例</title> </head> <body> <a href="https://www.baidu.com/" target="_blank">這是百度的鏈接</a> </body> </html>

taget設(shè)置為_blank,點擊后會打開新的標(biāo)簽頁，并跳轉(zhuǎn)鏈接。

鏈接的幾種形式

外部鏈接：href引用其他網(wǎng)站的地址。（上文已提到）

內(nèi)部鏈接：網(wǎng)頁內(nèi)部頁面之間的鏈接。在href中寫入相對路徑即可。

在一個目錄中，先創(chuàng)建1.html,再創(chuàng)建一個2.html.

我是 1.html <a href="2.html">點我跳轉(zhuǎn)到 2.html</a>  我是 2.html <a href="1.html">點我跳轉(zhuǎn)到 1.html</a>

空鏈接：使用“ # ”在href中占位。點擊后不會鏈接到其他網(wǎng)址。

下載鏈接：href路徑中寫入一個文件。（可以使用zip文件）

網(wǎng)頁元素鏈接：可以給圖片等任何元素添加鏈接（把元素放入a標(biāo)簽中）

錨點鏈接：可以快速定位到頁面中的某個位置。

表格標(biāo)簽

基本使用

table 標(biāo)簽：表示整個表格
tr：表示表格的一行(table row)
td:表示一個單元格
th:表示表頭單元格。會居中加粗
thread:表格的頭部區(qū)域（不是th,范圍比th要大一些）
tbody：表格得到主體區(qū)域
后兩個用到的不多。

table包含tr,tr包含td或者th.

表格屬性
改變尺寸：width、heigth
單位是px像素。
加上邊框
border

列表標(biāo)簽

無序列表標(biāo)簽(重要)：ul和li
ul:整個無序列表(u:unordered)
li:列表項，一個列表包含多個列表項(li:l是list,i是item列表項)
有序列表標(biāo)簽（用的不多）：ol和li
ol:整個有序列表(o:ordered)
li:列表項，一個列表項中包含多個表項。

代碼示例：

效果：

自定義列表標(biāo)簽（重要）： dl dt dd
dl:整個表項
dt:小標(biāo)題
dd:標(biāo)題里的內(nèi)容

表單標(biāo)簽

表單標(biāo)簽就是讓用戶“填表”。此處的填表并不是讓用戶填表格，而是讓用戶輸入一些信息。

通過表單，就可以讓用戶和服務(wù)器之間進(jìn)行一些簡單的交互。

表單標(biāo)簽包括好幾個標(biāo)簽，統(tǒng)稱為標(biāo)簽。

分成兩個部分：

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

form標(biāo)簽

<form action="test.html">...form的內(nèi)容 </form>

描述了要把數(shù)據(jù)按照什么方式提交到哪個頁面中。

關(guān)于form需要結(jié)合服務(wù)器&網(wǎng)絡(luò)編程來進(jìn)一步理解。后面再詳細(xì)介紹

imput標(biāo)簽
input標(biāo)簽可以用來表示各種輸入的控件~
"控件"是在以前的圖形化界面編程中的詞，簡單來說，一個按鈕、一個文本框、就是一個控件，一個單選框、復(fù)選框也都是控件~
表示一個圖形界面的基本元素，都可以稱為控件~

input最核心的屬性，叫做type.
type不同的取值就能表示不同的控件類型~

type(必須有)：取值種類很多，button,checkbox,text,file,image,password,radio等。
name:給input命名，尤其是對于單選按鈕，具有相同的那么才能多選一。
value:input中的默認(rèn)值。
checked:默認(rèn)被選中（用于單選按鈕和多選按鈕）
maxlength:設(shè)定最大長度

下面介紹input標(biāo)簽中幾種常用的type。
1）文本框
最基本輸入框，只能保存1行內(nèi)容，不能換行

2）密碼框

密碼框中輸入的內(nèi)容會隱藏。表示輸入的內(nèi)容為密碼時，使用密碼框。

如果有一個網(wǎng)頁默認(rèn)保存了密碼，又忘記了具體是啥，可以通過chrome的開發(fā)者工具，把input的type改了，就可以看到內(nèi)容。

3）單選框

通常情況下，需要把多個input type=“radio” 關(guān)聯(lián)起來，才能達(dá)到“N選1”的效果。
多個單選框的關(guān)聯(lián)，需要用到name屬性。
如果多個單選框的name相同，那么就只能取其中一個~

<input type="radio" name="action">敲代碼學(xué)習(xí)<input type="radio" name="action">玩游戲上號

checked屬性：默認(rèn)。即選項默認(rèn)位置。

<input type="radio" name="action" checked="默認(rèn)">敲代碼學(xué)習(xí)<input type="radio" name="action">玩游戲上號

4）復(fù)選框
checkbox,可以選擇多個選項。

<input type="checkbox">吃飯<br><input type="checkbox">睡覺<br><input type="checkbox">敲代碼/上號

5)普通按鈕
button.

value屬性：在按鈕上顯示的文字。
onclick:綁定了一個點擊事件。調(diào)用后面的alert函數(shù)，打印一個字符串“hello”

效果如下：

6）提交按鈕
submit.

提交按鈕就是把當(dāng)前表單里的用戶輸入數(shù)據(jù)，包裝成一個http請求，發(fā)送給服務(wù)器~
7）清空按鈕

8）選擇文件
一般在上傳文件的時候用到。

點擊選擇文件后，就會讓我們選擇一個文件

label標(biāo)簽

一般搭配input使用。具體來說，是搭配input中的單選框或者復(fù)選框使用
label標(biāo)簽的作用：當(dāng)我們點擊單選框/或者復(fù)選框后面的文字時，等同于我們直接點擊單選框/復(fù)選框。
其實就是為了讓用戶更方便的選中選項。

for屬性表示當(dāng)前的label要和哪個input標(biāo)簽關(guān)聯(lián)起來~
這里就需要給對應(yīng)的input標(biāo)簽起一個唯一的身份標(biāo)識id

select標(biāo)簽

select標(biāo)簽：下拉框/下拉菜單。

select是標(biāo)識下拉框本身。
里面的選項是一個一個的option標(biāo)簽。
通過selected屬性來指定默認(rèn)的選項，如果沒有指定，那么會默認(rèn)選中第一項。

textarea標(biāo)簽

多行文本編輯框

cols屬性：規(guī)定有幾列。row屬性：規(guī)定有幾行。

無語義標(biāo)簽 div&& span

上面介紹的很多標(biāo)簽，都是有語義標(biāo)簽，即標(biāo)簽有明確的意義，功能明確，作用明顯。
而無語義標(biāo)簽的功能并不明確，或者說，無語義標(biāo)簽啥都能干，有語義標(biāo)簽的功能都能用無語義標(biāo)簽來實現(xiàn)。（大部分標(biāo)簽都可以使用div和span來代替）
無語義標(biāo)簽沒有專門的用途。
div和span標(biāo)簽往往用來對頁面結(jié)構(gòu)進(jìn)行布局~（雖然也可以實現(xiàn)上述標(biāo)簽功能）

div可以視為是一個獨占一行的“大盒子”
span可以視為是一個不獨占一行的“小盒子”。
"盒子"里面又可以裝其他標(biāo)簽，或者盒子里面也可以再裝盒子~

實戰(zhàn)案例

個人簡歷網(wǎng)頁展示

代碼如下

<!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開發(fā)工程師</p><p>聯(lián)系電話：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>小葵花小學(xué)</li><li>小葵花中學(xué)</li><li>小葵花高中</li><li>小葵花大學(xué)</li></ol><h3>專業(yè)技能</h3><ul><li>熟練掌握J(rèn)ava的基礎(chǔ)語法</li><li>熟練掌握常用的數(shù)據(jù)結(jié)構(gòu)，例如鏈表，二叉樹，哈希表等</li><li>熟練掌握操作系統(tǒng)原理，熟悉多線程編程，理解線程安全的相關(guān)問題</li><li>熟練掌握網(wǎng)絡(luò)原理，熟悉網(wǎng)絡(luò)編程，熟悉TCP/IP協(xié)議棧的基本原理</li><li>熟練掌握MySql數(shù)據(jù)庫，能夠進(jìn)行簡單的增刪改查操作，理解索引和事物的底層原理。</li></ul><h3>我的項目</h3><ol><li><h4>留言墻</h4><p>開發(fā)時間：2021年11月10號</p><p>功能介紹：<ul><li>支持留言發(fā)布</li><li>支持匿名留言</li></ul></p></li><li><h4>學(xué)習(xí)小助手</h4><p>開發(fā)時間：2021年11月10號</p><p>功能介紹：<ul><li>支持錯題檢索</li><li>支持復(fù)習(xí)預(yù)習(xí)</li></ul></p></li></ol><h3>個人評價</h3><p>在校期間，學(xué)習(xí)成績優(yōu)良，多次獲得獎學(xué)金</p></body> </html>

效果及鏈接如下:

鏈接:http://localhost:63342/TestDemo_20220302/DemoTest10.html?_ijt=5o4khccd1t4qv6osmu5odcfuc5

個人簡歷網(wǎng)頁填寫

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>填寫簡歷信息</title> </head> <body> <h3>請?zhí)顚懞啔v信息</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>就讀學(xué)校</td><td><input type="text"></td></tr><tr><td>應(yīng)聘崗位</td><td><input type="checkbox" id="frontend"> <label for="frontend">前端開發(fā)</label><input type="checkbox" id="backend"> <label for="backend">后端開發(fā)</label><input type="checkbox" id="qa"><label for="qa">測試開發(fā)</label><input type="checkbox" id="op"> <label for="op">運維開發(fā)</label></td></tr><tr><td>掌握的技能</td><td><textarea name="" id="" cols="30" rows="10"></textarea></td></tr><tr><td>項目經(jīng)歷</td><td><textarea name="" id="" cols="50" rows="10"></textarea></td></tr><tr><td></td><td><input type="checkbox" id="confirm"><label for="confirm">我已仔細(xì)閱讀過公司的招聘要求</label></td></tr><tr><td></td><td><a href="#">查看我的狀態(tài)</a></td></tr><tr><td></td><td><h4>應(yīng)聘者確認(rèn)：</h4><ul><li>以上信息真實有效</li><li>能夠盡早來公司實習(xí)</li><li>能夠接受公司的加班文化</li></ul></td></tr></table> </body> </html>

效果如下:

總結(jié)

以上是生活随笔為你收集整理的前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： CSDN 软件开发新手赛正式启动，召集热
下一篇：关于Chrome浏览器调用IE浏览器