web 入门

同一个网名

已于 2022-08-28 18:15:56 修改

阅读量106

点赞数

分类专栏：学习痕迹文章标签： html

于 2022-08-14 20:34:03 首次发布

原文链接：https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/HTML_basics

版权

学习痕迹专栏收录该内容

7 篇文章 0 订阅

订阅专栏

web概述

你的第一个网站

文件处理

一个网站由许多文件组成：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要将这些文件组合成一个合理的结构，并确保它们能够相互交流。

HTML基础知识

超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？

CSS基础知识

层叠样式表（CSS）是你用来为你的网站设置样式的代码。例如，你希望文本是黑色还是红色？内容应该画在屏幕的什么地方？应该用什么背景图片和颜色来装饰你的网站？

JavaScript基础知识

JavaScript 是一种编程语言，你用它来给你的网站添加交互功能。例如游戏、当按钮被按下或数据被输入表格时发生的事情、动态造型效果、动画等。

安装基础软件

专业人士使用什么工具？

版本控制系统，用来管理服务器上的文件，与团队合作开展项目，共享代码和资产，避免编辑冲突。现在，Git 是最流行的版本控制系统，还有 GitHub 或 GitLab 托管服务。
FTP 工具，老式 Web 托管账户，以管理服务器上的文件（Git 正越来越多地取代 FTP 用于此目的）。有大量的 (S)FTP 程序可用，包括 Cyberduck、Fetch 和 FileZilla。
自动化构建工具，如 Webpack 、Grunt 或 Gulp ，以自动执行重复性任务，如简化代码和运行测试。
库、框架等，以加快编写常用功能。一个库往往是一个现有的 JavaScript 或 CSS 文件，它提供了现成的功能，供你在代码中使用。框架则更进一步，为你提供一个完整的系统和一些自定义的语法，让你在上面写一个 Web 应用。

设计网站外观

第一步：计划

备注： 复杂项目需要更详细的指引，深入到颜色、字体、页面上项目之间的间距、适当的书写风格等所有细节。这有时被称为设计指南、设计系统或品牌手册，参见：Firefox Photon Design System。

绘制草图

备注： 即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。

Web 团队通常包括一个平面设计师和一个用户体验 (UX) 设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种更抽象的模式来解决用户如何体验及与网站交互方面的问题。

处理文件

个网站包含许多文件：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要在计算机上将这些文件以合理的结构组织起来，确保文件之间交互畅通，并在你最终将它们上传到服务器之前使你的所有内容看起来正确。

网站应该保存在何处？

对于本地网站，应将所有相关文件放在一个单独文件夹中，可以映射出服务器端站点文件结构。

选择一个地方来存储你的网站项目。在你选择的地方，创建一个名为 web-projects（或类似）的新文件夹。这是你所有的网站项目的存放地。

在这个文件夹中，创建另一个文件夹来存放你的第一个网站。称之为 test-site（或更有想象力的东西）。

关于大小写和空格的提示

我们要求你完全用小写字母命名文件夹和文件，没有空格。这是因为：

许多计算机，特别是网络服务器，是区分大小写的。因此，假如你把一张图片放在你的网站上 test-site/MyImage.jpg，然后在一个不同的文件中，你试图以 test-site/myimage.jpg 来调用该图片，它可能无法工作。
浏览器、网络服务器和编程语言对空格的处理并不一致。例如，如果你在文件名中使用空格，一些系统可能将其视为两个文件名。一些服务器会用“%20”（URL 中空格的字符代码）替换文件名中的区域，导致所有链接被破坏。最好用连字符而不是下划线来分隔单词。对比 my-file.html 与 my_file.html。

简言之，文件名中应使用连字符。谷歌搜索引擎把连字符当作单词的分隔符，但不会识别下划线。基于此，最好在一开始就养成习惯，文件夹和文件名使用小写，用短横线来分隔。这可以避免许多问题。

网站应该使用什么结构？

接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：

index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。
images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。
styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。
scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。

文件路径

为使文件间正常交互，应为每个文件提供访问路径，所以一个文件知道另一个文件的位置。

将你之前选择的图片复制到你的 images 文件夹。
打开你的 index.html 文件，并准确地将以下代码插入该文件中。当下不要对其感到困惑——我们将在本系列的后面更详细地研究这些结构。
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html>
```
该行代码 <img src="" alt="My test image"> 用于向页面中插入图片。我们需要告知 HTML 图片的位置。这张图片位于 images 目录下，与 index.html 处于同一目录。为了从 index.html 访问到我们的图像，我们需要的文件路径是 images/your-image-filename。例如，这里的图像叫做 firefox-icon.png，那么文件路径就是 images/firefox-icon.png。
在 HTML 代码 src="" 的双引号之间插入文件路径。
保存 HTML 文件，然后使用浏览器打开（双击该文件）。你应该看到新网页显示了新的图像！

文件路径的一些通用规则：

若引用的目标文件与 HTML 文件同级，只需直接使用文件名，例如：my-image.jpg。
要引用子目录中的文件，请在路径前面写上目录名，再加上一个正斜杠。例如：subdirectory/my-image.jpg。
若引用的目标文件位于 HTML 文件的上级，需要加上两个点。举个例子，如果 index.html 在 test-site 的一个子文件夹内，而 my-image.jpg 在 test-site 内，你可以使用../my-image.jpg 从 index.html 引用 my-image.jpg。
以上方法可以随意组合，比如：../subdirectory/another-subdirectory/my-image.jpg。

备注： Windows 的文件系统使用反斜杠而不是正斜杠，例如：C:\Windows。这在 HTML 中并不重要——即使你在 Windows 系统上进行开发，你也应该在代码中使用正斜杠。

现在你的文件夹结构应该看起来像这样：

同一个网名

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web 入门

一个网站由许多文件组成：文本内容、代码、样式表、媒体内容，等等。当你建立一个网站时，你需要将这些文件组合成一个合理的结构，并确保它们能够相互交流。超文本标记语言（HTML）是你用来组织你的网络内容，并赋予它意义和目的的代码。例如，我的内容是一组段落还是一个要点列表？我的页面上是否插入了图片？我有一个数据表吗？层叠样式表（CSS）是你用来为你的网站设置样式的代码。例如，你希望文本是黑色还是红色？内容应该画在屏幕的什么地方？应该用什么背景图片和颜色来装饰你的网站？.........
复制链接

扫一扫