这是我参与「第五届青训营」伴学笔记创作活动的第1天

一、本堂课重点内容：

什么是前端？
前端应该关注哪些方面？
前端的边界？
HTML是什么？
DOM树
HTML语法
语义化的定义与好处
如何做到语义化？

二、详细知识点介绍：

什么是前端？ 总的来说，前端是指用户与网站或应用程序交互的部分。它负责解决用户界面（GUI）和人机交互问题，并且可以在不同终端上运行，如 PC 和移动浏览器、客户端小程序、VR/AR 等。前端开发通常使用 Web 技术栈，如 HTML、CSS、JavaScript 等来实现。
前端应该关注哪些方面？ 前端开发应该关注以下几个方面：
1. 美观:网站或应用程序的外观和布局应该美观易用。
2. 安全:应该采取措施来保护用户的个人信息和数据安全。
3. 兼容:网站或应用程序应该在不同浏览器和设备上兼容正常运行。
4. 功能:应该提供全面的功能，并确保这些功能可以正常使用。
5. 体验:应该提供良好的用户体验，使用户感到愉快和舒适。
6. 性能:应该确保网站或应用程序的性能良好，加载速度快。
7. 无障碍：应该确保网站或应用程序可以被各类用户使用，包括视障人士、听障人士等。
前端的边界？

前端的边界可以说是前端技术和后端技术的分界线。通常来说，前端负责客户端（浏览器或移动端应用等）的用户界面和交互，后端负责服务端（数据库、服务器等）的数据处理和存储。

前端的边界可以分为三部分来说明：
```
 1. 视觉层面: 前端负责视觉层面的设计和实现，包括界面布局、样式、图像等。
 2. 交互层面: 前端负责交互层面的设计和实现，包括用户与界面之间的交互、用户体验等。
 3. 数据层面: 前端负责与后端通信，获取和提交数据，但不负责数据的处理和存储，这部分是后端的职责。
```
前端和后端的边界不是非常明确，有时会有重叠，如前端可以使用类似 Node.js 的技术进行服务端渲染，或者后端可以使用前端技术，比如 Vue.js 之类的框架。
HTML是什么？

HTML（Hypertext Markup Language）是一种标记语言，用于描述网页的结构和内容。它使用一系列标记（称为标签）来描述网页中的文本、图像、链接等元素，并定义它们之间的关系。

DOM树

DOM (Document Object Model) 树是一种表示 HTML 或 XML 文档的树形结构。它表示文档的结构，允许程序更改文档的结构、样式和内容。

HTML语法
1. 标签和属性不区分大小写，推荐小写
2. 空标签可以不闭合，比如input、meta
3. 属性值推荐用双引号包裹
4. 某些属性值可以省略，比如required、readonly
语义化的定义与好处

HTML语义化是指使用 HTML 标签来描述文档内容的语义，而不是仅仅为了让其在浏览器上呈现出美观的布局。

语义化的 HTML 使用标签来表示不同的文档元素，这样做的好处包括:

1. 更好的可读性: 语义化的 HTML 更易于阅读和理解，因为它使用标签来表示文档元素的意义。
2. 更好的 SEO: 搜索引擎可以更好地理解语义化的 HTML，因此可以更好地索引和排名网页。
3. 更好的可访问性: 语义化的 HTML 更易于被屏幕阅读器等辅助技术理解，因此更易于被残障人士访问。
4.  更好的维护性: 语义化的 HTML 更易于维护和扩展，因为它使用标签表示文档元素的意义，因此开发人员可以更轻松地找到和修改文档中的特定元素。

总之，使用语义化的 HTML 会使网页更具可读性、可访问性、可维护性，也更能被搜索引擎收录，使得网站更具有可见性。

如何做到语义化？

做到语义化的方法有很多，主要有以下几点：

1. 使用正确的标签: 使用 HTML5 中新增的标签。
2. 避免使用 div 和 span: div 和 span 是没有语义的标签，应该尽量避免使用。
3. 使用标签的属性: 使用标签的属性来补充标签的语义。
4. 使用 ARIA 属性: 使用WAI-ARIA 属性来补充 HTML 标签本身不具备的语义。
5. 使用结构化的类名: 使用结构化的类名来描述元素的语义，如 .header、.nav、.main等。
6. 使用 alt 描述图片信息: 使用 alt 属性来描述图片信息，对于没有文本替代的图片应该加上 alt="" 或者不要使用 alt 属性
7. 文本替代的方法: 使用 CSS 代替图片等

三、实践练习例子：

1.img标签表示图片

2.HTML代码例子

3.DOM树

四、课后个人总结：

个人学习总结来说，通过对前端，HTML，DOM树和语义化的学习，我深刻认识到了前端在网页开发中的重要性。前端是解决用户和界面的交互问题，跨终端的重要组成部分。我了解到了HTML是网页开发的基础，DOM树是表示HTML或XML文档结构的树形结构。并且，我学会了语义化HTML的概念和实现方法，语义化HTML可以使网页更具可读性、可访问性、可维护性，更容易被搜索引擎收录，提高网站的可见性。这些知识为我以后的网页开发工作打下了基础。

五、引用参考：

前端入门·基础语言篇：前端与HTML

前端与 HTML | 青训营笔记