教你快速入門，了解html基本標簽

簽是由：小于號+中間字符+大于號組成的代碼（注:代碼的所有字符都由英文字符組成）

作用是給用戶展示特定內容或是告訴瀏覽器與搜索引擎關于網頁的部分信息

									<!doctype html>

單標簽<<!doctype html>只有開始標簽

雙標簽<html></html>開始標簽和結束標簽成雙出現

"/”：網頁上如果某個標簽的小于號后面有此符號的即為結束標簽，沒有此符號的則為雙標簽

的專業術語稱為注釋標簽

我們可以將一行代碼的作用，含義，意圖等信息寫在這四個減號中間，讓自己后期能夠看懂之前寫的什么

div標簽的作用就在網頁內容中間劃分出若干個矩形區域，用以存放不一樣的內容

網頁中間有部分內容重要程度明顯高于其他區域：比如網頁標題，網頁logo，新聞標題等，這些重要區域就使用h系列的標簽來劃分

h系列標簽重要度按以下順序：

h1>h2>h3>h4>h5>h6

ul（ Unordered List ）無序列表標簽

網頁中間還有一些內容相似、結構相仿、布局接近的區域，像這一類區域我們就使用無序列表來進行區域劃分

ol（ ordered lists ）有序列表標簽

網頁中間還有一些內容相似、結構相仿、布局接近但是每個區域的內容是有先后關系的的區域，像這一類區域我們就使用有序列表來進行區域劃分，這一類區域大多用在詳細法律條文、政府公告、產品說明等內容上

dl（ definition list ）自定義列表標簽

網頁中間還有一些內容不完全一樣、結構相仿、布局接近、每個區域的內容沒有先后關系的的區域，像這一類區域我們就使用有自定義列表來進行區域劃分，這一類區域大多用在專業名詞條目的解釋，或是網頁底部信息分類等內容上

大段文字展示之p標簽

標簽的作用就是在網頁內容中間劃分出一個專門存放大段文字的區域

大段引用文字展示之blockquote標簽

blockquote標簽的作用就是：在網頁內容中間劃分展示大段引用自古典，古籍或是名人名言的區域

小行文字標注之span標簽

span標簽的作用就是在網頁內容的大段文字中間標注一行或是數行文字，并給這些文字設置一些不一樣的展示效果，比如：下劃線，顏色

重要文字標注之strong標簽

strong標簽的作用就是在網頁內容中的某段文字中間標注出特別重要的文字

注：

<em></em>標簽的效果與strong類似，區別在于em標簽包裹的文字重要性比strong標簽低，但是em標簽內的文字會產生傾斜效果

<i></i>標簽的效果則是包裹一段文字，使被包裹的文字產生傾斜效果，但是被包裹文字的重要性不會有什么變化

跳轉鏈接之a標簽

href=“網頁地址”: href是Hypertext Reference的縮寫，意思是超文本引用，作用就是讓我們可以點擊網頁的某些內容可以跳轉到其他的網頁上去

traget=“頁面打開方式”： ‘_blank’新頁面打開; _self 默認打開方式,當前頁打開

網頁圖片展示之img標簽

src=“圖片地址”:src是sourse的縮寫，表示我們需要顯示的圖片文件所在的位置

alt=“圖片名稱”：每個圖片都是為了展示某些內容，alt里面的文字則是為了描述圖片內容的

width=“圖片文件的實際寬度”：用以標注圖文文件的實際高度，此處高度數據不可修改，不可因為布局需要改成其他非實際尺寸

height=“圖片文件的實際高度”：同下

img標簽的文件地址代碼詳解

src: 路徑寫法,不能出現中文

相對路徑: 從本地文件(該代碼所在文件的當前位置)出發尋找到目標文件

./ (當前目錄)

../(上級目錄)

../../(上上級目錄)類推

絕對路徑:

從本地: D:/project/demo/pic.jpg

從網絡: :https://www.baidu.com/img/blabla.jpg

網頁圖片展示之video標簽

video標簽的作用就是在網頁上展示一個視頻

文件，這個標簽也是HTML5時代的一個代表性存在

src=“視頻地址”:src是sourse的縮寫，表示我們需要顯示的視頻文件所在的位置

controls=“controls”：這是視頻文件的控制按鈕區域

網頁圖片展示之audio標簽

audio標簽的作用就是在網頁上展示一個音頻文件，這個標簽也是HTML5時代的一個代表性存在

src=“視頻地址”:src是sourse的縮寫，表示我們需要顯示的視頻文件所在的位置

controls=“controls”：這是音頻文件的控制按鈕區域

喜歡小編文章的可以點個贊關注小編哦，小編每天都會給大家更新文章。

我自己是一名從事了多年的web程序員，小編為大家準備了新出的web學習資料，免費分享給大家！

如果你也想學習web前端，那么幫忙轉發一下然后再關注小編后私信“01”可以得到我整理的這些web資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）。

這里是云端源想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、字號大小：<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>：這個標簽用于突出顯示文本，通常用于表示高亮的部分。

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

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

二、總結與建議

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

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

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

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

今天就先講到這里了，

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

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

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

例

播放錄像：

您的瀏覽器不支持 video 標簽。

</video>

瀏覽器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <video> 標簽。

注釋：IE 8 或更早版本的 IE 瀏覽器不支持 <video> 標簽。

標簽定義及使用說明

<video> 標簽定義視頻，比如電影片段或其他視頻流。

目前，<video> 元素支持三種視頻格式：MP4、WebM、Ogg。

瀏覽器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES從 Firefox 21 版本開始Linux 系統從 Firefox 30 開始	YES	YES
Safari	YES	NO	NO
Opera	YES從 Opera 25 版本開始	YES	YES

MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

音頻格式的 MIME 類型

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML 4.01 與 HTML5之間的差異

<video> 標簽是 HTML5 的新標簽。

提示和注釋

提示：可以在 <video> 和 </video> 標簽之間放置文本內容，這樣不支持 <video> 元素的瀏覽器就可以顯示出該標簽的信息。

可選屬性

New：HTML5 中的新屬性。

屬性	值	描述
autoplayNew	autoplay	如果出現該屬性，則視頻在就緒后馬上播放。
controlsNew	controls	如果出現該屬性，則向用戶顯示控件，比如播放按鈕。
heightNew	pixels	設置視頻播放器的高度。
loopNew	loop	如果出現該屬性，則當媒介文件完成播放后再次開始播放。
mutedNew	muted	如果出現該屬性，視頻的音頻輸出為靜音。
posterNew	URL	規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。
preloadNew	autometadatanone	如果出現該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 "autoplay"，則忽略該屬性。
srcNew	URL	要播放的視頻的 URL。
widthNew	pixels	設置視頻播放器的寬度。

全局屬性

<video> 標簽支持 HTML 的全局屬性。

事件屬性

<video> 標簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：html網頁的代碼大全
下一篇：瀏覽器常用快捷鍵大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商