Posted on

使用纯css做分页tag效果

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- 第一步，我们将tag（选项卡）和每个tag对应的容器放在list里 -->
<ul class="tab-list">
<li class="tab-item">
<!-- 使用radio实现tab切换（核心思想是radio：checked后，改变z-index实现“假”切换） -->
<input type="radio" id="tabRadio1" class="radio" name="tab" checked="checked">
<!-- 第二步，我们需要把radio隐藏，因此通过label标签的for，将label和radio联系起来 -->
<label class="label" for="tabRadio1">Tab1</label>
<!--  第三步，设置每个tag下对应的内容容器 -->
<div class="tabBox">
1111111111
</div>
</li>
<li class="tab-item">
<input type="radio" id="tabRadio2" class="radio" name="tab">
<label class="label" for="tabRadio2">Tab2</label>
<div class="tabBox">
2222222222
</div>
</li>
<li class="tab-item">
<input type="radio" id="tabRadio3" class="radio" name="tab">
<label class="label" for="tabRadio3">Tab3</label>
<div class="tabBox">
3333333333
</div>
</li>
</ul>
</body>
</html>

css

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
/* 第一步，我们需要把ul和li默认的内外边距初始化为0 */
ul,li{
margin:0px;
padding:0px;
}
/* 第二步，容器盒使用先相对定位，方便布置它和tag选项卡的位置 */
.tab-list{
position:relative;
}
.tab-item{
list-style:none;
float:left;
margin-left:4px;
}
/* 第三步，设置tag，底边border设为透明，背景色和容器盒保持一致 */
.label{
display:block;
width:80px;
height:30px;
border:1px solid transparent;
background:rgba(0,0,0,0.1);
text-align:center;
}
/* 第四步，设置容器盒的位置，重点是z-index要满足：1.比永远比tag小，容器盒的边框会被tag挡住相应部分；
2.比checked状态时的z-index要小，使被checked的容器盒盖住未被checked的容器盒 */
.tabBox{
position:absolute;
left:4px;
top:31px;
width:500px;
height:300px;
background:#fff;
border:1px solid rgba(0,0,0,0.2);
z-index:-5
}
/* 使用+选择器，选择被checked的radio后面紧跟着的label标签 */
input[type="radio"]:checked+.label{
border-color:rgba(0,0,0,0.2);
border-bottom-color:transparent;
background:#fff;
z-index:10;
}
/* 使用～选择器选择，选择被checked的radio“超过”的tabbox标签 */
input[type="radio"]:checked~.tabBox{
z-index:-1;
}
input[type="radio"]{
position:absolute;
opacity:0;
}

Posted on

JS 里的数据类型

number, string, bool

number

在javascript中，所有number都以64位（8字节）浮点数的形式存储; js默认使用Unicode编码，string一个字符16位(2字节).
js底层没有整数，全部都是浮点数，浮点数不是精确的值，eg: 0.1 + 0.2 === 0.30000000000000004

js精度（第13-64位，共52位来表示小数部分）：最多只能到53个二进制位，故绝对值小于2^53 以内的数可以精确表示。

js数值范围（第2-12位，共11位来表示小数部分）：2^-1023 到 2^1024是js能表示的树枝范围；eg:Math.pow(2, 1024) // Infinity

数值的表示，如图：
01.jpg

string

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中，如图：
02.jpg

boolean

只有两个值true和false，以下运算符会返回布尔值：

  • 前置逻辑运算符： ! (Not)
  • 相等运算符：===，!==，==，!=
  • 比较运算符：>，>=，<，<=

undefined, null, object

undefined:

表示未定义，Number(undefined) === NaN

null:

表示空值，当调用函数时，某个参数没有设置任何值，可以传入null，Number(null) === 0

Object:

是js里的核心概念，数组Array和函数Function都是对象。
那么什么是对象呢？对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。对象都是哈希。
key：只能是字符串，如果写的是数字，则会被自动转换成字符。
key又称为property，当一个属性的值是函数时，我们把这个属性称为“方法”。
属性的读取，查看；delete命令，in运算符，和属性的遍历：for…in循环
03.jpg

普通类型 VS 对象

js中有7种数据类型,其中：number, string, boolean, null, undefined, symbol是普通类型，存储在Stack栈内存中；对象作为复杂类型，存地址存储在heap堆内存中。

类型转换

转成字符串

04.jpg

转成数值

05.jpg

转成boolean

Boolean()

简单类型 vs 对象

var n = new Number(1)
Number()构造了一个新对象，其primitiveValue对应1；

var n =1
n.xxx =2
n.xxx //undefined
这里发生了临时的类型转换，1被包装成临时对象；
这就是基本类型可以“点什么什么”的原因；

five falsy值

null, undefined, NaN, ‘’, 0

引用

引用：js中所有变量和对象的关系，都是引用。没有指针这个说法这是c里的。

垃圾回收

如果一个对象没有被引用，它就会被当做垃圾，被浏览器回收。

深copy vs 浅copy

深拷贝：所有的基本类型的赋值，都是深拷贝；
浅拷贝：复杂类型的引用和赋值。

原型链

js中的普通对象：哈希；
js中的对象：树。
ECMAScript描述了原型链的机制: 实现继承的主要方式。它的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。
js中，每个对象都有一个指向它的原型对象的内部链接，这个原型对象又有自己的原型，直到某个对象的原型为null为止（也就是不再有原型指向）形成了tree数据结构，这种链接结构就称为原型链。

公用属性（原型）

06.jpg

为何没有被垃圾回收？

因为被Object.prototype引用

proto & prototype

对象.proto === 函数.prototype

引用的是同一个对象
比如说：
var n1 = new Number(1)
n1.proto === Number.prototype //true

n1.proto.proto === Object.prototype //true



‘1’.proto === String.prototype //true

Object.proto === Function.prototype //true

Function比较特殊：
Function.proto === Function.prototype //true

Posted on

左右布局

If two elements are displayed as a block:
html structure

1
2
3
4
<div class="wrapper clearFix">
<div class="red"></div>
<div class="blue"></div>
</div>

float方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
css:
.clearFix:after{
display:block;
content:'';
clear:both;
}

.red{
width: 100px;
height: 50px;
background: red;
float:left;
}

.blue{
width: 100px;
height: 50px;
background: blue;
float:left;
}

flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.wrapper{
display:flex;
flex-direction:row;

}
.red{
width: 100px;
height: 50px;
background: red;
}

.blue{
width: 100px;
height: 50px;
background: blue;
}

If two elements are displayed as an inline element:

1
2
3
4
5
6
7
8
9
10
11
12
13
.red{
width: 100px;
height: 50px;
display:inline-block;
background: red;
}

.blue{
width: 100px;
height: 50px;
display:inline-block;
background: blue;
}

左中右布局

html structure

1
2
3
4
5
<div class="wrapper clearFix">
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>

If two elements are displayed as a block:

float方法

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
.clearFix:after{
display:block;
content:'';
clear:both;
}

.red{
width: 100px;
height: 50px;
background: red;
float:left;
}

.blue{
width: 100px;
height: 50px;
background: blue;
float:left;
}

.yellow{
width: 100px;
height: 50px;
background: yellow;
float:left;
}

flex布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrapper{
display:flex;
flex-direction:row;

}
.red{
width: 100px;
height: 50px;
background: red;
}

.blue{
width: 100px;
height: 50px;
background: blue;
}

.yellow{
width: 100px;
height: 50px;
background: yellow;
}

If two elements are displayed as a inline-element:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.red{
width: 100px;
height: 50px;
display:inline-block;
background: red;
}

.blue{
width: 100px;
height: 50px;
display:inline-block;
background: blue;
}

.yellow{
width: 100px;
height: 50px;
display:inline-block;
background: yellow;
}

水平居中

inline元素的父元素上设置text-align:center;

1
2
3
4
5
6
7
8
9
.wrapper{
text-align:center;
}
.red{
width: 100px;
height: 50px;
display:inline-block;
background: red;
}

div+css左右margin为auto(前提：已设置div的宽度)

1
2
3
4
5
6
7
8
9
.wrapper{
max-width:960px;
}
.red{
width: 100px;
height: 50px;
background: red;
margin:0 auto;
}

绝对定位和margin-left：-(width/2);left:50%;

1
2
3
4
5
6
7
8
9
10
11
.wrapper{
position: relative;
}
.red{
width: 100px;
height: 50px;
background: red;
position: absolute;
left:50%;
margin-left:-50px;
}

flex布局

1
2
3
4
5
6
7
8
9
10
.wrapper{
display:flex;
flex-direction:column;
}
.red{
width: 100px;
height: 50px;
background: red;
align-self:center;
}

或者

1
2
3
4
5
6
7
8
9
10
.wrapper{
display:flex;
flex-direction:column;
}
.red{
width: 100px;
height: 50px;
background: red;
margin:0 auto;
}

垂直居中

绝对定位和margin-top：-(height/2);top:50%;

缺点：需要事先知道div的尺寸（高度）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapper{
width:100%;
height:300px;
position: relative;
background:#fff;
}
.red{
width: 50%;
height: 150px;
background: red;
position: absolute;
top:50%;
margin-top:-75px;
}

绝对定位和margin:auto;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper{
width:100%;
height:300px;
position: relative;
background:#fff;
}
.red{
width: 50%;
height: 150px;
background: red;
position: absolute;
top:0;
bottom: 0;
margin:auto;
}

flex布局

注意：flex-direction默认属性是row

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper{
width:100%;
height:300px;
display:flex;
background:#fff;
align-items:center;
flex-direction:row;
}
.red{
width: 50%;
height: 150px;
background: red;
}

inline元素line-height=元素高度

此方法在inline-height较大时有bug

1
2
3
html structure:
<div class="wrapper clearFix">
<div class="red">123</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrapper{
width:100%;
height:300px;
display:inline-block;
background:#fff;
line-height:300px;
}
.red{
width: 50%;
height: 150px;
background: red;
display:inline-block;
line-height:150px;
}

其他小技巧

画三角形

1
2
3
4
5
6
7
8
.triangle1{
border:10px solid red;
width: 0;
height: auto;
border-top-color:transparent;
border-right-color:transparent;
border-left-color:transparent;
}
1
2
3
4
5
6
7
8
.triangle2{
border:10px solid red;
width: 0;
height: auto;
border-top:0;
border-right-color:transparent;
border-bottom-color:transparent;
}

Posted on

有关HTML

W3C简介

万维网联盟（W3C）是万维网（缩写为WWW或W3）的主要国际标准组织。

该组织由Tim Berners-Lee创立并目前领导，由成员组织组成，这些组织维持全职员工，共同制定万维网标准。

MDN简介

MDN(Mozilla Developer Network)，即 Mozilla开发人员网络，是面向开发人员的资源，由开发人员和技术作家社区维护，并在各种主题上托管许多文档，例如：HTML5，JavaScript，CSS，Web API，Node.js，WebExtensions和MathML。

MDN Web Docs是一个不断发展的Web技术学习平台和支持Web的软件，包括：
Web标准，如CSS，HTML和JavaScript;
打开Web应用程序开发;
Firefox附加开发.

HTML所有标签

reference:https://developer.mozilla.org/en-US/docs/Web/HTML/Element

Main root:

<html>

Document metadata:

<base>,<head>,<link>,<meta>,<style>,<title>

Sectioning rootEdit:

<body>

Content sectioning:

<address>,<article>,<aside>,<footer>,<header>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>,<hgroup>,<main>,<nav>,<section>

Text content:

<blockquote>,<dd>,<dt>,<dl>,<div>,<figcaption>,<figure>,<hr>,<li>,<main>,<ol>,<p>,<pre>,<ul>

Inline text semantics:

<a>,<abbr>,<b>,<bdi>,<bdo>,<br>,<cite>,<code>,<data>,<dfn>,<em>,<i>,<kbd>,<mark><q>,<rb>,<rp>,<rt>,<rtc>,<ruby>,<s>,<samp>,<small>,<span>,<strong>,<sub>,<sup>,<time>,<tt>,<u>,<var>,<wbr>

Image and multimedia:

<area>(use only within <map>),<audio>,<img>,<map>,<track>,<video>

Embedded content:

<applet>,<embed>,<iframe>,<noembed>,<object>,<param>,<picture>,<source>

Scripting:

<canvas>,<noscript>,<script>

Demarcating edits:

<del>,<ins>

Table content:

<caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<tfoot>,<th>,<thead>,<tr>

Forms:

<button>,<datalist>,<fieldset>,<form>,<input>,<label>,<legend>,<meter>,<optgroup>,<option>,<output>,<progress>,<select>,<textarea>

Interactive elements:

<details>,<dialog>,<menu>,<menuitem>,<summary>

Web Components:

<element>,<element>,<shadow>,<slot>,<template>

Obsolete and deprecated elementsEdit:

<acronym>,<applet>,<basefont>,<bgsound>,<big>,<blink>,<center>,<command>,<content>,<dir>,<element>,<font>,<frame>,<frameset>,<image>,<isindex>,<keygen>,<listing>,<marquee>,<menuitem>,<multicol>,<nextid>,<nobr>,<noembed>,<noframes>,<plaintext>,<shadow>,<spacer>,<strike>,<tt>,<xmp>

空标签/空元素

在html中，通常在一个空标签/空元素上使用闭标签是无用的，例如<input type="text"></input>的闭标签是无效的html。
html中有以下空标签：
<area>,<base>,<br>,<col>,<colgroup> when the span is present,<command>,<embed>,<hr>,<img>,<input>,<keygen>,<link>,<meta>,<param>,<source>,<track>
,<wbr>

可替换标签/可替换元素

在css中，可替换标签/元素的样式不由css控制，这些元素的外观渲染独立于css外，例如：<img>, <object>, <video>,<textarea>,<input>;某些元素只在一些特定情况下表现为可替换元素，例如： <audio>,<canvas>

HTML5,XHTML,H5

HTML5: A vocabulary and associated APIs for HTML and XHTML.兼容html和xhtml两种写法。xhtml基于xml语言，所有标签都需要闭合，例如<input/>。在html5中兼容两种写法，会自动将<input/>纠正成<input>。

H5:简单的来说，h5是能够在微信上运行的网页，和html5并无关系。

HTML5之容易忽视的问题

  • <title>是必须写的，如果缺省则不合法，但浏览器会自动补上；
  • 除了<div>,<span>其他标签/元素都有默认样式；
  • <b>和<strong>区别？前者是一种物理状态(表示字体应该被加强)，后者是一种逻辑状态(表示该内容在逻辑上是重要的);
  • <noscript>在<head>中引用，表示用户禁用javascript或页面脚本不被支持，所现实的html section.
  • a标签的4种target属性值：_blank, _self, _parent, _top.
  • 如何实现下载？</br>
    1.<a>标签的download属性；
    2.http响应中第二部分为content-type：application/octet-stream
  • a标签的href属性：</br>
    <a href=""></a>跳转到自身页面，且页面滚动到底部；
    <a href="#"></a>页面根据锚点进行跳转，不发送任何请求；
    <a href="qq.com"></a>指向一个不存在的文件，因此不能打开任何页面；
    <a href="//qq.com"></a>无协议时，自动继承当前页面的协议。
    注意：file协议不支持post请求；
    <a href="?name=frank"></a>浏览器自动识别意思，并发起get操作。
    <a href="javascript:alert（1）;"></a>javascript伪协议，用户在地址栏输入alert（1）会激发该命令；
    <a href="javascript:;"></a>点击a标签，但不发生任何操作；
  • html中只有<form>标签可以提交post请求。

Posted on

初识http

Server + Client + HTTP

HTTP(HyperText Transfer Protocol)表示超文本传输协议，是万维网使用的底层协议，这种协议定义了消息的格式和传输方式，以及Web服务器和浏览器应对各种命令应采取的操作。

例如，当你在浏览器中输入URL时，这实际上会向Web服务器发送HTTP命令，指示它获取并传输你所请求的Web页面(如下图)。 控制万维网如何工作的另一个主要标准是HTML，它涵盖了网页的格式和显示方式。

avatar

Server和client的交互

1.浏览器发起请求;
2.服务器在 80 端口接收请求;
3.服务器负责返回响应内容;
4.浏览器负责下载响应内容。

其他常用端口：
TCP 21=文件传输;
TCP 80=超文本服务器（Http);
TCP 443=安全服务(HTTPS);
HTTP 的作用是指导浏览器和服务器的沟通。例如，“404 File Not Found”是常见的HTTP状态代码。这意味着Web服务器找不到您请求的文件，您尝试在Web浏览器中加载的网页或其他文档已被移动或删除，或者您输入了错误的URL或文档名称。

HTTPS:
HTTPS表示超文本传输协议安全, 它是HTTP的安全版本。 浏览器和网站之间的通信由传输层安全性（TLS）或其前身安全套接字层（SSL）加密。

HTTP请求

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
1.动词-路径-协议/版本
2.Key: value(value是信息，不是上传的数据)
3.
4.要上传的数据
``` 

注意：
1.第三部分永远都是一个回车（\n），用于区分第二部分和第四部分
2.动词有 GET（获取）; POST（上传）; PUT （更新）;PATCH（更新）; DELETE（删除）; HEAD ;OPTIONS 等
3.路径包括查询参数，但不包括锚点(锚点是给html看的)
4.default路径为/
5.第 2 部分中的 Content-Type 标注了第 4 部分的格式

例如：
``` bash
POST / HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
``` 

### Google Developer Tool查看请求内容
``` bash
1.打开 Network
2.地址栏输入网址
3.在 Network 点击，查看 request，点击view source
``` 

![avatar](http://i64.tinypic.com/6yefme.jpg)
以上是请求的前三部分，如果有第四部分请求，可以在FormData 或 Payload 里看到。

### HTTP响应
HTTP请求包括：
``` bash
1.动词-路径-协议/版本
2.Key: value(value是信息，不是上传的数据)
3.
4.要上传的数据
``` 
例如：
``` bash
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
Connection: Keep-Alive
Content-Length: 2443
Content-Type: text/html
Date: Tue, 10 Oct 2017 09:14:05 GMT
Etag: "5886041d-98b"
Last-Modified: Mon, 23 Jan 2017 13:24:45 GMT
Pragma: no-cache
Server: bfe/1.0.8.18
Set-Cookie: BDORZ=27315; max-age=86400; domain=.baidu.com; path=/

<!DOCTYPE html>
<!--STATUS OK--><html> <head> ……

注意：
状态码：
1开头：消息（100 continue；101 switching；102 processing）

2开头：成功

3开头：重定向：

4开头：请求错误

5开头：服务器错误

第 2 部分中的 Content-Type 标注了第 4 部分的格式；且遵循MIME 规范;

Google Developer Tool查看响应内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1.打开 Network
2.地址栏输入网址
3.在 Network 点击，查看 request，点击view source
4.选中一个响应
5.查看 Response Headers，点击view source能看到响应的前两部分
6.查看 Response 或者 Preview，会看到响应的第 4 部分
``` 

### 使用 curl 命令
用 curl 创造一个get请求，并得到响应:</br>
curl -s -v -H -- "https://www.baidu.com"</br>
命令行的意思是：
![avatar](http://i68.tinypic.com/xdidkz.jpg)
请求的内容为:
``` bash
GET / HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*

用 curl 创造一个post请求，并得到响应：
curl -X POST -d “1234567890” -s -v -H – “https://www.baidu.com"
请求的内容为：

1
2
3
4
5
6
7
8
9
POST / HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.54.0
Accept: */*
Frank: xxx
Content-Length: 10
Content-Type: application/x-www-form-urlencoded

1234567890

Posted on

git是啥？？：

Git是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

Git 是 Linus Torvalds（这位是linux的作者） 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。
Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。
avatar

基本操作：

1.git init

初始化git（注意：需在项目目录下初始化）
example：
cd ~/Desktop 进入桌面目录
mkdir git-demo 创建项目目录
git init 在项目目录中创建一个.git目录，它是一个仓库；我们再git-demo中创建任意工程文件，例如：
index.html css/style.css(这里注意一下，需要先mkdir css创建css文件夹；直接css/style.css是不会创建新文件夹的)

2.git add

将创建的文件加入到暂存区
example：
git add index.html （我们仅上传一个文件
git add . （我们上传整个当前目录

3.git commit -v

将暂存区的文件正式提交到本地仓库，这个本地仓库就是.git
常用提交命令： git commit -m “commit message” 和 git commit -v的差别：
前者 -m Use the given as the commit message. If multiple -m options are given, their values are concatenated as separate paragraphs. -m命令用于提交“提交信息”；
后者 git commit -v Show unified diff between the HEAD commit and what would be committed at the bottom of the commit message template to help the user describe the commit by reminding what changes the commit has. -v命令用于显示提交更改。

Posted on

基础命令行操作：

1.ls

What does it means?
List directory contents 列出目录内容命令
Others:
ls -a: list directory contents, and do not ignore entries starting with)
ls -l: list directory contents, and use a long listing format
Example:

1
2
cd ~/Desktop
echo "hello,git command lines" > 1.txt

2.cat(猫？？不不，cat是concatenate的简写)

What does it means?
Concatenate files and print on the standard output
文本输出命令，常用于查看文件的内容
三大功能：
a.$ cat filename 一次显示整个文件
b.$ cat>filename 只能创建新文件，不可编辑已有文件
c.$cat file1 file2>file将几个文件合并为一个文件
Example:

1
2
3
cd ~/Desktop
cat 2.txt
cat>2.txt

3.mv

What does it means?
move 移动命令，常用与移动文件和重命名
Example:

1
2
cd ~/Desktop
mv 2.txt 3.txt

4.touch

What does it means?
touch filename
摸一下哈哈，所以先在当前目录下创建文件，touch命令课更改文档或目录的日期时间，包括存取时间和更改时间
Example:

1
2
cd ~/Desktop
touch 4.txt

如何使用explainshell.com：
首先你要打开这个网站呗；
然后在灰色框框里输入需要explain的命令行；
按回车，解释信息即在灰色框框下方显示；
英文可以用狗狗translate翻译。