前端与 HTML1 | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第1天，之前都在实习，就没有发布笔记。 下面就和大家分享一下我学习前端以及HTML的第一份笔记吧

利用Web技术栈解决跨终端的GUI人机交互问题

• 解决 GUI 人机交互问题

• 跨终端

  • PC/移动浏览器
  • 客户端/小程序
  • VRIAR 等

• Web 技术栈

  • 

  • HTML 内容

  • CSS 样式

  • JavaScript 行为

  • 通过网络协议和服务器端进行交互

前端需要关注

• 美观

• 功能

• 安全

• 无障碍

• 性能

• 兼容

• 体验

在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。现在让我们来创建这些：

1. index.html：这个文件一般会包含主页内容，也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器，创建一个名为index.html的新文件，并将其保存在test-site文件夹内。

2. images 文件夹：这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。

3. styles 文件夹：这个文件夹包含用于设置内容样式的 CSS 代码（例如，设置文本和背景颜色）。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。

4. scripts 文件夹：这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码（例如，点击时加载数据的按钮）。在 test-site 文件夹内创建一个名为 scripts 的文件夹。

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

• 若引用的目标文件与 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。