转载声明：文章来源https://blog.csdn.net/itcast_cn/article/details/131088619 

前端初学者入门有很多问题其实可以避免的，分三部分已经汇总好易出错的问题和前端学习技巧

第一部分：HTML的学习

其实HTML的话，重要的就是一个标记语言的学习，是前端入门最基础的一部分。这里也不是说背一背就解决问题的，选择IT，程序员这一方面，只要多练习，多敲代码感觉就好了，所以熟练的使用这些标记其实不是很大的问题。

容易出错的问题

1. 缺少结束标签：如果忘记了结束标签，浏览器将无法正确解析HTML代码。比如，如果忘记了在段落结尾处添加</p>标签，浏览器将无法正确显示段落。

2. 错误的嵌套：HTML标记没有正确嵌套，浏览器将无法正确解析你的代码。例如，如果在一个段落中嵌套了一个标题标记，浏览器将无法正确显示你的页面。

3. 大小写错误：HTML标记对大小写不敏感，但是为了可读性，建议使用小写字母。如果在标记中使用了大写字母，浏览器可能无法正确解析代码。

4. 属性错误：HTML标记中的属性没有正确设置，浏览器将无法正确解析代码。例如，如果在图像标记中忘记了设置src属性，浏览器将无法正确显示图像。

5. 忘记引号：如果你在HTML标记中使用属性，必须将属性值用引号括起来。如果忘记了引号，浏览器将无法正确解析代码。

 第二部分：CSS学习

CSS是更应该学好的一个模块。因为我们都知道，其实一个网站的WEB前端，就是用HTML加CSS来写的，不是用之前的表格来写的，CSS是网页样式，一个网页的整体美感，在你确定了框架之后，就看你的CSS样式的添加了，所以CSS学好很重要。

下是一些常见的CSS错误和如何避免它们的例子：

1. 盒模型错误

当你设置元素的宽度和高度时，你需要考虑到元素的内边距和边框。如果你没有考虑到这些，你的元素可能会比你预期的更大或更小。为了避免这个问题，你可以使用box-sizing属性来指定元素的盒模型类型。

例如，如果你想要元素的宽度和高度包括内边距和边框，你可以这样写：

box-sizing: border-box;

2. 浮动错误

当你使用浮动来布局元素时，你需要小心处理。如果你没有清除浮动，你的布局可能会出现问题。为了避免这个问题，你可以使用clear属性来清除浮动。

例如，如果你想要一个元素在左侧浮动，而另一个元素在右侧浮动，你可以这样写：

.left {
  float: left;
  clear: both;
}
 
.right {
  float: right;
  clear: both;
}

3.选择器错误

当你使用选择器来选择元素时，你需要确保你的选择器是正确的。如果你的选择器不正确，你的样式将不会应用到你想要的元素上。为了避免这个问题，你可以使用浏览器的开发者工具来检查你的选择器是否正确。

例如，如果你想要选择所有的段落元素，你可以这样写：

p {
  /* styles */
}

希望这些示例能够帮助初学者们避免一些常见的CSS错误。

第三部分：重点学习JavaScript

JS是是很多人没办法很好接触的地方，初学者们像一些对属性的操作的标记之类，懂得怎么用，但是不是很熟悉，所以经常在操作的时候要去查手册。容易出错的地方是将数组中的元素按照一定的规则或者顺序添加到指定或对应的表格中，也是掌握不好的地方，JS可以理解成大量算法的集合，因为很多时候你都会用到函数，只是多了一些找元素和对元素绑定标记的过程，最重要的还是构造函数，调用函数的过程!

JavaScript中容易出错的地方有很多，常见的错误：

1. 变量声明问题：在JavaScript中，如果没有使用关键字声明变量，那么该变量将自动成为全局变量。这可能会导致变量名冲突和其他问题。因此，始终使用var，let或const关键字声明变量。

2. 类型问题：JavaScript是一种弱类型语言，这意味着变量的类型可以在运行时更改。这可能会导致一些意外的行为，例如将字符串与数字相加。始终确保变量具有正确的类型，并使用typeof运算符检查变量的类型。

3. 异步问题：JavaScript中的异步编程可能会导致一些困难。例如，如果我们尝试在异步函数之外访问异步函数中的变量，则可能会遇到问题。一定要理解异步编程的工作原理，并使用async/await或Promise来处理异步代码。

4. 作用域问题：JavaScript中的作用域规则可能会导致一些意外的行为。例如，在循环中使用var关键字声明变量可能会导致变量泄漏到全局作用域中。要掌握JavaScript中的作用域规则，并使用let或const关键字声明变量。

5. 对象引用问题：JavaScript中的对象是通过引用传递的，而不是通过值传递的。这可能会导致一些意外的行为，例如将一个对象传递给函数并更改该对象的属性。要掌握JavaScript中的对象引用规则，并使用Object.assign()或展开运算符来创建新的对象。

JavaScript可以分为三个基本类型：

（1）静态类型： CSS/DOM，不需要页面上的任何数据，在 HTML文件中使用 JavaScript来动态显示或修改内容。

（2）动态类型： Flash, JavaScript, XML等。

（3）脚本语言： JavaScript和 Web服务器上的脚本语言（如 ASP. NET、 PHP）。

学习过程中要注意：

1、边学边练：当你阅读或只是看别人做某事的时候，你并不会进步很多，你可能花了很长时间但仍然学不到任何东西，没有把学习的知识付诸实践是无法真正学会的。

2、一次只专注一件事：上面已经给大家整理好学习步骤了，大家可以从简单的开始，从HTML、CSS到JavaScript逐步进阶，忽略你学习的步骤意外的所有事情。

3、建立自己的知识架构，并且在这个架构上，不断地进行优化。什么叫做知识架构？我们可以把它理解为知识的“目录”或者索引，它能够帮助我们把零散的知识组织起来，也能够帮助我们发现一些知识上的盲区。当然，知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。

对学习知识体系的态度，应该不要去强求，而是去理解知识体系的完整性和框架，多面，多维度，多方面的去累积来补足，补全自己的知识体系。以javascript为例，我们可以将它分成三个层级：①文法： 分为词法和语法；②语义；③运行时： 分为类型和执行过程。

4、多做项目，学这个就是为了做项目，学完了做不了项目的，趁早停止，技术的成长都是在项目中提升的，所以一定多接触项目。不要怕遇到问题，因为只有遇到问题解决问题，经验才会积累下来。