不要害怕!您不必成为在项目中使用它的代码向导。对最佳实践有一个基本的了解会给你信心，你需要查阅资料，并像专业人士一样使用魔杖。

让我们从正确使用自定义代码的技巧一开始。

在Webflow中使用自定义代码的提示

1.理解这三种主要的代码类型

你可能听说过超文本标记语言，CSS,JavaScript．让我们把它们分解成最简单的定义。

什么是HTML?

HTML由组成页面的元素组成。图像、视频、链接、按钮、标题等等都是html元素。当你从。拖动元素时添加元素在Webflow的面板中，您正在向页面添加HTML元素。

由于Webflow允许我们访问许多可用的HTML元素，所以通常不需要编写自己的HTML元素。在代码中，大多数HTML元素由包含元素名称的打开和关闭标记组成。例如，H1标题应该这样写。

<标题>你的标题< / h1 >

CSS是什么?

CSS就是它的外观。

它会影响HTML元素的样式。当你使用风格的面板在Webflow中，你是在调整元素的CSS或者它的外观。在编写CSS时，所有样式都放在一个打开和关闭样式标记内。如果目标是一个类，则以句号开始类名。这是一个CSS示例，您可以在Webflow中使用它来创建文本大纲。

<时尚>

.your-class {
-webkit-text-stroke: 2 px # 000;
｝

> < /风格

专家提示:在发布站点的类名中，Webflow将空格转换为破折号，将大写字母转换为小写字母。从一开始就在类名中使用小写字母和破折号将有助于确保它们与自定义代码中编写的方式相匹配。

JavaScript是什么?

JavaScript就是它的工作原理。

当你使用交互面板在Webflow中，你是在向网站添加JavaScript。由于JavaScript的潜力几乎是无限的，编写自定义JavaScript可以为您的网站添加许多新功能。所有JavaScript都放在打开和关闭脚本标记中。

Webflow还提供了一个更简单的JavaScript导入版本，称为jQuery。jQuery可以与JavaScript一起使用，使编写和理解变得更加容易。这是一个jQuery示例，当用户单击按钮时，您可以使用它向一个元素添加一个组合类。

<脚本>

$("。button类”).click(函数(){
$("。card类”).addClass(“card-shadow”);
})；

> < /脚本

2.添加代码时要有条理

使用自定义代码最重要的步骤之一是保持组织。当你试图保持条理时，这些是最常见的问题。

我应该在页面设置或项目设置中使用自定义代码区域吗?

这个问题的答案很简单。任何你想应用于网站上每个页面的代码都应该在项目设置中。任何希望只应用于一个或几个特定页面的代码都应该进入页面设置。

我应该在还是

map

标签部分添加代码?

大多数时候，您会想要添加JavaScript在

标记之前页或项目设置中的部分。这意味着您添加的代码将几乎位于页面的底部。如果你把JavaScript放到在标记中节中，JavaScript可能会在它所影响的项被加载之前运行，导致代码显示不出结果。CSS的最佳实践是将其添加到在标记中．

我必须发布并查看实时网站来查看我的代码的结果吗?

任何JavaScript都不会影响设计器中的元素。您需要发布来查看它在做什么。但是，如果CSS被放置在实际页面的嵌入中，您可以在设计器中看到CSS的结果。

专家提示:要使用CSS样式并在设计器中查看实时结果，请将CSS保存在嵌入在符号中的代码中。在一个页面上所做的更改将适用于网站的每个页面。

我需要为我添加的每一段新代码创建一个新的脚本或样式标签吗?

不，你可以很容易地在现有的标签中添加新的CSS或JavaScript。最佳实践是在现有代码之上或之下添加代码。在现有代码之间添加它可能会破坏代码。

我如何添加注释来跟踪我的代码正在做什么?

在CSS和JavaScript中添加注释非常有帮助，这样当您稍后返回时就可以记住代码的作用或它的目的是什么。评论不会出现在网页的设计，但他们将在代码中为您查看。

在JavaScript的脚本标记中，您可以在任意点创建一个新行，然后输入两个//和注释。

<脚本>

//你的评论在这里

> < /脚本

在CSS样式标签中，您可以在任何一行代码的上面写注释，例如下面的示例，注释以/*开始，以*/结束。

<时尚>

/*您的评论放在这里*/

> < /风格

3.对添加的代码进行测试并排除故障

在使用自定义代码时，一件小事可能会影响其他所有事情。如果缺少一个字符或位置不合适，就会导致其他代码无法工作。这可能是在项目中使用代码最具挑战性的部分之一。幸运的是，有一些工具可以使代码测试更容易。

使用代码编写软件检查代码中的错误

测试代码最简单的方法之一是使用代码编辑器。它通常会准确地告诉您是哪一行和哪一个字符导致了代码中的错误，以便您能够修复它。

使用浏览器检查网站代码

在大多数浏览器中，如果你右键单击任何站点并单击检查，你可以看到网站的代码。通过选择某些元素，您可以看到任何CSS样式是否被其他CSS样式覆盖，或者浏览器如何处理元素的样式以搜索问题。如果你点击控制台选项卡，您可以看到JavaScript中的任何错误，并找到哪一行代码是如何导致错误的。

当你知道(一点)代码时，没有什么代码会更好

理解代码的基础知识可以帮助您释放更多的潜能没有代码项目。通常只需要一个快速的谷歌搜索就能找到所需的自定义代码，这取决于知道如何在您的网站中实现该代码。

本文并没有涵盖关于代码的所有内容，但希望您能够掌握有关代码的基本知识，并在未来的项目中使用代码时更加自信。