整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML常用字體標簽:揭秘HTML字體標簽,讓你的網頁“字”得其樂!

          這里是云端源想IT,幫你輕松學IT”

          嗨~ 今天的你過得還好嗎?

          天不言而四時行,

          地不語而百物生。

          - 2024.03.11 -

          在數字世界的構建中,字體不僅僅是文字的外衣,更是情感和風格的傳遞者。作為網頁設計師和前端開發者,掌握HTML中的字體標簽,能夠讓我們創造出更加豐富和吸引人的用戶體驗。

          今天,就讓我們一起走進HTML字體標簽的世界,探索它們如何讓網頁變得生動有趣。



          一、認識基本字體標簽

          語法結構:<標簽 屬性=“值”> 內容 </標簽>

          • 標簽通常是成對出現的,分為開始標簽(p)和結束標簽(/p),結束標簽只是在開始標簽前加一個斜杠“/”。
          • 標簽可以有屬性,屬性必須有值(align=“center” )。
          • 開始標簽與結束標簽中包含的內容稱之為區域。
          • 標簽不區分大小寫,p和P是相同的。


          1、標題標簽< h1> - < h6>

          標題標簽的默認樣式是自動加粗的,字體一級標題最大,六級標題最小,每個標題標簽獨占一行。

          • 標題標簽是塊元素

          示例:

          <h1>一級</h1>
          <h2>二級</h2>
          <h3>三級</h3>
          <h4>四級</h4>
          <h5>五級</h5>
          <h6>六級</h6>


          2、字體標簽<font>

          在HTML中,最常用的字體標簽非<font>莫屬,雖然現代開發中更推薦使用CSS來控制字體樣式,但了解它的歷史仍然有其必要性。<font>標簽允許我們通過color、size和face屬性來改變字體的顏色、大小和類型。


          例如,如果我們想要顯示紅色Arial字體的文字,我們可以這樣寫:

          <font color="red" size="5" face="Arial">這是紅色Arial字體的文字</font>


          這行代碼的意思是:

          • <font> 開始一個字體樣式的定義。
          • color="red" 設置字體顏色為紅色。
          • size="5" 設置字體大小為5。
          • face="Arial" 設置字體類型為Arial。
          • 這是紅色Arial字體的文字 是我們要顯示的文字。
          • </font> 結束字體樣式的定義。

          注意:雖然標簽在HTML4.01中是有效的,但在HTML5中已經被廢棄,建議使用CSS來進行樣式定義。



          3、字號大?。?lt;font size="n">

          字號大小在網頁設計中同樣重要,它直接影響著閱讀體驗。HTML允許我們通過<font size="n">來調整字體的大小,其中“n”可以是1到7的數字。

          例如:

          <!DOCTYPE html>
          <html>
          <head>
          <title>Font Size Example</title>
          </head>
          <body>
          <p><font size="5">This is a paragraph with font size 5.</font></p>
          <p><font size="10">This is a paragraph with font size 10.</font></p>
          <p><font size="15">This is a paragraph with font size 15.</font></p>
          </body>
          </html>


          運行結果:

          不過,現代網頁設計更傾向于使用CSS來控制字號,以便更精細地調整字體大小。


          4、粗體標簽

          <b>:這個標簽用于將文本加粗顯示,相當于英文中的bold。它不會改變字體,只是使文本看起來更粗體。

          <p><b>這是加粗的文本</b></p>

          <strong>:與<b>標簽類似,<strong>標簽也用于表示加粗的文本。

          <p><strong>這是重要的文本</strong></p>

          但在HTML5中,<strong>標簽被賦予了語義,用來表示重要的文本內容。


          5、斜體字標簽

          <i>:這個標簽用于將文本設置為斜體,相當于英文中的italic。

          <p><i>這是斜體的文本</i></p>

          <em>:與<i>標簽類似,<em>標簽也用于表示斜體文本。

          <p><em>這是強調的文本</em></p>

          但在HTML5中,<em>標簽被賦予了語義,用來表示強調的文本內容。


          6、刪除字標簽

          <del>:這個標簽用于表示刪除的文本,常用于表示不再準確或已過時的內容。比如原價與現價。

          <p>原價:<del>100元</del></p>
          <p>現價:80元</p>


          運行之后是這樣子的:

          在上述示例中,原價為100元,但已被刪除,因此使用標簽將其包圍起來。這樣,瀏覽器會顯示刪除線來表示該文本已被刪除。


          7、文本格式化標簽 < div> < span>

          < div> 標簽用來布局,但是一行只能放一個< div> //大盒子,塊元素。

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Document</title>
          </head>
          <body>
          <div>這是一個div</div>
          <div>這是一個div</div>
          <div>
          <p>這是一個div</p>
          </div>
          <p>
          <div>云端源想</div>
          </p>
          </body>
          </html>
          • <div>標簽可以看出是一個盒子容器,這里面可以放別的標簽。
          • <div>標簽是一個塊元素。

          如上圖控制臺所示(打開控制臺的方式:F12):<div>標簽里面可以包含<p>標簽,<p>標簽,里面不可以放<div>標簽。



          < span> 標簽用來布局,一行上可以多個 < span>//小盒子,行元素。

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title>Document</title>
          </head>
          <body>
          <span>1234</span>
          <span>5678</span>
          </body>
          </html>
          • <span> 用于對文檔中的行內元素進行組合。
          • <span> 標簽沒有固定的格式表現。當對它應用樣式時,它才會產生視覺上的變化。如果不對 <span> 應用樣式,那么 <span> 元素中的文本與其他文本不會任何視覺上的差異。
          • <span> 標簽提供了一種將文本的一部分或者文檔的一部分獨立出來的方式。
          • <span>標簽不同于<p>標簽是一個行內元素(不獨占一行)。


          8、其它字體標簽

          <mark>:這個標簽用于突出顯示文本,通常用于表示高亮的部分。

          <small>:這個標簽用于表示小號文本,通常用于表示版權聲明或法律條款等次要信息。

          <ins>:這個標簽用于表示插入的文本,常用于表示新增的內容。

          <sub> 和 <sup>:這兩個標簽分別用于表示下標和上標文本,常用于數學公式或化學方程式中。


          二、總結與建議

          盡管上述標簽可以直接在HTML中使用,但現代網頁設計越來越傾向于使用CSS來控制文本的樣式,因為CSS提供了更多靈活性和控制能力。

          使用CSS類和樣式規則可以更有效地管理網站的整體樣式,并且可以更容易地適應不同設備和屏幕尺寸。


          因此,如果您正在學習或更新您的網頁設計知識,建議學習和使用CSS來控制字體和其他文本樣式,關于HTML的這些標簽了解一下就可以了。


          總之,字體是網頁設計中不可或缺的元素,它們就像是網頁的語言,傳遞著信息和情感。通過HTML字體標簽的學習和應用,我們可以讓我們的網頁“字”得其樂,讓每一位訪問者都能享受到更加美妙的網絡體驗。不斷探索和實踐,讓我們的網頁在字體的世界里綻放光彩吧!


          今天就先講到這里了,

          更多前端開發基礎知識點擊文末閱讀原文查看哦!

          記得關注【云端源想IT】一起學編程!


          我們下期再見!


          END

          文案編輯|云端學長

          文案配圖|云端學長

          內容由:云端源想分享

          TML是一種用來描述網頁的標記性語言。學習HTML可能并不難,主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況,整理出平時常用的HTML標簽。

          HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客

          1、最基本的HTML結構

          <!--<!DOCTYPE> 是HTML5聲明,<!DOCTYPE> 必須是 HTML 文檔的第一行,位于 <html> 標簽之前。<!DOCTYPE>是指示 web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。-->

          <!DOCTYPE html>

          <html>

          <!-- head標簽是所有頭部元素的容器。head標簽內的元素可包含腳本、樣式表和提供頁面的元信息等等。以下標簽都可以添加到 head 部分:title、base、link、meta、script 以及style。頭部的內容不會顯示在瀏覽器的。 -->

          <head>

          <!-- 設置字符集,如果字符集不對,可能導致亂碼。一般建議utf-8國際編碼 -->

          <meta http-equiv="Content-Type" content="text/html; charset=gb2312或utf-8或gbk" />

          <!-- SEO相關標簽,title定義文檔的標題,百度建議一般不要超過32位,meta定義頁面關鍵詞和頁面的描述-->

          <title>網頁標題</title>

          <meta name="keywords" content="PHP程序員,技術博客,個人博客,雷雪松" />

          <meta name="description" content="PHP程序員,雷雪松(Raykaeso)的博客是一個優秀的個人技術博客。PHP程序員雷雪松的博客記錄了Linux學習,PHP開發與編程,Web前端開發,MySQL學習和教程,NoSQL數據庫教程以及個人的人生經歷和觀點。" />

          <link rel="stylesheet" type="text/css" href="main.css" />

          <script type="text/javascript" src="main.js"></script>

          </head>

          <!-- 正文部分,所有在瀏覽器上可見的內容必須寫在body標簽內部 -->

          <body>

          </body>

          </html>

          2、最常用的HTML標簽

          a、布局標簽

          div標簽定義文檔中的分區或節(division/section),可以把文檔分割為獨立的、不同的部分,主要用于布局。

          aside標簽的內容可用作文章的側欄,<span style="color: #ff0000;">html5新增標簽</span>。

          header標簽定義頁面的頭部(介紹信息),<span style="color: #ff0000;">html5新增標簽</span>。

          section標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分,<span style="color: #ff0000;">html5新增標簽</span>。

          footer 標簽定義文檔或節的頁腳,通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等等,<span style="color: #ff0000;">html5新增標簽</span>。

          article標簽規定文章獨立的其他內容,比如:標題、內容、評論,<span style="color: #ff0000;">html5新增標簽</span>。

          b、文本標簽

          h1-h6標簽可定義標題

          p標簽定義段落

          b/strong標簽加粗

          em標簽來表示強調的文本,斜體

          strong標簽表示重要文本

          u標簽下劃線

          s標簽刪除線

          br標簽表示回車換行

          hr標簽表示水平線

          span標簽被用來組合文檔中的行內元素。

          blockquote標簽表示塊引用

          pre標簽可定義預格式化的文本,保持原有格式的一種標簽。

          sub標簽下標,

          sup>標簽上標

          &nbsp;表示一個空格

          &copy;表示版權符

          &lt;表示<

          &gt;表示>

          c、a標簽定義超鏈接,指定頁面間的跳轉。鏈接可以指向外部鏈接或者頁面內部id錨點,可以在當前頁面打開,新開窗口。

          <a href="指向的鏈接地址或者網址#ID名" target="_blank|_self|_top|_parent">百度</a>

          d、多媒體標簽

          img標簽主要在網頁中插入圖像,可以定義圖片替換文本、顯示寬度和高度、是否帶邊框,建議等比例設置,否則圖像會變形。

          <img src="圖片地址" alt="替換文本,圖片打不開的時候顯示" width="圖片寬度" height="高度" border="0" />

          audio標簽定義聲音,比如音樂或其他音頻流。<span style="color: #ff0000;">html5新增標簽</span>。

          <audio src="someaudio.wav">您的瀏覽器不支持 audio 標簽。</audio>

          video標簽定義視頻,比如電影片段或其他視頻流。<span style="color: #ff0000;">html5新增標簽</span>。

          <video src="movie.ogg" controls="controls">您的瀏覽器不支持 video 標簽。</video>

          e、序列化標簽

          ul和li無序列表標簽

          <ul>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ul>

          ol和li有序列表標簽,可以使用type屬性規定有序列表符號的類型。1 按數字有序排列,為默認值,(1、2、3、4);a 按小寫字母有序排列,(a、b、c、d);A 按字母大寫有序排列,(A、B、C、D)。i 按小寫羅馬字母有序,(i, ii, iii, iv);I 按小寫羅馬字母有序,(I, II, III, IV)。

          <ol>

          <li>HTML</li>

          <li>JS</li>

          <li>PHP</li>

          </ol>

          dl標簽定義了定義列表(definition list),dl標簽用于結合 dt(定義列表中的項目)和 dd(描述列表中的項目)。

          <dl>

          <dt>計算機</dt>

          <dd>用來計算的儀器 ... ...</dd>

          </dl>

          f、表格標簽

          table標簽和tr標簽,th標簽和td標簽,合并單元格。

          <table width="100%" height="193" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" bgcolor="#000000" background="">

          <tr>

          <th>標題</th>

          <th>標題</th>

          </tr>

          <tr>

          <!-- 合并橫向單元格 -->

          <td colspan="2" nowrap="nowrap">&amp;nbsp;</td>

          </tr>

          <tr>

          <td></td>

          <!-- 合并縱向單元格 -->

          <td rowspan="2"> </td>

          </tr>

          <tr>

          <td height="16"> </td>

          </tr>

          </table>

          g、表單標簽

          form標簽定義提交方式、提交地址、表單字符集以及如何對其進行編碼,需要提交的表單一定要放在form標簽內。

          <form id="form1" name="form1" method="post|get" enctype="multipart/form-data" action="提交到的地址"></form>

          input標簽用于搜集用戶信息

          <input name="userName" type="text" maxlength="5" size="100" value="asdfasdfasfd" />

          密碼,輸入的字符會被掩碼(顯示為星號或原點)

          <input name="pwd" type="password" maxlength="5" size="100" value="" />

          文件類型的表單,上傳文件時,form表單一定要設置為enctype="multipart/form-data"

          <input type="file" name="file" />

          隱藏表單

          <input type="hidden" name="country" value="China" />

          提交

          <input type="submit" name="Submit" value="提交" disabled="disabled" />

          重置

          <input type="reset" name="Submit2" value="重置" />

          radio單選

          <input name="sex" type="radio" value="1" />男

          <input name="sex" type="radio" value="2" checked="checked" />女

          checkbox多選

          <input name="skill" type="checkbox" value="1" checked="checked" />PHP

          <input name="skill" type="checkbox" value="2" />前端

          <input name="skill" type="checkbox" value="2" />數據庫

          <span style="color: #ff0000;">注:checked="checked"可以簡寫成checked</span>

          label標簽為input元素定義標注,如果您點擊label元素文本,就會觸發此input控件。

          textarea標簽,設置文本區內的可見行數和寬度

          <textarea name="content" cols="30" rows="10">大段文本輸入框</textarea>

          button標簽定義一個按鈕

          提交按鈕

          <button type="submit" value="提交">提交</button>

          重置按鈕

          <button type="reset" value="重置">重置</button>

          select標簽和option標簽下拉列表

          單選菜單列表框

          <select name="user">

          <option value="1">ray</option>

          <option value="2" selected="selected">raykaeso</option>

          </select>

          多選列表下拉框,shift加鼠標單擊,可以連續選擇多個選擇,CTRL+鼠標點擊,可以點擊多個。

          <select name="user" size="10" multiple="multiple">

          <option value="1">雷雪松</option>

          <option value="2" selected="selected">ray</option>

          <option value="3">raykaeso</option>

          </select>

          注:selected="selected"可簡寫成selected,表示選中

          3、其他HTML事項

          a、HTML標簽和屬性是不區分大小寫的,建議HTML標簽和屬性都小寫,屬性值必須用雙引號包圍。

          b、HTML標簽都是以開始標簽起始,以結束標簽終止。大部分HTML標簽都是成對出現的,稱為雙標簽,比如:p標簽、div標簽,也有的HTML標簽在開始標簽中結束的標簽,稱為單標簽,比如:hr標簽、br標簽。大多數 HTML 元素可擁有屬性,文本內容都是寫在開始標簽與結束標簽之間。

          c、HTML標簽之間盡量縮進與換行,每行代碼不要過長,方便閱讀和維護。

          d、HTML標簽使用必須符合標簽嵌套規則。禁止a標簽嵌套a標簽,p標簽嵌套div標簽。

          e、建議不使用HTML已經廢棄的或者不贊成使用的標簽,少使用table布局、iframe框架嵌套以及flash播放器。

          來源:PHP程序員雷雪松的博客 -HTML基礎之HTML常用標簽(http://www.leixuesong.cn/2045)

          什么是HTML

          HTML 是用來描述網頁的一種語言。HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本,添加圖片,創建鏈接、輸入表單、框架和表格等等,并可將之存為文本文件,瀏覽器即可讀取和顯示。

          • HTML 指的是超文本標記語言: HyperText Markup Language
          • HTML 不是一種編程語言,而是一種標記語言
          • 標記語言是一套標記標簽 (markup tag)
          • HTML 使用標記標簽來描述網頁
          • HTML 文檔包含了HTML 標簽文本內容
          • HTML文檔也叫做 web 頁面

          2 入門實例

          新建一個test.html文件,內容如下

          <!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一個標題</h1><p>我的第一個段落。</p> </body></html>

          其中:

          • <!DOCTYPE html> 聲明為 HTML5 文檔
          • <html> 元素是 HTML 頁面的根元素
          • <head> 元素包含了文檔的元(meta)數據,如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8(由于在大部分瀏覽器中直接輸出中文會出現亂碼,所以要在頭部將字符聲明為UTF-8
          • <title> 元素描述了文檔的標題
          • <body> 元素包含了可見的頁面內容
          • <h1> 元素定義一個大標題
          • <p> 元素定義一個段落

          保存后運行,即可在瀏覽器中打開如下界面

          3 各部分詳解

          3.1 標題

          HTML 標題(Heading)是通過<h1> - <h6> 標簽來定義的.

          <!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>這是標題 1</h1><h2>這是標題 2</h2><h3>這是標題 3</h3><h4>這是標題 4</h4><h5>這是標題 5</h5><h6>這是標題 6</h6> </body></html>

          3.2 段落

          HTML 段落是通過標簽 <p> 來定義的

          <!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>這是一個段落。</p><p>這是一個段落。</p><p>這是一個段落。</p> </body></html>

          3.3 鏈接

          HTML 鏈接是通過標簽 <a> 來定義的

          <!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.csdn.net/zong596568821xp">這是一個鏈接使用了 href 屬性</a> </body></html>

          3.4 圖像

          HTML 圖像是通過標簽 <img> 來定義的。注意: 圖像的名稱和尺寸是以屬性的形式提供的。

          <!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>

          3.5 表格

          表格由 <table> 標簽來定義。每個表格均有若干行(由 <tr> 標簽定義),每行被分割為若干單元格(由 <td> 標簽定義)。字母 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。如果不定義邊框屬性,表格將不顯示邊框。有時這很有用,但是大多數時候,我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格:

          <table border="1">    <tr>        <th>Header 1</th>        <th>Header 2</th>    </tr>    <tr>        <td>row 1, cell 1</td>        <td>row 1, cell 2</td>    </tr>    <tr>        <td>row 2, cell 1</td>        <td>row 2, cell 2</td>    </tr></table>

          4 速查列表

          4.1 基本文檔

          <!DOCTYPE html><html><head><title>文檔標題</title></head><body>可見文本...</body></html>

          4.2 基本標簽

          <h1>最大的標題</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的標題</h6> <p>這是一個段落。</p><br> (換行)<hr> (水平線)<!-- 這是注釋 -->

          4.3 文本格式化

          <b>粗體文本</b><code>計算機代碼</code><em>強調文本</em><i>斜體文本</i><kbd>鍵盤輸入</kbd> <pre>預格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong> <abbr> (縮寫)<address> (聯系信息)<bdo> (文字方向)<blockquote> (從另一個源引用的部分)<cite> (工作的名稱)<del> (刪除的文本)<ins> (插入的文本)<sub> (下標文本)<sup> (上標文本)

          4.4 鏈接

          普通的鏈接:<a href="http://www.example.com/">鏈接文本</a>圖像鏈接: <a href="http://www.example.com/"><img src="URL" alt="替換文本"></a>郵件鏈接: <a href="mailto:webmaster@example.com">發送e-mail</a>書簽:<a id="tips">提示部分</a><a href="#tips">跳到提示部分</a>

          4.5 圖片

          <img src="URL" alt="替換文本" height="42" width="42">

          4.6 樣式/區塊

          <style type="text/css">h1 {color:red;}p {color:blue;}</style><div>文檔中的塊級元素</div><span>文檔中的內聯元素</span>

          4.7 無序列表

          <ul>    <li>項目</li>    <li>項目</li></ul>

          4.8 有序列表


          主站蜘蛛池模板: 99偷拍视频精品一区二区| 亚洲av无码不卡一区二区三区| 真实国产乱子伦精品一区二区三区 | 国产在线精品一区二区三区直播 | 亚洲精品精华液一区二区| 国产一区麻豆剧传媒果冻精品| 国产精品久久久久久一区二区三区| 亚洲毛片αv无线播放一区| 国产一国产一区秋霞在线观看| 色一情一乱一区二区三区啪啪高| 国产午夜精品一区二区三区小说| 老湿机一区午夜精品免费福利| 亚洲国产AV一区二区三区四区 | 亚洲美女高清一区二区三区| 日韩精品一区二区三区中文版| 亚洲AV成人一区二区三区在线看| 国产成人精品一区二区秒拍| 国精产品一区二区三区糖心| 熟女少妇丰满一区二区| 波多野结衣高清一区二区三区 | 免费无码一区二区三区蜜桃大| 51视频国产精品一区二区| 中文字幕视频一区| 99无码人妻一区二区三区免费| 人妻无码一区二区三区AV| 日韩AV无码久久一区二区| 无码精品一区二区三区在线| 亚洲一区二区影院| 波多野结衣一区视频在线| 亚洲日韩AV一区二区三区四区| 亚洲AV日韩综合一区| 怡红院AV一区二区三区| 国产主播一区二区三区| 国产精品视频一区二区三区不卡 | 中文字幕精品一区二区| 成人精品视频一区二区| 无码人妻一区二区三区免费视频 | 一区二区视频免费观看| 亚洲福利视频一区二区| 国产精品成人国产乱一区| 精品国产免费一区二区三区香蕉|