Day2前端与 HTML听课随笔笔记 ｜ 青训营

Day2
课程：前端与 HTML
课程时长：43min

主要内容

1. 前端工作的定义
2. 前端技术栈拆解与分析
3. HTML 作用解析
4. HTML 语义化

前端要解决的基本问题：

前端的主要任务其实就是将设计师的设计图转化为网页，并提供给用户进行交互。
前端需要解决以下基本问题：

1. 页面布局问题：如何将各种元素放置在正确的位置上。

2. 样式问题：如何为元素设置颜色、大小、字体等样式。

3. 交互问题：如何实现用户与页面之间的交互，如按钮点击、下拉菜单等。

4. 性能问题：如何减少页面加载时间，提高用户体验。

5. 兼容性问题：如何兼容各种浏览器、设备，确保页面在各种环境下都能正常展示。

HTML

HTML（超文本标记语言）是用于创建网页的标准标记语言。它基于标记（标签），标记用于描述网页文档结构和内容的语言。HTML文档是由一系列元素构成的，这些元素可以用标签来描述其含义和属性。

前端技术栈的构成：

1. HTML：网页的结构和内容，是最基本的语言。

2. CSS：样式表语言，用于设置网页的样式，如字体、颜色、大小等。

3. JavaScript：用于实现网页的交互和动态效果，如表单验证、轮播图等。

4. 框架：用于简化开发过程，提高开发效率，如Vue、React、Angular等。

5. 工具：用于辅助开发，如代码编辑器、构建工具、调试工具等。

HTML语义化：

HTML语义化是指使用恰当的HTML标签来描述文档结构和内容的方法，它可以提高网页的可读性、可维护性和可访问性。

1. 使用恰当的标签：如使用h1、h2、h3等标题标签表示网页的标题层次结构，使用p标签表示段落，使用ul、ol、li标签表示列表等。

2. 避免过度嵌套：标签的嵌套应该尽量简洁，避免过度嵌套。

3. 使用有意义的标签名称：标签名称应该清晰明了，具有表现力，以便于开发者和机器阅读。

4. 避免使用无语义的标签：尽量避免使用没有语义的标签，如div和span，除非没有其他恰当的标签可用。

5. 使用适当的标签属性：标签属性应该准确地描述其含义，如img标签的alt属性应该包含图片的描述信息。

css样式

个人认为css的学习主要还是靠多写多练，多去复刻市面上的优秀网站，写多了就自然会调节样式了。而且可以培养一定的网页审美能力。