在现在这个数字时代，前端开发无疑是连接创意和技术的桥梁。作为前端开发的核心部分，HTML，css，JavaScript共同构建了一个新的世界。
前端的角色
前端作为代码界的导演，将一些不同的想法转化为实际的网页，最后供使用者使用。
如何编写静态页面
先构建HTML结构，HTML是网页的基础，他定义文本的大致框架，在编写HTML时，我们要遵循职责分离，将不同的标签分开处理。
HTML 相当于演员，有各种元素
- 盒子（div）：div是HTML中一个比较常用的元素，通常被用作容器，用于包裹其他元素或内容。div是块级元素，默认占据一整行，从上到下排列。
- HTML标签：HTML的其他标签也提供了非常重要的作用，例如h1-h6分别定义了不同大小的标题，p用于定义段落
- span内容：span是行内元素，他不会改变布局。
- 结构：在HTML中，结构至关重要。一个清晰的结构，有利于优化和提高网页的可读性和维护性
CSS 相当于化妆师：使网页更富美感
- css是前端开发中不可或缺的一部分，他的职能是为HTML添加样式，使网页看起来更加美观，他通过色彩、布局、文字的改变，使网页更加的生动。
1.类名选择器（.keys）:类名选择器用于选择具有特定类名的HTML元素。 2.子元素选择器（>）：子元素选择器用于选择某个元素的直接子元素。例如 div>span能生成一个
标签
- 开发效率：为了提高开发效率，前端开发者通常会使用一些工具和技巧。.key>.key>div+span.sound可以快速生成一个包含两个div元素和一个带有sound类的span元素的嵌套结构；而.keys>(.key>div+dpan.sound)*8可以生成8个这样的结构。
## HTML的分类与布局
- html标签可以分为块级元素和行内元素两类。块级元素默认占据一行，从上到下排列，如div、h1等；而行内元素则从左到右排列，例如span、a等。
- display：flex：在CSS中，该属性用于启动弹性布局
盒模型
- 盒模型使css布局的一份基础概念
-
border（边框）：元素边框
-
content（内容）：元素的实际内容
- 3.
padding（内边距）：内容区域与边框的空白 - 5.
margin（外边距）：元素与其他元素之间的空白
-
- 通过调整这些属性，可以控制元素的大小、位置和间距，从而实现理想的布局效果。
End
前端开发需要具备良好的HTML、CSS和JavaScript知识，我们前端开发者需要不断掌握新的技能，以适应市场需求和趋势
