整合營銷服務商

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

          免費咨詢熱線:

          HTML常用標簽概述(可用于網店裝修)

          HTML常用標簽概述(可用于網店裝修)

          • TML標簽:

          1. 所有內容都在<html></html>標簽之內;

          2. <head></head>內放的是頭部信息,是對頁面的描述,不會直接顯示在頁面中。

          3. <head></head>內的<title></title>中設置的是頁面的標題,<title></title>只能放在<head></head>中;

          4. <body></body>是頁面的主體,大部分顯示內容都定義在這里。

        1. HTML注釋:<!-- -->:

          1. 注釋不允許嵌套

        2. html常用標簽:

          1. h標簽(標題),HTML定義了<h1></h1>到<h6></h6>六個h標簽,分別表示不同大小的字體。h1最大,h6最小。

          2. <br/>只是回車,<p>是段落。<p>前后會有比較大的空白,而<br/>則沒有。

          3. <center>居中顯示.

          4. <b>、<strong>粗體,<i>、<em>斜體。<u>下劃線。

          5. <sub>2</sub>下標,如:H<sub>2</sub>O

          6. <sup>2</sup>上標,如:10<sup>2</sup>

          7. <font></font>字體標簽,<font color=“red“ size=“7” face=“隸書”>紅色</font>。color(設置顏色) size(1-7) face(設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示)

          8. <hr> color size(厚度) width(長度) align=left/center/right (默認為劇中顯示)

          9. <pre> 預格式化 保持本色;

          10. HTML特殊字符:&lt;(小于號,less than);&gt;(大于號,greater than);&nbsp;(空格)。

          11. 超鏈接:<a>標簽的一些常用屬性:href、title、target、name

          12. 插入圖片:<img src=“路徑”/>

          13. 列表:dl→(定義列表),ul→(無序列表), ol→(有序列表)。

          14. 表格:<table>;創建行:<tr>;創建單元格:<td>;表頁眉:<thead>;表主體:<tbody>;表頁腳:<tfoot>;表頭:<th>。

          15. rowspan(合并行)、colspan(合并列)

          16. <input>是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox表單標簽:(復選框)、file(文件選擇框)、hidden(隱藏字段)、image(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)。

          • meta標簽:(包括在head標簽中。主要用來描述頁面自身信息,元信息)

          1. <meta name="keywords" content="C#學習資料,4k8k.net,.net開發,軟件開發,編程自學網"/>

          2. <meta name="description" content="免費更新最新C#相關技術知識,主要包括:.net基礎,網頁前端,三層架構,SQL數據庫..."/>

          3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網頁編碼

          4. <meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網頁。

          5. <meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網頁。

          6. <meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。

          7. <meta name="名字" content="值" />關于網頁的描述信息。

          8. <meta http-equiv="名字" content="值" />模擬http響應頭信息。

          C#編程自學_做最好的.net自學資料站_更多文章請訪問:http://www.4k8k.net/

          歡迎訂閱。

          這里是云端源想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標簽中H標簽又稱標題標簽。在建網站中會使用到,不到的段落格式需要使用不同的標簽。標簽可以反映一段文字的大小、顏色、縮寫、換行、間距等等內容,根據全文的實際情況靈活應用標簽,特別是HTML標題標簽將對網站文章的質量起到非常重要的作用。我們圍繞著這個標簽詳細講一下如何正確使用標題標簽。

          HTML標題標簽的種類:
          HTML標題標簽總共有6個,分別為:H1,H2,H3,H4,H5,H6。
          h1代表最大,它的重要性最高,字體也最大。
          h6代表最小,字體最小,重要性也最小。
          h1,h2,h3,h4,h5,h6,作為HTML標題標簽,顯示的文字樣式為粗體,與html粗體標簽效果一樣。


          HTML標題標簽的重要性:
          H1-H6以重要性遞減,它可以讓頁面的層級關系更加清晰。

          示例:
          <h1>一級標題</h1>
          <p>段落</p>
          <div>
          <h2>二級標題</h2>
          <p>...</p>
          <div>
          <h3>三級標題</h3>
          <p>...</p>
          <div>
          <h4>四級標題</h4>
          <p>...</p>
          </div>
          </div>
          </div>

          根據文章實際的段落意義正確使用代表不同層級關系的HTML標題標簽,瀏覽器才能通過HTML解析出與本意一致的表達效果。


          主站蜘蛛池模板: 国产亚洲无线码一区二区| 精品无码一区在线观看| 成人精品一区二区三区不卡免费看| 精品视频一区二区观看| 一区国产传媒国产精品| 精品福利一区二区三区精品国产第一国产综合精品 | 香蕉久久一区二区不卡无毒影院| 国产精品成人免费一区二区 | 国产成人综合精品一区| 人妻av综合天堂一区| 色偷偷久久一区二区三区| 国产福利电影一区二区三区久久老子无码午夜伦不 | 国产日韩精品一区二区三区| 亚洲色偷偷偷网站色偷一区| 亚洲色大成网站www永久一区 | 久久久不卡国产精品一区二区| 日韩一区二区免费视频| 亚洲AV日韩AV一区二区三曲| 国产精品视频一区二区三区| 久久福利一区二区| 麻豆精品久久久一区二区| 亚洲国产av一区二区三区| 国产一区二区三区四| 国产免费av一区二区三区| 国产精品一区二区三区久久 | 国产成人无码一区二区在线观看 | 国产精品一区在线播放| 学生妹亚洲一区二区| 亚洲Av无码国产一区二区| 精品久久久久久无码中文字幕一区| 国产精品一级香蕉一区| 冲田杏梨AV一区二区三区| 风间由美在线亚洲一区| 国产一区二区三区亚洲综合| 北岛玲在线一区二区| 中文字幕国产一区| 国产激情з∠视频一区二区| 蜜桃视频一区二区三区在线观看 | 亚洲精品精华液一区二区 | 亚洲AV无码一区二区三区国产| 日本人真淫视频一区二区三区|