HTML 標記

HTML 元素可讓您透過為特定元素類型指定預設樣式並同時自訂大量元素來開始設計過程。隨著您設計網站的進展，這些預設樣式可以替換為類別和/或組合類別。

方便提示： 使用 HTML 元素對於在 Webflow 中的富文本欄位中自訂元素至關重要。要了解更多信息，請參閱我們有關富文本字段的教程。

透過本教程，您將了解：

1. 哪些元素可以設定樣式
2. 如何個性化主體（所有頁面）元素
3. 如何自訂標題元素
4. 如何設定段落元素的樣式
5. 如何設定連結元素的樣式
6. 如何建立以標籤為導向的風格指南

哪些元素可以設定樣式

元素以粉紅色表示，將它們與藍色類和綠色態區分開來。以下是具有可樣式元素的元素類型的彙編：

• 正文（所有頁面）
• H1 標題
• H2 標題
• H3 標題
• H4 標題
• H5 標題
• H6 標題
• 段落
• 連結（文字連結、按鈕、連結區塊）
• 影像
• 無序列表
• 有序列表
• 項目清單
• 標籤
• 強（內嵌粗體文字）
• Ems（內嵌斜體文本）
• 塊報價
• 圖（富文本）
• 圖片標題（富文本）
• 所有程式碼

所有其他元素都需要使用樣式 類別 和/或 合併班級.

如何個性化主體（所有頁面）元素

配置排版樣式 正文（所有頁面）元素 將流向整個網站的所有版面。這裡，「正文」表示整個網站頁面，包含所有其他頁面元素。最好在頁面上定義預設字體系列、字體大小和行高。 正文（所有頁面） 元素並替換 H1-H6 標題元素上的這些樣式。

您有兩種方式來設定樣式 正文（所有頁面） 元素：

• 選擇 身體 元素並選擇 正文（所有頁面）元素 來自 選擇器字段 下拉式選單中 風格面板
• 選擇任意元素並選擇 正文（所有頁面）元素 從繼承選單中 風格面板 — 所有元素都繼承樣式 正文（所有頁面）元素

為了達到 正文（所有頁面） 元素：

1. 選擇 身體 任何頁面上的元素
2. 輸入 選擇器字段 在裡面 風格面板
3. 選擇 正文（所有頁面） 下拉清單中的元素

若要使用繼承選單觀察並選擇已套用類別的元素上的標籤：

1. 選擇具有類別的元素
2. 點擊上方的繼承選單鏈接 選擇器字段 在裡面 風格面板  
3. 選擇標籤（例如，所有段落）
4. 應用程式樣式

所做的修改 正文（所有頁面） 作為起點，標記標籤和類別之間的顯著對比 - 標籤使您能夠確定元素分組的預設樣式。 

選擇 正文（所有頁面） 樣式變更意味著所有新的和現有的元素都將從 正文（所有頁面） 元素。這 正文（所有頁面） 允許您定義預設樣式，例如字體、字體大小、字體顏色、行高和預設背景顏色。 

您可以利用類別來取代網站上的任何預設樣式。

如何自訂標題元素

當您插入一個 標題 到您的網站，它採用在 正文（所有頁面） 元素。 （不要忽略 - 您可以使用樣式上方的繼承選單來驗證樣式繼承 選擇器字段 在裡面 風格面板.)

如果您希望覆蓋樣式而不將該類別新增至每個標題，請輸入 選擇器字段 並選擇 所有 H1 標題。這將表明字體仍然是從正文（所有頁面）繼承的，這是預期的。因此，在更改字體時，您的所有 H1 都會更新。 

例如，如果您配置了預設字體，則將字體樣式變更為 Tahoma 正文（所有頁面）標籤 將自動將 Tahoma 套用至所有新的 H1 標題。如果你調整字體 所有 H1 標題標籤 到 Playfair，那麼所有 H1 標題都將顯示在 Playfair 中。將類別新增至特定的 H1 標題並將字體設為 Raleway 會將特定的 H1（以及使用相同類別的其他標題）變更為 Raleway。

記住： 元素在層次結構中尋找最接近的樣式資訊。

一個元素，例如 H1，可能有一個指定其樣式的類別。如果班級缺乏某些造型細節，H1 將參考下一個等級並採用來自班級的造型提示 所有 H1 標題標籤，反過來，它遵循的樣式 正文（所有頁面）標籤.

記住： 標籤有助於定義預設樣式，而類別則可以覆寫這些預設樣式。

有用的提示： 標題的版面樣式通常與段落樣式不同。在所有標題標籤 (H1-H6) 中使用相同的字體系列是常見的做法。

如何自訂段落標籤

選擇任何段落（沒有特定類別）並訪問 所有段落標籤 在裡面 風格面板 進行風格調整。

例如，您可以透過以下方式修改行高：

1. 訪問 高度 下的字段 版式
2. 調整值（例如，調整為 1.6）
3. 透過鍵入連字符或從單位下拉清單中選擇一個，將其轉換為無單位值

專家提示： 無單位確保行高與字體大小成比例調整。

您可以使用 所有段落標籤 在段落之間插入空格，類似於在鍵盤上按下“Return”或“Enter”的效果。行高可防止行與行之間的文字合併，而底部邊距允許段落之間的垂直間距。

如何個人化連結標籤

要添加一個 關聯 到您的網站，您可以：

• 從中選擇它 新增元素面板
• 雙擊畫布上的現有文本
• 突出顯示所需的連結文字並建立嵌套文字鏈接

若要對連結進行預設樣式變更：

1. 訪問 選擇器字段
2. 選擇 所有連結 標籤
3. 修改文字裝飾或字體顏色

新增的任何新連結都將繼承在 所有連結標籤.

批判的： 套用於的樣式 所有連結標籤 影響文字連結之外的各種連結類型。例如，對字體顏色進行的更改 所有連結標籤 與 懸停狀態 啟動將影響所有連結的元素，例如按鈕。如果需要，您可能需要覆蓋按鈕類別上的這些懸停狀態樣式。

標籤有利於設定全域預設值，但如果管理不當，可能會產生廣泛的影響。請記住直觀地查看受基於標籤的樣式調整影響的元素。

如何設計基於標籤的樣式指南

樣式指南可讓您在設計過程的早期建立預設的網站樣式。 Webflow已經生產了 基於標籤的風格指南 您可以複製它，透過精美的風格指南快速啟動您的新網站。

筆記： 如果您希望將其保密且不可在線搜索，請記住保護樣式指南的內容或阻止搜索引擎對其建立索引。

如何製作簡單的風格指南模板

樣式指南可作為專用頁面，其中對常見元素進行結構化和樣式設置，以便輕鬆預覽預設樣式。您可以建立風格指南模板，以加快為您製作的每個新網站建立風格指南。

若要建立樣式指南範本：

1. 建立單頁網站
2. 在頁面上包含一個部分
3. 為每個元素添加至少一個帶有 HTML 標籤的實例以進行樣式設置
4. 避免對這些元素應用類

要在新網站上使用此範本：

1. 在您的新網站上開發一個新頁面
2. 為頁面命名（例如“風格指南”）
3. 將頁面另存為草稿
4. 前往模板網站
5. 選擇並複製該部分
6. 將其貼到新網站的「風格指南」頁面上
7. 選擇每個元素並相應地設定其 HTML 標籤的樣式

必不可少的： 不要忽視造型 正文（所有頁面）標籤 - 由於您無法複製/貼上頁面的主體，因此您需要透過設定新網站的「樣式指南」頁面的樣式來設定其樣式 正文（所有頁面）標籤。請參閱 Body 元素的其他詳細資訊。