一，前端是什么？
我们平时看到的web网页，都是前端技术所实现的。前端技术指通过浏览器到用户端计算机的统称，存贮于服务器端的统称为后端技术。
百度词条定义：前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。
由此可见，在开发web网页中三剑客的威力。当然了，肯定不是下面这种剑客（笑.jpg）
二，HTML
HTML，中文译为超文本标记语言，是构成网页文档的主要语言，主要用来实现静态页面。一般情况下，用户看到的文字，图形，动画，声音，表格，链接等元素都是由HTML语言描述的。“超”，即超越文本，指可设置样 式、可展示图片，而最核心的是“超级链接”,可以链接到其他文档。由于HTML是由标签组成的，所以使用HTML就是在基本结构上加标签。
下面是一些常用标签：
三，CSS
（一）CSS简介
CSS中文译作层叠样式表，用于控制网页样式
（二）CSS定义规则：
选择器{属性1：属性值2；属性2：属性值2；属性3：属性值3}
（三）两种使用方式
1，内嵌式
内嵌式是将CSS代码集中写在HTML文档的头部标签中，并用style标记定义
基本语法如下：
<head>
<style type = "text/css">
选择器{属性1：属性值2；属性2：属性值2；属性3：属性值3}
</style>
</head>
在上述语法中，style标记一般位于head标记中的title标记之后，因为浏览器式从上到下的解析代码的，把CSS代码放置头部便于提前加载和解析，以避免网页内容加载后没有样式修饰带来的问题。
2，链入式
链入式是将所有的样式放在一个或多个以CSS为拓展名的外部样式表文件中，通过标记将外部样式表文件链接到html文件中
基本语法如下：
<head>
<link href= "CSS 文件路径" type="text/CSS" rel = "stylesheet" />
</head>
上面语法中，标记需要放在头部标记中 ，并且必须指定标记的3个属性，具体如下：
href：定义多链接外部样式表文件地址
Type：定义所链接文档类型
rel：定义当前文档与被链接文档之间的关系
3，CSS选择器和常用属性
（1），标记选择器
基本语法如下：
标记名{属性1：属性值1；属性2：属性值2；属性值3：属性值3；}
（2），类选择器
基本语法如下：
.类名{属性1：属性值1；属性2：属性值2；属性值3：属性值3；}
（3），id选择器
基本语法如下：
#id{属性1：属性值1；属性2：属性值2；属性值3：属性值3；}
（4），通配符选择器
基本语法如下：
*{属性1：属性值1；属性2：属性值2；属性值3：属性值3；}
四，JavaScript
（一）JS简介
JavaScript是一种网页脚本语言。通过在HTML网页中直接嵌入Javascript脚本，可以实现响应浏览器事件，读写HTML元素内容，更改HTML元素样式等功能。JavaScript代码可以很容易的嵌入html页面中。也可以单独将Javascript代码写在一个文件中。浏览器对JavaScript脚本程序进行解释执行
基本写法：
<javascript type="text/javascript">javascript代码块</javascript>
/*其中 <script type="text/javascript">javascript代码块</javascript>
也可以写为<script language="javascript">*/
注：
(1)JavaScript与Java一样，对大小写敏感
(2)注释的写法，可以用HTML中的
也可以用’’//’‘和’’/’/'注释
（二）Javascript语法
如果有过C++/Java等高级语言的开发经验，是很容易看懂js代码的，在语法中，主要有一下两个方面需要注意
1，变量的定义
2，函数的定义
（三）JavaScript内置对象
（1）window:负责操作浏览器窗口，负责窗口的状态，开/闭等。
（2）document：负责操作浏览器载入的文档（html文件），从属于window。
（3）history：可以代替后退（前进）按钮访问历史记录，从属于window。
（4）location：访问地址栏，也从属于window。
（四）DOM相关知识
（一），DOM简介
DOM是Document Object Model（文档对象模型）的简称，是W3C推荐的处理可拓展标志语言的标准编程接口，它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
W3C将DOM标准分成3个不同的部分：核心DOM，XML DOM和HTML DOM。其中，核心DOM是针对任何结构化文档的标准模型，XML DOM是正对XML文档的标准模型，而HTML DOM是针对HTML的标准模型。
HTML DOM模型被构造为对象的树，该树的根节点是文档（document）对象，该对象有一个documentElement的属性引用，表示文档根元素的Element对象。HTML文档中表示文档根元素的Element对象是元素，和元素都可以看作是树的枝干。
（二），HTML DOM 树结构
1，节点的访问
在DOM中，HTML文档中的各个结点被视为各种类型的Node对象。如果想要通过某个结点的子节点中找到该元素，其语法如下：
父节点对象 = 子节点对象.parentNode;
2，获取文档中的指定元素
通过遍历节点的访问可以找到文档中指定的元素，但是这样比较麻烦，document对象中提供了直接搜索文档中指定元素的方法。
具体如下：
（1）：通过元素的id属性获取元素
Document的getElementById()方法可以通过元素的id属性获取元素。例如，获取id属性值为userId节点的代码如下：
Document.getElementById("userId");
（2）：通过元素的name属性获取元素
Document的getElementByName()方法可以通过元素的name属性获取元素。由于多个元素可能有相同的name值，所以该方法返回一个数组，而不是一个元素。如果想获得唯一的元素，可以通过获取返回数组中下标值为0的元素进行获取。例如，获取name值为userName的节点的代码如下所示：
Document.getElementByName("userName")[0];