# FrontEndSystemLearning **Repository Path**: moncylee/front-end-system-learning ## Basic Information - **Project Name**: FrontEndSystemLearning - **Description**: 前端体系学习 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-08-09 - **Last Updated**: 2024-04-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 前置引导 * 你的疑惑问题？ * 为什么选择前端开发？ * 职业前景好 * 大前端 * 网页开发 * 移动端开发 * 小程序开发 * 全栈开发 * 选择性多 * 电商 * 金融 * 教育 * 社交 * 旅游 * 医疗 有网站的地方就一定有前端存在 * 适合初学者 * 入门门槛低 * 容易上手 * 什么样的前端工程师，市场需求更抢手 * PC、手机端、小程序、H5 * 前端工程师 * Web全栈工程师 * H5/小程序开发工程师 * Node.js工程师岗位 * 前端工程师需要学习哪些知识？ * 目标：从0到全栈能力更具职业竞争力的前端工程师 * 需要 * 完备的知识体系，拓宽跨平台功能 * 从前端到服务端，帮你打通全栈开发能力 * 两大核心企业项目贯穿整个体系，实现项目闭环开发 * 还原企业真实开发业务场景，掌握企业项目迭代需求与流程 * 15+练手项目，学习过程即实战，帮你夯实基础 * 学练测评答一体化，为你的学习保驾护航 * 怎么样才能学会？ * 阶段学习 * 阶段一：零基础入门 * 三大核心技术：HTML、CSS3、JavaScript * 阶段收获： * 使用HTML5和CSS3一比一还原真实网页开发 * 结合CSS3和JavaScript实现网页特效 * 阶段二：组件化与WebAPP开发 * 组件化编程+移动端开发：ES6、网络请求、组件化、移动端 * 阶段收获： * 掌握WEB端与移动端开发技巧 * 组件化开发思想编写企业级代码 * 掌握Javascript第六代语言标准 * 掌握跨端适配技巧 * “仿穷游”旅游网前端项目：PC端+移动WebAPP * PC端 * H5+CSS3布局 * JS动态特效网页 * 组件化重构 * 移动端 * 移动端WebApp开发 * 步骤 * 同一项目逐步迭代 * 从PC端演化成移动WebApp * 传统单一模块开发到组件化开发 * 企业级代码+真实开发流程 * 收获一套前端上线作品 * 第三阶段：主流框架与小程序 * 小程序+主流框架：小程序、vue.js、服务端 * 阶段收获： * 掌握多端与服务端开发技术 * 快速开发企业级项目，提升开发效率 * 掌握轻应用小程序开发技术 * 仿京东到家WebApp全栈项目 * 6大核心业务 * 15+精美页面 * 12+真实接口 * 多套实用解决方案 * 企业真实开发业务场景+流程 * 需求分析 * 原型图分析 * 数据库与接口设计 * 前端开发 * 后端开发 * 前后端联调 * 阶段四：大厂钟爱技术栈 * 大型项目构建：Typescript、React.js、gulp、git * 阶段收获 * 掌握TS与React.js开发技能 * 掌握大型项目开发方案 * 掌握代码管理工具git的使用 * 掌握自动化工具gulp的使用 * 大型旅游项目 ### 简介 * 模块 * 1.网页布局基础知识：HTML5/css3/javascript * 2.企业核心编程思想 ————组件化开发 * 3.移动webApp开发 * 4.小程序开发 * 5.主流框架vue.js/React.js * 6.服务端开发node.js/MongoDB/koa2 * 课程特点 * 一切服务于就业 * 培养动手能力 * 重视兴趣 * 前端开发介绍 * 前端开发行业介绍 * 前端开发的前身是“网页制作”，随着移动端的兴起和4G/5G技术的普及，互联网产品业务越来越复杂，在2011年前后，逐步蜕变为前端开发 * 什么是“前端”：一切用户能看见的东西、产生交互的东西，都是前端同学在负责 * 前端开发主要技术介绍 * HTML5:搭建网页结构的语言，增加了很多移动端的支持，简单好学 * CSS3:样式表,美化网页的语言，增加了很多动画、过渡等特性，要记的英语单词非常多，不过非常有意思 * JavaScript：前端开发工程师最重要的“看家语言”，js功底的好坏，决定了职业高度，学习需要下苦工 * Vue.js/React.js:从2016年前后开始流行的前端框架，采用模块化开发、数据驱动、声明式编程，只要前期“马步扎稳”，后面“武功招式”随便学 ### 前端开发的变革 * 2016年前后，以webpack为代表的Node.js工作流工具使前端开发的开发形式产生了翻天覆地的变化 * 并且，随着vue.js/React.js诞生，使前端开发进入了框架时代 ### 大前端时代 * 今天，前端开发“上天入地，无所不能”：web开发、移动web开发、App开发、小程序开发、服务端开发等等 * 一个优秀的前端开发工程师也被叫做“全栈开发工程师”，这个时代也被叫做“大前端时代” ## 开发工具和环境准备 ### VS Code * Visual Studio Code简称VS Code,来自微软公司 * 优点：内置功能非常丰富、插件全且安装简单、轻量、有MAC版本 * VS Code中文配置 * VS Code初始为英文界面，如何配置为中文？ * 配置中文界面需要安装插件，在插件中心搜索Chinese,安装插件即可 * VS Code颜色主题 * VS Code提供了不同风格的颜色主题 * 在文件-首选项-颜色主题中，将主题改为Light+ * ctrl+鼠标滚轮缩放字号 * 如果能ctrl+鼠标滚轮缩放字号，会非常方便 * 我们需要进行相关的配置，打开配置中心，搜索"滚动"即可 * 快捷键 * ctrl+c 复制 * ctrl+v 黏贴 * ctrl+x 剪切 * ctrl+z 撤销 * ctrl+s 保存 * Alt+鼠标选择:进行多行编辑 * Sublime快捷键扩展 * sublime是另外一个非常著名的编辑器，Sublime中的快捷键非常的经典，而插件中心搜索Sublime,安装插件即可 ### IDE简介 * IDE（集成开发环境）是含有代码编辑、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的“高级代码编辑器” * 要理解无论使用什么IDE编写出来的代码，本质上都是“白底黑字”的，都是“纯文字”的 * 前端开发主流IDE IDE名称 公司 是否免费 功能强大度 * Vistual Studio Code 微软 是 强大 * Sublime 个人开发者 是 适中 * Atom github 是 适中 * WebStorm jetbrains 否 非常强大 * HBuilder DCloud 是 非常强大 # 第一周 HTML5基础语法与标签 ## HTML5语法与基础标签 ### 第一章 课程简介 * 互联网基本原理 * 1.互联网基本原理 * HTML5基础入门 * 1.创建一个网页 * 2.浏览网页的方法 * 3.认识HTML5骨架 * 4.字符集 * 5.title、关键字及页面描述 * 6.认识标签 * HTML5的基本标签 * 1.标题和段落标签 * 2.div标签 * HTML5特性 * 小蒙医生项目开发 ### 第二章 认识互联网（了解即可） 互联网基本原理 * 在本地开发，在服务器共享 * 开发人员在本地（电脑上）完成开发：.html,.css,.js;把这些文件上传到服务器（性能非常高的计算机，24小时不断电）上，服务器上存储这些文件 * 为什么要上传服务器，因为服务器有共享文件的能力。 * HTTP协议 * HTTP协议（Hypertext Transfer Protocol，超文本传输协议）是互联网数据传输的常见协议 * 一次HTTP事务由“HTTP请求”和“HTTP响应”构成 * 网址前的http://就表示用http协议请求页面 * 什么是前端、后端？ 一个网址的访问会经历哪些步骤 * 1、HTTP请求 * 2、在服务器上，java/PHP/Python等程序将运行，执行数据库“增删改查”等业务，它们就是后端语言 * 3、HTTP响应 * 4、在浏览器中，HTML、CSS和JS程序将运行，执行页面结构渲染、美化、交互效果等业务，他们就是前端语言 ### 第三章 基础语法与特性 * 创建第一个网页 * 创建网页-方法1 * 创建一个空文件夹，在vscode编辑器中打开这个文件夹 * 按ctrl+N快捷键新建文件，保存格式必须要手动填写".html"后缀 * 创建网页-方法2 * 在文件夹中直接点击鼠标右键“新建文本文件” * 将.txt格式文件改为.html文件 * 必须设置操作系统“文件扩展名”为可见 * html文件是纯文本的 * 网页虽然是花花绿绿的，但是html文件本身是纯文本的 * HTML骨架的生成 * 输入！（英文模式下输入的感叹号），按tab键，即可自动生成HTML5的骨架 * 如果骨架没有生成，就说明你没有将网页保存好，或者网页保存格式不是.html后缀 * 浏览网页的方法 * 网页的浏览-方法1 * 直接在文件夹中双击网页图标，即可查看网页 * Chorme网页浏览器非常适合开发，所以要将Chorme浏览器设置为默认的浏览器，杀毒软件、管家通常会阻止这个操作，请妥善设置杀毒软件相关设置 * 网页的浏览-方法2 * 给VSCode安装Live Server插件，顾名思义，这个插件可以让实时热更新网页，自动刷新网页 * 安装完插件后，在htm1文件中，按ctrl+shift+p键，选择"Open with Live Server”即可 * 使用这种方法必须注意：网页必须存放在文件夹中，且VSCode已经打开了文件夹 * 认识HTML5骨架 * 使用!就能快速生成一个HTML5骨架 * ：文档类型声明DTD * ：html标签对 * :网页的一些配置 * ：设置网页的字符集 * ：视口设置，在移动网页开发将介绍 * Document ：网页的标题 * 文档类型声明DTD * HTML文件第一行必须是DTD(Document Type Definition,文档类型声明) * 不写DTD会引发浏览器的一些兼容问题 * 不同版本的HTML有不同的DTD写法 * W3C组织 * W3C(The World Wide Web Consortium,万维网联合会)是一个万维网的主要国际标准组织。该联盟成立于1994年，负责指定Web标准，主要是HTML和CSS。 * 认识标签对 * lang属性表示网页的语言，zh表示中文,不改也行 * 认识和标签对 * 是网页的配置，不要认为是网页的头部 * 书写网页的内容，包括网页的头部、主要内容、页脚等各个部分 * 字符集 * 字符集设置出现的位置 * ：设置网页的字符集 * 单词识记 * meta：元标签,表示网页的基础配置 * charset：字符集 * UTF-8：是一种字符集 * UTF-8和gb2312 * 更改网页的字符集 * 无论使用哪种字符集，一定要在vscode中将文件也设置为相同字符集，否则会出现乱码，然后更改meta标签： * * * * Live Server 插件不支持gb2312(gbk)字符集，只支持UTF-8字符集 * title、关键词及页面描述 * title * title标签用来设置网页的标题，文字会显示在浏览器的标签栏上 * title的用途 * title也是搜索引擎收录网站时显示的标题，为了吸引用户点击，合理设置title是必要的 * 网页关键词和页面描述 * 合理设置网页的网页关键词和页面描述，也是SEO的重要手段 * SEO（Search Engine Optimization,搜索引擎优化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名，让网站在搜索引擎的结果中占据领先地位，获得品牌收益 * 使用meta标签设置网页关键词和描述，name属性非常关键，用来设置meta的具体功能 * * * 网页描述也是搜索引擎显示的简介词语 * 认识标签 * 什么是标签 * HTML叫做“超文本标记语言”，超文本标记就是标签 * 这些标签都有不同的功能 * 认识标签对 * 标签通常成对出现

，

起始标签，

结束标签 * 不同的标签有不同的功能 * 标签可以给文字设置不同的语义 *

不负韶华，只争朝夕

p标签表示段落 *

不负韶华，只争朝夕

h1标签表示一级标题 * 单标签 * 有的标签不是成对的，而是只有起始标签，称为单标签 * 设置字符集的： * 在HTML4代，单标签必须写一个结尾的反斜杠，HTML5不用写 ： * 重新认识HTML * 现在，你就能彻底理解HTML"超文本标记语言"的含义了 * div标签 * div是英语division“分割”的缩写，顾名思义，
标签对用来将相关的内容组合到一起，以和其他内容分割，使文档结构更清晰 * 比如，网页的头部要放到一个
标签对中，轮播图也要放到一个
标签对中，文章内容也要放到一个
标签对中 *
是最常见的HTML标签，因为它可以结合CSS使用，实现网页的布局，这种布局形式叫做“DIV+CSS” *
像是一个容器，什么都可以容纳，因此工程师也习惯称呼
为“盒子” * div的常见类名 * div标签可以添加class属性表示“类名”，类名服务于css * 页头-header * logo-logo * 导航条-nav * 横幅-banner * 内容区域-content * 页脚-footer * 标题和段落标签 * 标题标签 * h系列标签表示“标题”语义，h是headline的意思 * h1:一级标题 * h2:二级标题 * h3:三级标题 * h4:四级标题 * h5:五级标题 * h6:六级标题 * 搜索引擎非常看重

标签的内容，应该将重点内容放到

中，比如网页的logo等 *

标签一般只能放置一个，否则会被搜索引擎视为作弊 * 段落标签 *

标签表示段落标签，p是英语paragraph的意思 * 任何段落都要放到

标签中，因为HTML中即使代码换行了，页面显示效果也不会换行，必须写到

中 *

标签中不能嵌套h系列标签和其他p标签 * HTML5特性 * 空白折叠现象 * 文字和文字之间的多个空格、换行会被折叠成一个空格 * 标签“内壁”和文字之间的空格会被忽略 * 转义字符 * 请首先自己试试看：在网页中显示“今天我们学习了

标签的功能是段落” * 常见转义字符（字符实体）： * < :小于号 * > :大于号 *   :空格（不会被折叠） * © :版权符号@ * HTML注释 * 为代码书写清晰的注释是非常重要的，可以使日后再阅读代码或者他人阅读代码提供提示 * HTML的注释语法如下，可以在VScode编辑器中使用ctrl+/键输入 * 小蒙医生项目开发 * 工作开发流程 * 工作开发流程 * 产品经理（提出需求，画原型图） * 设计师UI/UE（画设计图） * 前端开发工程师 * 原型图和设计图 * 现在的原型图/设计图软件 * 现在测量原型图非常先进，设计师使用Axure或者Sketch等软件，可以直接给我们“直观标注”的原型图、设计图。 * 项目起步 * 创建文件夹结构，主要文件夹如下 * images:存放图片 * css:存放样式表 * js:存放js文件 * 网站首页index.html * 绝大多数服务器默认的网站首页名为index.html ### 第四章 课程总结 * 重点内容 * HTML是什么？如何创建网页？如何浏览网页？ * HTML5骨架是什么结构？什么是DTD? * 标题和段落标签、div标签要如何使用？ * 难点内容 * 网页的字符集有什么区别？ * 常见的SE0配置项和应该遵守的规则有哪些？ * HTTP是什么？我们做好的网页如何被用户看见？ ## 列表标签 * 课程简介 * 无序列表 * 有序列表 * 定义列表 * 小蒙医生项目开发 * 列表 *
    无序列表 *
      有序列表 *
      定义列表 * 无序列表 * 无序列表是没有刻意顺序的列表 *
        标签和
      • 标签 * 无序列表使用
          标签，每个列表项都是
        • 标签 * ul:unordered list 无序列表 * li:list item 列表项 * 父子组合标签 * 无序列表是一个父子组合标签，上阵父子兵，不能单独出现，父标签ul，子标签li * 注意代码正确缩进 * 当HTML标签形成嵌套，必须注意代码的缩进（Tab键） *
        • 不能单独使用 *
        • 标签不能单独使用，它必须放到
            或
              中使用 *
                的子标签只能是
              • * HTML规定，
                  的子标签只能是
                • ,绝对不能出现其他任何标签 *
                • 是容器,可以放任何标签 * 列表的嵌套 一定要记住： 1.li不能散着放 2.ul的子标签只能是li 3.li里面可以放任何东西 * 无序列表的type属性 * 无序列表有typeS属性，可以定义前导符号的样式，但是在HTML中已经被废弃，建议使用CSS替代 * disc:默认值，实心圆 * circle:空心圆 * square:实心方块 * 有序列表 * 有序列表是有刻意顺序的列表 *
                    标签和
                  1. 标签 * 无序列表使用
                      标签，每个列表项都是
                    1. 标签 * ol:ordered list 有序列表 * li:list item 列表项 *
                        标签注意事项 * li不能散着放，必须放到
                          或
                            中使用 *
                              的子标签只能是
                            1. 标签 * li里面可以放任何东西 *
                                标签的type属性 * ol标签可以设置type属性，用来设置编号的类型 *
                                  标签的start属性 * start属性值必须是一个整数，指定了列表编号的起始值 * 此属性的值应为阿拉伯数字，尽管列表条目的编号类型type属性可能指定为罗马数字编号等其他类型的编号 *
                                    标签的reversed属性 * reversed属性指定列表中的条目是否是倒序排列的 * reversed属性不需要值，只需要写reversed单词即可，这是HTML5的全新特性 * 定义列表 * 需要逐条给出定义描述的列表，就是定义列表 * dl:definition list 定义列表 * dt:data term 数据项 * dd:data defination 数据定义 * dl是定义列表标签，内容交替出现dt、dd标签 * 也允许dt和dd不交替出现，而是分别处于不同的定义列表中 * 哪里应该使用定义列表 * 使用什么标签，不应该看样式，应该看语义 * 只要语义上有“解释说明”含义的文字，且为列表形态，应该使用定义列表 * 课程总结 * 重点内容 * ul、ol和dl分别要在什么场合下使用？ * ul和li标签的嵌套使用规则是什么？ * ul和ol的常见属性有哪些？ ## 多媒体与语义化标签 * 课程简介 * 图片与超链接标签 * 图片标签 * 音频和视频 * 音频和视频 * 大纲与语义化标签 * 大纲标签 * 语义化标签 * 小蒙医生项目开发 * 多媒体标签 * 图片标签 : * 标签用来网页中插入图片 * img是image的缩写 * src是source的缩写 * 图片必须复制到项目文件夹中 * 一定注意，图片必须要复制到项目文件夹中，一般将图片保存到项目文件夹中的images子文件夹中 * 图片只是被引入到了网页中 * 图片本质上没有被插入到网页中，只是被引入到了网页中，所以将来要将图片也一起上传到服务器上，将图片复制到项目文件中，即可整体上传 * alt属性alternate "替代品"的缩写，它是对图像的文本描述，不是强制性的 * 如果由于某种原因无法加载图像，浏览器会在页面上显示alt属性中的备用文本 * 供视力不方便的朋友使用的网页朗读器，也会朗读alt中的文本 * img标签的width、height属性 * width、height属性分别设置宽度和高度，单位是像素，但是不需要写单位 * 如果省略其中一个属性，则表示按原始比例缩放图片 * 网页上支持的图片格式 * .bmp:windows画图软件默认保存的格式，位图 * .gif:支持动画（比如表情包） * .jpeg:(.jpg):有损压缩图片，用于照片 * .png:便携式网络图像，用于logo、背景图形等，支持透明和半透明 * .svg:矢量图片 * webp:最新的压缩算法非常优秀的图片格式 * 相对路径 * 相对路径：描述从网页出发，如何找到图片。比如“前面路口左转，直走100米后右转就到了” * 随着网页和图片的位置关系不同，插入图片的代码随之改变 * 如果需要回退层级，使用"../"这样的写法 * 绝对路径 * 描述图片精准地址。比如：北京市海地区西三环北路甲2号院中关村国防科技大学2号楼 * 不管网页在哪里，绝对路径不需要改变 * 超级链接 * 超级链接是将网页和网页连结到一起的方法，是互联网成“网”的原因 * 标签 * a是anchor（锚）的首字母 * herf:hypertext reference超文本引用 * herf属性支持相对路径和绝对路径 * herf属性支持相对路径和绝对路径 * 标签的title属性 * 用于设置鼠标的悬停文本 * 在新窗口中打开网页 * 将标签的target属性设置为blank,即可在新标签页中打开网页 * HTML4代，blank之前有一个下划线 * 给图片设置超级链接 * 图片也可以设置超级链接，只需要标签包裹img标签即可 * 页面内锚点 * 较长的页面，可以适当的给h系列标签添加id属性，它将成为页面的“锚点” * 当网址后面添加#时，页面将自动滚动到锚点所在位置 * 其他页面的超级链接，可以链接到指定锚点 * 下载链接 * 指向exe、zip、rar等文件格式的链接，将自动成为下载链接 * 下载 * 邮件链接、电话链接 * 有mailto:前缀的链接是邮件链接，系统将自动打开Email相关软件 * 给小编发邮件 * 有tel:前缀的链接是电话连接，系统将自动打开拨号盘 * 打电话买火车票 * 音频和视频 * 曾几何时，在网页中插入音频和视频需要借助Flash，今天，Flash技术已经快要被淘汰，HTML5可以轻松在网页中插入音频和视频 * 音频 * 在浏览器中插入音频需要使用