国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > html最常用的標(biāo)簽是哪些？

html最常用的標(biāo)簽是哪些？

時間：2024-02-08 04:30:02 | 來源：網(wǎng)站運(yùn)營

時間：2024-02-08 04:30:02 來源：網(wǎng)站運(yùn)營

html最常用的標(biāo)簽是哪些？：

本篇目標(biāo)

  1. 掌握html標(biāo)簽的概念。
  2. 掌握html標(biāo)簽的兩種語法結(jié)構(gòu)。
  3. 掌握html常用的文本相關(guān)標(biāo)簽。
    1. 標(biāo)題：h1~h6
    2. 段落：p
    3. 換行：br
    4. 加粗：strong、b
    5. 斜體：em、i
    6. 下劃線：ins
    7. 刪除線：del
    8. 上下標(biāo)：sup、sub
  4. 掌握html語言中的注釋編寫。

內(nèi)容摘要

本篇先介紹了html標(biāo)簽的語法，后面重點(diǎn)介紹了html中文本相關(guān)的標(biāo)簽：標(biāo)題、段落、換行、加粗、斜體、下劃線、刪除線、上下標(biāo)。

閱讀時間預(yù)計30~40分鐘。

html標(biāo)簽（tag）

前面我們編寫了第一個網(wǎng)頁，并了解了網(wǎng)頁的文檔結(jié)構(gòu)，現(xiàn)在來插入鏈接、圖片、視頻、段落、標(biāo)題等等這些內(nèi)容。

插入這些內(nèi)容需要用到一個叫做標(biāo)簽的東西，標(biāo)簽是html中最基本的單位，在html中標(biāo)簽有兩種語法結(jié)構(gòu)：

語法一：

<標(biāo)簽名>標(biāo)簽體</標(biāo)簽名>其中：

1. 標(biāo)簽名 表示插入的是什么內(nèi)容，比如：h1表示標(biāo)題、p表示段落等，標(biāo)簽名大小寫無關(guān)。2. 標(biāo)簽體 表示標(biāo)簽里面的內(nèi)容，可以是文字，也可以是其他標(biāo)簽，即標(biāo)簽嵌套。3. </標(biāo)簽名> 表示標(biāo)簽的結(jié)束，這邊標(biāo)簽名要和開始的標(biāo)簽名一致。簡單示例：

<h1>標(biāo)題一</h1><p>我的一個段落</p>語法二：

<標(biāo)簽名>這邊標(biāo)簽稱為空元素（empty element），只需要一個標(biāo)簽名即可。例如:

<br> 表示換行。<hr> 表示水平線。等等。下面我們實(shí)際學(xué)習(xí)一些標(biāo)簽，加深對語法結(jié)構(gòu)的理解。

標(biāo)題標(biāo)簽

在網(wǎng)頁中表示標(biāo)題，有如下6個標(biāo)簽：

<h1>標(biāo)題</h1><h2>標(biāo)題</h2><h3>標(biāo)題</h3><h4>標(biāo)題</h4><h5>標(biāo)題</h5><h6>標(biāo)題</h6>其中：

h1到h6 就是一級標(biāo)題、二級標(biāo)題到六級標(biāo)題，顯示的字體從大到小，類似word里的一級、二級標(biāo)題。示例1，在網(wǎng)頁輸出h1到h6標(biāo)題，標(biāo)題內(nèi)容為 "前端零基礎(chǔ)入門" ：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>標(biāo)題標(biāo)簽演示</title> </head> <body> <h1>前端零基礎(chǔ)入門</h1> <h2>前端零基礎(chǔ)入門</h2> <h3>前端零基礎(chǔ)入門</h3> <h4>前端零基礎(chǔ)入門</h4> <h5>前端零基礎(chǔ)入門</h5> <h6>前端零基礎(chǔ)入門</h6> </body></html>運(yùn)行效果：







在實(shí)務(wù)中標(biāo)題標(biāo)簽經(jīng)常用在新聞、視頻、商品等內(nèi)容頁上，用來重點(diǎn)突出新聞標(biāo)題、視頻標(biāo)題、商品名稱等。

段落標(biāo)簽

在網(wǎng)頁中表示段落使用p標(biāo)簽，p就是英文單詞Paragraph的意思，語法格式如下：

<p>段落內(nèi)容</p>示例1，在網(wǎng)頁上顯示如下詩歌：

夏天的飛鳥，來的我的窗前，歌唱，又分走了。秋天的黃葉，它們沒有什么曲子可唱，一聲嘆息，飄落在地上。世界上一隊(duì)小小的流浪者啊，在我的字里行間留下你們的足跡吧！世界對著它的愛人，扯下它那龐大的面具。它變小了，小得宛如一首歌，小得宛如一個永恒的吻。大地的淚珠，使她的微笑如鮮花般盛開。如果說我們直接把上面到內(nèi)容復(fù)制到網(wǎng)頁里，那么在瀏覽器上看到都排版在一行里了，這個時候我們就可以用p標(biāo)簽了。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>段落標(biāo)簽演示</title> </head> <body> <p>夏天的飛鳥，來的我的窗前，歌唱，又分走了。</p> <p>秋天的黃葉，</p> <p>它們沒有什么曲子可唱，一聲嘆息，飄落在地上。</p> <p>世界上一隊(duì)小小的流浪者啊，在我的字里行間留下你們的足跡吧！</p> <p>世界對著它的愛人，扯下它那龐大的面具。</p> <p>它變小了，小得宛如一首歌，小得宛如一個永恒的吻。</p> <p>大地的淚珠，使她的微笑如鮮花般盛開。</p> </body></html>運(yùn)行效果：







換行標(biāo)簽

上面用了段落標(biāo)簽對文本進(jìn)行處理，如果不用段落標(biāo)簽，也可以用 br 標(biāo)簽實(shí)現(xiàn)換行排版。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>換行標(biāo)簽演示</title> </head> <body> 夏天的飛鳥，來的我的窗前，歌唱，又分走了。<br/> 秋天的黃葉，<br/> 它們沒有什么曲子可唱，一聲嘆息，飄落在地上。<br/> 世界上一隊(duì)小小的流浪者啊，在我的字里行間留下你們的足跡吧！<br/> 世界對著它的愛人，扯下它那龐大的面具。<br/> 它變小了，小得宛如一首歌，小得宛如一個永恒的吻。<br/> 大地的淚珠，使她的微笑如鮮花般盛開。<br/> </body></html>運(yùn)行效果：







從顯示效果上來看和上面使用段落標(biāo)簽p類似，但是還有有一點(diǎn)不一樣一樣的，讀者能找到嗎？

仔細(xì)觀察可以發(fā)現(xiàn)使用段落標(biāo)簽 p 的行間距比使用換行標(biāo)簽 br 的更大一些。

另外在標(biāo)簽結(jié)構(gòu)上，br 標(biāo)簽就是沒有標(biāo)簽體的標(biāo)簽形式，它的作用就是告訴網(wǎng)頁顯示到這里的時候，換行一下。

加粗標(biāo)簽

word文檔中有加粗、斜體、下劃線的效果，網(wǎng)頁中也有這些效果，我們先看下加粗的實(shí)現(xiàn)。

網(wǎng)頁中加粗使用標(biāo)簽 strong 或者 b，語法格式如下：

<strong>加粗的文本</strong><b>加粗的文本</b>其中：

b 就是 bold 第一個字母。示例1，將下列文本顯示在網(wǎng)頁上，并對 只爭朝夕 進(jìn)行加粗顯示。

多少事，從來急；天地轉(zhuǎn)，光陰迫。一萬年太久，只爭朝夕！用一個段落標(biāo)簽 p 包裹這句話，然后用 strong 標(biāo)簽包裹 只爭朝夕。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加粗標(biāo)簽演示</title> </head> <body> <p>多少事，從來急；天地轉(zhuǎn)，光陰迫。一萬年太久，<strong>只爭朝夕</strong>！</p> </body></html>其中：

p標(biāo)簽嵌套了strong標(biāo)簽，在html中標(biāo)簽嵌套是很常見的情況。運(yùn)行效果：







很明顯 只爭朝夕 字樣進(jìn)行了加粗顯示。

了解：

本例用 b 標(biāo)簽也可以實(shí)現(xiàn)加粗的效果，但是我更傾向是用 strong 標(biāo)簽，為什么呢？

strong 是邏輯狀態(tài)，b 是物理狀態(tài)。b 只是單純的加粗，strong 除了加粗，也起到了強(qiáng)調(diào)作用。下面例子看起來會更加清晰些：

<strong>強(qiáng)調(diào)文本</strong><b>加粗文本</b>其實(shí)從 strong 和 bold 單詞字面意思也能大概看的出來區(qū)別。本例這邊 只爭朝夕 文字有強(qiáng)調(diào)的作用，所以用 strong 更加符合一些。

那么什么時候用 b 標(biāo)簽?zāi)兀?br>
本書中很多了地方進(jìn)行了加粗顯示，比如：示例、實(shí)例、思考、解答、注意等文字，這邊更多的意義是對文檔進(jìn)行一個分層，閱讀起來更加舒服，這個場景下用 b 標(biāo)簽就更加合適。

給初學(xué)者的建議：

除了標(biāo)簽可以加粗外，后續(xù)學(xué)習(xí)的css也可以對文本進(jìn)行加粗，這么多花樣對于初學(xué)者來講容易眼花繚亂。

我的建議是如果實(shí)在弄不清兩個的區(qū)別，先用strong就好，畢竟這個基本沒有影響，后續(xù)熟悉了再細(xì)究。

斜體標(biāo)簽

網(wǎng)頁中斜體使用標(biāo)簽 em 或者 i，語法格式如下：

<em>強(qiáng)調(diào)的斜體文字</em><i>斜體文字</i>em、i的區(qū)別和strong、b的區(qū)別類似，em全稱為emphasize，起到強(qiáng)調(diào)作用，i全稱為italic，只是表示顯示為斜體而已。

中文用斜體表示的很少，斜體本身是為西方文字設(shè)計的，下面看一些些簡單的例子。

示例1，使用em和i的例子：

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>斜體標(biāo)簽演示</title> </head> <body> <p>使用em的例子：</p> <p>Just <em>do</em> it already!</p> <p>We <em>had</em> to do something about it</p> <p>使用i的例子：</p> <p>The <i>Queen Mary</i> sailed last night</p> </body></html>運(yùn)行效果：







下劃線標(biāo)簽

網(wǎng)頁中下劃線使用標(biāo)簽 ins，語法格式如下：

<ins>文本</ins>示例1，語句 "今天的天氣是晴天" 中的晴天用下劃線表示。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>下劃線標(biāo)簽演示</title> </head> <body> <p>今天的天氣是<ins>晴天</ins></p> </body></html>運(yùn)行效果：







刪除線標(biāo)簽

網(wǎng)頁中下劃線使用標(biāo)簽 del，語法格式如下：

<del>文本</del>其中：

del就是delete單詞的縮寫。實(shí)務(wù)中刪除線經(jīng)常用于對價格的標(biāo)記上，請看下面例子。

實(shí)例1，對語句 "原價4999，現(xiàn)在只要999。" 中4999用刪除線顯示。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>刪除線標(biāo)簽演示</title> </head> <body> <p>原價<del>4999</del>，現(xiàn)在只要<ins>499</ins>。</p> </body></html>運(yùn)行效果：







上下標(biāo)標(biāo)簽

網(wǎng)頁中上標(biāo)使用標(biāo)簽 sup，下標(biāo)使用標(biāo)簽 sub，語法格式如下：

<sup>上標(biāo)</sup><sub>下標(biāo)</sub>實(shí)務(wù)中上下標(biāo)經(jīng)常用于數(shù)學(xué)公式，請看下面例子。

實(shí)例1，在網(wǎng)頁中顯示：X1 + X2^2 。

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>上下標(biāo)標(biāo)簽演示</title> </head> <body> <p>X<sub>1</sub> + X<sub>2</sub><sup>2</sup> </p> </body></html>運(yùn)行效果：







代碼注釋

最后我們介紹下代碼注釋，實(shí)務(wù)中項(xiàng)目的代碼往往很多，時間久了即便是看自己寫的代碼也經(jīng)常容易忘記其中邏輯，所以經(jīng)常需要對代碼進(jìn)行描述和說明。

要對代碼進(jìn)行描述和說明，需要用到注釋符號，注釋符號內(nèi)的內(nèi)容不會參與實(shí)際的代碼運(yùn)行。

各編程語言都有自己的注釋符號，html中的注釋符號語法為：

<!-- 注釋內(nèi)容 -->簡單示例：

<!-- 毛澤東寫的詩詞：《滿江紅·和郭沫若同志》 --><p>多少事，從來急；天地轉(zhuǎn)，光陰迫。一萬年太久，<strong>只爭朝夕</strong>！</p>上面的內(nèi)容不會顯示在網(wǎng)頁上，但是通過注釋我們就知道下面語句的出處和作者，這個就是注釋的含義了。

后面的代碼示例我們也會適當(dāng)?shù)脑黾幼⑨?，方便大家更容易直觀的理解代碼。

小貼士：

實(shí)際工作中良好的注釋不光可以方便自己，也可以方便其他同事，特別容易受到大家的點(diǎn)贊。

本篇總結(jié)

  1. 標(biāo)簽是html語言中的基本單位，不同的標(biāo)簽表示不同的意思。
  2. html常用的文本相關(guān)標(biāo)簽。
    1. 標(biāo)題：h1~h6
    2. 段落：p
    3. 換行：br
    4. 加粗：strong、b
    5. 斜體：em、i
    6. 下劃線：ins
    7. 刪除線：del
    8. 上下標(biāo)：sup、sub
  3. html標(biāo)簽可以互相嵌套，實(shí)現(xiàn)更多樣的效果。


關(guān)鍵詞：標(biāo)簽

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉