HTML用法介紹

文章目錄

  • 一、HTML概念和模版
  • 二、常用標簽及用法
    • 1.p標簽
    • 2.span標簽
    • 3.h標簽
    • 4.hr標簽
    • 5.img標簽
    • 6.a標簽
    • 7.input標簽
    • 8.table標簽

一、HTML概念和模版

HTML的全稱為超文本標記語言，它包括一系列標簽組成，模版及各部分注釋如下：

<!--聲明文檔類型-->
<!DOCTYPE html><!--HTML頁面開始-->
<html lang="en">   <!--1、HTML頭部-->
<head><meta charset="UTF-8">  <!--A、文檔的編碼：UTF-8--><title>小十一</title>    <!--B、title：HTML標題-->
</head><!--2、HTML主體內容-->
<body></body></html>
<!--HTML頁面結束-->

故而對HTML的學習，其實是學習各種標簽的用法

二、常用標簽及用法

HTML標簽非常多，這里只介紹一些常用標簽

1.p標簽

p標簽是段落標簽，特點是獨占一行顯示，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>P標簽</title>
</head>
<body><!--p標簽: paragraph  是霸道, 獨占一行-->
<p>我是段落標簽 -- 1</p>
<p>我是段落標簽 -- 2</p>
<p>我是段落標簽 -- 3</p></body>
</html>

運行結果如下：
在這里插入圖片描述

2.span標簽

span標簽是文本標簽，特點是連續顯示在一行，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>span標簽</title>
</head>
<body><!--span: 文本標簽 -- 連續的--><span>我是文本標簽 -- 1</span>
<span>我是文本標簽 -- 2</span>
<span>我是文本標簽 -- 3</span>
<span>我是文本標簽 -- 4</span>
<span>我是文本標簽 -- 5</span>
<span>我是文本標簽 -- 6</span></body>
</html>

運行結果如下：
在這里插入圖片描述

3.h標簽

h標簽是標題標簽，共6級，從h1-h6，，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H標簽</title>
</head>
<body><!-- 標題標簽:  6級-->
<h1>我是1級標題</h1>
<h2>我是2級標題</h2>
<h3>我是3級標題</h3>
<h4>我是4級標題</h4>
<h5>我是5級標題</h5>
<h6>我是6級標題</h6></body>
</html>

運行結果如下：
在這里插入圖片描述

4.hr標簽

hr標簽是分隔線標簽，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>hr標簽</title>
</head>
<body><!-- 標題標簽:  6級-->
<h1>我是1級標題</h1>
<h2>我是2級標題</h2>
<h3>我是3級標題</h3><hr><p>我來比大小</p></body>
</html>

運行結果如下：
在這里插入圖片描述

5.img標簽

img標簽是圖片標簽，里面有兩個參數，src表示當前圖片來源，也就是圖片路徑，alt表示報錯提示，當圖片加載失敗的時候提示性話語，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>img標簽</title>
</head>
<body>
<!--img標簽  image：圖片標簽  src：圖片來源  alt：報錯提示-->
<img src="小姐姐.jpg" alt="圖片未加載">
</body>
</html>

運行結果如下：
在這里插入圖片描述

6.a標簽

a標簽是超鏈接標簽，里面有兩個參數，href參數表示超鏈接網址，target參數表示鏈接的目標網頁是否以當前窗口打開，target=“_blank"表示新開窗口打開，target=”_self"表示以當前窗口打開，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>a標簽</title>
</head>
<body>
<!--a標簽：超鏈接標簽   href：超鏈接網址-->
<a href="https://www.baidu.com" target="_blank">我是百度一下</a>
</body>
</html>

運行結果如下：
在這里插入圖片描述

7.input標簽

input標簽用來獲取用戶的輸入，代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text">
密碼: <input type="text">
</body>
</html>

運行結果如下：
在這里插入圖片描述

我們發現，兩個輸入框位于同一行，因為input標簽默認就是顯示在一行，如果要實現換行，用到br標簽，代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text"><br>
密碼: <input type="text">
</body>
</html>

運行結果如下：
在這里插入圖片描述
在里面輸入姓名和密碼：
在這里插入圖片描述

我們會發現這個很明顯不合適，因為密碼是明文顯示，所以這里要將密碼輸入的input標簽中，type參數值改為password，如下代碼所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text"><br>
密碼: <input type="password">
</body>
</html>

運行之后再輸入用戶名和密碼如下圖：
在這里插入圖片描述
我們可以打開豆瓣網站做個實驗，輸入用戶名和密碼，發現密碼也是隱藏不顯示，在源碼中可以看到input標簽的類型就是password
在這里插入圖片描述

這時候我們把類型改為text看看，可以看到改掉之后，密碼就是明文顯示
在這里插入圖片描述
綜上，我們就知道，input標簽中type類型值為text，代表當前輸入的是用戶名；type類型值為password，代表當前輸入的是密碼。

繼續對上面的代碼做升級，我們重新看下剛才的代碼運行結果，會發現當光標點進去輸入內容時候沒有任何提示，一般都會有提示用戶輸入類型的話語
在這里插入圖片描述

這里需要用到參數placeholder，參數值自己填入，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text" placeholder="請輸入姓名"><br>
密碼: <input type="password" placeholder="請輸入密碼">
</body>
</html>

運行結果如下：
在這里插入圖片描述
繼續升級代碼，給用戶添加性別，讓用戶可以選擇自己性別，這里用到單選框，需要將type類型值改為radio，示例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text" placeholder="請輸入姓名"><br>
密碼: <input type="password" placeholder="請輸入密碼"><br>
性別: <input type="radio">男 <input type="radio">女
</body>
</html>

代碼運行結果如下：
在這里插入圖片描述

這時候我們點擊性別會發現，兩個都能同時選中，如下圖：
在這里插入圖片描述
這就沒有實現我們想要的單選功能，怎么辦呢？將兩個性別輸入框設為同一類型，需要用到name參數，值自己隨便寫，但是要求兩個值要相同，代碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text" placeholder="請輸入姓名"><br>
密碼: <input type="password" placeholder="請輸入密碼"><br>
性別: <input type="radio" name="sex">男 <input type="radio" name="sex">女
</body>
</html>

運行之后結果如下圖，這下就可以了，只能選其一：
在這里插入圖片描述

繼續改進代碼，為用戶設置一些愛好，這里要用多選框，因為用戶愛好有多個，多選框的type類型值是checkbox，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text" placeholder="請輸入姓名"><br>
密碼: <input type="password" placeholder="請輸入密碼"><br>
性別: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
愛好: <input type="checkbox">籃球 <input type="checkbox">足球 <input type="checkbox">排球
</body>
</html>

運行之后結果如下：
在這里插入圖片描述

用戶所有信息填好之后需要進行提交，這里提交使用type類型值是submit，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
姓名: <input type="text" placeholder="請輸入姓名"><br>
密碼: <input type="password" placeholder="請輸入密碼"><br>
性別: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>
愛好: <input type="checkbox">籃球 <input type="checkbox">足球 <input type="checkbox">排球<br>
<input type="submit">
</body>
</html>

運行結果如下：
在這里插入圖片描述

這時候提交是整體作為一份表單提交到服務器的后臺，后臺數據庫再和表單里面的數據逐一匹配，所以剛才所有的信息必須是在一個大的框架里面，也就是一份表單中，就需要用到form標簽，具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
<form action="后臺網址">姓名: <input type="text" placeholder="請輸入姓名"><br>密碼: <input type="password" placeholder="請輸入密碼"><br>性別: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>愛好: <input type="checkbox">籃球 <input type="checkbox">足球 <input type="checkbox">排球<br><input type="submit">
</form></body>
</html>

還有一種情況，用戶填寫完信息之后，發現有的填錯了，想重新全部填寫，在提交之前是可以重置的，重置用到type類型值是reset，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>input標簽</title>
</head>
<body>
<form action="后臺網址">姓名: <input type="text" placeholder="請輸入姓名"><br>密碼: <input type="password" placeholder="請輸入密碼"><br>性別: <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>愛好: <input type="checkbox">籃球 <input type="checkbox">足球 <input type="checkbox">排球<br><input type="submit"><input type="reset">
</form></body>
</html>

運行后結果如下，填完所有信息后，可以點擊重置全部清空：
在這里插入圖片描述

8.table標簽

table標簽是表格標簽，用來在網頁上創建表格，表格有行有列，行用tr標簽，幾行就是幾個tr；列區分是否是表頭，如果是表頭則用th標簽，我們可以先寫代碼看看：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table標簽</title>
</head>
<body><table><tr><th>姓名</th><th>年齡</th><th>性別</th></tr>
</table></body>
</html>

代碼運行結果如下：
在這里插入圖片描述

可以看到表頭確實加粗顯示，很醒目，但是沒有邊框，這里要用到table標簽的border屬性，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table標簽</title>
</head>
<body><table border="1px"><tr><th>姓名</th><th>年齡</th><th>性別</th></tr>
</table></body>
</html>

運行結果如下：
在這里插入圖片描述

接下來再寫表格中的內容，也就是數據，數據不是表頭，沒必要特殊顯示加粗，所以在內容中的列用td標簽，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table標簽</title>
</head>
<body><table border="1px"><tr><th>姓名</th><th>年齡</th><th>性別</th></tr><tr><td>張三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>19</td><td>女</td></tr>
</table></body>
</html>

運行后結果如下：
在這里插入圖片描述

這時候我們發現還沒有表名，設置表名用caption標簽，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table標簽</title>
</head>
<body><table border="1px"><caption>學生信息表</caption><tr><th>姓名</th><th>年齡</th><th>性別</th></tr><tr><td>張三</td><td>18</td><td>男</td></tr><tr><td>李四</td><td>19</td><td>女</td></tr>
</table></body>
</html>

運行后結果如下：
在這里插入圖片描述

最后用table標簽完成一個案例：酒店菜譜，代碼如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><table border="1px"><caption>十一酒店菜譜</caption><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期天</th></tr><tr><td>辣椒炒肉</td><td>剁椒魚頭</td><td>麻辣雞絲</td><td>爆炒牛肚</td><td>紅燒魚塊</td><td>上海青</td><td>紅燒肥腸</td></tr><tr><td>海帶湯</td><td>球白菜</td><td>油豆腐炒肉</td><td>爆炒豬耳</td><td>清蒸魚</td><td>紅燒排骨</td><td>螞蟻上樹</td></tr>
</table></body>
</html>

運行后結果如下：
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/18246.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/18246.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/18246.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

ROS基礎學習-話題通信機制研究

ROS基礎學習-話題通信機制研究

研究ROS通信機制 研究ROS通信機制 0.前言1.話題通信1.1 理論模型1.2 話題通訊的基本操作1.2.1 C++1.2.2 Python中使用自己的虛擬環境包1.2.2.1 參考11.2.2.2 參考21.2.2.3 /usr/bin/env:“python”:沒有那個文件或目錄1.2.3 Python1.2.2.1 發布方1.2.2.2 訂閱方1.2.2.3 添加可執…
閱讀更多...
【八股系列】談談關于對webpack熱更新的原理？

【八股系列】談談關于對webpack熱更新的原理？

文章目錄 1. 熱更新原理2. 熱更新配置 1. 熱更新原理 Webpack 的熱模塊替換&#xff08;Hot Module Replacement&#xff0c;HMR&#xff09;是一種在不完全刷新頁面的情況下更新應用代碼的技術&#xff0c;從而提高了開發效率。以下是 HMR 的核心原理&#xff1a; 步驟描述1…
閱讀更多...
tcpdump抓包，抓包導出.pcap文件用wireshark看

tcpdump抓包，抓包導出.pcap文件用wireshark看

1、抓所有口的包 tcpdump -i any host 設備的ip2、抓特定口的包 tcpdump -i eth2 port 61182 -nne3、將抓到的包導出到pacb文件 tcpdump -i eth2 port 61182 -nne -s0 -w /tmp/61182.pcap -s0: Sets the snapshot length to capture the entire packet. The 0 means that tcpd…
閱讀更多...
《征服數據結構》目錄

《征服數據結構》目錄

我們知道要想學好算法&#xff0c;必須熟練掌握數據結構&#xff0c;數據結構常見的有 8 大類&#xff0c;分別是數組&#xff0c;鏈表&#xff0c;隊列&#xff0c;棧&#xff0c;散列表&#xff0c;樹&#xff0c;堆&#xff0c;圖。但如果細分的話就比較多了&#xff0c;比如…
閱讀更多...
go-zero 實戰（2）

go-zero 實戰（2）

go-zero 實戰&#xff08;1&#xff09; 中&#xff0c;使用了go-zero 創建了order 和 user 兩個微服務。而order作為grpc的客戶端&#xff0c;user 作為grpc的服務端&#xff0c;打通了 order 到 user的調用。接下來&#xff0c;我們在user中&#xff0c;加入mysql組件。確保數…
閱讀更多...
我說同事咋找工作命中率這么高，原來是學習了這些招式

我說同事咋找工作命中率這么高，原來是學習了這些招式

最近有兩個同事離職了&#xff0c;其中一個還是專科&#xff0c;他倆一個是前端開發&#xff0c;一個是python開發&#xff0c;兩個人都接近35歲了。我們還勸告他們&#xff0c;不要離職&#xff0c;要騎驢找馬。但了解后&#xff0c;他倆非常有信心的說&#xff1a;不怕&#…
閱讀更多...
富格林：遵守可信準則安全交易

富格林：遵守可信準則安全交易

富格林指出&#xff0c;當下的金融市場&#xff0c;投資者大多都會更傾向于盈利效率高的理財產品&#xff0c;而近年來興起的現貨黃金&#xff0c;正合投資者的心意。不過&#xff0c;投資現貨黃金若是不遵循其中的可信準則&#xff0c;是難以實現安全盈利的。那么有哪些可信準…
閱讀更多...
3D視覺技術|螺栓分揀測試

3D視覺技術|螺栓分揀測試

隨著制造業自動化程度的不斷提高&#xff0c;某大型汽配企業為提升生產效率、減少人力成本&#xff0c;提出了使用復合機器人完成螺栓分揀的需求。富唯智能通過采用復合機器人&#xff0c;結合3D工業相機和高性能控制器&#xff0c;實現螺栓的自動抓取&#xff0c;從而提升生產…
閱讀更多...
鴻蒙OS開發：【一次開發，多端部署】（一多天氣）項目

鴻蒙OS開發：【一次開發，多端部署】（一多天氣）項目

一多天氣 介紹 本示例展示一個天氣應用界面&#xff0c;包括首頁、城市管理、添加城市、更新時間彈窗&#xff0c;體現一次開發&#xff0c;多端部署的能力。 1.本示例參考一次開發&#xff0c;多端部署的指導&#xff0c;主要使用響應式布局的柵格斷點系統實現在不同尺寸窗…
閱讀更多...
【Qt 學習筆記】Qt窗口 | 工具欄 | QToolBar的使用及說明

【Qt 學習筆記】Qt窗口 | 工具欄 | QToolBar的使用及說明

博客主頁&#xff1a;Duck Bro 博客主頁系列專欄&#xff1a;Qt 專欄關注博主&#xff0c;后期持續更新系列文章如果有錯誤感謝請大家批評指出&#xff0c;及時修改感謝大家點贊&#x1f44d;收藏?評論? Qt窗口 | 工具欄 | QToolBar的使用及說明 文章編號&#xff1a;Qt 學習…
閱讀更多...
怎么看智慧城市的發展？

怎么看智慧城市的發展？

智慧城市&#xff0c;就像一個擁有高度智慧和感知能力的未來城市居民&#xff0c;正在不斷地學習、適應和進化。它通過無數的眼睛&#xff08;傳感器&#xff09;和耳朵&#xff08;數據收集設備&#xff09;來觀察和傾聽城市的脈動&#xff0c;通過強大的大腦&#xff08;數據…
閱讀更多...
opencv文檔py_contours示例整理

opencv文檔py_contours示例整理

文章目錄 目錄說明contours_begin目標什么是輪廓?如何畫等高線?輪廓逼近法contour_features目標1.Moments 時刻2. Contour Area 輪廓面積3. Contour Perimeter 輪廓周長4. Contour Approximation 輪廓近似5. Convex Hull 凸包6. Checking Convexity 檢查凸性7. Bounding Rect…
閱讀更多...
B2118 驗證子串

B2118 驗證子串

驗證子串 題目描述 輸入兩個字符串&#xff0c;驗證其中一個串是否為另一個串的子串。 輸入格式 兩行&#xff0c;每行一個字符串。 輸出格式 若第一個串 s 1 s_1 s1? 是第二個串 s 2 s_2 s2? 的子串&#xff0c;則輸出(s1) is substring of (s2)&#xff1b; 否則&…
閱讀更多...
Python并發與異步編程

Python并發與異步編程

Python的并發與異步編程是兩個不同的概念&#xff0c;但它們經常一起使用&#xff0c;以提高程序的性能和響應能力。以下是對這兩個概念的詳細講解&#xff1a; 并發編程 (Concurrency) 并發編程是指在程序中同時執行多個任務的能力。Python提供了幾種實現并發的機制&#xff…
閱讀更多...
嵌入式進階——RTC時鐘

嵌入式進階——RTC時鐘

&#x1f3ac; 秋野醬&#xff1a;《個人主頁》 &#x1f525; 個人專欄:《Java專欄》《Python專欄》 ??心若有所向往,何懼道阻且長 文章目錄 RTC時鐘原理圖PCF8563寄存器控制與狀態寄存器 設備地址I2C環境初始化RTC寄存器數據讀取RTC寄存器數據寫入RTC鬧鐘設置RTC定時器設置…
閱讀更多...
2024.5.28晚訓題解

2024.5.28晚訓題解

提前預告&#xff0c;市賽初中組會考算法題&#xff0c;應該會有兩道模板題 比如DFS BFS 二分 簡單動態規劃&#xff0c;雖然我們沒學多久&#xff0c;但是模板題你還是要會寫的 A題 編輯距離 動態規劃 注意多組輸入 #include<iostream> using namespace std; int dp[1…
閱讀更多...
9、C#【進階】特性

9、C#【進階】特性

特性 文章目錄 1、特性概念2、自定義特性 Attribute3、特性的使用4、限制自定義特性的使用范圍5、系統自帶特性1、過時特性2、調用者信息特性3、條件編譯特性4、外部dll包函數特性 1、特性概念 特性是一種允許我們向程序的程序集添加元數據的語言結構 它是用于保存程序機構信息…
閱讀更多...
【機器學習300問】103、簡單的經典卷積神經網絡結構設計成什么樣？以LeNet-5為例說明。

【機器學習300問】103、簡單的經典卷積神經網絡結構設計成什么樣？以LeNet-5為例說明。

一個簡單的經典CNN網絡結構由&#xff1a;輸入層、卷積層、池化層、全連接層和輸出層&#xff0c;這五種神經網絡層結構組成。它最最經典的實例是LeNet-5&#xff0c;它最早被設計用于手寫數字識別任務&#xff0c;包含兩個卷積層、兩個池化層、幾個全連接層&#xff0c;以及最…
閱讀更多...
ansible批量漏洞升級openssh版本

ansible批量漏洞升級openssh版本

1、ansible宿主機準備好環境&#xff0c;并寫好hosts文件 [rootoxidized ansible]# cat hosts [all] 10.10.200.33 10.10.200.34 10.10.200.35跑playbook之前記得提前發送秘鑰 ssh-copy-id 10.10.200.33/34/352、下載好安裝包&#xff0c;然后編寫yml [rootoxidized ansible]…
閱讀更多...
【實用的 IDEA 配置和操作技巧總結】

【實用的 IDEA 配置和操作技巧總結】

前置知識 IDEA的設置快捷鍵為ctrlalts鍵&#xff0c;后文介紹IDEA常見的配置就不再贅述這一點了。 基礎配置 取消默認打開上次項目 日常開發都會打開不同的項目&#xff0c;初次安裝IDEA之后&#xff0c;每次打開IDEA都會開啟上一次啟動的項目&#xff0c;所以我們需要進入設…
閱讀更多...
最新文章

Copyright @ 2022~2023