HTML标记

HTML标记允许您通过为特定元素类型设置默认样式并一次性为大量元素设置样式来启动设计过程。当你继续设计你的网站时，这些默认样式可以被类和/或组合类覆盖。

专家提示:HTML标记对于Webflow中富文本字段中的元素样式化至关重要。为了了解更多,查看我们关于富文本字段的课程．

在这节课中，你将学到:

1. 什么标签可以被样式化
2. 如何样式的主体(所有页面)标签
3. 如何样式标题标签
4. 如何样式段落标签
5. 如何样式链接标签
6. 如何创建一个基于标签的风格指南

什么标签可以被样式化

标记被标记为粉红色，以区别于蓝色类和绿色状态。下面是带有可设置样式的标签的元素类型列表:

• 身体(所有页)
• H1标题
• H2标题
• H3标题
• H4标题
• H5标题
• 编辑标题
• 段
• 链接(文本链接、按钮、链接块)
• 图像
• 无序列表
• 有序列表
• 列表项
• 标签
• 强(内联粗体文本)
• Ems(内联斜体文本)
• 块引用
• 图(富文本)
• 图标题(繁体文字)

所有其他元素都需要使用样式类和/或组合类．

如何样式的主体(所有页面)标签

控件上设置排版样式身体(所有页)标签会波及到整个网站的所有排版。在这里，“主体”指的是整个网站页面，它包含页面上的所有其他元素。最好设置默认值字体，字体大小,行高在主体(所有页面)标记覆盖那些样式H1-H6标题标签．

您可以设置主体(所有页面)标记在两方面:

• 选择身体元素并选择身体(所有页)标签从选择字段下拉的风格的面板
• 选择任意元素并选择身体(所有页)标签中的继承菜单风格的面板元素的样式身体(所有页)标签

访问主体(所有页面)标记：

1. 选择身体元素在任何页面上
2. 点击进入选择字段在风格的面板
3. 选择主体(所有页面)标记从下拉

使用继承菜单查看并选择一个应用了类的元素上的标记:

1. 选择一个带有类的元素
2. 控件上面的继承菜单链接选择字段在风格的面板
3. 选择标签(例如，所有段落)
4. 添加样式

你做的改变身体(所有页)是一个起点，这是标记和类之间的一个重要区别——标记允许您为整批元素设置默认样式。

如果您对样式进行更改主体(所有页面)标记的样式，则所有新的和现有的元素将继承样式主体(所有页面)标记．的主体(所有页面)标记允许您设置默认样式，如字体、字体大小、字体颜色、行高和默认背景色。

您可以使用类来覆盖站点上的任何默认样式。

如何样式标题标签

当你添加一个标题控件上设置的任何样式主体(所有页面)标记．(不要忘记-您可以使用上面的继承菜单检查样式继承选择字段在风格的面板．)

如果您希望重写样式而不必将该类添加到每个标题中，请单击选择字段并选择所有H1标题．这将显示字体仍然从Body(所有页面)继承，这是预期的。当你改变字体时，它会更新你所有的H1s。

例如，如果您的默认字体设置为Tahoma主体(所有页面)标记，新的H1标题的字体也将默认为Tahoma。但是如果你设置所有H1标题标签到Playfair字体，你的H1标题将是Playfair。如果您将一个类添加到特定的H1并将字体设置为Raleway，则该H1(以及具有该类的其他H1)将是Raleway。

注意:元素在层次结构中查找最接近的样式信息。

元素(如H1)可能有一个用于获取样式信息的类。如果类中缺少该信息，H1将查找下一层，并从所有H1标题标签它的设计灵感来自于主体(所有页面)标记．

提示:标记帮助您设置默认样式，而类允许您覆盖这些默认样式。

专家提示:标题的排版风格通常与段落风格分开。通常的做法是在每个标题标签上设置相同的字体族(H1-H6)。

如何样式段落标签

选择任何段落(没有应用类)后，您可以单击进入选择字段在风格的面板和访问所有段落标记调整风格。

例如，你可以设置一个影响每一行文本的无单位行高:

1. 点击进入高度磁场下排版
2. 调整值(例如，为1.6)
3. 通过键入连字符或从单位下拉框中选择连字符将其设置为无单位

专家提示:无单位表示行高随字体大小成比例缩放。

你也可以使用所有段落标记在段落之间创造空间，类似于键盘上的“返回”或“进入”键。行高可以确保文本不会从一行排到另一行，底部空白可以让你在段落之间创建垂直空间。

如何样式链接标签

你可以添加链接到您的网站:

• 从添加元素面板
• 双击画布上现有的文本
• 突出显示要链接的文本并创建嵌套的文字链接

更改链接的默认样式:

1. 点击进入选择字段
2. 选择所有的链接标签
3. 改变文字装饰或字体颜色

您添加的任何新链接都将继承您在所有的链接标签．

重要的是:的所有的链接标签影响文本链接以外的其他类型的链接。例如，如果您对所有的链接标签字体颜色与悬停状态选中，然后添加一个按钮元素，按钮元素将具有与任何其他链接元素相同的悬停效果。在本例中，您可能希望覆盖按钮类上的悬停状态样式。

标记对于设置默认值很有帮助，但是如果您没有跟踪使用标记的元素，它们可能会进行全面的更改，所以在更改标记样式之后一定要进行可视化检查。

如何创建一个基于标签的风格指南

样式指南允许您在设计过程早期设置站点默认样式。Webflow创建了一个基于风格指南你可以复制和粘贴用一个干净的风格指南来启动你的下一个网站。

注意:一定要密码保护或禁用搜索引擎索引如果你不想让它出现在谷歌(或其他搜索引擎)上，请查看样式指南。

如何创建自己的简单风格指南模板

样式指南作为专门的页面，其中组织常用元素并设置样式，以便于预览所有默认样式。您可以创建样式指南模板，以便为您创建的每个新站点创建样式指南更快、更有效。

创建一个样式指南模板:

1. 创建一个只有一个页面的网站
2. 在页面上添加一个部分
3. 每种至少加一个元素，该元素具有可以设置样式的HTML标记
4. 不要向这些元素添加任何类

在一个新网站上使用此模板:

1. 在新站点中创建一个新页面
2. 命名你的页面(例如，“样式指南”)
3. 将该页保存为草稿
4. 进入模板站点
5. 选择并复制该部分
6. 粘贴到你的新网站的“风格指南”页面
7. 选择每个元素并设置该元素的HTML标记的样式

重要的是:别忘了要有风格主体(所有页面)标记-因为你不能复制/粘贴一个页面的主体，你不能把它包括在你的样式指南。您可以在新站点的“样式指南”页面上选择body元素，然后选择并设置样式主体(所有页面)标记．了解更多关于Body元素的信息．