学习网站
更多详细学习网址：https://www.w3school.com.cn/
简介
前端主要分为三层，结构层、样式层、行为层。结构层即HTML标签，标签互相组合，构建了网页的基本结构；样式层即css，为标签添加样式，比如标签的颜色，大小，位置等等，结构层和样式层组成了静态页面；最后行为层即javaScript，我们可以在script标签中动态修改页面，通常我们用javaScript实现动态页面。
下面就我最近关于html5,css,javaScript的学习简单整理记录一下，方便自己回忆。
html
初识html
我们常见的网页基本上都是用html编写的，常见的html架构如下：
<!DOCTYPE html>
<!--此元素可告知浏览器其自身是一个 HTML 文档。-->
<html lang="en">
<!--定义文档的头部，它是所有头部元素的容器。style和link标签都定义在head中-->
<head>
<meta charset="UTF-8">
<title>text</title>
</head>
<!--定义文档的主体。-->
<body>
</body>
</html>
其中<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
标签
刚刚有说过静态页面由html标签和css样式组成，html标签又分为两种，块元素和行内元素，块元素独占一行，而行内元素不独占一行，从左到右进行排列。
常用的块元素有：标题<h1>\到<h6>，盒模型<div>，段落<p>，列表标签<ul>、<ol>、<li>。
常用的行内元素有：超链接<a>、样式元素<span>、图片<img>、表单元素<input>。其中表单元素可以根据type类型划分：text、password、date、color、range、submit、chechbox、radio。
属性
每个标签都具有自己的属性，如我们常见的超链接<a href=“url”>text</a>，其中href属性即为其超链接属性。更多详细属性可以从w3c中学习，这里就不赘述了。
另外，我们可以为标签设置他们的class和id属性，来控制他们的样式和行为。我们可以通过标签选择器对相应的标签进行操作。id选择器为"#"，class选择器为"."。
css
样式简介
样式分为外部样式、内部样式和行内样式，优先级为外部样式<内部样式<行内样式。
- 外部样式：外部样式通常是单独的css文件，使用时，在html中的头部<head>通过标签<link>引入。
- 内部样式：内部样式直接定义在头部<head>的<style>中。
- 行内样式：行内样式定义在标签中，通过style属性进行配置。
样式中的盒模型
任何可视化标签都具有三个属性，外边距margin，边框border，内边距padding。这三个属性组成了盒模型。我们可以打开任意的网页，进入开发者模式，可以看到Styles选项下有一个盒模型的图片。
定位
css一般通过属性postion来配置定位模式，同时结合left、right、top、bottom属性来设置偏移量。
css常用三种定位模式：
- 固定定位：position:fixed，无论怎么拖动页面窗口，固定定位的标签永远固定在一个位置，常见的如一些网页的广告。
- 相对定位：position:relation，相对于标签原本应该在的位置发生的偏移。
- 绝对定位：相对于该标签的上级发生偏移，默认是body。但如果标签的父标签定位类型为相对定位，则该标签是在该父标签内进行偏移。这也是前端常说的子绝父相。
浮动
通常我们的块元素都独占一行，这种格式我们称之为文档流。我们可以通过设置css属性float来改变标签的样式，定义标签向哪个方向浮动，一般值为right或left。
javaScript
javaScript是前端的行为层，通过脚本和函数，实现网页的动态加载。
javaScript做为前端三层的一层，其自身也由三部分组成。
- ECMAScript：欧洲计算机协会每年6月定制的语法规范。
- DOM：document object model文档对象模型。
- BOM：brower object model浏览器对象模型。
数据类型
JS的数据类型一共有六个，其中分为五个基本数据类型和一个复杂数据类型。
- 基本数据类型
- String，字符串类型。
- Number，数字类型，注意NaN(not a number)也是数字类型。
- Boolean，布尔类型，true或者false。
- undefined，未定义类型。
- Null，空类型。
- 复杂数据类型
- Object，类对象。
语法
- JS中的脚本都必须写在其作用域<script></script>标签内。
- 变量必须先生命再使用，通常用var 声明变量，用fuction声明函数和类。
- 包含数字运算符5个加+、减-、乘*、除/、取余%。比较运算符八个小于<、小于等于<=、相等==、大于等于>=、大于>、不等!=、全等===、不全等!==。逻辑运算符与&&、或||、非
- 条件语句和java类似，常用的有if、else、else if。
- 循环语句和java类似，常用的有有for、while、do while。
函数
函数在script标签内，先定义再使用。用function来定义，可以有参数。参数有形参和实参两种类型，在定义function时写于小括号"()"中参数是形参，在代码中调用函数传入的参数是实参。
另外有全局变量和局部变量的概念。在函数内声明的变量是局部变量。其他的变量都是全局变量。
函数中有一个很关键的this类型，代表函数的上下文。
原型是类的一个属性prototype，通常我们在prototype中声明类方法。
数组
JS中也存在数组，可以用[]表示。常用的方法有：
- pop从尾部添加元素。
- push从尾部弹出元素。
- shift从头部弹出元素。
- unshift从头部添加元素。
- reverse反转数组。
- indexOf获取元素的索引值。
- join拼接数组。
- slice(start,end)截取数组，返回[start,end)数组，不改变原数组。
- splice(index,delNum)从index开始删除delNum个元素，并返回修改后的数组。
总结
本节主要对前端三层理论进行整理，梳理了各层一些基本的概念。在下一章中，通过一个动态页面来对学过的内容进行应用。
传送门：前端学习(二)-士兵行走案例
