溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML常用的標簽有哪些及如何使用

發(fā)布時間：2022-03-05 15:58:10 來源：億速云 閱讀：179 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下HTML常用的標簽有哪些及如何使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

瀏覽器

  • 瀏覽器也是一個客戶端

#這是一個服務器，我們通過瀏覽器就可以訪問的到服務器發(fā)送的"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

什么是HTML

HTML全稱HyperText Markup Language，超文本標記語言，是一種描述性的標記語言。

  • 超文本：音頻、視頻、圖片

  • 標記：<英文單詞或者字母>稱為標記，一個HTML頁面都是由各種標記組成。

HTML的作用

負責描述文檔語義的語言

編寫HTML的規(guī)范

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>

HTML結構

用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>

HTML常用標簽

head內常用標簽
基本標簽
標簽 意義
<title></title> 定義網頁標題
<style></style> 定義內部樣式表
<script></script> 定義JS代碼或引入外部JS文件
<link/> 引入外部樣式表文件
<meta/> 定義網頁原信息
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以最高級模式渲染文檔-->
body內常用標簽
基本標簽
<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>
<!--這是一個水平線標簽-->
特殊字符
&nbsp;
<!--空格-->

&gt;
<!--大于號(>)-->

&lt;
<!--小于號(<)-->

&amp;
<!--&符號-->

&yen;
<!--人民幣(￥)符號-->

&copy;
<!--版權符號-->

&reg;
<!--注冊符號-->
div標簽和span標簽
div標簽:
<div>
    <!--塊級標簽，無意義，通過CSS樣式為其賦予不同的表現-->
</div>


span標簽:
<span>
    <!--內聯標簽，無意義，通過CSS樣式為其賦予不同的表現-->
</span>

**塊級標簽與內聯標簽的區(qū)別**
塊級標簽：另起一行開始渲染元素
內聯標簽：不需要另起一行
如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響，他們是專門為定義CSS樣式而生的

注意：

? 塊級標簽可以嵌套內聯標簽或者某些塊級標簽

? 內聯標簽不能嵌套塊級標簽

? ==p標簽不能嵌套塊級標簽，也不能嵌套p標簽==

img標簽
<img src="圖片的路徑" alt="圖片未加載成功時的提示" title="鼠標懸浮時提示信息">
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-132444248.jpg" alt="故宮" title="美麗的故宮" >
a標簽

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></ul>
<ul type="disc">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ul>

type屬性：

  • type="disc"(實心圓點，默認值)

  • type="circle"(空心圓圈)

  • type="square"(實心方塊)

  • type="none"(無樣式)

有序列表<ol></ol>
<ol type="1" start="3">
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

type屬性：

  • 1 數字列表，默認值

  • A 大寫字母

  • a 小寫字母

  • Ⅰ大寫羅馬

  • ⅰ小寫羅馬

start屬性：

start="3"只能寫數字，表示從第3個開始

標題列表<dl></dl>
<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>中設置

HTML標簽速記

塊級標簽
標題 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常用的標簽有哪些及如何使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手