整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
天來說下HTML語言CSS樣式字體的文本縮進(jìn) text-indent
text-indent屬性用來指定文本的第一行的縮進(jìn)，通常是將段落的首行縮進(jìn)。來看下語法使用:
div {
text-indent:10px;
}
來看下使用效果,使用前:
每一行沒有縮進(jìn)
使用后:
每個段落的第一行都縮進(jìn)了20px，具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進(jìn)</title>
<style>
p {
text-indent: 20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大學(xué)，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
需要縮進(jìn)的像素可以是任意值，除了正的px,還可以是負(fù)的值，可以看下效果:
這不是我的瀏覽器壞了，展示不了段落首部，是將px修改為-20px
具體代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進(jìn)</title>
<style>
p {
text-indent: -20px;
}
</style>
</head>
<body>
<p>第一年，我考上了大學(xué)，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
根據(jù)大家寫文章段落的習(xí)慣，一般都是縮進(jìn)兩個字，但是20px或者10px是不是2個字的長度呢，回答不是的。縮進(jìn)字?jǐn)?shù)長度有專門的單位: em
通過設(shè)置該屬性，所有元素的第一行都可以縮進(jìn)一個給定的長度，甚至該長度可以是負(fù)值。
em是一個相對單位，就是當(dāng)前元素 font-size 1個文字的大小，如果當(dāng)前元素沒有設(shè)置大小，則會按照1個父元素文字大小。
我們來看下效果:
確實是縮進(jìn)了2個字的長度，看下對應(yīng)代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS樣式之文本縮進(jìn)</title>
<style>
p {
text-indent: 2em;
}
</style>
</head>
<body>
<p>第一年，我考上了大學(xué)，來到了北京,冬天的雪就像冷冷的冰雨，
在臉上胡亂的拍.搖啊搖，搖啊搖，搖到外婆橋,從此世人眼中的你就像超人一樣屹立于天地間。
</p>
<p>一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。一片冰心在玉壺，我勸天公重抖擻，不拘一格降人才。</p>
<p>只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5。只有聆聽你的聲音，才能撫平我寂寞無聊的心，HTML5</p>
</body>
</html>
每個段落第一行如果想要三個字間距，就是3em
今天就先到這里，大家周末快樂~
說完HTML語言CSS字體的縮進(jìn)text-indent,接下來我們講下字體的行間距屬性 line-height. 該屬性用來設(shè)置行間的距離，也就是我們經(jīng)常說的行高。可以控制文字行與行之間的距離。
來一起看下line-height的語法:
p {
line-height:20px;
}
怎么理解行間距呢？看下面這個圖就可以理解了
對于一行文字來說，文字上面和上一行文字的下面，文本高度，文字的下面和下一行文字的上面，三者加起來就是整個行間距。
來看下具體的效果:
可以看出，段落間的行間距是16px,如果是一行文字的話，可以看的更清楚
<!DOCTYPE html>
HTML中，列表、引用和代碼是常用的結(jié)構(gòu)，它們有助于組織內(nèi)容，突出顯示特定信息，并提高網(wǎng)頁的可讀性和功能性。本文將詳細(xì)介紹這些元素的使用方法和實例。
列表是組織項目或信息點的一種方式。在HTML中，有兩種主要類型的列表：有序列表和無序列表。
有序列表使用<ol>標(biāo)簽創(chuàng)建，列表中的每個項目使用<li>（列表項）標(biāo)簽標(biāo)記。有序列表通常用于表示有特定順序的步驟或排名。
<ol>
<li>開啟電腦。</li>
<li>打開瀏覽器。</li>
<li>訪問網(wǎng)站。</li>
</ol>
在這個例子中，步驟按照順序排列，用戶應(yīng)該按照列表的順序執(zhí)行。
無序列表使用<ul>標(biāo)簽創(chuàng)建，同樣使用<li>標(biāo)簽來定義列表項。無序列表適用于沒有特定順序要求的項目列表。
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
這個例子中的水果列表沒有特定的順序要求。
引用用于表示頁面上的文本是從其他來源引用的。在HTML中，<blockquote>標(biāo)簽用于定義長引用，而<q>標(biāo)簽用于定義短引用。
長引用通常用于引用段落長度的文本。它通常會縮進(jìn)，并且可以包含引用的來源信息。
<blockquote cite="http://example.com/quote-source">
<p>這是一個長引用的實例，通常用于引用段落文本。引用的文本應(yīng)該保持原作的語境和意義。</p>
<footer>— 引用自 <cite>《引用來源的書名》</cite></footer>
</blockquote>
短引用用于行內(nèi)文本，它通常不會改變文本的布局。
<p>正如某人所說：<q>知識就是力量。</q></p>
在網(wǎng)頁中展示代碼片段時，HTML提供了<code>標(biāo)簽用于標(biāo)記代碼。對于多行代碼或需要保持格式的代碼，可以使用<pre>標(biāo)簽。
單行代碼用于展示簡短的代碼或命令。
<p>要添加一個段落，你可以使用<code><p>...</p></code>標(biāo)簽。</p>
多行代碼或需要保持原始格式的代碼使用<pre>和<code>標(biāo)簽組合使用。
<pre><code>function greet(name) {
return 'Hello, ' + name + '!';
}</code></pre>
在這個例子中，<pre>標(biāo)簽保持了代碼的格式，而<code>標(biāo)簽表示文本是代碼。
HTML中的列表、引用和代碼是構(gòu)建清晰、有組織的網(wǎng)頁內(nèi)容的重要工具。列表幫助用戶理解信息的結(jié)構(gòu)，引用增加了內(nèi)容的可信度，而代碼的正確展示對于教學(xué)和技術(shù)文章來說至關(guān)重要。通過熟練運用這些元素，你可以提高網(wǎng)頁的專業(yè)性，使內(nèi)容對用戶更加友好和易于理解。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
