目录
前言:
前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。简单来说，前端技术栈包括以下一些部分。
1.前端技术栈
HTML超文本标记语言实现页面展现，形成静态网页
CSS层叠样式表实现页面美化
JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页
React facebook出品前端、移动端JavaScript框架
Angular google 出品基于TypeScript的开源 Web 应用框架
Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发
NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境
1.1 使用工具--HBuilder
HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。
特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。
安装
官网：https://www.dcloud.io/hbuilderx.html
安装app版本，整体下来近600m。
jQuery语法支持
HBuilderX对javascript、html、css、vue支持很好，这些无需选择默认支持，同时也对jQuery有很好的支持，但需要单独选择。
2. 静态页面HTML
2.1 概念
HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，是一门弱类型，主要yunyon网站开发。
2.2 结构
文档声明，用来声明HTML文档所遵循的HTML规范。
头部分，用来存放HTML文档的基本属性信息，比如网页标题、编码格式，这部分内容会被网页优先加载。
体部分，用来存放网页要显示的数据。
声明网页标题
用来通知浏览器使用哪个编码来打开HTML文档，打开的方式一定要和保存文件时使用的编码一致，避免出现中文乱码问题。
2.3 语法
- HTML标签
HTML是一门标记语言，标签分为开始标签和结束标签，如<a></a>。
如果开始和结束中间没有内容，可以合并成一个自闭标签
双标签:<h1></h1> .....<h6></h6> <span></span> <ul></ul><li></li> <ol></ol>
<p></p> <a></a> <table></table>
单标签: <img/> <input/>
- HTML属性
HTML标签都可以具有属性，属性包括属性名和属性值，如果有多个属性，要以空格隔开。属性的值要用单引号或者双引号引起来。
- HTML注释
格式:<!---->
- 如何在网页中做空格和换行
换行：<br/>; 空格： 在HTML中，多个空格会被当成一个空格来显示。
2.4 常用标签
标题标签 <h1>..<h6>
列表标签 <ol>有序 <ul>无序
图片标签
<img />
超链接标签
<a href="#"> <a/>
Input标签
<input type="text" /> 普通文本框
<input type="password" /> 密码
<input type="radio"/>男 单选框
<input type="number" /> 数字值
<input type="week" /> 日历
<input type="checkbox" />杨幂 复选框
<input type="button" value="点我一下"/>
<input type="submit" value="提交数据"/>
表格标签
<table></table> <tr></tr> 行 <td></td>列
表单标签
<form></form>
其他标签
<p> 段落标签 <span></sapn> 行级元素
3 Css简述
3.1 什么是CSS
CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。
主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。
3.2 CSS的用法
body中:
<tr align="center"><!-- css方式1 -->
<td >你好1</td>
<td >你好2</td>
</tr>
<tr style="text-align:center;"><!-- css方式2 -->
<td >你好3</td>
<td >你好4</td>
</tr>head中:
<!-- css方式4 实现css与HTML代码的分离，提高css代码的复用性-->
<link href="demo.css" rel="stylesheet"/>
<!-- css方式3 -->
<style>
td{
text-align: center;
}
</style>3.3 选择器
所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
class选择器
<p class="a">123</p>
<style>
.a{
background-color: cornflowerblue; /*背景颜色*/
color:red; /*字体颜色*/
}
</style>id选择器
<p id="p1">123</p>
/* 使用id选中元素 */
<style>
#p1{
text-indent: 200px; /* 首行缩进*/
}
</style>分组选择器
/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
background-color: #000000;
}属性选择器
<style type="text/css">
/* 选中指定的元素 */
input[type='text']{
background-color: #6495ED;
}
</style>盒子模型
指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
margin（外边距）
border（边框）
padding（内边距）
4.js语法概述
4.1 静态网页和动态网页
传统的html网页是通过html编写的，我们可以使用html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，使用ss样式表实现了页面的美化，这些技术实现了静态网页。
再加入javascript后,网页就能实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。
4.2 什么是JS
JavaScript 是 web 前端开发者必学的三种语言之一：
JavaScript遵循ECMA国际组织颁布的ECMAScript标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。
4.2.1.名词解释
基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。
事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）
脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。
4.2.2 特点
(1)JS是一门直译式的语言，直接执行的就是源代码.
是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.
(2)JS是一门弱类型的语言,没有严格的数据类型.
4.2.3 优势
(1)良好的交互性
(2)一定的安全性
(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)
(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)
只要有浏览器的地方都能执行JS
4.3 js引入方式
通过script标签引入JS代码
<head>
<meta charset="utf-8"/>
<script>/* JS代码 */
function fn(){
alert("JS的第1种引入方式");
}
</script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
通过script标签引入外部的JS文件
<head>
<meta charset="utf-8"/>
<script src="1.js"> </script>
</head>
<body>
<div id="div1" onclick="fn();">Hello JavaScript</div>
</body>
注意：不要同时通过一个script标签引入JS代码和JS文件，会导致代码不会执行！比如：
4.4 js语法
4.4.1 注释
单行注释： //注释内容
多行注释： /* 注释内容 */
4.4.2 数据类型
基本数据类型
包括:number/string/boolean/null/undefined
复杂数据类型
函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）
4.4.3 JS的变量
js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。
javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。
4.4.4 JS的运算符
JS中的运算符和Java中的运算符大致相同
4.4.5 JS语句
JS中的语句和Java中的语句用法也大致相同
if…else语句
if(a == true && b == true ){
alter("wo是第一个判断语句的内容")
}else if（a != true && b == true ）{
alter("wo是第二个判断语句的内容")
}else if（a != true && b != true）{
alter("wo是第三个判断语句的内容")
}switch…case语句
Switvh
循环语句
for (var j = 0; j < panel.Size(); j++) {
alter("我是第"+j+"次循环")；
}4.4.6 JS数组
JS数组用于在单个的变量中存储多个值(其实就是一个容器)。
JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等
4.4.7 JS函数
函数就是一个具有功能的代码块, 可以反复调用
函数就是包裹在花括号中的代码块，前面使用了关键词 function
方式一：通过function关键字声明函数
方式二：通过函数直接量声明函数
4.4.8 JS对象
利用function关键字声明对象，用new关键字创建对象。
内置对象
自定义对象
DOM树结构
DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。
总结
获取页面元素的4种方式:
getElementsByTagName 标签名称，得到数组
getElementsByName name属性，得到数组
getElementsByClassName class属性，得到数组
getElementById id属性，单个值
注：dom树在描述标签时除id方式，其它都是以数组形式体现，哪怕是一个元素。
5 Ajax 异步访问技术
5.1 json概念
JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON(JavaScript Object Notation，JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言，它是xml的终结者，也成为了网页主流开发方式（ajax异步请求，json返回）。
作用：JSON 是存储和交换文本信息的语法。当数据在浏览器与服务器之间进行交换时，这些数据只能是文本。JSON 属于文本，并且我们能够把任何 JavaScript 对象转换为 JSON，然后将 JSON 发送到服务器。我们也能把从服务器接收到的任何 JSON 转换为 JavaScript 对象。以这样的方式，我们能够把数据作为 JavaScript 对象来处理，无需复杂的解析和转译。
语法：
JSON数据: var a =' "firstName" : "John" '
JSON 对象: var a = '{ "firstName":"John" , "lastName":"Doe" }'
JSON 数组:
var a = '[{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName"}}5.2 Ajax概述
Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
5.3 原理
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
5.4 入门案例
1.创建表单，设置参数
<form method="get">
<table align="center" border="2px" bgcolor="#aaaa7f">
<tr><td>
<h3 align="center"
style="color: #7FFFD4;;">学生信息管理系统MIS</h3>
</td></tr>
<tr><td>姓名:</td></tr>
<tr><td><input type="text" placeholder="请输入姓名" name="name"></td></tr>
<tr><td>年龄:</td></tr>
<tr><td><input type="text" placeholder="请输入年龄" name="age"></td></tr>
<tr><td>性别:(单选框)
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女</td></tr>
<tr><td>爱好:(多选)
<input type="checkbox" name="hobby" value="1"/>乒乓球
<input type="checkbox" name="hobby" value="2"checked="checked"/>爬山
input type="checkbox" name="hobby" value="3"/>唱歌</td></tr>
<tr><td>学历:(下拉框)
<select name="class">
<option value="1">大学本科</option>
<option value="4">专科</option>
<option value="2">硕士</option>
<option value="3">高中以下</option>
</select>
</td></tr>
<tr><td>入学日期:</td></tr>
<tr><td><input type="date" name="resigndata"></td></tr>
<tr><td align="center">
<button id=b1 type="submit" value="提交" v-on:click.prevent="submi"> 提交</button>
<button id=b2 type="reset" value="取消">取消</button>
</td></tr>
</table>
</form>2.创建ajax方法，引用到技术栈中
<script>
function change(){
// 1. 创建xhr对象,用于同幕后服务器交换数据
var xhr = new XMLHttpRequest();
// 2. 定义当 readyState 属性发生变化时被调用的函数
xhr.onreadystatechange=function(){
//3. status是200表示请求成功,readyState是4表示请求已完成且响应已就绪
if(this.status==200 && this.readyState==4){
// document.getElementById("d1").innerHTML="hi ajax";
//5.以字符串返回响应数据,并展示
// document.getElementById("d1").innerHTML=this.responseText;
console.log(this.responseText);
}
}
//3.规定请求的类型(请求方式,文件位置,异步)
//xhr.open('get','1.json',true); //请求本地的json文件
//xhr.open('get','http://localhost:8080/car/get',true); //请求本地的服务器程序
// xhr.send(); //发送get请求
xhr.open('post','http://localhost:8080/stu/add',true);
//4.xhr将请求发送到服务器
var formdata=new FormData( document.getElementById("form") );
xhr.send(formdata); //发送post请求
}
</script>
3.访问测试
6.面试题小结
1.ajax是什么？
Ajax 即异步访问技术，可以实现前端部分页面的刷新，从而进行和后端数据进行简单的交互。