开始前的准备
在搬砖的乔布梭第一天的课堂上，讲解了前面背景知识里就职要求中的软件和技术的关系和用途，实则是前端工作的主要内容，而下面这篇文章也将从宏观层面说明前端开发过程、方法。
宏观思路，即开发大体流程
广义的前端开发步骤从设计开始。前端工程师的主要任务是基于设计稿制作出有交互功能的网站。思路步骤如下：
- 设计（与工程师关系不大）；
- 拿到设计稿分析结构；
- 构思页面元素；
- 页面分层，在不同层级插入页面元素；
- 考虑动效（？）；
在行动流程上，大体上有以下几个步骤：
- 确定元素和分层后搭建页面html结构；
- 对照设计效果图测量，明确尺寸、颜色、字体、位图等等基本元素的具体参数；
- 根据页面结构和设计稿制定页面css样式；
- 设计并制作动效（？）；
*就目前课程中涉及的主要是前端工程师在项目中完成的主要工作。目前来看，前端工程师的工作处在界面设计师和用户体验设计师之间，并且需要与二者有诸多沟通工作。
前端方法和工具
前端的开发需要对页面元素和层级结构极有条理地排布并细致地实施。
如前文所述，比照设计稿确定页面元素后，需要构思页面分层和结构。就目前的学习进度中涉及到的已经表明，层级上，元素的属性本身并不代表容量的大与小，简单的【div】盒子模型可以内套多层，同时每层多个盒子，都需要根据需要划分。每个设计稿中的文字、图片、图标文字、输入框和按钮等都可能包含多层关系，以建立页面链接或形成光标动效。页面从页头至页尾有多个不同功能的区域，每个功能区域甚至都可以作为独立的小项目来看待。
在实施的过程中，对不同层级的元素引用方法和允许的样式有细微差异，还有更大层面的“模型”概念，都需要根据情况灵活套用。具体来说，标签引用需要注意子代和后代关系，标签和类选择器之间是否有【.】的前缀差异。命名时避免重复，且可能需要对一个元素多次命名贴标签。行内元素与块级元素的差异和两者性质的转换，为何要转换，转换之后有什么新的功能可以实现，都需要对各种标签
做一个前端需要工具VScode配合chrome作为基础，PS和freemind做辅助。具体来说，各个工具的作用是：
- freemind作为面对网页设计效果图时，用于构思页面分层的工具。可以在freemind中提前写好大的分区和分区中各个页面元素，以及不可见的嵌套元素等，以提高后期编程时的效率；
- ps（photoshop）用于效果图的测量。打开ctrl+R显示【标尺】，通过【上边】和【左边】的标尺拖拽到页面元素的边界，结合【框选工具】选中页面元素，再在右侧导航栏中调取到信息页，查看W（宽度）和H高度，以此确定页面元素的具体尺寸设定；
- VScode作为代码编写工具，后期详解；
- chrome浏览器作为预览和页面测试工具。在vscode的应用中搜索live server插件并安装，当编写好html代码后，右击选择open with live server即可在chrome浏览器中预览效果（chrome浏览器为默认浏览器）。chrome的页面测试作用则通过在浏览器中右键打开【检查】，查看html中的页面元素和下方显示的元素css信息检查，在检查中，可以直接对css样式进行修改，实现对样式的调整（刷新后丢失调整结果，且vscode中修改也将丢失调整结果）。调整后可以直接复制css样式代码进vscode，以此作为调试和测试的高效工具。
*另外，chrome浏览器预览中，当出现页面bug时，可以在body中找到该元素，检查下方css，查看继承的多层样式来寻找bug。
另外汇总一下在vscode中，可以加入的一些插件是：
- Live server或Live server preview;
上文所示，用于实时查看html和css样式修改结果。
- Chinese(simplified)简体中文 language pack；
将vscode界面改为中文版，方便编写。
- Open in browser；
在后期js中更多使用browser打开本地，并不能用live server模拟服务器运行查看控制台的效果。
- ChatGPT中文版；
可以摸索一下，说不定有惊喜
- background-cover（小猪）；
将vscode改成你喜欢的背景，安装后，在vscode界面下方蓝色横条右边第二个图标，点击，可以修改背景。
综上，如果按照前文所述的行动流程来说，以上工具使用的顺序将是：
- 对照设计图，使用freemind打结构；
- VScode搭建html基础框架；
- 结合ps测量数据，vscode中编写css样式；
- 通过live server在chrome浏览器中预览并调试页面；
以上就是在制作一个html页面时的大致思路和使用工具，接下来就要开始结合干货来实操了！
