无论您是寻找餐饮推荐、订购杂货、阅读您最喜爱的博客，还是购买节日礼物，互联网都是我们获取信息和便利的首选。自然地，最好的公司能够在潜在客户走进大门之前通过专业和无缝的网站吸引他们的注意力。谈论成都网站建设很容易，但如果您是小企业主或初出茅庐的企业家，则很难知道从哪里开始。幸运的是，我们已经将如何编写网站代码的过程分解为几个简单的步骤。在我们深入探讨之前，我想花点时间回答许多初次建站者遇到的两个常见问题。
答：这取决于您网站的复杂程度。例如，与构建一个收集用户送货信息和处理付款的在线订购门户相比，启动包含您公司地址、联系信息和社交媒体帐户链接的基本主页所花费的时间要少得多。
但是，仅仅因为您在开始时节省了时间并不意味着不值得使用更高级的功能。这取决于您的业务。如果您只是想吸引客流量到您的商店，那么在线订购就没有意义。
也就是说，您可能会错过那些不想开车去实体店但会通过您的网站购买的客户。如果您没有足够的带宽将商品运送给您的客户，那么这是继续创建电子商务网站的另一个很好的理由。
简单的回答：没有。虽然在Internet的早期每个人都在手动编码他们的网站，但现在许多网站都是使用内容管理系统 (CMS)构建的。CMS通过提供可视化界面来构建网页和构建您的网站，从而消除了编码的需要。许多CMS提供拖放功能，以便您可以轻松地将元素（例如按钮）放置在页面上您想要的位置。CMS模板库甚至可以帮助创建无需编码即可兼容所有设备类型的响应式网站。
我们的团队编制了一份最佳CMS列表，如果您不想使用自定义编码路线，我建议您阅读这些内容。如果您准备好学习一些代码，让我们一起完成这个过程。
代码编辑器是新开发人员的绝佳工具，因为它们提供了许多使我们的生活更轻松的功能。例如，Visual Studio Code（我的选择）将提供语法建议，这样您就可以避免简单的拼写错误导致代码出现问题。最重要的是，它会自动完成HTML的结束标记，并为您的文件添加视觉标记，以便您可以轻松区分不同的代码片段。
您可以在下面看到常规文本编辑器和代码编辑器之间的区别。代码在两个文档中的工作原理相同，但是一个比另一个更容易一目了然。
正如我之前所说，Visual Studio Code是我的首选工具，但也有许多免费的代码编辑器可供您选择。Visual Studio Code具有向编辑器添加额外功能的扩展（例如从深色模式切换到浅色模式）和不断创建更多功能的专用用户群，但最重要的是您拥有用于这些后续步骤的代码编辑器。品牌并不重要。
注意：我将分享来自Visual Studio Code的屏幕截图，因此当我们在下一步深入编码时，可以很容易地使用这个工具。
HTML代表超文本标记语言。如果这现在没有意义，请不要担心。少关注定义，多关注这张图片：我们正在盖房子。最自然的起点是地基、墙壁和屋顶，因为在您担心室内装饰或油漆之前，每个房子都需要这些。
使用HTML，我们能够为我们的网站构建这种结构。这是我在领导HTML和CSS培训时使用的一个比喻，因此我们也将在本教程中重新使用它。
既然我们拥有适合这项工作的正确工具并了解我们的目标，那么是时候深入探讨您来这里的原因了：编码。
创建HTML文档。
我们所有的编码都将发生在我们保存到本地机器的不同文件中。我们将创建的第一个文件是我们的HTML文档。首先，为您的网站文件创建一个新文件夹。由于我正在演示，我创造性地将我的命名为“演示”。
现在在代码编辑器中打开该文件夹。接下来，创建一个名为“index.html”的文件，我们现在已经准备好了第一个HTML文件。请注意，您不需要将文件命名为“index”，但需要匹配“.HTML”文件扩展名。这会告诉我们的计算机（以及后来的网络浏览器）这是一个HTML文档，而不是JPG、PDF等。
我们的文件目前是空白的，所以让我们添加HTML文档结构。我已经在下面的代码片段中列出了所有内容，因此您可以复制并粘贴到您的文件中（或写出来）。
让我们回到上一节的比喻。我们现在有了房子的结构。但是您可能已经注意到——就像剪贴画中的房子图形一样——我们的HTML是统一的并且没有颜色。我们可以看到所有这些，但很明显，与默认显示相比，HTML可以完成更多的工作。我们将求助于CSS来为我们的“房子”增光添彩。
CSS代表层叠样式表。如果您不熟悉CSS，我建议您从我们的CSS指南开始，复习属性、语法、选择器和特异性的细节。我们将在下面介绍如何实现 CSS。
创建CSS文档。
正如我们创建“index.html”文件一样，我们现在将创建“style.css”文件来存储我们的CSS规则。同样，文件的名称无关紧要，但您必须包含“ .CSS”扩展名。
添加CSS规则。
现在，我们将专注于向我们的CSS文件添加一条规则。在这种情况下，我希望所有段落都显示为红色文本。
选择器“p”告诉CSS我们要定位HTML中的所有段落并应用方括号 ({}) 中列出的属性。在这种情况下，我们有一个属性“颜色”，我们已将其设置为值“红色”，但我们可以根据需要在规则下添加任意数量的属性。
在将此CSS规则添加到文件后，您可能会注意到页面上没有任何反应。那是因为我们需要将我们的HTML和CSS链接在一起，我们将在下一节中展示。
为了让我们的CSS影响我们的HTML，我们需要告诉浏览器应用 CSS。执行此操作的过程很简单。我们只需要添加一个元素到我们的。
我们又一次看到了HTML属性的作用。添加没有“rel”和“href”属性的 标签不会产生任何结果，因为浏览器不知道链接类型（样式表）和链接到的位置（style.css）。请注意，如果您以不同方式命名CSS文件，则应更新引号 (" ") 内的 href 属性值以匹配您的文件名。否则，浏览器将无法找到您的样式表。
更多CSS规则
现在我们的HTML和CSS已链接，我将添加更多规则以使我们的页面看起来不那么普通。
为了理解网络响应，我们将再次使用比喻。一方面，我们有一个池塘。池塘里的水总是一样的形状，因为池塘的边缘永远不会改变。另一方面，我们有一个流。溪流的边缘在流动时总是在变化，水总是在膨胀和缩小以适应这种形状。
我们可以用同样的方式来思考静态网站和响应式网站。静态网站不会对浏览器大小的变化做出反应。它的内容将始终是相同的形状。同时，响应式网站不断适应不同的浏览器和屏幕尺寸。
为什么响应很重要？根据StatCounter的数据，到2023年，移动流量现在占互联网所有流量的85%以上。如果您的网站无法容纳从小屏幕到智能电视的流量，那么您就会失去潜在客户。此外，谷歌将移动友好性列为其在搜索结果中显示页面的决定的一部分，因此您也可能会失去有机流量。
到现在为止，我们已经创建了一个静态网站。默认情况下，文本元素将调整大小，但其他元素将保持其原始形状和大小，无论显示如何变化。在下方，我们可以看到笑脸的右侧被截断了，因为视口现在比其 300 像素的固定宽度窄（请注意，我们的段落已将其文本换行以适合）。
我们将（你猜对了）带回我们的朋友这个部分的比喻。想象一下，您正站在街上阅读砖墙上的吉他课程传单。你感兴趣，传单上说要拨打一个号码进行注册。
这就是我们认为的简单网站。它显示有关某事的信息，甚至可能要求您采取行动，但阅读是您（用户）在网站上可以做的事情的范围。请记住，您需要拨打它在您手机上提供给您的号码。
我们回到了砖墙。现在，有一个关于吉他课程的标志和一扇门，如果您有兴趣，可以进入录音室进行注册。墙上仍在显示信息，但现在您可以与其互动以采取下一步行动。这就是我们认为的交互式网站。看看这个名字是从哪里来的？
JavaScript简史课
到目前为止，我们一直在构建一个简单的网站。我们正在向我们的用户显示信息，但这就是网站所做的范围。有一次，早期的互联网也是如此。您可以从各种网站访问信息，但网站无能为力。
JavaScript于1995 年发明，旨在为网页添加交互性。JavaScript是与HTML和CSS相结合的第三种Web开发基础语言。到目前为止，我们学习的这两种语言都是标记语言，但JavaScript是一种编程语言。编程是计算机根据预定义的逻辑执行操作的过程。
例如，假设用户点击了我们的笑脸。网页随后会在注册该面孔已被单击时打印问候语。该页面知道这样做是因为我们已经告诉它要注意这种交互并以特定方式做出反应。
你的第一个JavaScript程序
不幸的是，深入研究JavaScript的语法和机制超出了本课的范围。相反，我将提供一个预先编写的程序，以便我们可以专注于在我们的网站上实施它。
如果您已经做到了这一点，那么请花点时间祝贺自己。您已经从以前可能从未编写过代码到拥有响应式和交互式网站的基础。我们已经涵盖了HTML和CSS中不同概念之间的许多基础知识，甚至还涉及了编程。这是您Web开发之旅中重要的第一步。
当然还有很多东西要学。当您继续构建您的Web开发工具箱时，我已经概述了几个需要关注的领域。
HTML和CSS比我们今天介绍的要复杂得多。这些语言构成了您网站的可见面孔，对您的用户体验至关重要。成都网站建设已经将基础指南重新链接到下面的HTML和CSS，并添加了一些指向更高级CSS主题的链接。
