這里是云端源想IT,幫你輕松學IT”
嗨~ 今天的你過得還好嗎?
天不言而四時行,
地不語而百物生。
- 2024.03.11 -
在數字世界的構建中,字體不僅僅是文字的外衣,更是情感和風格的傳遞者。作為網頁設計師和前端開發者,掌握HTML中的字體標簽,能夠讓我們創造出更加豐富和吸引人的用戶體驗。
今天,就讓我們一起走進HTML字體標簽的世界,探索它們如何讓網頁變得生動有趣。
語法結構:<標簽 屬性=“值”> 內容 </標簽>
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>
這行代碼的意思是:
注意:雖然標簽在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>
如上圖控制臺所示(打開控制臺的方式: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>
8、其它字體標簽
<mark>:這個標簽用于突出顯示文本,通常用于表示高亮的部分。
<small>:這個標簽用于表示小號文本,通常用于表示版權聲明或法律條款等次要信息。
<ins>:這個標簽用于表示插入的文本,常用于表示新增的內容。
<sub> 和 <sup>:這兩個標簽分別用于表示下標和上標文本,常用于數學公式或化學方程式中。
盡管上述標簽可以直接在HTML中使用,但現代網頁設計越來越傾向于使用CSS來控制文本的樣式,因為CSS提供了更多靈活性和控制能力。
使用CSS類和樣式規則可以更有效地管理網站的整體樣式,并且可以更容易地適應不同設備和屏幕尺寸。
因此,如果您正在學習或更新您的網頁設計知識,建議學習和使用CSS來控制字體和其他文本樣式,關于HTML的這些標簽了解一下就可以了。
總之,字體是網頁設計中不可或缺的元素,它們就像是網頁的語言,傳遞著信息和情感。通過HTML字體標簽的學習和應用,我們可以讓我們的網頁“字”得其樂,讓每一位訪問者都能享受到更加美妙的網絡體驗。不斷探索和實踐,讓我們的網頁在字體的世界里綻放光彩吧!
今天就先講到這里了,
更多前端開發基礎知識點擊文末閱讀原文查看哦!
記得關注【云端源想IT】一起學編程!
我們下期再見!
END
文案編輯|云端學長
文案配圖|云端學長
內容由:云端源想分享
TML是一種用來描述網頁的標記性語言。學習HTML可能并不難,主要是要記一些HTML標簽和標簽代表的含義。下面PHP程序員雷雪松根據使用的情況,整理出平時常用的HTML標簽。
HTML基礎之HTML常用標簽-PHP程序員雷雪松的博客
<!--<!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>
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>標簽上標
表示一個空格
©表示版權符
<表示<
>表示>
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">&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,表示選中
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 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本,添加圖片,創建鏈接、輸入表單、框架和表格等等,并可將之存為文本文件,瀏覽器即可讀取和顯示。
新建一個test.html文件,內容如下
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一個標題</h1><p>我的第一個段落。</p> </body></html>
其中:
保存后運行,即可在瀏覽器中打開如下界面
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.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 有序列表
*請認真填寫需求信息,我們會在24小時內與您取得聯系。