web前端使用三项技术:html、css、javascript.
一、html:超文本标记语言，用于展示网页的框架。
<html>
<head>
<title> </title>
</head>
<body>
<div> </div> <!--用于布局，占1行 -->
<span> </span> <!--行内布局 -->
<p> </p>
<h1></h1> <!--标题标签，1-6字体一次变小，跟word中的字体大小的命名规则相似-->
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<a href="https://www.baidu.com/">访问baidu</a> <!--超链接 -->
<img src="图像url" /> <!--自闭合的图片标签-->
</body>
</html> 标签多数成对出现，文本内容置于两标签中间。
也有单个出现，自闭合，
例如：换行标签<br/>
<hr> 水平线标签
<!-- -->标签：注释，快捷键是ctrl+/
二、css:层叠样式表，用于丰富网页的样式。
无论是.css文件的引入，还是通过<style>标签引入内部样式表，一般都放在<head>标签内部最下部分。
有三种表示方式：
方式一：外部样式表
与.html文件分离，单独形成.css文件，可同时被多个html文件引用，非常方便。一般都使用这种方式。
1)将内部样式表中的<style>和</style>中的内容拷贝到.css文件中即可。 例如，定义文件名为styles.css中的内容如下：
//定义标签样式
h1{
color:red;
text-align:center;
}
P{
font-family:Arial;
line-height:1.6;
}
//定义id样式
#box{
width: 140px;
height: 140px;
background-color: green;
}
//定义类样式
.item {
width: 100px;
height: 100px;
background-color: red;
}
2)在html文件中，引入.css文件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>外部样式示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
通过link标签，一般在<head></head>标签内最下边引入.css文件。
方式二：内联样式
<body>
<h1 style="color:blue;font-size:24px;">这是内联样式的标题</h1>
<p style="color:green;">这是内联样式的段落</p>
</body>
在每个标签内部，通过style属性，定义样式。
每个元素上都要重复填写样式，不利于代码维护。
方式三：内部样式表
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内部样式示例</title>
<style>
h1{
color:red;
text-align:center;
}
P{
font-family:Arial;
line-height:1.6;
}
</style>
</head>通过<style></style>标签定义样式表。
一般置于<head></head>标签中的 最下方位置。
三、javascript：脚本语言，弱数据类型语言，与java语言没有关系，用于定义网页的行为。
js的引用方式，也分为三种：
1.外部引用
在单独的.js文件中，
1) 编写独立的js文件，如创建no3.js文件，注：文件中不能包含<script>标签
function guess(){
alert(this.value);
}2）在页面中，引入.js文件 ，推荐放在<body></body>内中最下部分。也可以放在</body>外。
<body>
<div id="myDiv">Hello World</div>
<script src="example.js"></script>
</body>2.内部引用
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
<body>
<div>
<input id="btn1" type="button" value="你猜我的效果是啥?">
</div>
</body>
<script>
function guess(){
alert(this.value);
}
</script>网页中如只有html、css,则是静态的网页，引入javascript后，前端网页实现动态效果，如可以弹窗，可以在控制台打印日志信息，同时，也可以与后台程序实现数据交互。
js脚本语言中，引入了数据类型和方法。
（一）数据类型
js是弱数据类型语言，所有的变量定义一般都用var来定义（包括数组），使用var定义的变量，是全局变量，生命周期不受代码框的限制；如使用let 定义变量，则跟C语言、Java一样了，代码{}内定义的变量，生命周期只限于大括号内了。如欲知晓数据类型，使用typeof()函数来获取。
1.基本数据类型
1.数值型（number）数值的某一属性：NON（not a number）
var value= 100;
var value= 100.2;
2.字符串型（string）可以用单引号或双引号括起来，但不能嵌套使用，即：双引号不能放双引号，单引号不能放单引号。
var str= "helloworld";
3.布尔型（boolean）
var bvalue= true;
var bvalue= false;
4.未定义（undefined）
var value; //使用typeof会看到value为undefined类型
5.空（null）
//数据类型为Object，不存在的对象
var value = null; //使用typedef（），显示数据类型为 object //不显示null，是历史遗留问题。
6.符号型（symbol）2.引用类型
Object 对象 ，其中包含了Data、Array、function等。
1）数组定义方式一： var arr = [1，3，4]; //与C语言不同，不需要明确数组个数。
数组定义方式二：var animal = new Array("apple","orange","peach","banana");
2）a.定义js对象:大括号内部包含键值对。
var value = {
name:"xiaoming",
age:18,
func:function(){
alert("helloworld");}
}属性的获取：通过 "点"+属性名 ： 例如 value.name ;
此外，还可以利用构造函数创建对象
注意
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候，必须用 new 来调用构造函数。
b.json数据：是一个字符串，字符串内部形式跟js对象很相似，但是键需要用双引号括起来
例如：
“{
“name”:"xiaoming",
“age”:18
}” 3）函数
3.1）定义函数形式一：
function 函数名（形参）{函数体}
调用：
函数名 () ;//例如 func();
没有返回值类型、没有形参数据类型，因为可以是任意的数据类型，都用var、let表示即可。
3.2) 定义函数形式二：
let func = funtion() {}
调用：
func();
3.3) 定义函数形式三：通过构造函数形式
let func = new function('a','b','return a+b');
调用：
let sum = func(3,4);
3.4)定义函数形式四：es6 新增了使用胖箭头（=>）语法定义函数表达式的能力。
()=>{}
// 普通函数
let sum = function(a, b) {
return a + b;
}
// 箭头函数
let sum1 = (a, b) => {
return a + b;
}
