前端常识基础——原生项目架构和一些网络文件类型小节

前言

笔者最近发现自己可能要学习前端了，至少需要一些前端的基础知识，为此，需要我仔细的了解CSS，HTML和JS的基础知识，后续学习Vue3方便不少。

最简单的原生前端项目架构

一些同志好像的确不会很关心这个，但是笔者发现一些使用原生三件套手搓的项目架构中，的确多多少少按照如下的方式进行整理。这里Mark一下，当然学习这个用处不大，大家现在很多都是使用前端框架进行学习的。但是理解这个可以帮助我们后续理解其他的项目架构。

我们需要这个，是因为一个良好的项目结构不仅能让你的代码井井有条，还能在未来使项目更易于维护和扩展。就像我们写C++工程总是会按照模块划分，一些库工程会可以划分出来include和src方便打包和安装一个道理。我们这样就能方便的展开编程，扩写和规范我们的项目，至少看起来不乱。

利用规范化一些的术语来描述，那就是：

可维护性 (Maintainability): 当你需要修复一个 bug 或添加一个新功能时，你希望立即知道去哪里找对应的文件，而不是在几十个文件中大海捞针。
团队协作 (Collaboration): 当一个新成员加入项目时，一个逻辑清晰、符合直觉的结构可以让他们更快地“上手”，减少沟通成本。
可扩展性 (Scalability): 随着项目规模的增长，良好的结构可以容纳更多的功能和文件，而不会变得一团糟。

一个最简单的静态网页架构

笔者喜欢使用Linux写代码，包管理器中总是有一个好用的查看文件树结构的tree，展开一下：

.
├── /assets
│    ├── /images
│   │   ├── logo.png
│   │   ├── banner.jpg
│   │   └── icons.svg
│   ├── /fonts
│   │   ├── custom-font.woff
│   │   └── custom-font.woff2
├── /css
│   ├── main.css
│   ├── about.css
│   └── contact.css
├── index.html
├── about.html
├── contact.html
└── README.md

在示例的顶部，我们可以看到了一个单独的点 (.)，它代表根目录 (Root Directory)。根目录是文件系统中的最顶层目录，是所有文件路径的起点，包含了所有其他目录和文件。简单来说，“目录 (Directory)” 就是“文件夹 (Folder)” 的专业术语。也就是说，项目中这里就是我们一切的起点了

在根目录内部，我们首先看到的是 assets 目录。术语 "Assets"（硬翻译的话叫做资产） 指的是项目中使用的任何非代码类静态文件，例如图片、字体或其他多媒体资源。将这些资源集中管理，可以避免它们与你的 HTML 或 CSS 文件混在一起。

/images: 顾名思义，存放所有图片文件（PNG, JPG, SVG 等）。
/fonts: 存放自定义字体文件（.woff, .woff2 等）。

接下来是 css 目录。有时，这个目录也可能被命名为 stylesheets（样式表）。这是你存放所有 CSS 文件的地方。在这个例子中，main.css 可能是包含网站全局样式（如导航栏、页脚）的文件，而 about.css 和 contact.css 则可能只包含特定页面的样式。具体如何，要自己打开看一看分析

HTML 文件 (页面)

在根目录级别，我们存放着 .html 文件。它们构成了网站的骨架：

index.html: 这是一个特殊的、公认的文件名，它代表网站的首页。当用户访问你的域名（例如 www.example.com）时，服务器默认会寻找并显示这个文件。
about.html: 代表“关于我们”页面。
contact.html: 代表“联系方式”页面。

`README.md` (项目说明)

最后，还有一个 README.md 文件。README (读作 "read me"，意为“读我”) 文件是项目的“说明书”。它通常用来提供有关项目的有用信息，例如：

项目是做什么的？
如何安装或运行这个项目？
（如果是开源项目）如何贡献代码？
版权和许可证信息。

.md 扩展名代表 Markdown，这是一种轻量级的标记语言，常用于编写文档和格式化文本（笔者编写的文档就喜欢使用Markdown写）。

扩展起来：多了JS呢？

现代网页几乎离不开 JavaScript。一个很自然的做法是添加一个 js 目录（有时也叫 scripts）来存放所有的 .js 文件。

.
├── /assets
│   └── ...
├── /css
│   └── ...
├── /js
│   ├── main.js       (全局脚本)
│   ├── analytics.js  (统计分析脚本)
│   └── components
│       ├── navbar.js (导航栏交互)
│       └── modal.js  (弹窗脚本)
└── ... (HTML files)

使用 CSS 预处理器 (`/scss` 或 `/sass`)

⚠：这部分笔者实际上并不熟悉，是搬运后自己重写的，请谨慎参考

如果你使用 Sass、Less 或 Stylus 这样的 CSS 预处理器，你的目录结构可能会有所不同。你通常会有一个存放源码的目录（如 scss），和一个存放编译后的 CSS 的目录（即 css）。

.
├── /scss
│   ├── main.scss
│   ├── _variables.scss  (变量)
│   ├── _mixins.scss     (混合)
│   └── pages
│       ├── _about.scss
│       └── _contact.scss
│
├── /css
│   ├── main.css         (由 main.scss 编译生成)
│   └── ...
└── ...

常见的网络传输的文件类型

第二个部分，是文件格式的问题。说真的，笔者实际上很少关心，但是后来发现不同的文件源格式实际上含义有不一样，这里我们把文件类型梳理一下。

三种基础的文件类型

HTML (.html)

HTML (HyperText Markup Language) 文件构成了 Web 应用的结构和内容。它就像是建筑的“骨架”，告诉浏览器页面上应该有哪些元素（如标题、段落、图片、链接）。
CSS (.css)

CSS (Cascading Style Sheets) 文件定义了网页的样式和外观。它就像是建筑的“室内设计”和“涂装”，负责颜色、布局、字体大小和响应式设计。
JavaScript (.js)

JavaScript 文件为网站添加了高级功能和交互性。它就像是建筑的“电力系统”和“智能家居”，负责处理用户点击、表单验证、数据获取和动态内容更新。

图像文件

JPEG (.jpg 或 .jpeg)：全称是“联合图像专家组”(Joint Photographic Experts Group)。它以其高效的压缩而闻名，非常适合照片和色彩丰富的图像。然而，这种压缩是有损的 (Lossy)，这意味着会牺牲部分图像质量来换取更小的文件体积。
PNG (.png)：全称是“便携式网络图形”(Portable Network Graphics)。它在压缩后仍能保持图像质量（无损压缩, Lossless）。这导致文件通常比 JPEG 大，但 PNG 最大的优势是支持透明背景，因此它非常适合用于 Logo、图标和需要锐利边缘的图像。
GIF (.gif)：全称是“图形交换格式”(Graphics Interchange Format)。GIF 格式同时支持动画和透明度，但它的调色板（颜色数量）非常有限。它常用于制作简单的循环动画。
SVG (.svg)：全称是“可缩放矢量图形”(Scalable Vector Graphics)。这是一种矢量图像格式（而不是像前三者那样的“位图”格式）。这意味着 SVG 图像可以无限缩放而不会损失任何质量或变得模糊。它非常适合用于图标、Logo 和需要精确缩放的图表。

音视频格式

MP3 (.mp3)：一种以高效压缩而闻名的音频格式。它也是一种有损格式，因此在压缩过程中会丢失一些音频数据，以使文件变得更小。
MP4 (.mp4)：目前最常见的视频格式之一。它提供了良好的压缩效果，并支持多种音频和视频编解码器、字幕和元数据。
MOV (.mov)：由 Apple 开发的 QuickTime 多媒体文件格式，主要与 QuickTime Player 相关联。
WAV (.wav)：一种无损音频格式，它能保持音频的原始质量，但代价是文件体积非常大。
WebM (.webm)：一种专为 Web 设计的高质量、开源视频格式，在现代浏览器上支持良好。

字体格式

如果你需要为你的 Web 应用自定义字体，你将会用到这些字体格式：

TTF (.ttf)：全称是“TrueType 字体”(TrueType Font)，这是一种与不同操作系统兼容良好的字体格式。
WOFF (.woff)：全称是“Web 开放字体格式”(Web Open Font Format)。这是一种专为 Web 开发目的设计的现代字体格式。由于它们具有更好的压缩性，这些文件更小。它们还可以存储元数据，包括许可信息。
WOFF2 (.woff2)：WOFF 的继任者，具有更高效的压缩和性能。在现代 Web 开发中，这是首选的字体格式。

数据、配置与归档

除了上述文件，你还会遇到用于存储数据、配置项目或打包文件的类型。

JSON (.json)：全称是“JavaScript 对象表示法”(JavaScript Object Notation)。这是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。它广泛用于 API 通信和配置文件（例如 package.json）。
ZIP (.zip)：最广泛使用的归档格式。如果你需要将多个文件夹和文件组合成一个单独的文件（例如，供用户下载），ZIP 是最常见的选择。它提供无损压缩，因此在压缩过程中不会丢失任何数据，并且受到所有主流操作系统的广泛支持。

HTML 理论系统笔记

Q1: 什么是HTML

HTML (HyperText Markup Language, 超文本标记语言) 是网页的结构语言，它不负责“好不好看”（CSS），也不负责“能不能动”（JS/TS），它只负责“是什么”。它决定了网页的骨架与内容的组织（Backbone）。在现代 Web 架构中，它与 CSS、JavaScript 共同组成前端三大核心技术，各司其职：

技术	作用	角色类比
HTML	负责内容、语义与结构 (Structure)	建筑的钢筋骨架
CSS	控制视觉样式与布局 (Style)	建筑的室内装修
JavaScript	控制行为与交互逻辑 (Behavior)	建筑的水电系统与智能家居

HTML 文档由一系列元素 (Element) 组成。一个典型的元素通常包括一个开始标签、一些内容和一个结束标签：

<tagname attribute="value">这是元素的内容</tagname>

HTML 的属性 (Attributes)

属性 (Attribute) 是 HTML 的精髓所在。它们为 HTML 元素提供了额外的信息，或者用于控制元素的行为。属性总是写在开始标签内，通常以属性名="属性值" 的形式出现。

<元素名 属性名1="属性值1" 属性名2="属性值2">内容</元素名>

属性类型	示例	用途
全局属性	`id`, `class`, `title`, `lang`, `style`	几乎所有 HTML 元素都可以使用。
特定属性	`<img src="...">`, `<a href="...">`, `<input type="...">`	仅对特定标签有效，定义其核心功能。
事件属性	`onclick`, `onchange`, `onmouseover`	定义当某个事件发生时应执行的 JavaScript。

值得一提的是——一个标签可以包含多个属性，用空格隔开。属性值推荐始终使用双引号 (") 包裹（虽然单引号也有效，但双引号是更广泛的规范）。但是还有一类特殊的属性叫布尔属性。它们的存在即代表 true，不存在则代表 false。

<input type="checkbox" checked>
<input type="text" disabled>

HTML 模板与元信息 (The HTML Boilerplate)

1. 什么是 HTML Boilerplate？

Boilerplate (样板代码) 是指您在创建任何新网页时都会用到的基础模板结构。它包含了一系列必要的声明，以确保浏览器能够正确地解释咱们编写的HTML。这是一个现代 HTML5 必备的基础结构：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title of the page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hey Dude!</h1>
    <script src="app.js"></script>
  </body>
</html>

2. 各部分详细解释

元素/声明	功能与重要性
`<!DOCTYPE html>`	文档类型声明。这是在告诉浏览器：“请使用最新的 HTML5 标准来渲染我！”。如果没有它，浏览器可能会进入“怪异模式 (Quirks Mode)”，导致布局混乱。
`<html lang="en">`	根元素。`lang` 属性（此处示例为 `en` 英语，中文应为 `zh-CN`）对 SEO 和可访问性 (Accessibility) 至关重要，它能帮助搜索引擎和屏幕阅读器理解页面语言。
`<head>`	元信息区域。这里面的一切都是“关于网页的信息”，它们不会直接显示在页面上，但会控制浏览器的行为。
`<meta charset="UTF-8">`	字符编码声明。`UTF-8` 是国际通用的多语言编码方案。这是防止中文网页显示为乱码的必备声明。
`<meta name="viewport" ...>`	视口设置。这是移动端开发的“金标准”。`width=device-width` 告诉浏览器页面宽度应等于设备宽度，`initial-scale=1.0` 则设置初始缩放为 1.0，确保页面在手机上以正常比例显示。
`<title>`	页面标题。它会显示在浏览器的标签栏或窗口标题上，也是搜索引擎结果中最重要的链接文本。
`<link rel="stylesheet" ...>`	链接外部资源。最常见的用途是链接外部 CSS 样式文件。
`<body>`	主体内容区。所有用户能在浏览器窗口中“看到”的内容（如文本、图片、视频）都应放在这里。

HTML 基础语法与元素 (HTML Fundamentals)

`<div>` 元素：万能的分组容器

<div> (division) 可能是最常遇到的元素。它本身没有任何语义含义，它的唯一作用就是作为一个通用的分组容器。通常会用 <div> 来将相关联的元素包裹在一起，以便于：

使用 CSS 进行统一的布局（如 Flexbox, Grid）。
使用 JavaScript 进行整体操作。

<div class="container">
  <div class="header">...</div>
  <div class="main-content">...</div>
  <div class="footer">...</div>
</div>

`id` 与 `class`：CSS 和 JS 的“钩子”

id 和 class 是最重要的两个全局属性，它们是连接 HTML 与 CSS/JavaScript 的桥梁。

属性	特点	核心用途
`id`	页面唯一。像身份证号，一个页面中一个 `id` 值只能出现一次。	1. JavaScript 精确获取唯一元素 (`document.getElementById`)。 2. 页面内锚点跳转 (`<a href="#main">`)。
`class`	可复用。像人的“姓氏”或“标签”，一个元素可以有多个 `class`，一个 `class` 也可以用在多个元素上。	1. CSS 样式的主要选择器。 2. JavaScript 批量获取一组元素 (`document.querySelectorAll('.item')`)。

<div id="main-navigation" class="menu dark-theme sticky">...</div>

HTML 实体 (Entities)

在 HTML 中，某些符号具有特殊含义（例如 < 和 > 被用于定义标签）。如果你想在文本中直接显示这些符号，就必须使用“实体”。

实体	显示	含义
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
	(一个空格)	不间断空格 (Non-Breaking Space)
`©`	©	版权符号

`<script>` 元素：注入交互

<script> 元素用于引入或直接编写 JavaScript 代码。这里有两种style，一种是内联脚本 (不推荐用于复杂逻辑)

<script>
  console.log('Hello from inline script!');
</script>

还有一种是大伙常用的，外部链接脚本

<script src="app.js"></script>

HTML 与 SEO (搜索引擎优化)

HTML 结构和元信息会直接影响搜索引擎（如 Google, Baidu）如何收录和展示你的网页。

Meta Description (页面描述)

这个标签不会显示在页面上，但它会告诉搜索引擎在搜索结果中显示怎样的摘要内容。

<meta name="description" content="在这篇综合指南中，一步步学习 HTML 基础、高级标签和 SEO 技巧。">

推荐长度：50–160 个字符。
核心：应准确、诱人地概述页面内容，吸引用户点击。

Open Graph (OG) 标签 (社交媒体优化)

当你把链接分享到微信、微博、Facebook 或 Twitter 时，你看到的标题、缩略图和描述是由 Open Graph (OG) 协议控制的。

<meta property="og:title" content="深入 HTML 核心指南">
<meta property="og:description" content="一篇涵盖所有 HTML 知识点的终极教程。">
<meta property="og:image" content="https://example.com/images/html-cover.png">
<meta property="og:url" content="https://example.com/blog/html-guide">
<meta property="og:type" content="article">

其他常见 SEO 元标签

标签	示例	功能
Robots	`<meta name="robots" content="index, follow">`	控制搜索引擎抓取和索引行为 (`noindex`, `nofollow`)。
Canonical	`<link rel="canonical" href="https://example.com/main-page">`	当多个 URL 内容相同时（如 `page=1` 和 `main-page`），告诉搜索引擎“正式版”是哪一个，避免重复内容惩罚。
Keywords	`<meta name="keywords" content="HTML, Web, 教程">`	关键词。注意：现代主流 SEO (如 Google) 已基本忽略此标签，不再重要。

多媒体与嵌入元素

HTML是可以支持描述音视频资源的！

Audio 与 Video

HTML5 提供了原生的 <audio> 和 <video> 标签。

<audio controls src="music.mp3"></audio>

<video controls width="600" poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

常用属性：
- controls：显示浏览器默认的播放控制条。
- autoplay：自动播放（注意：现代浏览器大多会限制，除非同时设置 muted）。
- muted：静音播放。
- loop：循环播放。
- poster：在视频加载完成前显示的封面图像。
<source> 标签：为了兼容不同浏览器，可以提供多种格式的视频源。

图像 (`<img>`) 与优化

<img> 标签用于在页面上显示图像。

<img src="images/photo.jpg"  
     alt="一个男人在日落时分的沙滩上行走" 
     loading="lazy">

src (Source)是图像的路径。
alt (Alternative Text)：至关重要的属性！ 当图像加载失败时，它会显示这段文字。更重要的是，屏幕阅读器会朗读 alt 文本，这是网页可访问性 (Accessibility) 的核心。

图像优化技巧：
使用合适的文件格式：

JPG/JPEG：适合照片和色彩丰富的位图。

PNG：适合需要透明背景的图像（如 Logo、图标）。

SVG：矢量图。适合 Logo 和图标，可无限缩放而不失真。

WebP/AVIF：现代格式，提供极高的压缩比和质量，是目前的首选推荐。
响应式图像 (srcset)：

让浏览器根据屏幕宽度和分辨率加载不同大小的图片，节省带宽。
<img srcset="small.jpg 480w, 
             medium.jpg 800w, 
             large.jpg 1024w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.jpg"
     alt="描述">
对了，我们还有这是一个原生的 HTML 属性：Lazy。它告诉浏览器“不要立即加载这张图片，等到它即将滚动到视口内时再加载”，可以极大提升页面初始加载速度。

`<iframe>` (嵌入外部内容)

<iframe> (Inline Frame) 元素会在你的页面中“挖”一个洞，在里面嵌入一个完全独立的外部网页、视频或地图。

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<iframe> 是一个“替换元素 (Replaced Element)”，它的内容由外部资源决定。
常见用途：嵌入 YouTube 视频、Google 地图、第三方小组件（如天气预报、在线表单）。

链接与路径 (Working with Links)

HTML 的“H”和“T”——“HyperText”(超文本)——的实现就是靠链接。

超链接 (`<a>`) 基本结构

<a>(Anchor) 标签用于创建超链接。

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  点此访问 Google
</a>

href (Hypertext Reference)：链接的目标 URL。
target：定义在何处打开链接。
- _self：(默认) 在当前窗口打开。
- _blank：在新标签页中打开。
安全提示：当使用 target="_blank" 时，请始终添加 rel="noopener noreferrer"，以防止新打开的页面通过 window.opener API 控制你的原始页面，这是一种安全防护措施。

理解文件路径

在 href (链接)、src (图片/脚本) 中，正确使用路径至关重要。

路径类型	示例	说明
绝对路径	`https://example.com/images/pic.jpg`	包含完整协议和域名的 URL。
相对路径	`images/pic.jpg`	相对于当前 HTML 文件的位置。
根相对路径	`/images/pic.jpg`	(以 `/` 开头) 相对于网站的根目录。

相对路径符号解释：

./：当前目录 (例如 ./contact.html，./ 通常可省略)。
../：上一级目录 (例如 ../css/style.css，从当前目录返回上一层，再进入 css 目录)。
/：网站的根目录 (例如，无论你在哪个子页面，/index.html 始终指向网站首页)。

链接状态伪类 (CSS)

链接 (<a> 标签) 有四种特殊的状态，你可以在 CSS 中为它们分别设置样式，当然这个部分是笔者摘抄的，所以还没有试过，稍后CSS的学习笔者尝试一下。

a:link — 链接未被访问时的状态。
a:visited — 链接已被访问后的状态。
a:hover — 鼠标悬停在链接上时的状态。
a:active — 鼠标点击链接的瞬间（按住未松开）。

前端学习进度小记

前端常识基础——原生项目架构和一些网络文件类型小节

前言

最简单的原生前端项目架构

一个最简单的静态网页架构

HTML 文件 (页面)

`README.md` (项目说明)

扩展起来：多了JS呢？

使用 CSS 预处理器 (`/scss` 或 `/sass`)

常见的网络传输的文件类型

三种基础的文件类型

图像文件

音视频格式

字体格式

数据、配置与归档

HTML 理论系统笔记

Q1: 什么是HTML

HTML 的属性 (Attributes)

HTML 模板与元信息 (The HTML Boilerplate)

1. 什么是 HTML Boilerplate？

2. 各部分详细解释

HTML 基础语法与元素 (HTML Fundamentals)

`<div>` 元素：万能的分组容器

`id` 与 `class`：CSS 和 JS 的“钩子”

HTML 实体 (Entities)

`<script>` 元素：注入交互

HTML 与 SEO (搜索引擎优化)

Meta Description (页面描述)

Open Graph (OG) 标签 (社交媒体优化)

其他常见 SEO 元标签

多媒体与嵌入元素

Audio 与 Video

图像 (`<img>`) 与优化

`<iframe>` (嵌入外部内容)

链接与路径 (Working with Links)

超链接 (`<a>`) 基本结构

理解文件路径

链接状态伪类 (CSS)

Charliechen

前端常识基础——原生项目架构和一些网络文件类型小节

前言

最简单的原生前端项目架构

一个最简单的静态网页架构

HTML 文件 (页面)

README.md (项目说明)

扩展起来：多了JS呢？

使用 CSS 预处理器 (/scss 或 /sass)

常见的网络传输的文件类型

三种基础的文件类型

图像文件

音视频格式

字体格式

数据、配置与归档

HTML 理论系统笔记

Q1: 什么是HTML

HTML 的属性 (Attributes)

HTML 模板与元信息 (The HTML Boilerplate)

1. 什么是 HTML Boilerplate？

2. 各部分详细解释

HTML 基础语法与元素 (HTML Fundamentals)

<div> 元素：万能的分组容器

id 与 class：CSS 和 JS 的“钩子”

HTML 实体 (Entities)

<script> 元素：注入交互

HTML 与 SEO (搜索引擎优化)

Meta Description (页面描述)

Open Graph (OG) 标签 (社交媒体优化)

其他常见 SEO 元标签

多媒体与嵌入元素

Audio 与 Video

图像 (<img>) 与优化

<iframe> (嵌入外部内容)

链接与路径 (Working with Links)

超链接 (<a>) 基本结构

理解文件路径

链接状态伪类 (CSS)

Chrominum CC 合成器文档学习记录

Objective-C学习小记

Charliechen

`README.md` (项目说明)

使用 CSS 预处理器 (`/scss` 或 `/sass`)

`<div>` 元素：万能的分组容器

`id` 与 `class`：CSS 和 JS 的“钩子”

`<script>` 元素：注入交互

图像 (`<img>`) 与优化

`<iframe>` (嵌入外部内容)

超链接 (`<a>`) 基本结构