HTML
目标：
复习常见标签，了解H5新特性（canvas，存储，websocket）
了解shadowDOM、webComponent，跟着教程写一个webComponent
H5新特性🥝
语义化标签：HTML5引入了一系列的语义化标签（如<header>、<nav>、<section>、<article>、<aside>、<footer>等），使开发者能够更清晰地定义文档结构，提高可读性和可维护性。
视频和音频支持：HTML5的<video>和<audio>标签使得在网页中嵌入和播放视频和音频变得更加简单。同时，还包括了一些JavaScript API用于控制媒体的播放和交互。
Canvas绘图：通过HTML5的<canvas>标签，开发者可以使用JavaScript绘制复杂的图形、动画和游戏。Canvas提供了2D和3D绘图的能力，使得在网页中创建交互和有趣的图形变得更容易。
本地存储：HTML5引入了本地存储能力，包括localStorage和sessionStorage API，使得网页可以在浏览器本地存储数据，提供更好的离线访问和持久化存储的能力。
表单增强：HTML5增加了一些新的表单元素和属性，如<input type=”date”>、<input type=”email”>、<input type=”url”>等，使得在网页中处理表单更方便，并提供了一些验证和限制选项，减少了对JavaScript的依赖。
地理位置API：HTML5的地理位置API可以获取用户的地理位置信息，使得网页能够根据用户位置提供个性化的服务和内容。
拖放功能：HTML5引入了新的拖放API，使得开发者可以更方便地实现拖拽和拖放的功能。通过拖放API，网页元素可以被拖动、放置和重新排序。
WebSocket：HTML5中引入了WebSocket协议，提供了一种全双工、长连接的通信方式，使得网页可以实时地与服务器进行双向通信。
SEO🍆
SEO（Search Engine Optimization，搜索引擎优化）是一种通过优化网站内容、结构和技术，以增加网站在搜索引擎中的可见性和排名的方法。以下是一些常用的SEO搜索优化策略和技巧：
关键词优化：研究和确定适合你网站的关键词，并在网站的标题、元描述、标签、内容和URL中合理地使用这些关键词。
内容质量和相关性：创建高质量、有价值、原创和相关的内容，满足用户搜索需求。确保内容易于阅读、结构清晰，并使用标题和子标题来组织内容。
网站结构优化：优化网站的结构和导航，使搜索引擎能够轻松读取和索引网站的页面。使用XML网站地图来帮助搜索引擎了解你的网站结构。
友好的URL结构：使用简洁、描述性和易于理解的URL，包含相关关键词。
页面加载速度优化：确保你的网站加载速度快，以提供更好的用户体验。优化图像大小、减少HTTP请求数、使用缓存和压缩技术等，以减少页面加载时间。
移动友好性：确保你的网站在移动设备上具有良好的用户体验，并且响应式设计以适应不同的屏幕尺寸。
外部链接和内部链接优化：建立高质量的外部链接，以增加你的网站在搜索引擎中的权威性和可信度。同时，在你的网站内部使用内部链接来引导搜索引擎爬虫和用户浏览不同页面之间的关联性。
社交媒体整合：将你的网站和内容与社交媒体平台整合，以增加曝光和分享，增加你的品牌知名度，并提高你的网站在搜索引擎中的可见性。
网站安全和HTTPS：确保你的网站使用HTTPS协议来提供安全的访问，搜索引擎对安全网站的排名更加青睐。
监测和分析：使用工具（如Google Analytics）来监测和分析你的网站的流量、关键词排名和用户行为数据，以便优化你的SEO策略。
Web Component 🌽
Web组件（Web Components）是一组技术，用于创建可重用的自定义HTML元素和组件，使得开发者能够以更模块化、可复用的方式构建和组合Web界面。
Web组件由三个主要技术组成：
- Custom Elements（自定义元素）：允许开发者创建自定义的HTML元素，可以使用自定义的标签名来定义新的元素，并通过JavaScript和CSS来定义元素的行为和样式。
- Shadow DOM（影子DOM）：允许开发者创建独立的DOM子树，用于封装元素的结构和样式，使得内部的DOM结构和样式不受外部的影响。
- HTML Templates（HTML模板）：允许开发者创建可复用的HTML模板，使得一段预定义的HTML结构可以被多次使用，并在需要的时候进行实例化。
使用Web组件的好处包括： - 可重用性：开发者可以创建和使用自定义元素和组件，使得代码可以被多次使用和共享。
- 封装性：使用Shadow DOM可以将元素的内部实现和样式封装起来，避免与其他模块或全局样式发生冲突。
- 组件化：通过组合不同的自定义元素和组件，可以构建更复杂的Web应用界面。
- 扩展性：可以通过自定义元素和组件的扩展来实现对新功能的支持和更新。
Web组件的概念和技术在现代Web开发中得到了广泛的应用和支持，可以和其他前端框架（如React、Angular、Vue.js）配合使用，或单独使用。它提供了一种更模块化、可组合的方式来构建Web界面，有助于提高开发效率和代码质量。