我在刚刚入门时，繁杂的前端技术让我不知道从何下手。随着学习的深入，也对前端技术有了整体的把握。前端的学习可以说是入门容易，精通难。入门容易是因为，首先作为计算机的学习者，经常接触这类东西，而且在前期的学习中，前端技术可用的东西相对固定且内容不多，所以会给人造成一种很简单的感觉，但是随着学习的深入，如何编写美观（主要是CSS）且高效的页面（主要是JS），就是一个彻彻底底技术活。 笔者是倾向于做后端开发（java）的，所以对于前端的内容可以是“浅尝辄止”，本文也是为了学习后端的小伙伴们补充前端的相关知识而准备的，方便大家可以看懂项目中的代码，并自己实战项目，笔者也在不断学习中，如有错误，烦请指正。 笔者认为后端开发对前端的学习应该达到可以看懂前端代码，会编写JS代码，熟练掌握AJAX（这个非常重要），因为很多时候动态控制的效果要根据后端反馈的内容来变化（servlet）。
常说的三大件是：HTML+CSS+JavaScript(JQuery+AJAX) HTML是目前应用最广泛的静态web编写语言。什么是静态呢？即内容是固定的，不会随着和其他实体（服务器，用户）交互而发生改变。在程序编写之初的内容会原封不动地显示给用户。 那什么是CSS呢？简单来说，就是为了控制页面的显示效果，美化页面的。那么如果我们不用CSS可以吗？——当然可以，只要你可以忍受简陋的页面，当然很多时候用户是无法接受的。如果你之前学习过HTML一定知道，HTML页面的标签内的属性也可以提供样式的控制。确实如此，但是CSS会提供更高效且全面的样式控制方式，且可以通过在HTML页面中引入独立的CSS文件来为页面添加样式，实现了代码的分离，方便修改和开发。 但是我们在浏览网页的时候一定会发现，静态不动的页面是无法满足要求的。最常见的，当我们在用户注册时，输入用户名后，点击输入密码栏时，会提示用户名是否合法，这就用到了JS（此时发生了失去焦点事件，后面会说）。JQuery可以看做是JS的一个框架，封装了很多标签的操作。AJAX是一种异步刷新技术，可以用于局部刷新并实现页面的异步加载，AJAX应用是非常非常广泛的，且在整个前端技术里面，是和后端联系最大的一个，作为后端开发，这个一定要熟练掌握。
全称：Hyper Text Markup Language，是超文本标记语言的简写。现在最常用的是HTML5。具有简单，通用且易于扩展的特点。 像之前说的那样，单纯的HTML页面是静态的，通过脚本语言增强其功能：CSS添加样式，JS添加动态效果。 HTML是由一系列的标签组成的。我们编写的HTML页面中的标签会由浏览器解析成一个DOM树。OK，我们来简答解释一下这些名词：
标签：标签可以理解为编程语言里面定义的关键字，会被浏览器解析不会直接显示出来，如果想显示需要通过转义字符。HTML的目的是向用户展示内容，每个标签会有不同的显示效果，只要符合HTML的语法规定（尽管语法已经相当松散了），就可以达到预期的效果。标签主要分成两种：包围式 <label></label>和单目标签<label>。DOM树：DOM树是由一系列的DOM对象组成的，DOM对象的全是：document对象，是由浏览器加载H5页面生成的。可以这么说，一个标签对应一个DOM对象（这就是为什么在JS中会使用到this关键字，和面向对象编程的思想一致）。那为什么的DOM树呢？树作为数据结构里面相当常见的结构，其最明显的特征就是分层，且下一层的节点一定和上一层节点有对应关系（父子关系）。在HTML的编写的代码中，一个标签可以包含别的标签，形成一种父子对应的关系，这就和树的结构完全对应。即，同级的标签互为兄弟， 被包含的标签为包含其标签的子孙关系。 对于一个标签来说： 不在标签体内的内容不会被标签影响，会直接显示出来（根据字符编码方式）。在标签体内的字符串会被标签所渲染。标签结构： —— <!doctype html> ——<html> ————<body> ——————<p></p> ——————<h1></h1> ——————<br> ——————<pre></pre> ——————<b></b> ——————<i></i> ——————<ins></ins><br> ——————<del></del><br> ——————<sup></sup><br> ——————<sub></sub><br> ——————<font></font><br> ————</body> ——</thml>
<!--表示使用h5的语法，否则是h4--> <!doctype html> <html> <!--头部--> <head> <title>基本标签</title> </head> <!--页面体--> <body> hello world! <p>这是一个分段的标签</p><p>包围的内容是一个段落</p> <h1>这是一个标题字h1----h6.每个标题独占一行</h1> <!--下面这个字符会直接显示出来--> 你好啊！！！ <!--独目标记--> <br> <!--html中换行需要使用转义字符。br是用来换行的，是没有结束标记--> <hr color="red", width="300px"> <!--水平线标记,包含一些属性--> <hr color="green", width="100%"> <!--水平线标记,包含一些属性--> <!--预留格式，在页面中展示完全代码编写的内容--> <pre> for(int i = 0; i < 100; i++) { System.out.println(i); } </pre> <!--字体相关的--> <b>这是粗体字</b><br> <i>这是斜体字</i><br> <ins>这是下划线</ins><br> <del>这是删除字</del><br> 这是右上角加字<sup>123</sup><br> 这是右下角加字<sub>123</sub><br> <font size="300px" color="green">我的html页面！</font> </body> </html>显示效果：
和JAVA中的转义字符一样，为了显示一些无法直接显示的文本。什么是无法显示的文本呢？首先是空格，HTML中的空格是无法显示出来的，即你在源码中加入多少空格都不会影响页面的显示。还有就是标签，如果你在标签体里面写了一个标签会形成标签间的父子关系，而不会让这个标签显示出来。这就是实体标签的意义。 实体标签通常以 &开头，以 ;结束。实体标签的内容通常是某个字母的缩写。 图片来自W3school。
表格标签将在页面上显示出表格，在HTML中，表格可以分成：
表头：table head——<th></th> 。自动变粗并居中。表体：分成行和列——<tr><td></td></tr>表尾：table foot——<tf></tf>。自动变粗并居中。 通过表格这种排版方式，我们可以控制HTML页面中各个元素的位置（把对应元素放在单元格内，且不显示边框）。但是现在多用span 和 div来控制，因为这两个更灵活。 对于表格来说，常用的操作是合并行或者列, 利用rowspan来将若干行融合，利用colspan来将若干列融合。注意：列融合会使得一行合并，行融合会使得一列合并。具体效果如下：在合并行或者列时一定要注意合并的地方不要再重复写上td标签。 <!doctype html> <!doctype html> <!doctype html> <html> <head> <title>html中的表格操作</title> </head> <body> <!--设置表格的一些属性，在table标签里面--> <table align="center" border="5px" width="200px" height="200px"> <!--table row--> <!--表头--> <th>这是我的表格</th> <tr> <!--单元格合并：行合并,一列中的每行单元格进行合并，属性值是合并的行数--> <!--注意合并的单元格不要在相应位置多设置<td>标签--> <td rowspan="2">11</td> <td>12</td> <td>13</td> </tr> <tr> <td>22</td> <td>23</td> </tr> <tr> <!--单元格合并：列合并,一行中的每列单元格进行合并，属性值是合并的个数--> <td colspan="3">31</td> </tr> </table> </body> </html>显示效果：
html中的列表分成无序和有序列表。
无序：Unorder list
有序：order list
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表</title> </head> <body> <ul> <li>中国</li> <li>美国</li> <li>日本</li> </ul> <ol> <li>China</li> <li>America</li> <li>Jepan</li> </ol> </body> </html>显示效果：
我们经常会遇到需要在页面中插入图片的需求。这时候需要用到img标签。注意：这个标签是一个单目标签。 其src属性是你想插入的图片的路径。
<!doctype html> <html> <head> <title>插入图片</title> </head> <body> <font size="300px" align="center">Hello world</font> <!--图片标签--> <img src="img1.jpg"/> </body> </html>全称：hot reference。也叫超链接。当我们需要在页面中发起别的页面请求时，我们需要用到该标签，点击热连接会跳转到目标页面。 如果你想在页面中打开一个子页面，使用iframe标签，并规定好该子页面在父页面中的大小即可。
<html> <head> <title>hyperlink</title> </head> <body> <!--新的页面打开超链接--> <a href="http://www.baidu.com" target="_blank">baidu</a> <!--当前页面打开超链接--> <a href="http://www.baidu.com" target="_self">baidu</a> <a href="http://www.baidu.com" target="_parent">baidu</a> <a href="http://www.baidu.com" target="_top">baidu</a> <br> <iframe src="http://www.baidu.com" width="500px" height="300px" > </iframe> </body> </html>显示效果：
表单是HTML中和后端打交道的标签。在指定url地址（通常是servlet地址）和提交方式之后，通过submit按钮就可以向目的地址发送其收集的数据。 提交的方式有：
post：提交内容多，且内容不会在发起是请求上显示出来，安全，但是慢。get：get提交的内容少，不安全，但是快。get是默认的， 比如搜索引擎，常用的就是get方式，而用户登录注册等，常用就是post，这个要视情况而定。 表单的结构通常如下： ——<form action=“你的提交地址” method=“get或者post”> ————<input key=value … /> ————<input key=value … /> ————<select key=value … /> ————<submit key=value… /> ——</form> input标签可以作为form的子标签，也可以单独使用，比如放在div里面。但是要注意的是，input和select通常是用来收集用户输入的信息的，这些信息基本的都会需要传到后台去进行处理，如果一个用户的输入信息没有被传入后台，那么这个信息输入实际上是没有效果的。 虽然form表单的子标签各不相同，但是他们都有一些共同的属性，name 和 value。因为我们最终是将这些子标签收集的内容传递给后端的，那么如何知道什么标签对应收集的什么内容呢？这时候就需要为每一个标签赋予一个name，其收集的信息作为value，以K-V的形式传递到后端进行处理。 注意的是：submit作为提交按钮，其value是不会被传递的。 我们需要掌握几个常用的form子标签：作为最常用的输入标签，input标签有很多type，通过type=xxx来指定该input输入域的类别是什么。 常用的type有：
文本域：text。用户输入文本。单选按钮: radio。从若干给定的的选择中选则一个。复选框：checkboxes。从若干给定的的选择中选则多个。密码：password。输入的内容会以“*”显示。按钮：botton。一个按钮。文件上传：file。上传指定文件。隐藏域：hidden。不对用户显示，但是在form提交的时候会提交上去。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单</title> </head> <body> <!-- action指定提交路径，和a标签的href是一个意思 method是提交的方式： 1.get：get提交的内容少，且不安全，但是快。get是默认的 2.post：提交内容多，安全，但是慢 --> <form action="http://www.baidu.com" method="get"> <!-- 输入域标签input，其type属性规定了输入域的作用 用户想往form里面输入东西，就必须通过输入域控件。 --> <!-- 文本输入框，value是输入框的默认值 --> <input type="text" id="123" value="23" /> <!--checkbox，复选框 --> <input type="checkbox" name="" id="" value="我是一个按钮" /> <!-- 提交按钮，将form表单里所有的内容提交到action指定的地址 --> <input type="submit" value="baidu" /> </form> </body> </html>显示效果：
我们看一下传递的发起的请求：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>User registry</title> </head> <body> <h2>User registry</h2> <hr> <form action="http://www.baidu.com" method="get"> username:<input type="text" name="username" size="3"/> <br> password:<input type="password" name="password" size="3"/> <!-- 单选按钮的name必须一致. --> <br>gender: male<input type="radio" name="gender" id="" value="male" /> <input type="radio" name="gender" id="" value="female" /> <br> degree: <select name="degree" id=""> <option value ="middle school" >middle school</option> <option value ="high school">high school</option> <!-- selected默认选择 --> <option value ="University" selected>University</option> </select> <br> hobby: drinking <input type="checkbox" name= "hobby" value="drinking" /> travel <input type="checkbox" name= "hobby" value="travel" /> <!-- check默认选择 --> smoking <input type="checkbox" name= "hobby" value="smoking" checked/> <br> introduce:<br> <textarea rows="5" cols="30" name="introduce"></textarea> <hr> <input type="submit" value="registry"/> <input type="reset" value="reset" /> </form> </body> </html>显示效果：
disabled属性可以将input输入框隐藏
readonly属性可以将input输入框设置为不可修改，但是数据会跟着提交。
maxlength：设置input输入域的最大长度。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>file upload</title> </head> <body> <form action="localhost" method="post"> username:<input type="text" name="username" disabled="disabled"><br> username:<input type="text" name="username" readonly="readonly"><br> username:<input type="text" name="username" maxlength="3"> <input type="hidden" name="code" value="123"> <input type="submit" value="submit"/> </form> </body> </html>div是用来为网页进行布局的。当前的网页元素布局是盒子套盒子的方式，比table布局的方式更加灵活。
DIV的使用是用左上角的坐标和高、宽来确定一个DIV的位置和大小。
DIV在网页中独占一行。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DIV test</title> </head> <body> <div id="" style="width: 300px; height: 300px; border: solid;"> sfa <div id="" style="width: 200px; height: 200px; border: solid;"> sfa </div> </div> sf </body> </html>显示效果：
对于HTML的标签，要做到主要的标签会使用，对于不认识的标签能看懂是什么作用（通过名称和属性判断），学会查文档，百度也是很重要的。
