整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一下html中文件標(biāo)簽和文本標(biāo)簽的使用
目的是學(xué)會使用，所以借助工具可以省好多時間
1.文件標(biāo)簽：構(gòu)成html最基本的標(biāo)簽
html:html文檔的根標(biāo)簽
head：頭標(biāo)簽。用于引入html文檔的一些屬性。引入外部的一些資源
title：標(biāo)題標(biāo)簽
body：體標(biāo)簽
<!DOCTYPE html>:html5中定義該文檔是html
2.文本標(biāo)簽：和文本有關(guān)的標(biāo)簽
注釋:<!-- 注釋內(nèi)容 –->
<h1> 到<h6>:標(biāo)題標(biāo)簽自帶換行的效果
<p>：表示段落的標(biāo)簽
<br>：換行標(biāo)簽<br/>和<br>的寫法都不會報(bào)錯
<hr>：顯示一條水平線（也是一個自閉和標(biāo)簽）水平線有一些屬性我們可以控制它的樣式。hr里面表示高度是size而不是height.對齊方式默認(rèn)是居中的。
<b>：字體加粗
<i>：斜體
<font>:字體標(biāo)簽（通過屬性來修改字體的字號，大小，顏色，以及字體的樣式）
<center>:文本居然標(biāo)簽
這里講下網(wǎng)頁下面的版權(quán)標(biāo)簽是如何寫出來的。
3.圖片標(biāo)簽：用來展示圖片的（圖片也是一個自閉合標(biāo)簽）
屬性:src:用來指定圖片的位置
什么都不寫默認(rèn)就是./的形式
../表示上一級目錄
4.列表標(biāo)簽：
有序列表:ol,li(li表示的是列表的每一項(xiàng))
無序列表:ul,li
5.鏈接標(biāo)簽：
a:定義一個超鏈接
屬性：
href:指定訪問資源的URL(統(tǒng)一資源定位符，就是路徑的表示形式)
target：（是目標(biāo)的意思）指定打開資源的方式
_self:在當(dāng)前頁面打開
_blank:在空白頁面打開
6.表格標(biāo)簽：在HTML中的表格只有行的概念，沒有列的概念，將表格以行的形式進(jìn)行分割，然后再對行進(jìn)行操作。
table:定義表格
width:表格的寬度
border:邊框
cellpadding:單元格內(nèi)容左對齊（定義內(nèi)容和單元格的距離）
cellspacing:邊框合并(定義單元格之間的距離，如果指定為0，單元格的線會合為一條)
bgcolor:背景色
align:表格的對齊樣式
tr:定義行
bgcolor:背景色
align:表格的對齊樣式(是用來修改文本的對齊方式的)
td:定義單元格
colspan:合并列
rowspan:合并行
th:定義表頭單元格
<caption>:表格標(biāo)題
<thread>:表示表格的頭部分
<tbody>:表示表格的體部分
<tfoot>:表示表格的腳部分
7.塊標(biāo)簽：div和span是結(jié)合css使用的
span:文本信息在一行顯示，行內(nèi)標(biāo)簽，內(nèi)聯(lián)標(biāo)簽(意思就是它不會換行)
div:是會換行的。每一個div占滿一整行。塊級別的標(biāo)簽
8.語義化標(biāo)簽：html5中為了提高程序的可讀性，提高了一些標(biāo)簽
<header>
<footer>
這里是云端源想IT，幫你輕松學(xué)IT”
嗨~ 今天的你過得還好嗎？
天不言而四時行，
地不語而百物生。
- 2024.03.11 -
在數(shù)字世界的構(gòu)建中，字體不僅僅是文字的外衣，更是情感和風(fēng)格的傳遞者。作為網(wǎng)頁設(shè)計(jì)師和前端開發(fā)者，掌握HTML中的字體標(biāo)簽，能夠讓我們創(chuàng)造出更加豐富和吸引人的用戶體驗(yàn)。
今天，就讓我們一起走進(jìn)HTML字體標(biāo)簽的世界，探索它們?nèi)绾巫尵W(wǎng)頁變得生動有趣。
語法結(jié)構(gòu)：<標(biāo)簽 屬性=“值”> 內(nèi)容 </標(biāo)簽>
1、標(biāo)題標(biāo)簽< h1> - < h6>
標(biāo)題標(biāo)簽的默認(rèn)樣式是自動加粗的，字體一級標(biāo)題最大，六級標(biāo)題最小，每個標(biāo)題標(biāo)簽獨(dú)占一行。
示例：
<h1>一級</h1>
<h2>二級</h2>
<h3>三級</h3>
<h4>四級</h4>
<h5>五級</h5>
<h6>六級</h6>2、字體標(biāo)簽<font>
在HTML中，最常用的字體標(biāo)簽非<font>莫屬，雖然現(xiàn)代開發(fā)中更推薦使用CSS來控制字體樣式，但了解它的歷史仍然有其必要性。<font>標(biāo)簽允許我們通過color、size和face屬性來改變字體的顏色、大小和類型。
例如，如果我們想要顯示紅色Arial字體的文字，我們可以這樣寫：
<font color="red" size="5" face="Arial">這是紅色Arial字體的文字</font>這行代碼的意思是：
注意：雖然標(biāo)簽在HTML4.01中是有效的，但在HTML5中已經(jīng)被廢棄，建議使用CSS來進(jìn)行樣式定義。
3、字號大?。?lt;font size="n">
字號大小在網(wǎng)頁設(shè)計(jì)中同樣重要，它直接影響著閱讀體驗(yàn)。HTML允許我們通過<font size="n">來調(diào)整字體的大小，其中“n”可以是1到7的數(shù)字。
例如：
<!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>運(yùn)行結(jié)果：
不過，現(xiàn)代網(wǎng)頁設(shè)計(jì)更傾向于使用CSS來控制字號，以便更精細(xì)地調(diào)整字體大小。
4、粗體標(biāo)簽
<b>：這個標(biāo)簽用于將文本加粗顯示，相當(dāng)于英文中的bold。它不會改變字體，只是使文本看起來更粗體。
<p><b>這是加粗的文本</b></p><strong>：與<b>標(biāo)簽類似，<strong>標(biāo)簽也用于表示加粗的文本。
<p><strong>這是重要的文本</strong></p>但在HTML5中，<strong>標(biāo)簽被賦予了語義，用來表示重要的文本內(nèi)容。
5、斜體字標(biāo)簽
<i>：這個標(biāo)簽用于將文本設(shè)置為斜體，相當(dāng)于英文中的italic。
<p><i>這是斜體的文本</i></p><em>：與<i>標(biāo)簽類似，<em>標(biāo)簽也用于表示斜體文本。
<p><em>這是強(qiáng)調(diào)的文本</em></p>但在HTML5中，<em>標(biāo)簽被賦予了語義，用來表示強(qiáng)調(diào)的文本內(nèi)容。
6、刪除字標(biāo)簽
<del>：這個標(biāo)簽用于表示刪除的文本，常用于表示不再準(zhǔn)確或已過時的內(nèi)容。比如原價與現(xiàn)價。
<p>原價：<del>100元</del></p>
<p>現(xiàn)價：80元</p>運(yùn)行之后是這樣子的：
在上述示例中，原價為100元，但已被刪除，因此使用標(biāo)簽將其包圍起來。這樣，瀏覽器會顯示刪除線來表示該文本已被刪除。
7、文本格式化標(biāo)簽 < div> < span>
< div> 標(biāo)簽用來布局，但是一行只能放一個< 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>標(biāo)簽里面可以包含<p>標(biāo)簽，<p>標(biāo)簽，里面不可以放<div>標(biāo)簽。
< span> 標(biāo)簽用來布局，一行上可以多個 < span>//小盒子，行元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<span>1234</span>
<span>5678</span>
</body>
</html>8、其它字體標(biāo)簽
<mark>：這個標(biāo)簽用于突出顯示文本，通常用于表示高亮的部分。
<small>：這個標(biāo)簽用于表示小號文本，通常用于表示版權(quán)聲明或法律條款等次要信息。
<ins>：這個標(biāo)簽用于表示插入的文本，常用于表示新增的內(nèi)容。
<sub> 和 <sup>：這兩個標(biāo)簽分別用于表示下標(biāo)和上標(biāo)文本，常用于數(shù)學(xué)公式或化學(xué)方程式中。
盡管上述標(biāo)簽可以直接在HTML中使用，但現(xiàn)代網(wǎng)頁設(shè)計(jì)越來越傾向于使用CSS來控制文本的樣式，因?yàn)镃SS提供了更多靈活性和控制能力。
使用CSS類和樣式規(guī)則可以更有效地管理網(wǎng)站的整體樣式，并且可以更容易地適應(yīng)不同設(shè)備和屏幕尺寸。
因此，如果您正在學(xué)習(xí)或更新您的網(wǎng)頁設(shè)計(jì)知識，建議學(xué)習(xí)和使用CSS來控制字體和其他文本樣式，關(guān)于HTML的這些標(biāo)簽了解一下就可以了。
總之，字體是網(wǎng)頁設(shè)計(jì)中不可或缺的元素，它們就像是網(wǎng)頁的語言，傳遞著信息和情感。通過HTML字體標(biāo)簽的學(xué)習(xí)和應(yīng)用，我們可以讓我們的網(wǎng)頁“字”得其樂，讓每一位訪問者都能享受到更加美妙的網(wǎng)絡(luò)體驗(yàn)。不斷探索和實(shí)踐，讓我們的網(wǎng)頁在字體的世界里綻放光彩吧！
今天就先講到這里了，
更多前端開發(fā)基礎(chǔ)知識點(diǎn)擊文末閱讀原文查看哦！
記得關(guān)注【云端源想IT】一起學(xué)編程！
我們下期再見！
END
文案編輯|云端學(xué)長
文案配圖|云端學(xué)長
內(nèi)容由：云端源想分享
TML（HyperText Markup Language）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。在HTML中，"元素"和"標(biāo)簽"是構(gòu)建網(wǎng)頁的基本組成部分，它們一起定義了網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。HTML標(biāo)簽是用來定義HTML元素的開始和結(jié)束的，而HTML元素是由標(biāo)簽及其包含的內(nèi)容組成的。
參考文檔：https://www.cjavapy.com/article/3303/
HTML元素指的是從開始標(biāo)簽到結(jié)束標(biāo)簽的所有內(nèi)容。它們是HTML文檔的構(gòu)建塊，用于創(chuàng)建和組織網(wǎng)頁內(nèi)容。HTML元素可以包含文本、圖片、鏈接、表格等多種類型的數(shù)據(jù)。元素可能包括一個開始標(biāo)簽和一個結(jié)束標(biāo)簽，也可能只有一個標(biāo)簽（在自閉合元素的情況下）。
1） <!DOCTYPE> 聲明
用于定義文檔類型，告訴瀏覽器此文檔使用哪個HTML版本。
<!DOCTYPE html>2） <html>
根元素，包含整個HTML文檔。
<html lang="en">
</html>3） <head>
包含文檔的元數(shù)據(jù)，如標(biāo)題、字符集聲明和鏈接到樣式表。
<head>
<title>頁面標(biāo)題</title>
<meta charset="UTF-8">
</head>4）<title>
定義文檔的標(biāo)題，顯示在瀏覽器的標(biāo)題欄或頁面的標(biāo)簽頁上。
<title>這是文檔的標(biāo)題</title>5）<body>
包含文檔的所有可見內(nèi)容，如文本、圖片、鏈接和其他多媒體元素。
<body>
<h1>這是一個主標(biāo)題</h1>
<p>這是一個段落。</p>
</body>6） <header>
定義一個區(qū)域或頁面的頭部，通常包含標(biāo)題和導(dǎo)航鏈接。
<header>
<h1>網(wǎng)站標(biāo)題</h1>
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關(guān)于</a></li>
</ul>
</nav>
</header>7） <footer>
定義頁面或區(qū)域的頁腳部分，通常包含版權(quán)信息、聯(lián)系信息等。
<footer>
<p>版權(quán)所有 ? 2024</p>
</footer>8） <nav>
定義導(dǎo)航鏈接的部分，用于頁面內(nèi)或頁面間的導(dǎo)航。
<nav>
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新聞</a></li>
</ul>
</nav>9）<section>
定義文檔中的一個獨(dú)立部分，通常與標(biāo)題一起使用。
<section>
<h2>章節(jié)標(biāo)題</h2>
<p>這是該章節(jié)的一些內(nèi)容。</p>
</section>10. <article>
定義可以獨(dú)立于內(nèi)容其余部分的完整自包含內(nèi)容，例如博客帖子或新聞文章。
<article>
<h2>文章標(biāo)題</h2>
<p>文章內(nèi)容...</p>
</article>11. <aside>
定義與周圍內(nèi)容稍微分離的內(nèi)容，如側(cè)邊欄或廣告欄。
<aside>
<p>這是一些附加信息。</p>
</aside>12. <figure> 和 <figcaption>
<figure> 定義獨(dú)立的流內(nèi)容（如圖表、圖像、代碼示例等），<figcaption> 提供該內(nèi)容的標(biāo)題。
<figure>
<img src="image.jpg" alt="描述性文本">
<figcaption>圖像標(biāo)題</figcaption>
</figure>HTML標(biāo)簽是HTML元素的一部分，用于從邏輯上開始或結(jié)束一個元素。標(biāo)簽通常成對出現(xiàn)，包括一個開始標(biāo)簽和一個對應(yīng)的結(jié)束標(biāo)簽，結(jié)束標(biāo)簽的名稱前會有一個斜線（/）作為區(qū)分。有些HTML標(biāo)簽是自閉合的，意味著它們不需要結(jié)束標(biāo)簽，如圖像標(biāo)簽（<img />）和換行標(biāo)簽（<br />）。
標(biāo)簽 | 說明 |
<!DOCTYPE> | 聲明文檔類型和HTML版本。 |
<html> | 標(biāo)識一個HTML文檔的根元素。 |
<head> | 包含了文檔的元數(shù)據(jù)。 |
<title> | 指定文檔的標(biāo)題。 |
<body> | 包含了可見的頁面內(nèi)容。 |
<h1> - <h6> | 定義標(biāo)題，從 <h1> 到 <h6> 重要性遞減。 |
<p> | 定義段落。 |
<br> | 插入一個換行符。 |
<hr> | 在頁面上繪制一條水平線。 |
<b> | 定義粗體文本。 |
<i> | 定義斜體文本。 |
<u> | 定義下劃線文本。 |
<strong> | 定義重要文本。 |
<em> | 定義強(qiáng)調(diào)文本。 |
<mark> | 定義被標(biāo)記或高亮的文本。 |
<small> | 定義小號文本。 |
<sub> | 定義下標(biāo)文本。 |
<sup> | 定義上標(biāo)文本。 |
<a> | 定義超鏈接。 |
<img> | 在頁面中嵌入圖像。 |
<ul> | 定義無序列表。 |
<ol> | 定義有序列表。 |
<li> | 定義列表項(xiàng)。 |
<table> | 定義表格。 |
<th> | 定義表格的表頭單元格。 |
<tr> | 定義表格的行。 |
<td> | 定義表格單元。 |
<form> | 定義HTML表單。 |
<input> | 定義輸入控件。 |
<textarea> | 定義多行文本輸入控件。 |
<button> | 定義按鈕。 |
<select> | 定義下拉列表。 |
<option> | 定義下拉列表中的選項(xiàng)。 |
<article> | 定義文章。 |
<section> | 定義文檔中的一個區(qū)域（或節(jié)）。 |
<header> | 定義介紹性內(nèi)容或?qū)Ш芥溄拥娜萜鳌?/p> |
<footer> | 定義注腳或文檔的頁腳。 |
<nav> | 定義導(dǎo)航鏈接的部分。 |
<aside> | 定義側(cè)邊欄內(nèi)容。 |
使用示例：
<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML標(biāo)簽使用示例</title>
</head>
<body>
<header>
<h1>歡迎來到我的網(wǎng)頁</h1>
<nav>
<a href="#content">主要內(nèi)容</a> |
<a href="#contact-form">聯(lián)系表單</a>
</nav>
</header>
<section id="content">
<article>
<h2>HTML基礎(chǔ)</h2>
<p>HTML是構(gòu)建網(wǎng)頁的基石。<strong>標(biāo)簽</strong>是它的核心組成部分。<mark>本文</mark>介紹了一些最常用的HTML標(biāo)簽。</p>
</article>
<aside>
<h3>注意</h3>
<p>記得檢查HTML5的新特性和標(biāo)簽。</p>
</aside>
<ul>
<li>文本標(biāo)簽</li>
<li>列表</li>
<li>表格</li>
<li>表單</li>
</ul>
<ol>
<li>先介紹基礎(chǔ)</li>
<li>然后是進(jìn)階</li>
</ol>
<table>
<tr>
<th>標(biāo)簽</th>
<th>描述</th>
</tr>
<tr>
<td><p></td>
<td>段落標(biāo)簽</td>
</tr>
<tr>
<td><a></td>
<td>鏈接標(biāo)簽</td>
</tr>
</table>
</section>
<section id="images">
<h2>圖片</h2>
<img src="example.jpg" alt="示例圖片">
</section>
<footer>
<section id="contact-form">
<h2>聯(lián)系我們</h2>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="email">電子郵件:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</section>
<p>? 2024 HTML標(biāo)簽示例</p>
</footer>
</body>
</html>參考文檔：Hhttps://www.cjavapy.com/article/3303/
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
