什么是HTML?
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页和网上信息的标准标记语言。它不是一种编程语言，而是一种用于定义网页内容结构的标记语言。HTML 文档由一系列的元素组成，这些元素告诉浏览器如何展示内容。元素由标签包围，比如 <p> 用于段落，<a> 用于链接，<img> 用于图片等。
HTML 的基本结构通常包括以下部分：
<!DOCTYPE html>：文档类型声明，告诉浏览器这是一个 HTML5 文档。<html>：根元素，包含网页的所有内容。<head>：包含了文档的元数据，比如文档的标题（<title>）和链接到 CSS 文件或 JavaScript 文件的引用。<body>：包含了网页的可见内容，比如文本、图片、链接等。
一个简单的 HTML 文档示例如下：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
</body>
</html>
随着 Web 技术的发展，HTML 也在不断更新，目前最新的版本是 HTML5，它增加了很多新的功能和元素，比如用于绘制图形的 <canvas> 元素，用于嵌入音频和视频的 <audio> 和 <video> 元素等。
（AI就是好用诶！！！）
它重要嘛？
其实并不重要，面试很少有问标签的作用的嘛，主要是这些标签并没有什么作用。
从某种意义上说，一个div标签可以走天下。
但是，考虑到语义化和SEO，这些标签还是比较重要的。
什么是语义化？
讲究的就是一个见名知意，对于程序员来说，不用展开标签就知道标签可能对应于页面的哪一块区域，对于搜索引擎的爬虫来说，更有利于抓取网页中的内容，提高网站的搜索排名，也是一种SEO的优化手段。
关于SEO：
SEO（Search Engine Optimization，搜索引擎优化）是一种通过优化网站内容和结构，提高网站在搜索引擎中的自然排名（即非付费搜索结果）的技术和过程。SEO 的目的是提高网站在搜索引擎结果页面（SERP）上的可见性，从而吸引更多的访问者，增加品牌的知名度，提高在线销售或达成其他目标。
SEO 的主要策略包括：
1. **关键词研究**：确定目标受众可能用来搜索相关产品或服务的关键词和短语。
2. **内容优化**：创建高质量、相关性强、关键词丰富的内容，以吸引和保留用户。
3. **技术优化**：确保网站的技术结构（如 URL 结构、网站地图、加载速度等）对搜索引擎友好。
4. **链接建设**：获取其他高质量网站的链接指向你的网站，以提高网站的权威性和可信度。
5. **用户体验（UX）优化**：改善网站的导航、布局和设计，以提高用户满意度和降低跳出率。
6. **移动优化**：确保网站在移动设备上的表现良好，因为越来越多的用户通过手机和平板电脑进行搜索。
7. **本地SEO**：对于希望吸引本地客户的企业，优化本地搜索结果，包括在 Google 地图和本地目录中出现。
8. **社交媒体整合**：利用社交媒体平台来增加网站的可见性和链接流行度。
9. **分析和监控**：使用工具如 Google Analytics 来监控网站的流量和排名，以便不断调整策略。
SEO 是一个持续的过程，需要定期更新和调整策略，以应对搜索引擎算法的变化和市场竞争。有效的 SEO 可以显著提高网站的流量和转化率，但也需要时间和努力来实现。
（AI真的很好用！）
标签上的属性？
平时的开发过程中，我们会给标签加上各式各样的属性，可以是标签自带的，也可以是我们自定义的。貌似一个属性上可以添加很多的属性，甚至于一个事件处理函数，好神奇！
不要惊奇，编写如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="name"></div>
</body>
</html>
（很简单，没有什么难度）
浏览器中打开，然后调出控制台：
注意观察，右侧的Properties（翻译：属性）栏，这就是选中div的所有属性，自己去找一下有没有你熟悉的属性。
不要惊奇，也许你听过DOM这个概念，它就是一个由一个的对象。上图展示的就是这个div对象的所有属性。我们操作DOM，其实就是操作这些属性。
浏览器在读取HTML文件中的内容时，会把里面的标签解析成DOM对象，这些DOM对象构成了一颗DOM树。。。当然，这是后话了，后续文章会深入的去讲解。
一些新特性？
如果你比较细心的话，会发现有一个名词会出现在你的视野里，那就是HTML5，很明显，这代表着一个HTML的版本，是的。既然是一个新版本，那么他就会引入一些新的特性。
（这里需要插一句，浏览器作为前端语言的解释器，决定着是否支持一些新特性，所以会出现一些API在老版本的浏览器上无法使用的情况，或者你会使用babel这个工具，没错就是ES6转ES5的，就是为了兼容老版本的浏览器）
值得一提的就是离线缓存技术，比如说Local Store和Application Cache。前者大家应该还是比较熟悉的，可能后者就要陌生一点了。这里呢，借助AI：
Application Cache 是 HTML5 引入的一项技术，它允许 web 应用在没有网络连接的情况下也能被使用。通过创建一个 cache manifest 文件，可以轻松创建离线应用。这项技术带来三个主要优势：离线浏览、提升页面载入速度以及降低服务器压力。
Application Cache 的使用主要涉及两个方面的工作：服务器端需要维护一个 manifest 清单文件，而浏览器端只需要在 HTML 文档中指定这个 manifest 文件即可。例如，在 HTML 文档中添加如下代码：
```html
<html manifest="demo.appcache">
```
manifest 文件通常包含三个部分：
1. `CACHE MANIFEST`：在此标题下列出的文件将在首次下载后进行缓存。
2. `NETWORK`：在此标题下列出的文件需要与服务器的连接，且不会被缓存。
3. `FALLBACK`：在此标题下列出的文件规定当页面无法访问时的回退页面（例如 404 页面）。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"，这通常需要在服务器上进行设置。此外，Application Cache 有尺寸限制，通常每个站点的缓存限制在 5MB 左右。
Application Cache 还提供了一些事件和状态，可以用来监听缓存的更新和状态变化。例如，可以监听 `updateready` 事件来提示用户刷新页面以获取最新版本的应用。
需要注意的是，Application Cache 技术已被 Web 标准废弃，不再推荐使用此功能。这意味着开发者可能需要寻找替代方案，如使用 Service Workers，它提供了更现代和灵活的离线缓存解决方案。
好了，现在我们来看一下Service Workers：
Service Workers 是一种在浏览器后台运行的独立线程，它能够在网页关闭后持续运行，并且可以在没有网络连接的情况下工作。Service Workers 可以拦截网络请求并根据网络是否可用来采取适当的行动，更新来自服务器的资源，从而实现离线体验。它们还提供推送通知和后台同步等功能。
Service Workers 的主要特点包括：
1. **无法直接访问 DOM**：Service Workers 运行在不同的上下文中，因此不能直接操作网页的DOM。它们可以通过 `postMessage` 与页面通信。
2. **控制网络请求**：Service Workers 可以拦截和处理页面的网络请求，这意味着可以重写请求或从缓存中提供资源。
3. **必须在 HTTPS 协议下运行**：出于安全考虑，Service Workers 只能在安全的上下文中运行，这通常意味着必须通过 HTTPS 提供服务。在本地开发时，可以使用 `localhost`。
4. **独立于页面生命周期**：Service Workers 有自己的生命周期，即使用户关闭了网页，Service Worker 仍然可以在后台运行。
Service Workers 的生命周期包括以下几个阶段：
- **安装（Install）**：在这个阶段，Service Worker 会缓存所有必要的资源，以便在离线时使用。
- **等待（Waiting）**：安装完成后，Service Worker 会进入等待状态，直到所有页面关闭，它才会被激活。
- **激活（Activate）**：在这个阶段，Service Worker 可以接管页面，并开始控制网络请求和缓存管理。
- **运行（Active）**：激活后的 Service Worker 可以接收 `fetch` 和 `message` 事件，处理网络请求和消息传递。
- **卸载（Unregister）**：当 Service Worker 不再需要时，例如用户注销或开发者决定不再使用 Service Worker，它可以被卸载。
使用 Service Workers 时，你可以通过 `navigator.serviceWorker.register` 方法注册一个 Service Worker，如下所示：
```javascript
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js').then(registration => {
console.log('Service Worker registered:', registration);
}).catch(error => {
console.error('Service Worker registration failed:', error);
});
}
```
在 Service Worker 文件中，你可以监听 `install` 和 `fetch` 事件来设置缓存和处理网络请求：
```javascript
// service-worker.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache-v1').then(cache => {
return cache.addAll([
'/index.html',
'/styles.css',
'/script.js',
// 添加其他要缓存的资源
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response;
}
return fetch(event.request);
})
);
});
```
Service Workers 还支持高级功能，如网络优先策略、动态缓存更新和推送通知。例如，你可以设置一个网络优先的策略，先尝试从网络获取资源，如果失败，则从缓存中获取：
```javascript
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request).catch(() => {
return caches.match(event.request).then(response => {
if (response) {
return response;
}
throw new Error('Network and Cache failed');
});
})
);
});
```
Service Workers 是现代前端开发中提升性能和用户体验的关键技术，尤其适用于构建单页应用（SPA）、渐进式 Web 应用（PWA）和离线应用。通过合理使用 Service Workers，你可以实现更快速的加载时间、更好的离线体验和更高效的资源管理。
了解一下就行了，基本上也用不着，嘻嘻（可恶啊，你讲个锤子）
Canvas和SVG的区别？
Canvas和SVG都是用于在网页上绘制图形的技术。
Canvas绘画的基本单位是像素，一旦绘制完毕就不能对某一块区域进行修改，只能通过重新绘制。适合需要频繁更新和绘制复杂图形的应用，比如游戏、动态数据可视化。
SVG最大的特点是可以在放大和缩小的同时，还能不失真，即在任何分辨率下也能保持清晰。但是，相对于Canvas来说，不适用于频繁更新的动态图形场景。
（当然，实际上SVG的使用频率要远高于Canvas，特别是在一些响应式布局的网页上）
总结
HTML无论是学习还是面试，都不是重点，会使用标签，了解SEO就行了。
2024.10.18
writeBy kaiven