（更新中）【前端基础 合集】HTML + CSS + 移动端 + JS 全套笔记

目录

前言

第一部分：HTML

第二部分：CSS

第三部分：移动端开发

第四部分：JavaScript 基础语法

第五部分：JS WebAPIs

第六部分：JavaScript 高级

第七部分：前后端交互（JQuery、Ajax、跨域问题）

---

前言

从HTML到CSS再到移动端开发、JS、JS WebAPIs、JS高级、前后端交互……

一套相对系统的教程笔记。参考资料：黑马前端相关课件。

适合后端人员了解前端、对前端知识体系有一个大致的了解。本笔记有很多不足，仅作参考。

第一部分：HTML

HTML的作用就是写出一个网页的基本模板，相当于建房子，完事儿之后得到的是一个毛坯房。如何装修呢？需要用到第二部分学到的CSS

【第一部分 | HTML】1：揭露HTML的神秘面纱_Graskli的博客-CSDN博客第一章：对前端的HTML做了一个基本概述：介绍了HTML语言的基本结构、开发工具VCcode 以及 学习技巧https://blog.csdn.net/m0_57265007/article/details/127112106?spm=1001.2014.3001.5501【第一部分 | HTML】2：HTML的常用标签_Graskli的博客-CSDN博客第二章，介绍了HTML的常用基本标签：h p br img a 等等https://blog.csdn.net/m0_57265007/article/details/127112145?spm=1001.2014.3001.5501【第一部分 | HTML】3：表格、列表和表单_Graskli的博客-CSDN博客本文介绍了HTML的三大最主要的元素：表格、列表和表单https://blog.csdn.net/m0_57265007/article/details/127112345?spm=1001.2014.3001.5501【第一部分 | HTML】4：HTML5 新特性_Graskli的博客-CSDN博客HTML 第四章：介绍了一些HTML5的新特性https://blog.csdn.net/m0_57265007/article/details/127182590?spm=1001.2014.3001.5501

第二部分：CSS

CSS相当于把我们写好的网站给排版、装饰、添加一些简单的小动画。

【第二部分 | CSS】1：万物始于选择器_Graskli的博客-CSDN博客本文是 CSS基础入门的第一章：介绍了什么是CSS、在哪里写CSS。同时还介绍了CSS中的最最基础的知识点：选择器。https://blog.csdn.net/m0_57265007/article/details/127152789?spm=1001.2014.3001.5501【第二部分 | CSS】2：点缀一下html元素_Graskli的博客-CSDN博客CSS第二章：本文介绍了常见的样式语法、背景图片的样式修改。同时还介绍了CSS的引入方式https://blog.csdn.net/m0_57265007/article/details/127152928?spm=1001.2014.3001.5501【第二部分 | CSS】3：如何摆放网页的元素 —— 网页布局_Graskli的博客-CSDN博客CSS第三篇文章：以网页布局为目标，介绍了最最最基础的核心概念：元素显示模式、CSS三大特性：层叠性、继承性、优先级、符合选择器的优先级计算。同时简单体积了网页布局的三大利器：盒子模型、浮动、定位。https://blog.csdn.net/m0_57265007/article/details/127153127?spm=1001.2014.3001.5501【第二部分 | CSS】4：网页布局之盒子模型_Graskli的博客-CSDN博客CSS第四篇文章：介绍了网页布局的本质、盒子模型、盒子样式等知识https://blog.csdn.net/m0_57265007/article/details/127163484?spm=1001.2014.3001.5501【第二部分 | CSS】5：网页布局之浮动_Graskli的博客-CSDN博客CSS第五篇文章：本文介绍了浮动的基本概念、基本语法、基本应用。以及浮动带来的一些问题的解决方法：清除浮动https://blog.csdn.net/m0_57265007/article/details/127163654?spm=1001.2014.3001.5501【第二部分 | CSS】6：网页布局之浮动_Graskli的博客-CSDN博客CSS第六篇文章：介绍了网页布局的最后一种技巧：定位。介绍了定位的基本概念、使用，以及一些高级的技巧https://blog.csdn.net/m0_57265007/article/details/127174899?spm=1001.2014.3001.5501【第二部分 | CSS】7：CSS 进阶知识_Graskli的博客-CSDN博客CSS第七篇文章：介绍了一些CSS的高级特性https://blog.csdn.net/m0_57265007/article/details/127175390?spm=1001.2014.3001.5501【第二部分 | CSS】8：一篇文章了解 CSS3新特性_Graskli的博客-CSDN博客CSS第8篇文章：一篇文章了解CSS3的所有新特性https://blog.csdn.net/m0_57265007/article/details/127182664?spm=1001.2014.3001.5501

第三部分：移动端开发

作为后端开发人员，这部分简单了解下即可。简单来说，我们之前开发的网站如果直接放在PE（移动端）上，会有或多或少的问题：比如不兼容、格式出错等等。

所以这部分主要学习移动端开发的一些知识。

【第三部分 | 移动端开发】1：移动端基础概要_Graskli的博客-CSDN博客介绍了一下移动端开发的基本知识https://blog.csdn.net/m0_57265007/article/details/127949474?spm=1001.2014.3001.5502【第三部分 | 移动端开发】2：流式布局_Graskli的博客-CSDN博客介绍了一下移动端开发的流式布局https://blog.csdn.net/m0_57265007/article/details/127949547?spm=1001.2014.3001.5502【第三部分 | 移动端开发】3：Flex布局_Graskli的博客-CSDN博客介绍了一下移动端开发中的 Flex布局https://blog.csdn.net/m0_57265007/article/details/127949588?spm=1001.2014.3001.5502【第三部分 | 移动端开发】4：Rem布局_Graskli的博客-CSDN博客本文介绍了一下移动端开发中的 Rem 布局https://blog.csdn.net/m0_57265007/article/details/127949678?spm=1001.2014.3001.5502【第三部分 | 移动端开发】5：响应式布局_Graskli的博客-CSDN博客本文简单介绍了一下响应式布局及 Bootstrap框架https://blog.csdn.net/m0_57265007/article/details/127949730?spm=1001.2014.3001.5502
 

第四部分：JavaScript 基础语法

上面第一到第三部分，我们的网站是建立起来了、也有了一些装饰，但是少了些活气，比如没有按钮交互、不能和服务器进行交互。

所以我们需要学习一门有关于前端的编程语言（虽然目前 node.js 也用于做后端）

因此，我们第四部分来学习 JavaScript 的基本语法，如果您有 Java 的编程基础，那么看这个是很轻松的。

学习了 JavaScript 之后，我们就需要学习其API和衍生的库。目的是为了操作网页中的元素，让他们能动起来（比如我点击某个按钮，弹出一段文字等等）。

【第四部分 | JavaScript 基础】1：JS概述、变量及输入输出_Graskli的博客-CSDN博客如果想使用JS进行前端开发， 就必须知道一些最最基本的JS语法。本文是介绍JS语法的第一篇文章：介绍了JS的概念、书写位置、变量的类型、输入输出。https://blog.csdn.net/m0_57265007/article/details/127961814?spm=1001.2014.3001.5502【第四部分 | JavaScript 基础】2：运算、控制流程、数组_Graskli的博客-CSDN博客本文介绍了 JS 的运算符、控制语句、数组https://blog.csdn.net/m0_57265007/article/details/127961977?spm=1001.2014.3001.5502【第四部分 | JavaScript 基础】3：函数、作用域与预解析、对象_Graskli的博客-CSDN博客JavaScript基础语法的最后一篇笔记：介绍了JS的函数、作用域、脚本语言的预解析规则、自定义对象、以及JS内置的常用对象的APIhttps://blog.csdn.net/m0_57265007/article/details/127962037?spm=1001.2014.3001.5502

第五部分：JS WebAPIs

JS WebAPIs 主要用于操作网页中的元素，比如你的 <li> 标签。通过学习 WebAPIs ，你可以进行网页元素的交互、改动、特效、本地存储相关工作。

总之，学会 JS WebAPIs 是为了让你的网页更生动，效果更丰富。

【第五部分 | JS WebAPI】1：WebAPIs概述、网页元素的获取、事件_Graskli的博客-CSDN博客学习完JS后，我们就需要学习有关JS的 WebAPIs 啦！就像学习完 Java后，就要开始学习 Servlet、JDBC、SSM、SpringBoot 一样自然……WebAPIs就是通过 JS 来获取网页中的元素（如标签等），进而对这些元素添加一些诸如【事件、操作、更新、动效】等交互效果。这么说：对于后端而言，Java是根基，Servlet是后端基础，框架是后端的实际应用；对于前端而言，HTML、CSS是搭建和美化静态网页，JS是根基，Vue等框架是让网页活起来的实际应用。https://blog.csdn.net/m0_57265007/article/details/127962379?spm=1001.2014.3001.5502【第五部分 | JS WebAPI】2：DOM 元素操作_Graskli的博客-CSDN博客JS WebAPIs 的第二篇 —— 操作 DOM元素https://blog.csdn.net/m0_57265007/article/details/127981215?spm=1001.2014.3001.5501【第五部分 | JS WebAPI】3：DOM 节点操作_Graskli的博客-CSDN博客本文介绍了 JS 的节点操作https://blog.csdn.net/m0_57265007/article/details/127981342?spm=1001.2014.3001.5501【第五部分 | JS WebAPI】4：八千字详解 “事件·高级篇”_Graskli的博客-CSDN博客本章介绍了 JS WebAPIs 中有关于事件的高级用法和特性https://blog.csdn.net/m0_57265007/article/details/127981458?spm=1001.2014.3001.5501【第五部分 | JS WebAPI】5：1W字详解Bom对象_Graskli的博客-CSDN博客本文介绍了JS的Bom对象：load事件，让我们能把 JS 代码写入 中；同时还介绍了 this 的指向问题、JS的同步异步机制。除此之外，还介绍了和 document 同级的、隶属于 window 下的诸如 location、navigater、history 等对象及其用法https://blog.csdn.net/m0_57265007/article/details/127981630?spm=1001.2014.3001.5501【第五部分 | JS WebAPI】6：PC端网页特效与本地存储_Graskli的博客-CSDN博客本文介绍了 JS的动画制作、本地存储相关知识https://blog.csdn.net/m0_57265007/article/details/127981908?spm=1001.2014.3001.5501

第六部分：JavaScript 高级

这部分做了解即可，主要是介绍了JS的面向对象、函数高级、正则表达式相关知识。

正则表达式可以好好看看，这个是和表单验证相关的内容。

表单验证会在第七部分讲到，这一部分会告诉你如何用 JS 的类库去和我们的后端（服务器）打交道！

【第六部分 | JavaScript高级】1：面向对象_Graskli的博客-CSDN博客本文介绍了JS高级 —— 面向对象的语法https://blog.csdn.net/m0_57265007/article/details/128006251?spm=1001.2014.3001.5502【第六部分 | JavaScript高级】2：函数高级_Graskli的博客-CSDN博客本文介绍了JS中的函数高级，包括this指向、闭包、严格模式、深浅拷贝https://blog.csdn.net/m0_57265007/article/details/128006344?spm=1001.2014.3001.5502【第六部分 | JavaScript高级】3：正则表达式_Graskli的博客-CSDN博客本文介绍了JavaScript中的正则表达式相关概念，这对我们的表单验证十分重要。虽然网上有很多现成的正则表达式，但是如果了解它们的原理，会更好地帮助我们理解这些表达式的含义。https://blog.csdn.net/m0_57265007/article/details/128006419?spm=1001.2014.3001.5502

第七部分：前后端交互（JQuery、Ajax、跨域问题）

经过前面六个部分的学习，我们写好了网页，给网页拍好了版、穿上了皮肤，并且也适配了移动端，还通过JS给网站添加了一些静态的交互，但是我们还没有解决一个网站最终的目的 —— 和服务器交互并传递数据。

通过JS的类库JQuery（这个已经过时了，了解一下即可）、Ajax及相关原理衍生的Axios等，向后端发送请求，获取后端传来的数据，即可完成前后端的一次交互！

在这个过程中，会遇到诸如跨域问题等各种麻烦。跨域问题可以通过前端解决，也可以通过后端添加 @AcrossOrigin 注解解决。但不管怎么解决，我们的最终目的，是搭建一个前后端能交互的一个网站。

第七部分，需要您有相应的后端基础再进行学习。

（待更新……）