HTML、CSS、JavaScript学习心得

前端心得

不知不觉我从java88班来到java96班有一点时间了，在这段时间里面不知不觉前端的部分已经快要结束了。
但是经过这段时间的学习我身上的问题也慢慢的显现了出来，因为我之前已经学过一遍了所以基础知识我是大部分都是了解的但是关于代码部分我还是记不住。还有虽然上课时可以顺着老师的逻辑知道下一步做什么，但是完全要我自己独立写的话，逻辑线的连贯性没那么清晰。还有自己平时打代码的时候出现问题的时候我总是无法自己独立的把问题解决掉。
我自己觉得前端分为三个部分
第一html定义网页的内容；
第二css定义了网页的布局；
第三JavaScript定义了网页的行为

HTML

首先html的主要结构，以及一些基本的标签，这一章需要记的东西稍多一点，因为每个标签都要记它的用法和单词。然后介绍表格的用法，表格在网页设计中很重要，它可以算是整个页面布局的半个灵魂(因为后面还有一个DIV)。这不光要了解表格的建立方式，还要了解表格中涉及到的一些属性及其用法。第三章主要介绍了两个部分，一个是表单，在表单里涉及到了几个控件，如：文本框，密码框，单选按钮，复选框，下拉列表框，多行文本，提交按钮和重置按钮。这些为我们以后什么登录系统时很有帮助。

CSS

是Cascading Style Sheets（层叠样式表单）的缩写，从整体概念来说，它是负责整个网站样式的一种代码。
我自己个人认为css的主要重点分为三个。
1.插入CSS样式
插入的方法有三种：
1）外部样式：< link rel=”stylesheet” type=”text/css” href=”XXX.css” />；
2）内部样式：< style type = “text/css”>
XXXXXX
XXXXXX

3)内联样式：< p style = “XXXXXX”>
这三种方式存在优先级，内联最高，内部其次。
2.使用语法
一般为选择器，属性，赋值：selector {property: value}。
3.选择器
常用的选择器有：
1）标签选择器：div；
2）ID选择器：#ID；
3）类选择器：.div；
以及一些其他衍生出来的选择器

JavaScript

1.条件语句
1） if语句：if(condition) {
当条件为true时，执行代码
}
2） if else语句：if(condition) {
当条件为true时，执行代码
} else {
当条件为false时，执行代码
}
3）if else if else 多个条件：if(condition1) {
当条件1为true时，执行代码
} else if(condition2) {
当条件2为true时，执行代码
} else if(condition3) {
当条件3为true时，执行代码
} else {
当条件都不成立的情况下，执行相应的代码
}
4）switch语句：switch(n) { // n === 1
case 1:
执行代码块1
break;
case2:
执行代码块2
break;
default:
与上面条件都不符合的情况下是，执行相应的代码
}
5）三目运算符：function test() {
var time = 9;
document.getElementById(“content”).innerHTML = (time < 10)?”是小于10的”:”不是小于10的”;
}
2.循环语句
1）while循环：while(condition) {
所需执行的代码
}注：如果条件一直为true，该循环会一直执行
2）for循环for(语句1;语句2;语句3) {
被执行的代码块
}
? 语句1：（代码块）执行之前，只会在循环之前执行一次；
? 语句2：定义循环条件，只要循环条件为真，就执行代码块；
? 语句3：在循环（代码块）执行之后，执行的语句。执行后，for循环会再次执行循环条件；
3）do….while循环：do {
被执行的代码块；
} while(condition);
4）break和condition关键字的作用
break：用于跳出当前循环；
continue：用于跳出循环的一个迭代；
3.数据类型
在JavaScript中，数据类型包括字符串（string）、数值（number）、布尔值（boolean）、数组（Array）、对象（object）、空（null）、未定义（undefined）。
typeof运算符 用于确认当前数据的类型。
JavaScript拥有动态类型，意味着相同的变量可用作不同的类型。
字符串可以存储一系列的字符，比如“Tom”，“Jack”。可以使用单引号或者双引号包裹。
在双引号中包含字符串，可以使用单引号；在单引号中包含字符串，可以使用双引号。也可以使用转义字符。
数值型：JavaScript只有一种数字类型。数字可以带小数点，也可以不带；极大或极小的数字可以通过科学计算法来书写。
浮点数：所有JavaScript数字均为64位。JavaScript不是类型语言，与其他编程语言是不一样的，JavaScript不会定义不同类型的数值，比如整型、浮点型等。
在JavaScript中，数字不分整数类型和浮点类型，所有的数字都是浮点类型。它所能表示最大的值是1.7976931348623157e+308，最小的值是5e-324。
在数值型的运算中，浮点类型由于涉及不同的进制的运算，所以我们计算的时候，会出现意向不到的结果。
无穷大：当数字运算的结果超过JavaScript所能表示的数字的上限（溢出），结果是无穷大值（Infinity）；当负数的值超出范围，就是负无穷大（-Infinity）。
NaN ：NaN(Not a Number)代表非数字的特殊值。NaN用于指示某个值不是数字。
使用isNaN()函数，判断值是否为NaN，返回值true或false。
布尔类型：JavaScript中boolean类型，除了true和false分别表示真和假以外，0也是可以表示假，非0表示真
对象：JavaScript中对象是拥有属性和方法的数据。
JavaScript中，几乎所有的事物都是对象，JavaScript对象是变量的容器。
在JavaScript中对象类型的理解：
? 狭义的对象（Object）
? 数值（Number）
? 字符串（String）
? 布尔值（Boolean）
? 数组（Array）
? 函数（function）
对象简单的理解：是由若干个键值对（key-value）结构组成。
函数：函数是一段可以重复调用的代码块，函数区别于区块，最显著的特征是可以传入参数，根据不同的参数，返回不同的结果。
数组：数组是按次序排列的一组值，每个值的位置都有编号（即是索引，从0开始），数组使用方括号定义。
数组的元素可以是不同的类型。
如果数组中的元素也为数组，就构成一个二维数组。
4.DOM
DOM是JavaScript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为JavaScript对象，从而通过JavaScript脚本进行各种操作（比如增删元素）。
DOM节点：DOM的最小组成单位就是节点。DOM树就是由不同类型的节点组成的。每个节点可以看成是DOM树上的叶子。
在DOM中，节点的类型常见的有7种：
Document：整个文档树的顶层节点；
DocumentType：doctype标签（比如：< !doctype html>）;
Element：各种HTML标签（比如：< body>，< h1>，< a>，< div>）;
Attribute：页面元素的属性（比如：id=”xxx”，class=””，type=”text”）;
Text：标签之间或标签包含的文本；
Comment：注释
DocumentFragment：文档片段（仅做了解）

节点的三种关系：
父节点关系（parentNode）:直接的上级关系；
子节点关系（childNodes）:直接的下级节点；
同级节点关系（sibling）:拥有同一个父节点的节点。
以上几乎就是我对于HTML、css和就JavaScript知识大概的理解了 。
以后我打算多敲敲代码，尽早将我代码记不住的问题解决掉。