6.HTML 標題、段落和文本格式

網頁設計中，標題、段落和文本格式是構成頁面內容的基石。它們不僅有助于傳達信息，還能通過組織和強調內容來提升用戶體驗。本文將詳細介紹這些元素的使用方法，并提供實際例子。

標題（Headings）

標題是用來定義網頁中不同部分的標題。在HTML中，標題標簽從<h1>到<h6>，其中<h1>表示最高的層級，通常用于主標題，而<h6>表示最低的層級。為了保證良好的SEO實踐和無障礙訪問，應保證標題層級的邏輯順序。

使用實例：

<h1>歡迎來到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開發的未來趨勢</h3>
<h4>前言</h4>
<h4>主要內容</h4>
<h4>結論</h4>
<h3>如何提高JavaScript技能</h3>

在這個例子中，<h1>用于最主要的標題，<h2>用于區分頁面中的主要部分，<h3>用于文章標題，<h4>用于文章內部的小節。

段落（Paragraphs）

段落是文本的基本單元，用于組織和展示連續的文本內容。在HTML中，<p>標簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。

使用實例：

<p>在今天的數字時代，網頁開發已經成為了一個不斷演變的領域。隨著新技術的出現，開發者需要不斷學習和適應。</p>

<p>JavaScript是構建現代網頁不可或缺的一部分。為了成為一名更優秀的前端開發者，提高JavaScript技能是非常重要的。</p>

在這個例子中，兩個<p>標簽分別定義了兩個獨立的段落，每個段落都是一個完整的思想單元。

文本格式

文本格式用于強調或區分網頁中的文本內容。HTML提供了多種標簽來改變文本的樣式和意義，包括但不限于加粗、斜體、下劃線、上標和下標等。

加粗（Bold）

<strong>和<b>標簽用于加粗文本，但<strong>通常表示重要性，而<b>僅用于視覺上的加粗。

使用實例：

<p>重要提示：<strong>請不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個<b>加粗</b>的文本示例。</p>

斜體（Italic）

<em>和<i>標簽用于斜體文本，<em>表示強調，而<i>僅用于斜體樣式。

使用實例：

<p>當我們談論<em>用戶體驗</em>時，我們指的是用戶與產品交互的整體感受。</p>
<p>這是一個<i>斜體</i>的文本示例。</p>

下劃線和刪除線

``標簽用于下劃線文本，而<del>標簽用于顯示文本已被刪除或更改。

使用實例：

<p>請閱讀使用條款了解更多信息。</p>
<p>原價<del>99.99美元</del> 現價69.99美元。</p>

上標和下標

<sup>和<sub>標簽用于創建上標和下標文本，常用于科學公式和腳注。

使用實例：

<p>水的化學式是H<sub>2</sub>O。</p>
<p>愛因斯坦的質能方程式E=mc<sup>2</sup>。</p>

結論

合理使用標題、段落和文本格式可以極大地提升網頁內容的可讀性和專業性。通過明確的層級結構和強調重要內容，你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素，你的網頁將更加吸引人且功能強大。

性是HTML元素提供的附國信息

HTML元素可以設置屬性

屬性可以在元素中添加附加信息

屬性一般描述于開始標簽

屬性總是以名稱/值對應的形式出現，例如：name="value"

例，鏈接地址是href的屬性

<a >鏈接地址是href的屬性</a>

HTML屬性常用引用屬性值

屬性值應該始終被包含在引號內

雙引號是常用的，單引號也沒有問題，

如果屬性值本身就包含了雙引號，即么則必須引用單引號，例：name='John"ShotGun"Nelson'

HTML提示：使用小寫屬性

屬性和屬性值對大小寫不敏感。

HTML屬性參考

calss 為HMTL元素定義一個或多個名

id 定義元素的唯一id

style 規定元素的行內樣式

title 描述元素的額外信息

HTML標題

HTML注釋

類似于對代碼進行備注，默認有兩種試

1、

常用于一小段注釋

2、//注釋有時候不起作用，不知道為啥，知道的回復下啦

HTML提示，如何查看源代碼

如果你想看，在網頁中，單擊右鍵，然后選擇查看“源文件”或者醒看頁面源代碼即可；

言

在制作網頁時，文字是最基本的元素之一。讓閱讀者更容易閱讀，短時間里獲得更多信息，是網頁創作者的目標。本篇將介紹各種文字格式標簽的使用方法。

本篇主要針對初學者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。

標題文字

在網上瀏覽時經常看到一些標題文字，用來對應章節劃分，它們以固定的字號顯示，總共有6種級別的標題，從 h1 至 h6 依次減小，如下圖：

html 代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2>這是標題 2</h2>
<h3>這是標題 3</h3>
<h4>這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>

標題對齊方式可以使用 align 屬性，分別有三個屬性：

left —— 左對齊
center —— 居中對齊
right —— 右對齊

如下圖：

html代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<h1>這是標題 1</h1>
<h2 align="left">這是標題 2</h2>
<h3 align="center">這是標題 3</h3>
<h4 align="right">這是標題 4</h4>
<h5>這是標題 5</h5>
<h6>這是標題 6</h6>
</body>
</html>

文字格式標簽

除了標題，網頁中普通文字也是不可缺少的，而各種文字效果可以使網頁更加漂亮。

只需在<body>和</body>之間輸入文字，就會直接在頁面中顯示，如何設置這些文字的格式，這里使用<font>標簽，下面將逐一介紹各種文字格式用法。

一、設置字體、字號、顏色 —— <font> 標簽

<font> 標簽在HTML 4 中用于指定字體、字體大小和文本顏色，但在HTML5 中不支持。

face 屬性：字體類型
size 屬性：字體字號大小
color 屬性：字體顏色

html代碼：

<html>
<body>
<div><font face="宋體">字體</font></div>
<div><font size="5">5號字體</font></div>
<div><font color="red">顏色</font></div>
<div><font size="5" face="arial" color="blue">一起使用</font></div>
</body>
</html>

在html5中不建議使用，請用 css 樣式代替。

二、粗體、斜體、下劃線、刪除線—— strong、em、u、del

效果如下：

html代碼：

<!DOCTYPE html>
<html>
<body>
<p>這是普通文本 - <strong>這是粗體文本</strong>。</p>
<p>這是普通文本 - <em>這是斜體</em>。</p>
<p>這是普通文本 - <u>這是下劃線</u>。</p>
<p>這是普通文本 - <del>這是下劃線</del>。</p>
</body>
</html>

注：html 5 和 html 4 相關標簽存在巨大差異，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 標簽，已不建議使用，關于各種差異，可自己了解下就可以了。

3、上標和下標 —— sup、sub

效果如下：

html代碼：

<html>
<body>
<p>
普通文本 <sup>上標</sup>
</p>
<p>
普通文本 <sub>下標</sub>
</p>
<p>
數學公式 X<sup>3</sup> + 5X<sup>2</sup> - 5 = 0
</p>
<p>
數學公式 X<sub>1</sub> - 2X<sub>1</sub> = 0
</p>
</body>
</html>

4、空格——

一般在網頁中輸入文字時，在段落中明明增加了空格，卻在頁面中看不到，這是因為在html中，瀏覽器本身會將2個句子之間的所有半角空白僅當做一個空白來看待。所以在這里使用空格符代替，每個空格符代表一個半角空格，多個空格可以使用多次。

html代碼：

由于頭條不顯示空格字符，所以用圖片代替

效果：

5、其它特殊字符

除了空格字符，在網頁中還有一些特殊字符也需要使用代碼來代替，一般情況下，特殊字符由前綴 “&” 開始、字符名和后綴 “;” 組成，和空格符類似。如下表

特殊字符有很多，這里只列出一些例子，具體自己搜索了解下。

段落

在網頁中要把文字有條理地顯示，需要使用到段落標簽，下面介紹一些與段落相關的標簽。

段落標簽——p

在網頁中，通過 <p>定義為一個段落。

html代碼：

<html>
<body>
<p>這是段落。</p>
<p>這是段落。</p>
<p>這是段落。</p>
<p>段落元素由 p 標簽定義。</p> 
</body>
</html>

效果：

換行標簽——br

在寫文字時，除了自動換行外，換可以使用<br>標簽強制文字換行，這個和 p 段落標簽不一樣。段落標簽的換行是隔行的，而br不是，時2行文字更加緊湊。

html代碼：

<html>
<body>
<p>
第一個段落<br />換行1<br />換行2<br />換行3<br />最后一行.
</p>
<p>
第二個段落 <br />換行1<br />換行2<br />換行3<br />最后一行.
</p>
</body>
</html>

效果如下：

如果不想文字被瀏覽器自動換行，可以使用<nobr></nobr>標簽處理，如下圖：

改行文字不會被自動換行，會看到出現橫向滾動條。

保留原始排版方式——pre

在網頁制作中，有時需要保留一些特殊的排版效果，這是使用標簽控制就會很麻煩，使用<pre>標簽就可以保留文本的格式排版效果。如下圖：

html代碼：

<html>
<body>
<pre>
這是
預格式文本。
它保留了      空格
和換行。
</pre>
<p>pre 標簽很適合顯示計算機代碼：</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
<p>這是一個ok效果</p>
<pre>
  O O    k  K
 O   O   K K
  O O    K  K
</pre>
</body>
</html>

其它標簽

右縮進—— blockquote

使用<blockquote>可以實現文字段落縮進，每使用一次，段落就縮進一次，可以嵌套使用。

實例代碼：

<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
請注意，瀏覽器在 blockquote 元素前后添加了換行，并增加了外邊距。
</body>
</html>

效果如下：

請注意，瀏覽器在 blockquote 元素前后添加了換行，并增加了外邊距。

水平線——hr

在段落和段落之間加上一行水平線，將段落隔開。如下效果：

html代碼：

<html>
<body>
<p>hr 標簽定義水平線：</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
<hr />
<p>這是段落。</p>
</body>
</html>

文字標注——ruby

在網頁中可以通過添加對文字的標注來說明某段文本。

效果如下：

html代碼：

<!DOCTYPE HTML>
<html>
<body>
<p>ruby 使用語法：</p>
<ruby>
 被說明的文字 <rt> 標注 </rt>
</ruby>
</body>
</html>

其它標簽——var、code、kbd等

<dfn>	定義一個定義項目。
<code>	定義計算機代碼文本。
<samp>	定義樣本文本。
<kbd>	定義鍵盤文本。它表示文本是從鍵盤上鍵入的。它經常用在與計算機相關的文檔或手冊中。
<var>	定義變量。您可以將此標簽與 <pre> 及 <code> 標簽配合使用。
<cite>	定義引用。可使用該標簽對參考文獻的引用進行定義，比如書籍或雜志的標題。

總結

本篇介紹了大部分常用的文本格式標簽，在制作網頁時會經常使用到。如何掌握這些標簽使用，很簡單，可以使用文本編輯器或類似w3cshool 在線可編輯預覽的工具，親手寫一寫，熟悉每個標簽的用處，無需死記硬背，關鍵在于理解。

最后，感謝您的閱讀及關注，祝你學習愉快。

上篇：前端入門——HTML的發展歷史

下篇：前端入門——html 列表

在線咨詢

上一篇：第12天 - 16天搞定前端，CSS的邊距，內外有別？
下一篇：官宣！光電煙火秀將于今晚7點半在339天府熊貓塔上演！

您的項目需求

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

整合營銷服務商

6.HTML 標題、段落和文本格式

標題（Headings）

使用實例：

段落（Paragraphs）

使用實例：

文本格式

加粗（Bold）

使用實例：

斜體（Italic）

使用實例：

下劃線和刪除線

使用實例：

上標和下標

使用實例：

結論

言

目錄

標題文字

文字格式標簽

段落

其它標簽

總結

您的項目需求