First, what front-end that?
We usually seeweb page, Front-end technology are implemented. Front-end technology refers collectively to the browser of the client computer, collectively stored in the server-side back-end technology.
Baidu entry definition: front-end development isCreate a Web page or app such as front-end interfaceProcess presented to the user through HTML, CSS and JavaScript, and derived from a variety of technologies, frameworks, solutions to achieve user interface interaction of Internet products.
Thus, the Three Musketeers in the development of web pages in power. Of course, this is certainly not the following swordsman (laughs .jpg)
Two, HTML
HTML, Chinese translated into HTML, the main language is composed of pages of documents, mainlyIt used to implement static pages. Under normal circumstances, the user sees as text, graphics, animation, sound, tables, links and other elements are described by the HTML language. " Super", that is beyond the text, refers to style, can show pictures, but the core is the "hyperlink", you can link to other documents . Because HTML tags is composed, so that the use of HTML tag in the basic structure.
Here are some common tags:
Three, CSS
(A) CSS Profile
Cascading Style Sheets CSS Chinese translation forControl page style
(Ii) CSS define rules:
选择器{属性1：属性值2；属性2：属性值2；属性3：属性值3}
(C) be used in two ways
1, inner fitting formula
Embedded CSS code set is written in the head tags of an HTML document, and with a style tag defines
the following basic syntax:
<head>
<style type = "text/css">
选择器{属性1：属性值2；属性2：属性值2；属性3：属性值3}
</style>
</head>
In the above syntax, style characters generally located behind the head tag of title tag, becauseBrowser-style parsing code from top to bottom的，把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，获取文档中的指定元素
You can be found traversing the access node through the elements specified in the documentation, but this is too much trouble, document object provides a direct method to search for documents in the specified elements.
details as follows:
(1): Gets the id attribute of the element by element
Document of the getElementById () method gets the element by element id attribute. For example, access node id userId code attribute value follows:
Document.getElementById("userId");
(2): Get the name attribute of the element by element
Document of getElementByName () method gets the element by element name attribute. Since a plurality of elements may have the same name value, this method returns an array, rather than one element. To obtain a unique element, can obtain return element array index value by obtaining 0. For example, a node name obtaining the value of userName code as follows:
Document.getElementByName("userName")[0];