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 标题。这将表明字体仍从 Body（所有页面）继承，这是预料之中的。因此，更改字体时，所有 H1 都将更新。 

例如，如果您的默认字体配置为将字体样式更改为 Tahoma 正文（所有页面）标签 将自动将 Tahoma 应用于所有新的 H1 标题。如果您调整 所有 H1 标题标签 到 Playfair，则所有 H1 标题都会显示在 Playfair 中。向特定 H1 标题添加类并将字体设置为 Raleway 会将该特定 H1（以及使用相同类的其他 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 元素的更多详细信息。