前端技术栈之html,css,js

前言:前端位于整个项目首要要开发的内容，直接和用户打交道，实现页面的展现和交互功能，所以在分类上俗称为前端。随着软件技术的日趋成熟，前端内容也呈现爆炸式的增长，和革命性的变革，前端借鉴后端的发展经验，也开始应用分层体系，也开始术有专攻，解决一个专项的问题，也开始变得庞大和臃肿。从简单单一功能向框架过渡。今天的前端技术已经变得不简单，不亚于后端开发，甚至难度超越了后端开发。简单来说，前端技术栈包括以下一些部分。

1、前端技术栈介绍

1.1、前端技术简介

HTML超文本标记语言实现页面展现，形成静态网页

CSS层叠样式表实现页面美化

JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

React facebook出品前端、移动端JavaScript框架

Angular google 出品基于TypeScript的开源 Web 应用框架

Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

1.2、前端调试工具

1.2.1、HBuilder

简介：HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby，本身主体是由Java编写。

特点：快，是HBuilder的最大优势，通过完整的语法提示和代码块模板等，大幅提升HTML、js、css的开发效率。

安装

官网：https://www.dcloud.io/hbuilderx.html

1.2.2、webstorm

下载地址; WebStorm：JetBrains 出品的智能 JavaScript IDE

说明：webstorm是和idea相似的一款开发工具，支持代码补全和调试功能

1.2.3、vscode

下载地址：Download Visual Studio Code - Mac, Linux, Windows

说明：VSCode是一款轻量且强大的开发工具，其支持各种不同类型的插件，并通过不同的插件实现代码编写、扫描，调试、提交等一系列的操作。

2. 静态页面HTML

2.1 概念

HTML（Hyper Text Markup Language）超文本标记语言，是做网站页面的最基础的开发语言，由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。由W3C组织发展壮大。它的功能很弱，连脚本语言都算不上，是一门弱类型，主要用于网站开发。

我们可以通过w3Cschool来学习前端Html页面的搭建

地址：HTML 教程

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选择器

说明：class选择器是较为常用的选择器

<p class="a">123</p>

<style> 
	.a{
		background-color: cornflowerblue; /*背景颜色*/
		color:red; /*字体颜色*/
	}
</style>

id选择器

说明：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>

3.4、盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。

4、javascript语法概述

4.1 静态网页和动态网页

传统的html网页是通过html编写的，我们可以使用html超文本标记语言实现了网站页面展现，展现文字、表格、图片、超链接等，使用ss样式表实现了页面的美化，这些技术实现了静态网页。

再加入javascript后,网页就能实现页面和后台系统的交互，实现用户信息的注册，实现用户的登录，实现个性化的数据展现，功能强大不老少。业界把这样的网页称为动态网页，把这样的网站称为动态网站。

4.2 javascript简介

JavaScript 是 web 前端开发者必学的三种语言之一：

JavaScript遵循ECMA国际组织颁布的ECMAScript标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，简称为ES6。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。很多js相关技术都遵循这个标准，如目前最受欢迎的Vue。

JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。

4.2.1.基本特性

名词解释

基于对象：它不仅可以创建对象,也能使用现有的对象。JS没有类的概念，也没有编译的过程。是一边解释一边执行。

事件驱动：在JS中，大部分情况下都是通过事件触发驱动函数执行的，从而实现特定的功能。（比如点击div将内容替换为时间、当鼠标滑过元素，元素就有翻转的动态。）

脚本语言：在网络前端开发环境下，用于嵌入在客户端浏览器中的一段小程序。

特点

(1)、JS是一门直译式的语言，直接执行的就是源代码.是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)、JS是一门弱类型的语言,没有严格的数据类型.

优势

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)只要有浏览器的地方都能执行JS

4.2.2 、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.3 js语法

注释

单行注释： //注释内容

多行注释： /* 注释内容 */

数据类型

基本数据类型

包括:number/string/boolean/null/undefined

复杂数据类型

函数、数组、对象（自定义对象、内置对象、DOM对象、BOM对象…）

JS的变量

js是弱类型语言，所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

javascript没有类似采用静态语言类型，如java的变量类型是编译期就确定的；而它采用了动态类型，也就是说在编译期类型不确定，运行时会动态根据变量的赋值来决定它的类型，这点比较灵活。这也是双刃剑，编译期就难以检查出其赋值的错误。

JS的运算符

JS中的运算符和Java中的运算符大致相同

不同之处在于！=和==在js中表示为！==和===，以及类型运算符的不同

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语句

Switch

循环语句

for (var j = 0; j < panel.Size(); j++) {
	alter("我是第"+j+"次循环")；
}

JS数组

JS数组用于在单个的变量中存储多个值(其实就是一个容器)。

JS中的数组可以存储例如：数值、字符串、布尔值、undefined、null、对象、函数等

JS函数

函数就是一个具有功能的代码块, 可以反复调用

函数就是包裹在花括号中的代码块，前面使用了关键词 function

方式一：通过function关键字声明函数

方式二：通过函数直接量声明函数

JS对象

利用function关键字声明对象，用new关键字创建对象。

内置对象

自定义对象

DOM树结构

DOM 是一项 W3C (World Wide Web Consortium) 标准，DOM（Document Object Model）文档对象模型为JS操作html文档所提供的一套API，通过这套API可以很方便的对html元素进行访问及增删改查操作。

js对象总结

获取页面元素的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 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

原理：

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

5.3 入门案例

5.3.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>

5.3.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>