整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML文本格式化通常使用一系列特定的標(biāo)簽來(lái)改變文本的外觀或結(jié)構(gòu)。這些標(biāo)簽可以控制文本的字體、大小、顏色、對(duì)齊方式等，也可以用來(lái)標(biāo)記文本的邏輯結(jié)構(gòu)（如段落、標(biāo)題、列表等）。除了這些基本的格式化標(biāo)簽，HTML還支持通過(guò)CSS（級(jí)聯(lián)樣式表）來(lái)更精細(xì)和靈活地控制文本的格式和樣式。
參考文檔：https://www.cjavapy.com/article/3306/
HTML中，文本格式化和結(jié)構(gòu)化主要通過(guò)一系列標(biāo)簽來(lái)完成，其中標(biāo)題（Headings）標(biāo)簽是最常用于定義文本格式的元素之一。HTML提供了六級(jí)標(biāo)題標(biāo)簽，從 <h1> 到 <h6>，<h1> 表示最高級(jí)別的標(biāo)題，而 <h6> 表示最低級(jí)別的標(biāo)題。這些標(biāo)題標(biāo)簽不僅幫助改善網(wǎng)頁(yè)的結(jié)構(gòu)和可讀性，還對(duì)搜索引擎優(yōu)化（SEO）至關(guān)重要，因?yàn)樗阉饕媸褂眠@些標(biāo)簽來(lái)識(shí)別網(wǎng)頁(yè)上的不同部分和內(nèi)容的層次結(jié)構(gòu)。每個(gè)級(jí)別的標(biāo)題都有默認(rèn)的樣式，通常是不同的大小和加粗，以顯示它們的層次結(jié)構(gòu)
<h1>這是一個(gè) H1 標(biāo)題</h1>
<h2>這是一個(gè) H2 標(biāo)題</h2>
<h3>這是一個(gè) H3 標(biāo)題</h3>
<h4>這是一個(gè) H4 標(biāo)題</h4>
<h5>這是一個(gè) H5 標(biāo)題</h5>
<h6>這是一個(gè) H6 標(biāo)題</h6>HTML中，文本格式化通常涉及使用特定的標(biāo)簽來(lái)控制文本的顯示方式。段落和換行是兩個(gè)基本但非常重要的文本格式化概念。用<p>創(chuàng)建段落，<br>插入換行。
1）段落 (<p> 標(biāo)簽)
<p> 標(biāo)簽自帶上下邊距，用以區(qū)分不同的段落。
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>2）換行 (<br> 標(biāo)簽)
<br> 標(biāo)簽只是簡(jiǎn)單地添加一個(gè)換行點(diǎn)，不添加任何額外的空間或邊距，并且通常用于詩(shī)歌或地址等需要精確控制換行位置的文本。
這是文本行的開始。<br>這是新的一行，但在同一個(gè)段落內(nèi)。使用<em>和<strong>強(qiáng)調(diào)文本。HTML中，強(qiáng)調(diào)文本通常使用 <em> 和 <strong> 標(biāo)簽來(lái)實(shí)現(xiàn)。這兩個(gè)標(biāo)簽既有語(yǔ)義意義，也影響文本的表現(xiàn)形式。
<em> 標(biāo)簽用于表示強(qiáng)調(diào)文本，通常表現(xiàn)為斜體，用以表示文本的輕度強(qiáng)調(diào)。
<strong> 標(biāo)簽用于表示更強(qiáng)烈的強(qiáng)調(diào)，通常表現(xiàn)為加粗，表示文本的高度強(qiáng)調(diào)。
<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>HTML 提供了兩種主要的列表類型：有序列表（<ol>）和無(wú)序列表（<ul>）。兩種類型都使用列表項(xiàng)（<li>）來(lái)定義列表中的實(shí)際項(xiàng)。
1）有序列表
有序列表以 <ol> 標(biāo)簽開始。每個(gè)列表項(xiàng)都放在 <li> 標(biāo)簽內(nèi)。列表是有序的，也就是每個(gè)項(xiàng)目都是編號(hào)的。這適用于項(xiàng)目順序很重要的列表，如食譜或待辦事項(xiàng)列表。
<ol>
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
</ol>2）無(wú)序列表
無(wú)序列表以 <ul> 標(biāo)簽開始。像有序列表一樣，每個(gè)項(xiàng)都放在 <li> 標(biāo)簽內(nèi)。然而，無(wú)序列表中的項(xiàng)目不是編號(hào)的。使用圓點(diǎn)符號(hào)進(jìn)行表示。這適用于項(xiàng)目順序不重要的列表，如購(gòu)物清單。
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橙子</li>
</ul><!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>
<h1>HTML 文本格式化</h1>
<p>這是一個(gè)<em>斜體</em>和<strong>加粗</strong>的示例。</p>
<p><u>這段文本下劃線</u>和<s>這段文本是刪除線</s>。</p>
<p>化學(xué)水分子公式為H<sub>2</sub>O，E=mc<sup>2</sup>。</p>
<pre>
這是預(yù)格式化文本，
保留了空格和
換行符。
</pre>
<blockquote>這是一個(gè)長(zhǎng)引用的示例，可能包含多個(gè)段落。</blockquote>
<p>這是一個(gè)<q>短引用</q>的示例。</p>
<p>使用<code>HTML</code>和<code>CSS</code>進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復(fù)制文本。</p>
<p><samp>這是計(jì)算機(jī)程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>
</body>
</html>參考文檔：https://www.cjavapy.com/article/3306/
我們平時(shí)在瀏覽網(wǎng)站的過(guò)程中如果只有文字的話難免會(huì)有些太單調(diào)了，并且看文字多了眼睛也會(huì)比較難受，這時(shí)我們想要讓我們的網(wǎng)頁(yè)更漂亮更吸引人眼球，那么肯定少不了精美的圖片來(lái)進(jìn)行點(diǎn)綴，這就用到了今天我要教給大家的圖像標(biāo)簽img。
src：圖片的路徑 這個(gè)是必須要有的
title：當(dāng)我們把鼠標(biāo)移動(dòng)到圖片上展示的文本內(nèi)容
alt：當(dāng)圖片的路徑錯(cuò)誤或圖片有問(wèn)題時(shí)瀏覽器無(wú)法識(shí)別渲染的情況下展示的文本內(nèi)容
width：設(shè)置圖片的寬度
height：設(shè)置圖片的高度
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖像標(biāo)簽</title> </head> <body> <pre> ../:代表上一級(jí)目錄 ../../：上上級(jí)目錄 當(dāng)前目錄中的文件夾下使用：文件夾名稱/圖片名稱 上n級(jí)目錄下的n級(jí)文件夾：n個(gè)../+n個(gè)文件夾的名稱直到找到圖片文件為止 </pre> <img src="奶茶妹妹.png" width="500" height="300" title="這是同一個(gè)目錄下的圖片"><br> <img src="" alt="對(duì)不起，圖片走丟了"> <img src="img/章澤天.png" title="這是同一目錄中文件夾下的圖片"><img src="../田馥甄.png" width="350" height="300" title="這是上一級(jí)目錄中的圖片"> <img src="../img/高圓圓.png" title="這是上級(jí)目錄中某個(gè)文件夾下的圖片"> </body> </html> |
瀏覽器預(yù)覽效果圖
以上就是img圖片標(biāo)簽的簡(jiǎn)單應(yīng)用
學(xué)生就可以看懂的css基礎(chǔ)實(shí)戰(zhàn)系列，pre標(biāo)簽里是筆記總結(jié)，動(dòng)手實(shí)際操作一下會(huì)加強(qiáng)理解。有疑問(wèn)留言交流哦。
可能比較枯燥，但是再堅(jiān)持一下，前端知識(shí)的大門就會(huì)大開了。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
