为什么你应该学习编码（一点点）：HTML 和 CSS 简介

已发表: 2021-08-15
注意：在对商店代码进行任何更改之前，请务必备份您的站点。

开设在线商店从未如此简单。 借助 Shopify 等平台，您可以在几个小时内购买主题、上传产品并销售给您的客户！ 进入门槛很低，几乎任何人都可以做到。

虽然上手很容易，但也很容易将这种简单性视为理所当然。 最终，您会想要在您的商店中添加或更改某些内容，并且您会意识到您的主题不支持它。 开发人员并不便宜，你最不想做的就是为了你自己可以做的事情而付钱给别人。

如果我告诉您，您可以预先花一点时间来学习网站工作原理的基础知识，并且以后可以节省一些时间和金钱，该怎么办？

到本文结束时，您应该了解 HTML 和 CSS 的基础知识，并且知道足以开始在您自己的商店中进行修补。

所以花几分钟准备好，让我们开始吧！

什么是 HTML 和 CSS？

HTML 代表超文本标记语言。 它是最古老和最重要的网络基础语言之一。 它负责在这个页面上构建和呈现内容！

CSS 代表级联样式表。 它负责提供 HTML 的样式和格式。

总之，这些是任何网站的必要构建块。 在本文中，我将向您介绍基础知识，并向您展示如何编码和设计您的第一个网页。

由于我是 Bill Murray 的忠实粉丝（他不是），我们将在网络上为 Bill 创建我们自己的神殿。

首先，让我们深入研究 HTML 和 CSS，真正全面了解它们的力量和能力。

网站剖析

通过将 HTML 和 CSS 与房屋的结构部分进行比较，我们可以轻松理解它们是如何协同工作的。

每栋房子的墙壁后面都有一个负责其结构的框架。 把 HTML 想象成一个房屋框架。 它负责网站的结构。

坚持我们的房子类比，CSS 负责诸如油漆颜色、餐厅的尺寸、木地板的颜色以及餐桌的形状和风格之类的事情。

让我们看看一些基本的 HTML 标记并逐行浏览它。

HTML 标记示例

文档类型

<!DOCTYPE html>标签帮助浏览器知道我们要使用的文档类型是 HTML。

头

<head>标签内是我们存储文档所有元数据的地方。 这些数据包括标题、样式 (CSS)、描述等内容。 此数据不会显示给最终用户，但浏览器会使用它来确定文档应具有的标题或在向最终用户显示时应使用的样式。

广告

在HTML 页面的<head>中找到的其他一些元素可能包括作者信息、页面描述或指向用于收藏夹图标（浏览器选项卡中的小图标）的图像的链接。

网站图标示例

身体

<body>标签包含网站的所有标记（代码）。 这是最终用户在查看我们的网站时会看到的唯一代码。

建立网站所需的工具

要开始编写 HTML，您可能认为需要一些花哨的、昂贵的软件，但实际上并不需要。 事实上，你已经拥有了你需要的东西。

如果您使用的是 PC，请打开 NotePad 程序。 如果您使用的是 Apple Mac，请打开 TextEdit。

现在你已经打开了你的文本编辑程序，跟着我一起来扩展上面的基本 HTML 标记。 复制（Windows 上的 Ctrl + C / Mac 上的 Cmd + C）并粘贴（Windows 上的 Ctrl + p / Mac 上的 Cmd + P）以下代码到您的文本编辑器中。

<!DOCTYPE html>
<html>
<头>
<title>页面标题</title>
</头>
<身体>
<h1>世界你好！</h1>
<p>这是我们的第一段。</p>
</正文>
</html>

将此文件保存在您的桌面上并在您的 Web 浏览器中打开它。 您现在应该会看到您的代码被浏览器翻译或呈现，它应该如下所示：

代码呈现示例

标题元素 (<h1>)

<h1>标签用于引起对某些文本的注意和定义。 在本例中，我们需要文本“Hello World！” 比后面的文字更大更突出。

开箱即用的 HTML 有六个不同的标题标签可供您使用：h1、h2、h3、h4、h5 和 h6。

HTML 标题示例
每走一步，字体大小就会变小； H1 最大，H6 最小。 默认情况下，它们会有一些边距（或它们周围的间距）以将它们与页面上的其他元素分开并为用户提供视觉层次结构。

花一点时间尝试更改标题、标题和/或段落标签。 进行更改后，保存它，然后刷新浏览器。 恭喜，您刚刚编辑了第一次 HTML！

不过看起来很无聊，对吧？

让我们为我们的页面添加一些样式并了解更多关于 CSS 的真正力量。

为了给这些 HTML 元素添加我们自己的样式，我们需要在文档的<head>中添加一个<style>标签。

这个标签包含了我们所有的 CSS。 将<style>标签内的内容视为浏览器的样式指南。

在新行的<title>标签下，添加如下样式标签：

<title>页面标题</title>

广告

<样式>

 </style>

在 style 标签内，我们可以输入我们所有的声明。 CSS 声明由一个属性和一个值组成。

CSS 声明

让我们将<h1>的颜色与文本的其余部分不同，因为它是最重要的，我们希望它脱颖而出。 在<style>标签之间添加以下内容，保存文件，然后再次刷新浏览器。

<样式>
h1 { 颜色：蓝色； }
</style>

您现在应该希望看到看起来像这样的东西！ 你会注意到我们的“Hello World!” 文字现在是蓝色的。 很简单吧？

对 H-Tag 的 CSS 修改

在那里，你已经做到了！ 您已经成功地使用 CSS 更改了 HTML 元素的样式。 我们刚才玩的高兴吗？

将图像添加到我们的页面

您可以在页面上包含许多其他元素，但任何网站上最突出的元素之一就是全能图像。 我们可以通过包含像这样标记：

<img src= "https://www.fillmurray.com/400/500" >

注意：为了演示，我使用了一个名为 www.fillmurray.com 的图像占位符服务。 如果您愿意，可以在本地计算机上使用图像。

从网站抓取图片的另一种（专业提示）方式：在您想要使用的网站上找到一张图片，然后右键单击它。 单击复制图像地址，该图像的 URL 将在您的剪贴板中。 根据您的浏览器，措辞可能略有不同。 我正在使用谷歌浏览器。 我不建议过度使用盗链，但对于这个演示来说，这没什么大不了的。

如何从网站保存图像

复制并粘贴此图像元素并将其放在您的段落标签下，这样您的完整代码块看起来像我的：

<!DOCTYPE html>
 <html>
 <头>
 <title>页面标题</title>
 <样式>
 h1 {颜色：蓝色；}
 </style>
 </头>
 <身体>
 <h1>世界你好！ </h1>
 <p>这是我们的第一段。 </p>
 <img src= “ https://www.fillmurray.com/400/500 ” alt=”比尔默里的图像” >
 </正文>
 </html>

保存您的文件并重新加载浏览器，您现在应该看到如下内容：

如何开始编写您的第一个网站

如果您正在注意，您会注意到<img>标签上的另一个属性， alt=”Bill Murray 的图像” 。 由于浏览器解密代码并且无法像您和我一样看到渲染的输出，因此它需要某种方式来了解它所显示内容的上下文。

广告

通过向我们的图像添加 ALT 标签（替代文本），我们可以告诉浏览器我们图像的主题是关于什么的。

这对于 SEO（搜索引擎优化）也非常重要，更重要的是，使用屏幕阅读器为盲人用户朗读本文。

但是链接呢？

不覆盖链接的 HTML/CSS 介绍将是不完整的！ 当您构建网站时，您会希望能够链接到外部资源或您自己网站中的其他内部页面。

我们来谈谈锚元素。 锚元素的真正魔力实际上是它的 href 属性。 让我们通过添加到 Bill 的 Wikipedia 页面的链接来演示锚标记的结构。

<a href="www.google.com" >阅读他的维基百科条目</a>

这段代码告诉浏览器，当用户点击文本：“阅读他的维基百科条目”时，将他们带到 www.google.com。

让我们在标题元素下添加这段代码，这样我们的代码块现在看起来像这样：

<!DOCTYPE html>
 <html>
 <头>
 <title>页面标题</title>
 <样式>
 h1 {颜色：蓝色；}
 </style>
 </头>
 <身体>
 <h1>世界你好！ </h1>
 <a href= "https://en.wikipedia.org/wiki/Bill_Murray">阅读他的维基百科条目</A>
 <p>这是我们的第一段。 </p>
 <img src= “https://www.fillmurray.com/400/500” alt= “比尔默里的形象” >
 </正文>
 </html>

点击保存并刷新浏览器，希望你的看起来像我的。

编码基础

跨越终点线

我继续向比尔默里致敬，这是我的最终结果。 我将在下面介绍一些添加的样式。

鼓声请...

HTML 和 CSS 的基础

现在，您可以看到这不是什么值得大写的东西，但这是设计使然。 这是冰山的一角，当谈到如何页面可能看起来还是样式。 我想让事情保持简单，以便您了解以下每种样式方法的作用。

广告

让我们跳到我必须添加的小 CSS 才能让我们走到这一步。

造型身体：

首先，在页面正文中，我添加了：

身体 {
 背景色：#eee;
 字体系列：Helvetica、Arial、sans-serif；
 文本对齐：居中；
 边距：25px；
 }

背景颜色
我使用十六进制颜色值#eee 将页面的背景颜色设置为非常浅的灰色。 您可以在 MOZ 上了解有关这些的更多信息并查看一些示例。

字体系列
我想更改 Times New Roman 浏览器使用的默认字体。 为此，我选择 Helvetica 作为我的第一选择（如果用户在他们的计算机上安装了该字体），Arial 作为我的第二选择（如果用户没有 Helvetica，它将默认为 Arial），并作为最终备份，一种基本的无衬线字体。

文本对齐
我选择将页面上的所有文本居中对齐。 对于左和右等值还有其他几个选项，但我认为它看起来最好居中。

利润
我在文档正文中添加了一点边距，以给它一些喘息的空间。

造型我们的形象：

最后给Bill的美颜造型，呃，我是说形象元素

图像{
 边框：10px 实心 #41bcd6；
 框阴影：2px 5px 5px #999;
 填充：10px；
 边框半径：5px；
 }

我没有做太多事情，但想让比尔的照片在页面上有一些存在感。

边境
我在图像周围添加了一个 10 像素的边框。 #41bcd6 是另一个十六进制颜色值，它呈现浅蓝色（我的秘密潜意识 Steve Zissou 颜色主题的一部分）。

盒子阴影
我想给图像一个 3D 的感觉，所以我给它添加了一个光影。 box-shadow 属性接受决定阴影长度、模糊度和颜色的像素和颜色值。 要了解有关 box-shadow 声明的更多信息，Moz 在此处为您详细介绍。

填充
为了使图像看起来更像一个相框，我在它和边框之间添加了 10px 的填充。

边界半径
只是为了说明 CSS 的一项更酷的功能，我使用 border-radius 使图像的角变圆。 当我开始构建网站时，没有任何类似的东西存在，在网络上制作圆角实际上非常具有挑战性。 从那时起，我们已经走了很长一段路，现在很简单。 它接受一个像 px 或 ems 这样的值，在这里我选择通过将值设置为 5px 来对其进行四舍五入以引起注意。

结论

在整篇文章中，我们共同学习了网站的基本结构。 我们还学习了一些简单的 HTML 和 CSS，它们最终变成了一个非常惊人的一页小作品，向一代人中最伟大的演员之一致敬

不过，严肃地说，我希望您能够跟随我并建立您的第一个基本网站。 现在，如果 Bill Murray 不是您最喜欢的演员，我挑战您编辑此代码以展示您最喜欢的演员、乐队或任何您喜欢的东西。

如果您需要随时参考此代码，请返回阅读本文，或者为方便起见，我已将其放在 CodePen 上。

有这么多有趣的事情，你可以只用HTML + CSS做。 以下是一些很好的资源，可帮助您扩展学习：

广告

  • Code Academy：100% 免费的 HTML/CSS 课程介绍
  • CSS Zen Garden：网络上第一个真正让我“点击”的例子，帮助我意识到你可以拥有 100 个不同外观的网站，它们都使用相同的 HTML 标记
  • CSS 动画
  • 仅使用 CSS 的蒙娜丽莎
  • 仅使用 CSS 的动画哈士奇狗
  • CodePen：CodePen 是一个在线工具，用于现场测试和展示您的 HTML、CSS 和 JavaScript 代码

我们在本文中只触及了皮毛，所以我鼓励您阅读更多内容，参加一些在线课程，并不断提升您的知识！