前端开发工程师（初级）主要负责网站和应用界面的设计与实现，掌握HTML、CSS及JavaScript等技术，具备良好的编程习惯和团队协作能力。
在前端开发领域内，初级前端开发工程师需要掌握一系列基础知识和技术，包括HTML、CSS以及JavaScript。
1. **HTML** 是网页内容的基础语言，定义了网页的基本结构与元素。它包含文档类型声明、头部（``）和主体（``），以及其他标签如块级元素和内联元素等。这些元素有助于页面的布局设计。此外，HTML还通过标题标记 (`
`) 设置网页名称，并利用元数据 (`<meta>`) 提供关于页面的重要信息，包括字符编码及关键词设定。在 HTML 中还可以直接定义样式（`<style>`）和脚本（`<script>`），并通过使用如 `<div>` 的结构元素来划分内容区域、链接到其他页面的超链接标记 (`<a>`) 以及各种文本、列表、图片等展示形式。
2. **CSS** 是用于控制网页样式的语言，它决定了布局与外观。选择器（例如类和ID）是 CSS 中的基本组成部分之一；另外还包括了如何设置背景色或图像、使用流体设计或网格系统进行页面布局的方法，以及实现动画效果的技巧等。此外，通过引入预处理器如 Sass 或 Less 以提高代码效率，并利用 Bootstrap 和 Foundation 等框架来加速开发流程。
3. **JavaScript** 是前端编程的核心语言之一，用于处理用户交互及动态内容生成。它涵盖了变量定义、数据类型（字符串、数字、布尔值等）、操作符和表达式等内容；同时介绍了函数与对象的概念及其在代码中的应用方式，并且提到了一些重要的内置对象如 Date 和 RegExp 的使用方法。此外，JSON 作为轻量级的数据交换格式也在其中有所涉及。
4. **DOM**（文档对象模型）是 HTML 或 XML 文档的编程接口，它允许开发者访问和操作这些文档的内容、结构及样式等信息。这部分内容包括了对 DOM 树的理解及其节点的操作方法；同时介绍了事件处理机制以及如何利用 JavaScript 来实现元素样式的动态修改等功能。
5. **DOM 实践** 强调理论知识在实际项目中的应用，如组件化开发以提高代码的可维护性，并且还涵盖了跨浏览器兼容性问题解决、性能优化及用户体验设计等方面的实践技能。
初级前端工程师需要掌握上述基础知识并持续学习新的框架和库（例如 React、Vue 和 Angular），以便跟上快速发展的技术趋势。同时具备良好的编程规范意识，以及测试与团队协作能力则是职业发展中不可或缺的部分。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="后<span style=color: #f73131>端</span><span style=color: #f73131>开</span><span style=color: #f73131>发</span><span style=color: #f73131>全</span>面<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>.pdf"
href="https://d.itadn.com/i0_95289989289/B/301173" target="_blank">后<span style=color: #f73131>端</span><span style=color: #f73131>开</span><span style=color: #f73131>发</span><span style=color: #f73131>全</span>面<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>.pdf</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
《后端开发全面笔记》是一本详尽记录了后端开发技术与实战经验的电子书，涵盖从基础理论到高级应用的知识点，适合初学者和进阶开发者参考学习。
后端开发综合笔记涵盖了多个方面的知识和技术要点，旨在帮助开发者系统地学习和掌握后端开发的核心技能。这些内容包括但不限于编程语言、框架选择、数据库设计与优化、API 设计原则以及安全性和性能优化等方面的知识点。通过整理这份资料，希望能够为希望深入理解并实践后端技术的读者提供一个全面的学习路径和支持。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>开</span><span style=color: #f73131>发</span><span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span>简历模板"
href="https://d.itadn.com/i0_92507914162/B/284555" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>开</span><span style=color: #f73131>发</span><span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span>简历模板</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本简历模板专为前端开发工程师设计，清晰展示了应聘者的技术技能、项目经验和个人成就，帮助求职者突出展示其专业能力。
帮助学习Web前端设计的求职者编写简历模板，并解决在撰写简历过程中可能遇到的问题。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="Linux运维<span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span>个人<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>，采用MD<span style=color: #f73131>格</span><span style=color: #f73131>式</span>"
href="https://d.itadn.com/i0_43061495290/B/615500" target="_blank">Linux运维<span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span>个人<span style=color: #f73131>笔</span><span style=color: #f73131>记</span>，采用MD<span style=color: #f73131>格</span><span style=color: #f73131>式</span></a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
这是一本由Linux运维工程师编写的个人技术总结与心得分享，内容涵盖了从基础命令到系统管理等多个方面，全部以Markdown格式记录。
Ansible自动化运维平台CI与CD代码管理、Docker容器实战部署以及Kubernetes云计算实战的讲解。涵盖Linux常用服务器部署实战及系统管理宝典，包括对Linux系统资源限制与加固方面的深入探讨。MySQL数据库和Redis数据库的实际操作技巧也被详细解析，并提供了Shell脚本高手速成课程。此外还有Web大并发集群、Apache、Nginx以及Tomcat服务器的部署高可用集群构建方法介绍。
在可视化数据分析领域中介绍了ELK（Elasticsearch, Logstash, Kibana）系统，同时也涉及计算机网络基础和企业级监控系统的讲解，如Zabbix及Prometheus容器监控。最后还覆盖了数据安全、企业存储虚拟化技术中的KVM等主题。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="<span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>开</span><span style=color: #f73131>发</span><span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span>转正汇报模板"
href="https://d.itadn.com/i0_44830400498/B/1192871" target="_blank"><span style=color: #f73131>前</span><span style=color: #f73131>端</span><span style=color: #f73131>开</span><span style=color: #f73131>发</span><span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span>转正汇报模板</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本汇报模板适用于前端开发工程师工作试用期结束时使用，详细记录了个人在试用期内的工作成果、技术提升及项目经验等，旨在帮助评估从理论到实践的应用能力以及团队协作的表现。
【前端开发工程师转正述职报告模版】
在前端开发领域，一份详尽的转正述职报告是展示个人工作成果与专业能力的重要文档。本报告模板适用于初级前端开发工程师，旨在帮助他们清晰地阐述过去的工作经历、自我评估、工作经验以及未来的发展规划。
**01 工作回顾**
在此部分中，工程师可以详细列出在过去一年里所参与的项目及其具体内容和职责。例如，在智慧商城后端管理系统及微信小程序的开发过程中，负责前端设计与开发工作，包括页面布局、样式设定及交互效果实现等任务，并且能够很好地配合后台系统进行前后端分离式开发模式的应用实践以及团队协作。
**02 自我评价**
这部分是对个人工作的总结性评价。可以强调良好的沟通技巧和团队合作精神；同时表达对新技术的热情与自我提升的决心，比如主动学习新技能、独立解决问题，在高压环境中保持工作效率等优点。
**03 工作体会**
工作体会部分应该分享从实际项目中学到的经验教训及感悟。例如前端开发的动态特性要求不断更新知识和技术以提高用户体验，并且需要有效地与其他角色（如设计师和后端开发者）合作，确保项目的成功实施。
**04 未来规划与展望**
在展望未来时，工程师应设定明确的学习和发展目标，比如深入研究技术、掌握更多框架工具以及增强解决问题的能力。同时期望参与更复杂的项目以进一步提升团队协作能力和项目管理技巧。
通过撰写这样的述职报告，初级前端开发工程师能够全面展示其专业素养和成长潜力，为顺利转正提供有力支持。这份报告不仅是对工作经历的总结，也是个人职业发展的关键里程碑之一。
</div><!---->
</div>
</li>
<li data-v-abd0b829=""
class="border-solid border-2 border-gray-300 dark:border-gray-600 grid auto-rows-min grid-cols-9 hover:bg-gray-100 hover:rounded-lg dark:hover:bg-gray-700 listyle"
style="cursor: pointer;">
<div data-v-abd0b829=""
class="col-start-1 pt-1 col-end-2 row-span-2 place-self-center imgsize">
<svg data-v-abd0b829="" t="1721980773527" class="icon" viewBox="0 0 1024 1024"
version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26446" width="55"
height="110">
<path data-v-abd0b829=""
d="M834.6624 409.6a40.8576 40.8576 0 0 0-13.7728-30.63808l-254.32064-254.32064a40.87296 40.87296 0 0 0-31.1552-11.84768c-0.97792-0.07168-1.9456-0.1536-2.93376-0.1536H230.4a40.96 40.96 0 0 0-40.96 40.96v716.8a40.96 40.96 0 0 0 40.96 40.96h563.2a40.96 40.96 0 0 0 40.96-40.96V419.84c0-1.62304-0.11776-3.21536-0.3072-4.79232a40.6528 40.6528 0 0 0 0.4096-5.44768zM578.56 252.48256L694.71744 368.64H578.56V252.48256zM271.36 829.44V194.56h225.28v215.04a40.96 40.96 0 0 0 40.96 40.96h215.04v378.88H271.36z"
p-id="26447" fill="#707070"></path>
<path data-v-abd0b829=""
d="M371.2 660.48h133.12a40.96 40.96 0 0 0 0-81.92h-133.12a40.96 40.96 0 0 0 0 81.92zM650.24 696.32H363.52a40.96 40.96 0 0 0 0 81.92h286.72a40.96 40.96 0 0 0 0-81.92z"
p-id="26448" fill="#707070"></path>
</svg>
</div>
<div data-v-abd0b829=""
class="col-start-2 p-1 col-end-8 items-center sm:flex text-base font-normal pt-1 text-gray-900 dark:text-white min-h-13 max-h-13 overflow-hidden">
<a data-v-abd0b829="" class="min-h-12 max-h-12 overflow-hidden ..."
title="Web<span style=color: #f73131>前</span><span style=color: #f73131>端</span>研<span style=color: #f73131>发</span><span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span><span style=color: #f73131>笔</span>试选择题及答案"
href="https://d.itadn.com/i0_26743674020/B/291576" target="_blank">Web<span style=color: #f73131>前</span><span style=color: #f73131>端</span>研<span style=color: #f73131>发</span><span style=color: #f73131>工</span><span style=color: #f73131>程</span><span style=color: #f73131>师</span><span style=color: #f73131>笔</span>试选择题及答案</a>
</div>
<div data-v-abd0b829="" class="col-start-9 col-end-10" style="float: left;"><span
data-v-abd0b829="" class="onestyle">优质</span></div>
<div data-v-abd0b829=""
class="col-start-2 col-end-9 p-1 text-gray-500 text-xs font-normal dark:text-white">
<div data-v-abd0b829="" class="min-h-8 max-h-8 overflow-hidden ...">
本书籍针对准备成为Web前端开发工程师的读者设计，提供了丰富的笔试选择题及其解答，帮助读者加深对HTML、CSS、JavaScript等技术的理解与应用。
本段落介绍了一些关于JavaScript的知识点，包括动态改变层内容的方法（如使用innerHTML、innerText属性以及通过设置层的隐藏与显示来实现）、利用onKeyDown事件打印event keyCode的结果（例如值为65的情况），并介绍了数组方法的相关知识（其中提到length()不属于数组方法）。此外还提到了检索被选定选项索引的方法。
</div><!---->
</div>
</li>
</body>
</html>
5星
