布局的传统解决方案，基于盒状模型，依赖display属性（如display: inline-block），position属性，float属性以及margin，padding，top等属性。它对于那些特殊布局非常不方便，比如垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案——Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

什么是flex布局

任何一个容器都可以指定为flex布局。

1
2
3

.box{
    display: flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

1
2
3
4

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

理论基础

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

这两个轴是之后flex容器的justify-content，align-items属性的基础。

flex容器的属性

一下六个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。比如，你要指定项目在水平方向上排列，那么main-axis就是水平的，且项目从左到右依次排列，这时flex-direction: row。

1
2
3

.box{
    flex-direction: row | row-reverse | column | column-reverse
}

• row: main-aix为水平方向，起点在左端
• row-reverse: main-axis为水平方向，起点在右端
• column: main-axis为垂直方向，起点在上面
• column-reverse: main-axis为垂直方向，起点在下面

flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上，因为flex-wrap默认为nowrap。

1
2
3

.box{
	flex-wrap: nowrap | wrap | wrap-reverse
}

(1) nowrap（default）：不换行。

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

(2) wrap: 换行，第一行在上方

(3) wrap-reverse: 换行，第一行在下方

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，可以不用考虑

justify-content

几个项目排列在main-axis上，但是它们之间的间距该如何设置呢？要设置justify-content属性。

justify-content属性定义了项目在主轴上的对齐方式。

1
2
3

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

• flex-start(default): 左对齐
• flex-end: 右对齐
• center: 居中
• space-between: 两端对齐，项目之间的间隔都相等。
• space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items

确定了几个项目在main-axis上的对齐之后，它们在cross-axis上应该在什么位置呢？设置align-items属性。

align-items属性定义项目在交叉轴上如何对齐。

1
2
3

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

• flex-start: 在交叉轴的起点对齐
• flex-end: 在交叉轴的终点对齐
• center: 在交叉轴的中心点对齐
• baseline: 项目中的第一行文字的基线对齐
• stretch(default): 如果项目未设置高度或为auto，将占满整个容器的高度；

align-content

align-content属性定义了多行项目如何在cross-axis上划分屏幕空间。

1
2
3

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

stretch: (下面是的黑色div是固定大小的，里面的青色div也是固定大小的，采用stretch)

项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow

当一行项目在flex布局中并没有占据完空间的时候，flex-grow定义了项目该如何变大。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。当项目item2的flex-grow=2，item1的flex-grow=1，则item2增大的长度是item1增大的长度的2倍。

例如上图，前三个项目的定义的width分别为100，200，200，它们的margin都是10，黑色div的width是600，则还剩下40px的空间。由于第二个项目的flex-grow=1，第三个项目的flex-grow=2，则第二个项目增大13，第四个项目增大26。

flex-shrink

同flex-grow相似。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

reference

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

https://www.cnblogs.com/echolun/p/11299460.html

1. 什么是REST

REST全称是Representational State Transfer。REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力， 更好地使用现有Web标准中的一些准则和约束。虽然REST本身受Web技术的影响很深， 但是理论上REST架构风格并不是绑定在HTTP上，只不过目前HTTP是唯一与REST相关的实例。 所以我们这里描述的REST也是通过HTTP实现的REST。

2. 理解REST

从资源的定义、获取、表述、关联、状态变迁等角度，列举一些关键概念并加以解释。

2.1 资源与URL

要让一个资源可以被识别，需要有个唯一标识，在Web中这个唯一标识就是URI(Uniform Resource Identifier)。

URL设计上的一些技巧

1. 使用/来表示资源的层级关系

2. 使用_或-来让URI可读性更好

3. 使用?用来过滤资源(query)

   1	/pulls?state=closed

   用来表示git项目中已经关闭的推入请求

   1	/pulls/?page=2&per_page=100

   指定第几页，以及每页的记录数。

4. ,或;可以用来表示同级资源的关系

   1	/git/git /block-sha1/sha1.h/compare/e3af72cdafab5993d18fae056f87e1d675913d08;bd63e61bdf38e872d5215c07b264dcc16e4febca

   比较某个文件在随意两次提交记录之间的差异

2.2 统一资源接口

接口应该使用标准的HTTP方法如GET，PUT，POST，PATCH，DELETE，并遵循这些方法的语义。

1. GET（SELECT）：从服务器取出资源（一项或多项）。
2. POST（CREATE）：在服务器新建一个资源。
3. PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
4. PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
5. DELETE（DELETE）：从服务器删除资源。

下面是一些例子：

1. 列出所有动物园。

   1

   GET /zoos

2. 获取某个指定动物园的信息

   1	GET /zoos/ID

3. 新建一个动物园

   1	POST /zoos

4. 更新某个指定动物园的信息（提供该动物园的全部信息）

   1	PUT /zoos/ID

5. 更新某个指定动物园的信息（提供该动物园的部分信息）

   1	PATCH /zoos/ID

6. 删除某个动物园

   1	DELETE /zoos/ID

7. 删除某个指定动物园的指定动物

   1	DELETE /zoos/ID/animals/ID

2.3 资源的表述

资源在外界的具体呈现，可以有多种表述(或成为表现、表示)形式，在客户端和服务端之间传送的也是资源的表述，而不是资源本身。 例如文本资源可以采用html、xml、json等格式，图片可以使用PNG或JPG展现出来。

资源的表述包括数据和描述数据的元数据，例如，HTTP头”Content-Type” 就是这样一个元数据属性。

可以通过HTTP内容协商，客户端可以通过Accept头请求一种特定格式的表述，服务端则通过Content-Type告诉客户端资源的表述形式。

以github为例，请求某组织资源的json格式的表述形式:

https://developer.mozilla.org/zh-CN/ 一个很好用的前端官方文档

HTTP

HTTP头常用字段

Cache-Control

通常，浏览器会缓存服务器发来的文件，比如图片，视频之类的，这样在下次再用的时候，就不用服务器发送回文件了，节省了时间。关于缓存机制，通过http头部的Cache-Control字段来表示。

在缓存中，我们需要一个机制来验证缓存是否有效。比如服务器的资源更新了，客户端需要及时刷新缓存；又或者客户端的资源过了有效期，但服务器上的资源还是旧的，此时并不需要重新发送。缓存校验就是用来解决这些问题的，在http 1.1 中，我们主要关注下Last-Modified 和 etag 这两个字段。

Last-Modifed

服务端在返回资源时，会将该资源的最后更改时间通过Last-Modified字段返回给客户端。客户端下次请求时通过If-Modified-Since或者If-Unmodified-Since带上Last-Modified，服务端检查该时间是否与服务器的最后修改时间一致：如果一致，则返回304状态码，不返回资源；如果不一致则返回200和修改后的资源，并带上新的时间。

etag

单纯的以修改时间来判断还是有缺陷，比如文件的最后修改时间变了，但内容没变。对于这样的情况，我们可以使用etag来处理。etag的方式是这样：服务器通过某个算法对资源进行计算，取得一串值(类似于文件的md5值)，之后将该值通过etag返回给客户端，客户端下次请求时通过If-None-Match或If-Match带上该值，服务器对该值进行对比校验：如果一致则不要返回资源。

Content-Type

表示文件类型。可以是 text/plain, text/javascript, image/jpg等。

Cookie

https://blog.csdn.net/playboyanta123/article/details/79464684 这里面还讲了一些xhr和跨域资源请求的链接。

状态码

200

OK

301

永久重定向

302

临时重定向

304

请求的资源未修改

cookie

什么是cookie，当你登录淘宝网后，选择一个物品加入购物车， 淘宝的后端怎么知道是谁选择了这个商品，为什么没有让你输入账号密码，因为cookie中已经有了。

上图是从chrome浏览器查看一个网站的cookie的示意图，左边栏Cookies下方会列举当前网页中设置过cookie的域都有哪些。

一般情况下，当客户端发送请求时，都会在http头部的Cookie字段设置该网页设置过的cookie。

cookie的属性

1

var cookie = "key=name; expires=Thu, 25 Feb 2020 04:18:00 GMT; domain=baidu.com; path=/; secure; HttpOnly"

上面的每个等号左右就是键和值。若被;分割的块里没有等号，则表示相应属性置位，比如secure, HttpOnly。

1

response.setHeader('Set-Cookie',cookie) //设置Cookie字段

增删改查

要想修改一个cookie，只需要重新赋值就行，旧的值会被新的值覆盖。但要注意一点，在设置新cookie时，path/domain这几个选项一定要旧cookie 保持一样。否则不会修改旧值，而是添加了一个新的 cookie。

删除一个cookie 也挺简单，也是重新赋值，只要将这个新cookie的expires 选项设置为一个过去的时间点就行了。但同样要注意，path/domain/这几个选项一定要旧cookie 保持一样。

js清除所有网页下cookie

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function deleteCookie() {
    var cookies = document.cookie.split(";");
    for (var i = 0; i < cookies.length; i++) {
        var cookie = cookies[i];
        var eqPos = cookie.indexOf("=");
        var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
    }
    if(cookies.length > 0)
    {
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i];
            var eqPos = cookie.indexOf("=");
            var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
            var domain = location.host.substr(location.host.indexOf('.'));
            document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=" + domain;
        }
    }
}

原生js实现http请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

function httpRequest(paramObj, fun, errFun)
{
    var xmlhttp = null;
    /*创建XMLHttpRequest对象，
     *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP")
     * */
    if (window.XMLHttpRequest)
    {
        xmlhttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    /*判断是否支持请求*/
    if (xmlhttp == null)
    {
        alert('你的浏览器不支持XMLHttp');
        return;
    }
    /*请求方式，并且转换为大写*/
    var httpType = (paramObj.type || 'GET').toUpperCase();
    /*数据类型*/
    var dataType = paramObj.dataType || 'json';
    /*请求接口*/
    var httpUrl = paramObj.httpUrl || '';
    /*是否异步请求*/
    var async = paramObj.async || true;
    /*请求参数--post请求参数格式为：foo=bar&lorem=ipsum*/
    var paramData = paramObj.data || [];
    var requestData = '';
    for (var name in paramData)
    {
        requestData += name + '=' + paramData[name] + '&';
    }
    requestData = requestData == '' ? '' : requestData.substring(0, requestData.length - 1);
    console.log(requestData)

    /*请求接收*/
    xmlhttp.onreadystatechange = function ()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            /*成功回调函数*/
            fun(xmlhttp.responseText);
        }
        else
        {
            /*失败回调函数*/
            errFun;
        }
    }

    /*接口连接，先判断连接类型是post还是get*/
    if (httpType == 'GET')
    {
        xmlhttp.open("GET", httpUrl, async);
        xmlhttp.send(null);
    }
    else if (httpType == 'POST')
    {
        xmlhttp.open("POST", httpUrl, async);
        //发送合适的请求头信息
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send(requestData);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

/*请求参数*/
var paramObj =
{
    httpUrl: '',
    type: 'post',
    data:
    {
        name: 'sss',
        sex: '男'
    }
}
/*请求调用*/
httpRequest(paramObj, function (respondDada)
{
    //这里编写成功的回调函数
    console.log(respondDada)
}, function ()
{
    alert('网络错误')
}
);

注意：如果在按钮的事件中进行http请求，而且请求的回应是html类型的文档，则浏览器不会自动跳转到这个html，所以如果想要跳转，必须把按钮替换为<a>标签。

express后端框架

原生的http在某些方面表现不足以应对我们的开发需求，所以我们就需要使用框架，让代码高度统一。Express是Node中的一个框架

http://expressjs.com/ 官网

路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*
0. install
1. 引包
*/
var express = require('express')

//2. 创建你的服务器程序
//   也就是原来的http.createServer
var app = express()

//当服务器收到get请求'/'时，执行回调函数
app.get('/', function(req,res){
    res.send(`
    <!DOCTYPE html>
        <h3>hello</h3>
    </html>
    `)
})
//当服务器收到post请求'/'时，执行回调函数
app.post('/',function(){
    //code here
})

//当有我不认识的路径时，express自动发送404

//公开指定目录，静态服务
//只要这样做了，就可以直接同 /public/xx 的方式访问public目录下的所有资源了
app.use('/public/',express.static('./public/'))

app.listen(3000)

express-art-template

1
2

npm install art-template --save
npm install express-art-template --save

art-template官网：github.com/aui/art-template

express获取post表单数据

在express中没有内置获取表单 post 请求体的api。我们需要使用第三方插件：

1

npm install body-parser --save

在express官网的middle ware选项中可以查看详细用法

在express中express().get()方法无法处理带有查询语句的GET语句，比如/pinglun?name之类的。

一般情况下，请求html页面用get方法，提交表单数据用post方法。

封装ajax方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/*
一下就是一些典型的异步方法
setTimeout
readFile
writeFile
readdir
ajax
往往异步API都伴随着一个回调函数
*/
function reqListener () {
  console.log(this.responseText);
}

var oReq = new XMLHttpRequest();
oReq.addEventListener("load", reqListener);
oReq.open("GET", "http://www.example.org/example.json",true);
oReq.send();

express的cookie操作

若浏览器没有保存cookie，则app.get(‘/‘,function(req,res)))中的req.cookies是undefined值。

宠物商店设计

我们登录到localhost:3000，默认是狗的页面，说明localhost:3000和localhost:3000/dog 的页面相同，都是返回index.html或者index_login.html，根据cookie中的用户信息来决定是index.html还是index_login.html。为了让点击导航是关于狗的商品，在导航的href中设置url时带上狗的标识，比如/dog/main_food表示选择狗的主食，然后返回一个页面。

退出登录时，要发送请求到服务器，清除对应的sessionId的，然后再在本地浏览器清除cookie。

在一个物品的主页，要设置一个隐藏表单，然后把加入购物车当做一个button，当点击这个button时，就发出ajax请求，顺带上隐藏表单的内容，然后后端在userInfos中的购物车中加入这个物品的信息，然后服务端发回一个数字，好让主页的购物车图标可以显示数字。

在选择主食后的页面，是一个很大的表单，下面是很多该类别下的链接，当点击表单的不同选项，就可以发送ajax请求，然后服务端发送一个json文件，然后我们就可以根据这个json来布置表单下的链接。

vue前端框架

组件

例子1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!--
index.html
-->
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
        <script type="text/javascript" src="/resource/main.js"></script>
    </head>
    <body>
        <div id="app">
            <message content="hellow world"></message>
        </div>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//index.js

var Message = Vue.extend({
    props: ['content'],
    template: '<h1>{{content}}</h1>'
})
//注册这个组件
Vue.component('message',Message)
var vm = new Vue({
    el: '#app'
})
//注意：没有效果
/*
解释：在这个例子中,js文件要在'#app'后面加载，如果.js文件放在了前面，
因为浏览器一看到.js文件，就立马执行，但是这是页面的dom还没建立好（
因为后面的'#app'还没执行到），所以就无法将渲染好的节点挂载到dom中，所以
就没有看到现象。下面的html代码是正确地。
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!--
index.html
-->
<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <message content="hellow world"></message>
        </div>
        <script type="text/javascript" src="/resource/main.js"></script>
    </body>
</html>

例子2

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <comfield id="comfield"></comfield>
        </div>
        <script type="text/javascript" src="/resource/main.js"></script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

var comfield = Vue.extend({
    /*
    template中存在{{title}}之类的占位符，而且在comfield标签内没有指定title和content的值。
    当js文件执行这里时，会直接从data()中取数据，所以要指定data函数。指定data为对象，比如
    data:{title:'dog'}，或者在vm对象的options中指定data属性，都使得编译器找不到title的值。
    */
    template: `
    <div>
        <h2>{{title}}</h2>
        <p>{{content}}</p>
    </div>
    `,
    data: function(){
        return {
            title: 'dog',
            content: 'this is a dog'
        }
    }
})

/*
new comfield().$mount('#comfield') 可以使得html中的confield节点直接被挂载，无需vm的el来
指定挂载位置。但是如果使用Vue.component('comfield', comfield)，就需要vm的el来指定挂载位置。
*/
//new comfield().$mount('#comfield') 
Vue.component('comfield', comfield)


var vm = new Vue({
    el: '#app',
    beforeCreate: function () {
        console.group('------beforeCreate创建前状态------');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
        console.log("%c%s", "color:red", "content: " + this.content);
    },
    created: function () {
        console.group('------created创建完毕状态------');
        console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
        console.log("%c%s", "color:red", "content: " + this.content);  //已被初始化
    },
    beforeMount: function () {
        console.group('------beforeMount挂载前状态------');
        console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
        console.log("%c%s", "color:red", "content: " + this.content); //已被初始化  
    },
    mounted: function () {
        console.group('------mounted 挂载结束状态------');
        console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
        console.log("%c%s", "color:red", "content: " + this.content); //已被初始化 
    },
    beforeUpdate: function () {
        console.group('beforeUpdate 更新前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "content: " + this.content);
    },
    updated: function () {
        console.group('updated 更新完成状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "content: " + this.content);
    },
    beforeDestroy: function () {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "content: " + this.content);
    },
    destroyed: function () {
        console.group('destroyed 销毁完成状态===============》');
        console.log("%c%s", "color:red", "el     : " + this.$el);
        console.log(this.$el);
        console.log("%c%s", "color:red", "data   : " + this.$data);
        console.log("%c%s", "color:red", "content: " + this.content);
    }
})

例子3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <!--
			v-bind将子组件中的title值与父组件中的title值进行绑定，当通过vm.$data改变title的
			值时，confield组件中的title值也会改变。如果不用v-bind，vue发现子组件的data中没有
			title和content，就会报错。
			-->
            <comfield v-bind:title="title" v-bind:content="content"></comfield>
        </div>
        <script type="text/javascript" src="/resource/main.js"></script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var comfield = Vue.extend({
    props: ['title','content'],
    template: `
    <div>
        <h2>{{title}}</h2>
        <p>{{content}}</p>
    </div>
    `
})

//new comfield().$mount('#comfield') 
Vue.component('comfield', comfield)

var vm = new Vue({
    el: '#app',
    data: {
        title: 'dog',
        content: 'this is a dog'
    }
})

这个例子体现了数据绑定的优势。

例子4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>很多商品</h1>
            <div v-for="item in items">
                <com v-bind:item="item"></com>
            </div>
        </div>
        <script type="text/javascript" src="/resource/main.js"></script>
    </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Vue.component('com',{
    props: ['item'],
    template: `
    <h3>{{item}}</h3>
    `
})

var vm = new Vue({
    el: '#app',
    data: {
        items: [
            'dog',
            'cat'
        ],
    }
})

以上的代码可以实现我要的结果，也体现了组件化的优势。我在一个div里面要放多个com组件，同时com组件要传进去一些参数。com组件的数量由items决定，参数可以通过v-bind绑定组件属性与item的值。

vue的优点

双向数据绑定

也就是所谓的响应式数据绑定。这里的响应式不是@media 媒体查询中的响应式布局，而是指vue.js会自动对页面中某些数据的变化做出同步的响应。

也就是说，vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系，就是以input 标签的v-model属性来声明的，因此你在别的地方可能也会看到有人粗略的称vue.js为声明式渲染的模版引擎。

这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑。

组件化

在前端应用，我们是否也可以像编程一样把模块封装呢？这就引入了组件化开发的思想。

Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。

视图,数据,结构分离

使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作

虚拟DOM

现在的网速越来越快了，很多人家里都是几十甚至上百M的光纤，手机也是4G起步了，按道理一个网页才几百K，而且浏览器本身还会缓存很多资源文件，那么几十M的光纤为什么打开一个之前已经打开过，已经有缓存的页面还是感觉很慢呢？这就是因为浏览器本身处理DOM也是有性能瓶颈的，尤其是在传统开发中，用JQuery或者原生的JavaScript DOM操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非常卡顿。

而Virtual DOM则是虚拟DOM的英文，简单来说，他就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交，将DOM操作变化反映到DOM树上。

运行速度更快

像比较与react而言,同样都是操作虚拟dom,就性能而言,vue存在很大的优势

axios中间件

axios是vue中的中间件，可以进行ajax请求
http://www.axios-js.com/zh-cn/docs/

event对象

vue通过$event的方式传入event对象

1
2
3

<button v-for="peifang in dogZhuliangProp['peifangs']" v-on:click="selectProp($event, 'peifang')">
    {{ peifang }}
</button>

1
2
3
4
5
6
7
8
9
10
11
12

selectProp: function (event, prop) {
    var propValue = event.srcElement.outerText
    if (props[prop].indexOf(propValue) > -1) {
        props[prop].splice(props[prop].indexOf(propValue), 1)
    } else {
        props[prop].push(propValue)
    }
    if(props[prop].indexOf('全部')>-1){
        props[prop].splice(props[prop].indexOf('全部'), 1)
    }
    getDogZhuliangInfos()
}

虚拟DOM

参考 https://www.jianshu.com/p/af0b398602bc

.vue组件

例子1

假设有一个组件<app>，它里面有两个子组件Header，Footer，如果不用.vue文件保存组件信息，直接把它们表述在.js文件中，是下面这个样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

var Header = Vue.extend({
    template:`
	<p>this is a header</p>
	`
})

var Footer = Vue.extend({
    template:`
	<p>this is a footer</p>
	`
})

var app = Vue.extend({
    template:`
	<div>
		<Header></Header>
		<p>text</p>
		<Footer></Footer>
	</div>
	`,
    components: {
    	'Header': Header,
    	'Footer': Footer
	},
    data: function(){
		return {
            list: []
        }
	},
	methods: {
        getData: function(){
            //code
        }
    },
	created: function(){
        this.getData()
    }
})

3个组件同时写到了.js文件中，很不方便，而且，没法重用到其他的单页应用中。

下面用.vue的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

//App.vue
<template>
	<div>
		<Header></Header>
		<p>text</p>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '/{your_path}/Header.vue'
	import Footer from '/{your_path}/Footer.vue'
	export default {
		name: 'App', //定义当前组件的名字是App
		components: {
			'Header': Header,
			'Footer': Footer
		},
		data: function(){
			return {
				list: []
			}
		},
		methods: {
			getData: function(){
				//code
			}
		}
		created: function(){
			this.getData()
		}
	}
</script>

<style>
	.article_list {
		margin: auto;
	}
</style>

Header组件和Footer组件分别保存在Header.vue和Footer.vue中。

什么是.vue组件

*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 <template>, <script> 和 <style>。这三个部分分别代表了 html,js,css。

没用好组件化的实例(宠物商店)

宠物主粮有很多属性：大小，原料。用户要在界面上选择多个属性值，然后选择的属性值对应的元素样式是彩色的，未选择的是白色的。所以这个选择宠物主粮属性的块完全可以当做一个组件<dog_zhuliang_sel>

一开始，我没有这样做。我在vue实例中定义了所有宠物主粮属性值对应的style，保存在vm.$data的一个属性中，视图上所有宠物主粮属性值对应的button的style通过v-bind绑定到这个数据上。然后，监听宠物主粮属性值的click事件，根据这个事件，修改vm.$data中对应的属性。

但是，这样就使得子组件和父组件耦合太紧密了。我应该把上述的操作完全放在子组件中，对于父组件，我们就只提供它需要的信息。

vue修改元素样式

例子1

v-bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <!-- 取色器插件 -->
      <colorPicker v-model="titleColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- v-bind缩写为":" -->
        <div :style="{color: titleColor}">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {}
}
</script>

color-picker组件会监听颜色的变化，然后改变titleColor，接着由于titleColor和style之间有单向数据绑定，所以style的值也变化了，这样就改变了样式。

时间监听和js原生获取元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <!-- 取色器绑定change事件 -->
      <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- 给元素添加class,也可用id -->
        <div class="title-color">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {
    changeColor (val) {
      // 1. 这个取色器change事件直接获取的就是带"#"的十六进制颜色
      // 2. 如果用的是id，这里就换成js获取id的方法；如果vue中引入了jQuery，这里也可以用jQuery的方法
       document.getElementsByClassName('title-color')[0].style.color = val	
    }
  }
}
</script>

在这里，定义了color-picker的change事件的回调函数changeColor，然后在changeColor函数里面通过Js原生获取一个元素的style属性，然后改变它。

vue的$refs属性获取元素

vue $refs的文档：https://cn.vuejs.org/v2/api/#vm-refs
vue ref的文档：https://cn.vuejs.org/v2/api/#ref

和方法2类似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
... 省略 ...
<el-row>
  <el-col :span="12">
    <el-form-item label="模板标题:" prop="titleName">
      <el-input size="small" placeholder="请输入标题" v-model="searchForm.titleName" style="width:300px;">
      </el-input>
    </el-form-item>
    
    <el-form-item label="标题颜色:">
      <colorPicker v-model="titleColor" @change="changeColor"></colorPicker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="内容示例:" prop="" >
      <div style="width:300px;border:1px solid #bfcbd9;border-radius:4px;min-height:200px;padding:5px 7px;overflow: hidden;">
        <!-- 使用ref给元素注册引用信息 -->
        <div ref="titleNameRef">{{searchForm.titleName}}</div>
      </div>
    </el-form-item>
  </el-col>
</el-row>
... 省略 ...
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script>
export default {
  data: () => {
    return {
      titleColor:'#000000',
      searchForm: {
        titleName: ''
      }
    }
  },
  methods: {
    changeColor (val) {
      // 通过$ref来获取
      this.$refs.titleNameRef.style.color = val	
    }
  }
}
</script>

vue自定义事件

例子1（向父组件传播）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的自定义事件</title>
</head>
<body>
<div id="app">
    <my-btn @total="allcounter"></my-btn>
    <my-btn @total="allcounter"></my-btn>
    <my-btn @total="allcounter"></my-btn>

    <p>所以按钮一共点击了{{totalCounter}}多少次</p>
</div>

<template id="my_btn">
    <button @click="total()">点击了{{counter}}次</button>
</template>

</body>
<script src="./vue.js"></script>
<script>
    Vue.component('my-btn',{
        template:'#my_btn',
        data(){
            return {
                counter:0
            }
        },
        methods:{
            total(){
                this.counter++
                //  通知外界我调用了这个方法
                this.$emit('total')

            }
        }
    })
    new Vue({
        el:'#app',
        data:{
            totalCounter:0,
        },
        methods: {
            allcounter(){
                this.totalCounter += 1

            }
        }
    })
</script>
</html>

在父组件的<my_btn>标签内添加属性@total="allcounter"，然后在父组件的methods中写一个allCounter方法。

v-model

v-model的流程是：监听标签内的事件，将对应的属性和组件内的数据双向绑定在一起。所以核心是事件和属性。例如：

1. text和textarea元素使用value属性和input事件
2. checkbox和radio使用checked属性和change事件
3. select使用value属性和change事件

对于自定义组件，使用哪个属性和事件呢？

v-model会默认利用value属性和input事件，v-model相当于

1

<input v-bind:value="message" v-on:input="message=$event.target.value">

例子：

1
2

<!--父组件-->
<ModelChild v-model="message"></ModelChild>

1
2
3
4
5
6
7
8
9
10
11
12
13

<!-- 子组件-->
<div>
    {{value}}
</div>

props: {
	value: String
},
methods: {
	test1(){
		this.$emit('input','小红')
	}
}

SPA单页面应用

例1

下面是Hash模式实现的SPA demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<!DOCTYPE html>
<!-- 
 author : clearlove
 aim : csdn
 date : 2018-9
 bug : no
 -->
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			a{
				text-decoration: none;
				margin-left: 1rem;
			}
			
			input{
				width: 10rem;
				height: 2rem;
				border: 1px solid black;
				margin-top: 1rem;
			}
		</style>
	</head>
	<body>
		<a href="#tom">Tom</a>
		<a href="#jim">Jim</a>
		<a href="#jary">Jary</a><br />
		<input type="text" name="" id="name" value="" readonly="readonly"/>
		<input type="text" name="" id="text" value="" readonly="readonly"/>
		<script type="text/javascript">
			/* 监听hash改变的事件 */
			window.addEventListener('hashchange',function(){
				/* 将hash的值拿到 */
				var hash = document.location.hash;
				/* 使用switch判断hash的值是多少 */
				switch(hash){
					case '#tom' :
					$.ajax({
						url:'./json/all_name.json',
						success:function(data){
							$("#name").val(data[0].name);
							$("#text").val(data[0].text);
						}
					});
					break;
					case '#jim' :
					$.ajax({
						url:'./json/all_name.json',
						success:function(data){
							$("#name").val(data[1].name);
							$("#text").val(data[1].text);
						}
					});
					break;
					case '#jary' :
					$.ajax({
						url:'./json/all_name.json',
						success:function(data){
							$("#name").val(data[2].name);
							$("#text").val(data[2].text); 
						}
					});
					break;
					default :
					$.ajax({
						url:'./json/all_name.json',
						success:function(data){
							$("#name").val(data[0].name);
							$("#text").val(data[0].text); 
						}
					});
				}
			});
		</script>
	</body>
</html>

例子2

参考 https://segmentfault.com/a/1190000019936510

用到了Hash模式跳转，但是用了route

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class Router{
    constructor(){
        this.routes = {}
        this.currentUrl = ''
    }
    //存放不同路由对应的回调函数
    route(path, callback){
        this.routes[path] = callback || function(){}
    }
    updateView(){
        this.currentUrl = location.hash.slice(1) || '/'
    	this.routes[this.currentUrl] && this.routes[this.currentUrl]()
    }
    init(){
        /*
        我知道这里为什么用bind了，这是由于this指针的变化导致的。如果这是使用this.updateView，
        那么当真正发生了load和hashchange事件时，会出现window.updateView()语句的出现，当执行
        这条语句的时候，updateView中的this不再指向Router对象，而是window对象。bind的作用是把this
        绑定到Router对象的this上。
        */
        window.addEventListener('load',this.updateView.bind(this),false)
        window.addEventListener('hashchange',this.updateView.bind(this),false)
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<div id="app">
    <ul>
        <li>
        	<a href="#/">home</a>
        </li>
        <li>
        	<a href="#/about">about</a>
        </li>
        <li>
        	<a href="#/topics">topics</a>
        </li>
    </ul>
    <div id="content">
        
    </div>
</div>
<script>
	const router = new Router()
    router.init()
    router.route('/',function(){
        document.getElementById('content').innerHTML = 'home'
    })
    router.route('/about',function(){
        document.getElementById('content').innerHTML = 'about'
    })
    router.route('/topics',function(){
        document.getElementById('content').innerHTML = 'topics'
    })
</script>

优缺点

优点

1) 有良好的交互体验
能提升页面切换体验，用户在访问应用页面是不会频繁的去切换浏览页面，从而避免了页面的重新加载；
2) 前后端分离开发
单页Web应用可以和 RESTful 规约一起使用，通过 REST API 提供接口数据，并使用 Ajax 异步获取，这样有助于分离客户端和服务器端工作。更进一步，可以在客户端也可以分解为静态页面和页面交互两个部分；
3) 减轻服务器压力
服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
4) 共用一套后端程序代码
不用修改后端程序代码就可以同时用于 Web 界面、手机、平板等多种客户端；

缺点

1) SEO难度较高
由于所有的内容都在一个页面中动态替换显示，所以在SEO上其有着天然的弱势，所以如果你的站点对SEO很看重，且要用单页应用，那么就做些静态页面给搜索引擎用吧；

2) 开发难度高
较高的前端开发门槛，对技术能力要求较高，需要对设计模式有一定理解，因为面对不是一个简单的页面，而是一个运行在浏览器环境里面的桌面软件。

SPA优化

tips

1. 可以在cdnjs.com/ 上查询很多前端框架的包并在js中引用， 不用自己下载。比如

   1	https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js

概述

http://ife.baidu.com/ 这个网站是百度前端技术学院，从知乎上找到的，可以用来学学WEB前端基础知识。

https://codepen.io/ 在这个网站上可以写html+css+js代码，并实时显示网页效果。

HTML, CSS, JS与Web Services

https://www.zhihu.com/question/22689579

网站访问的过程

浏览器端是通过HTTP协议与知乎的服务器通信的，在这个过程中，浏览器端不断发送请求，可能是一个页面，也可能是一个地址，然后服务器端发回一个应答，之后浏览器端根据这个应答再去请求，可能是图片，音频，视频等。

HTML

类似我写的markdown文本，所以markdown可以转换为HTML代码，但是HTML有更多复杂的内容。浏览器按照默认的样式显示出列表，图片，超链接，输入框，按钮等。

CSS

我们可以不用浏览器默认的样式，可以用CSS写一些定义样式的代码，然后在 html 文件里用一个<link>标签把这些规定样式的 CSS 代码与表达内容语义的 HTML 代码关联起来。

JS

给页面添加动态效果。比如知乎问题的标签，鼠标移上去会弹出一个小窗口，这个就是 JS 实现的效果。

1. 鼠标悬停到标签上时创建一个新的<div>小窗口
2. 用 JS 向知乎服务器发送一个请求，得到这个小窗口应该显示的数据，放在这个小窗口里（这就是所谓的AJAX，不用刷新就能与服务器进行交互，更新页面的一小部分~）

Web Service

要让这些形形色色的机器能够通过网络进行交互，我们就需要指明一种协议（比如 HTTP/HTTPS）和一种数据封装格式（比如 HTML/XML），Web Server 提供的 Web Service，指的就是这种协议+格式的交流体系。不过 Web Service 的生态系统和 HTML 的标准不一样，用户可以选择的协议和数据封装格式更多，普通的网站访问用的 HTTP + HTML 只是其中一种，一些封闭系统内的交流还可以自己定义一个协议和格式来用（比如 QQ）。

服务器脚本与web framework

普通网站的访问过程

1. 用户操作浏览器访问，浏览器向服务器发出一个 HTTP 请求；
2. 服务器接收到 HTTP 请求，Web Server 进行相应的初步处理，使用服务器脚本生成页面；
3. 服务器脚本（利用Web Framework）调用本地和客户端传来的数据，生成页面；
4. Web Server 将生成的页面作为 HTTP 响应的 body，根据不同的处理结果生成 HTTP header，发回给客户端；
5. 客户端（浏览器）接收到 HTTP 响应，通常第一个请求得到的 HTTP 响应的 body 里是 HTML 代码，于是对 HTML 代码开始解析；
6. 解析过程中遇到引用的服务器上的资源（额外的 CSS、JS代码，图片、音视频，附件等），再向 Web Server 发送请求，Web Server 找到对应的文件，发送回来；
7. 浏览器解析 HTML 包含的内容，用得到的 CSS 代码进行外观上的进一步渲染，JS 代码也可能会对外观进行一定的处理；
8. 用户与页面交互（点击，悬停等等）时，JS 代码对此作出一定的反应，添加特效与动画；
9. 交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过 JS 代码（响应某个动作或者定时）向 Web Server 发送请求，Web Server 再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

HTML

head标签

标签，<title>，<link>, <meta>, <script>, <style>, <base> 这几个标签可以用于head标签中。head标签中必须要有title标签

link标签

作用是链接外部css文件和收藏夹图标。最常用的用法是链接外部样式表，也就是css文件。

1

<link href="https://static.zhihu.com/heifetz/main.app.216a26f4.4a0d53a7197b32815d96.css" rel="stylesheet" />

script标签

用在头部head标签内，作用是调用外部js文件。该标签是一个封闭标签，写法和div标签一样。另外，该标签不仅仅可以在头部head标签内使用，在body标签内部任何位置都可以使用。最终实现的效果都是一样的，通常是用在head标签内。

meta标签

标签<meta> 的属性定义了与文档相关联的名称/值对

http-equiv属性和name属性

见 https://blog.csdn.net/p3118601/article/details/89670933

style标签

div标签

div嵌套一个元素时，会出现一个问题，如果外层div没有设置border或者padding-top，那么默认，内层元素的border会和外层div的border重合，这导致一个问题，如果内层元素有margin-top，则这个margin-top的区域会在外层div的外面。

html元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

1
2
3

<body>
  <p>This is my first paragraph.</p>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

## html属性

### style属性

提供了一种改变所有 HTML 元素的样式的通用方法。

通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

```html
<html>
  <body style="background-color:yellow">
    <h2 style="background-color:red">This is a heading</h2>
    <p style="background-color:green">This is a paragraph.</p>
  </body>
</html>

html格式化

就是加粗，斜体之类的。

html css

用style标签定义html中的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <style type="text/css">
    h1 {color: red}
    p {color: blue}
  </style>
  <title></title>
</head>
<body>
  <h1>header 1</h1>
  <p>A paragraph.</p>
</body>
</html>

head标签中必须要有title标签

外部样式表

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" href="/html/csstest1.css" />
  <title></title>
</head>
<body>
  <h1>我通过外部样式表进行格式化。</h1>
  <p>我也一样！</p>
</body>
</html>

html块级元素

html的<div>元素是块级元素，它是可用于组合其他 HTML 元素的容器。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。

HTML <span> 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

html类

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <style>
  .cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
  } 
  </style>
  <title></title>
</head>
<body>
  <div class="cities">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>
</body>
</html>

每个块级元素如<div>和行内元素如<span>，可以设置class 属性，然后在html head标签中用style标签将所有这个class的的块级元素和行内元素设置样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <style>
  .cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
  } 
  </style>
  <title></title>
</head>
<body>
  <div class="cities">
    <h2>London</h2>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>
  <div class="cities">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="cities">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
  </div>
  <p>my <span class="cities">important</span> para</p>
</body>
</html>

如上面这个.cities 就是一个选择器，可以选择所有class为”.cities”的元素，然后执行样式，我做csp时，有听说过标签选择器，id选择器等，如果要选择class为”cities”的div块级元素执行样式，则可以写

1
2
3
4
5
6
7
8

<style>
  .cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
  } 
</style>

这就是一个标签选择器+类选择器。我记得id选择器是这样写的#id1。

html布局

设一个有两个div，一大一小，小的div在大的div里面du，而小的div和大div直接的距离就zhi叫外边距，用daomargin、margin-left、margin-right、margin-top、margin-bottom来设置距离，如margin:10px。而小div和小DIV里面的文字之间的距离就叫内边距，用padding来设置，如同margin一样。

Bootstrap（响应式设计）

js脚本

下面是使用js的简单例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

  <style type="text/css">

  body
  {
  font-size:70%;
  font-family:verdana,helvetica,arial,sans-serif;
  }
  </style>
  <script type="text/javascript">

  function cnvs_getCoordinates(e)
  {
  x=e.clientX;
  y=e.clientY;
  document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
  }

  function cnvs_clearCoordinates()
  {
  document.getElementById("xycoordinates").innerHTML="";
  }
  //]]>
  </script>
  <title></title>
</head>
<body style="margin:0px;">
  <p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
  <div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div><br />
  <br />
  <br />
  <div id="xycoordinates"></div>
</body>
</html>

当鼠标在画布内移动时，会触发事件onmousemove，这个事件接着触发js方法cnvs_getCoordinates(e)，这个方法就是读取鼠标所在的坐标，然后写成html格式，放在id=”xycoordinates”的div中。

CSS

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表（位于 标签内部）
4. 内联样式（在 HTML 元素内部）

很多属性，比如clear，应该写在css文件中，而不要内联在html中。

CSS框模型

CSS定位

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待，在这种情况下，这个框称为无名块框；块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<head> 
  <style> 
    body{
      background-color: yellow;
    }
    .p1{
      background-color: red;
      line-height: 100px;
    }
    .p2{
      background-color: blue;
      margin: 100px;
      padding: 10px;
    }
  </style>
</head>
<body> 
  <p class="p1">p1fawogjoew</p>
  <p class="p2">fowiejgowego</p>
</body>

我发现可以通过指定margin属性，padding属性，line-height属性等来给块定位。

CSS 浮动

左图出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

所以我们只能添加一个空元素并且清理它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div> #空元素
</div>

如何清除浮动

1. 在父级元素的末尾添加clear类的空div，并设置其clear属性为both。清除浮动的原理是：clear类的div只能放在浮动元素的后面，因为浮动元素占据了空间，由于clear类的div不是浮动的，父级元素为了包含它，只能扩展到clear类的div所在的位置，这样就顺便包含了浮动元素。
2. 父级元素定义overflow属性为hidden。为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

相对定位与绝对定位

绝对定位 absolute不占位置完全浮动，相对定位 relative会占有位置。

绝对定位是根据其定位不是static的祖先元素来定位的

所以我们在使用时通常设置父元素相对定位(有两个目的,其一是要让父元素占位置,其二是为了让子元素设置绝对定位时会根据父元素定位),子元素设置绝对定位.

CSS让div层悬浮在最上方

1
2
3
4
5
6

div{
    position: absolute;/*这里一定要设置*/
	z-index: 999999;/*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
	margin-top: 20%;
	margin-left: -209px;
}

CSS选择器

类选择器还是 ID 选择器？

区别 1：只能在文档中使用一次

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

区别 2：不能使用 ID 词列表

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。

属性选择器

当某个属性是某个值时，选择该元素。

1
2
3

a[href="http://www.badu.com"]{
    color: red
}

子代选择器

1

div>span{}

后代选择器

文档流

将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。

元素脱离文档流之后，将不再在文档流中占据空间，（但是元素内的内容依然占据着空间），而是处于浮动状态（可以理解为漂浮在文档流的上方）。脱离文档流的元素的定位基于正常的文档流，当一个元素脱离文档流后，依然在文档流中的其他元素将忽略该元素并试图填补其原先的空间，（当看到这部分空间有内容占据时，就自动向顺着文档流的方向移动本元素的位置，直到找到合适的位置）

注意：若没有设置脱离文档流，块级元素在文档流中都是从上到下排列的，即使设置了width，也是一样。

如何脱离文档流

1. 元素设置float属性
2. 元素的position属性设置为absolut

margin, padding

通过举出不同的关于margin, padding的例子，来理解它们

例1，两个div元素通过浮动横向放置

我设置div的width和height都是100px，设置了margin是10px，padding是10px，所以整个div是140长的正方形。两个div横向放置时并不会出现外边距合并

例2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<head>
    <style>
        .wrap{
            background-color: blue;
            padding: 10px;
        }
        .block1,.block2{
            float: left;
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px solid black;
            margin: 10px;
            background-color: red
        }
        .clear{
            clear: both
        }
    </style>
</head>

<div class="wrap">
    <div class="block1"></div>
    <div class="block2"></div>
    <div class="clear"></div>
</div>

上一层的div，背景为蓝色的那个，设置了padding=10px，然后里面的div跟例1一样。说明内层的div，包括margin部分，会严格在外层div的padding里面，内层div的margin和外层div的padding并不会合并。

例3，两个div纵向放置

两个div纵向放置时并会出现上面的div的下外边距和下面的div的上外边距合并的情况

例4，外层wrap和内层的block1都设置margin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<head>
    <style>
        .wrap{
            background-color: blue;
            margin: 20px;
        }
        .block1{
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 1px solid black;
            margin: 10px;
            background-color: red
        }
        .clear{
            clear: both
        }
    </style>
</head>

<div class="wrap">
    <div class="block1"></div>
    <div class="clear"></div>
</div>

可以发现，从左到右是body的margin-left，.wrap的margin-left，.block1的margin-left；但是，上面，.wrap的margin-top覆盖了body，.block1的margin-top。原因是，margin-left和margin-right会相对于水平方向的margin推开，而margin-top和margin-bottom会相对于垂直方向的border或者padding推开。

在这里，.wrap和.block1的border-top重叠了，这个问题我在宠物商店的制作中踩过坑（内层div的margin超出了外层的border范围），原因是，这里外层的.wrap没有设置border和padding的长度，而且外层的.wrap的margin默认为0，所以内层.block的margin-top覆盖了外层.wrap的长度为0的margin-top，所以显示出来就是，外层.wrap的border-top和内层的.block1的border-top重合了。解决方案就是，设置外层的padding或者border

比如，我设置，.wrap的padding是10px。

例5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34