溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享一下HTML常用的標簽有哪些及如何使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。
瀏覽器也是一個客戶端
#這是一個服務器，我們通過瀏覽器就可以訪問的到服務器發送的"hello" import socket sk = socket.socket() sk.bind(('127.0.0.1',8080)) sk.listen(5) while True: conn,addr = sk.accept() data = conn.recv(1024) conn.send(b"HTTP/1.1 200 ok\r\n\r\n") #必須要加上這一句，不然瀏覽器不認識 conn.send(b"hello") conn.close()
瀏覽器不通過服務端也可以渲染文本
HTML全稱HyperText Markup Language，超文本標記語言，是一種描述性的標記語言。
超文本：音頻、視頻、圖片
標記：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。
負責描述文檔語義的語言
1）所有標記元素都要正確的嵌套，不能交叉嵌套。eg：
<h2><a></a></h2>
2）所有標記都必須小寫
3）所有標記都必須關閉
雙標簽：<h></h2>
單標簽：<img src=“URL” />
4）所有屬性值必須加引號。eg：<h2 id="head"></h2>
5）所有屬性必須有值：<a href="02.html" target="_blank">首頁</a>
用pycharm新建一個HTML文件，文件會自動生成如下代碼的一個HTML模板
<!DOCTYPE html> <!--文檔聲明頭，告訴瀏覽器它應該用什么版本的html去解析以下代碼--> <html lang="en"> <!--文檔的開始標記和結束標記，lang="en"表示用英語或者其他國家的語言，在它們之間是文檔的頭部（head）和主體（body）--> <head> <!--定義了HTML文檔的開頭部分，不會再瀏覽器的文檔窗口顯示--> <meta charset="UTF-8"> <!--HTML的編碼格式--> <title>Title</title> <!--網頁標題，在瀏覽器標題欄顯示--> </head> <body> <!--文本主體，他們之間的文本是可見的網頁主題內容--> </body> </html>
| 標簽 | 意義 |
|---|---|
| <title></title> | 定義網頁標題 |
| <style></style> | 定義內部樣式表 |
| <script></script> | 定義JS代碼或引入外部JS文件 |
| <link/> | 引入外部樣式表文件 |
| <meta/> | 定義網頁原信息 |
<meta http-equiv="refresh" content="2;URL = https://www.cnblogs.com/yanjiayi098-001/"> <!--2秒過后跳到 https://www.cnblogs.com/yanjiayi098-001 網頁--> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <!--對網頁并沒有什么影響，就是給網頁關鍵字,便于搜索引擎機器人查找信息和分類信息用的--> <meta name="description" content="老男孩教育Python學院"> <!--這個也沒有什么影響，就是給網頁一個描述,便于搜索引擎機器人查找信息和分類信息用的--> <meta http-equiv="content-Type" charset=UTF8"> <!--指定文檔的編碼類型--> <meta http-equiv="x-ua-compatible" content="IE = edge"> <!--告訴IE以最高級模式渲染文檔-->
<b>加粗</b> <i>斜體</i> <u>下劃線</u> <s>刪除</s> <p>段落標簽，寫在這個標簽內的東西就是一個段落</p> <h2>1號標題</h2> <h3>2號標題</h3> <h4>3號標題</h4> <h5>4號標題</h5> <h6>5號標題</h6> <h7>6號標題</h7> <br> <!--這是一個換行標簽--> <hr> <!--這是一個水平線標簽-->
<!--空格--> > <!--大于號(>)--> < <!--小于號(<)--> & <!--&符號--> ¥ <!--人民幣(￥)符號--> © <!--版權符號--> ® <!--注冊符號-->
div標簽: <div> <!--塊級標簽，無意義，通過CSS樣式為其賦予不同的表現--> </div> span標簽: <span> <!--內聯標簽，無意義，通過CSS樣式為其賦予不同的表現--> </span> **塊級標簽與內聯標簽的區別** 塊級標簽：另起一行開始渲染元素 內聯標簽：不需要另起一行 如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響，他們是專門為定義CSS樣式而生的
注意：
? 塊級標簽可以嵌套內聯標簽或者某些塊級標簽
? 內聯標簽不能嵌套塊級標簽
? ==p標簽不能嵌套塊級標簽，也不能嵌套p標簽==
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息"> <img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宮" title="美麗的故宮" >
a標簽又叫做超鏈接標簽
所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序
我們就先拿另一個網頁舉例
href屬性指定目標網頁地址。該地址可以有幾種類型： 絕對URL - 指向另一個站點（比如 href="http://www.jd.com） 相對URL - 指當前站點中確切的路徑（href="index.htm"） 錨URL - 指向頁面中的錨（href="#top"）
<a href="https://www.cnblogs.com/yanjiayi098-001/" target="_blank">點我會跳轉哦！</a> <!--target="_blank"表示重新打開一個網頁進行跳轉--> <a href="https://www.cnblogs.com/yanjiayi098-001/" target="_self">點我會跳轉哦！</a> <!--target="_self"表示就在當前網頁進行跳轉--> <a href="https://www.cnblogs.com/yanjiayi098-001/">點我會跳轉哦！</a> <!--默認target="_self"--> <a href="#b1">點我回到加粗</a> <!--b1是id屬性，#b1表示回到id屬性為b1的這個位置，這個位置就是<b id = "b1">加粗</b> --> <a href="body內常用標簽.html">點我轉到這個網頁哦！</a> <!--他會跳到 body內常用標簽.html 網頁-->
<ul type="disc"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ul>
type屬性：
type="disc"(實心圓點，默認值)
type="circle"(空心圓圈)
type="square"(實心方塊)
type="none"(無樣式)
<ol type="1" start="3"> <li>第一項</li> <li>第二項</li> <li>第三項</li> </ol>
type屬性：
1 數字列表，默認值
A 大寫字母
a 小寫字母
Ⅰ大寫羅馬
ⅰ小寫羅馬
start屬性：
start="3"只能寫數字，表示從第3個開始
<dl> <dt>標題1</dt> <dd>內容</dd> <dt>標題2</dt> <dd>內容1</dd> <dd>內容2</dd> </dl>
<table> <thead> <tr> <th>序號</th> <th>姓名</th> <th>愛好</th> </tr> </thead> <tr> <td>1</td> <td>yjy</td> <td>跳舞</td> </tr> <tr> <td>2</td> <td>wwb</td> <td>唱歌</td> </tr> </table> <!-- 看到 <table> 就說明接下來是一個表格 <thead>是表格的表頭 <tr>表示一行，而在這一行中又有<th> <th>表示表頭的內容，表示整個一列的屬性，eg：姓名 同理<tr>中的<td>就表示表格內容，按照<th>的要求寫就行了，eg：姓名就寫人名 -->
屬性：
border: 表格邊框 eg：border="6"
cellpadding: 內邊距 eg：cellpadding="8"
cellspacing: 外邊距 eg：cellspacing="2"
width: 像素 百分比 eg：width="100%"
以上這些屬性要在<table>中設置
rowspan: 單元格豎跨多少行（上下合并單元格） eg：rowspan="3"
colspan: 單元格橫跨多少列（左右合并單元格） eg：colspan="2"
以上這些屬性要在<td>中設置
| 標題 | h2 | h3 | h4 | h5 | h6 | h7 |
|---|---|---|---|---|---|---|
| 列表 | ul | ol | li | dl | dt | dd |
| 排版標簽 | p | div | hr | center | pre | |
| 表格 | table | |||||
| 表單 | form |
| 字體 | b | i | sup | sub | u |
|---|---|---|---|---|---|
| 排版 | span | br | |||
| 超鏈接 | a | ||||
| 圖片 | img |
補充
文本級標簽：p、span、a、b、i、u、em。
容器級標簽：div、h系列、li、dt、dd
以上就是“HTML常用的標簽有哪些及如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
