web前端学习总结（一）

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;
}