...
289 | ```
290 |
291 | *不推荐：*
292 |
293 | ```
294 | ...
295 |
296 |
387 | ```
388 |
389 | 
390 |
391 | 快速记忆法：
392 |
393 | 好比找个人办事， 首先找到他，然后拉关系，最后看效果。
394 |
395 | #### 5.2 base 标签
396 |
397 | **语法：**
398 |
399 | ```html
400 |
401 | ```
402 |
403 | 
404 |
405 | **总结： **
406 |
407 | 1. base 可以设置整体链接的打开状态
408 | 2. base 写到 之间
409 | 3. 把所有的连接 都默认添加 target="_blank"
410 |
411 | **pink老师 一句话说出他们:**
412 |
413 | > 全体链接~ 到 ~ 全体集合 所有链接 以新窗口打开页面 ~ 是
414 |
415 | #### 5.3 预格式化文本pre标签
416 |
417 | 标签可定义预格式化的文本。
418 |
419 | 被包围在 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
420 |
421 | ```html
422 |
423 |
424 | 此例演示如何使用 pre 标签
425 |
426 | 对空行和 空格
427 |
428 | 进行控制
429 |
430 |
431 | ```
432 |
433 | **pink老师 一句话说出他们:**
434 |
435 | > 所谓的预格式化文本就是 ，按照我们预先写好的文字格式来显示页面， 保留空格和换行等。
436 |
437 | 有了这个标签，里面的文字，会按照我们书写的模式显示，不需要段落和换行标签了。但是，比较少用，因为不好整体控制。
438 |
439 |
440 |
441 | #### 5.4 特殊字符 （理解）
442 |
443 | 一些特殊的符号，我们再html 里面很难或者 不方便直接 使用， 我们此时可以使用下面的替代代码。
444 |
445 | 
446 |
447 | **虽然有很多，但是我们平时用的比较较少， 大家重点记住 空格 大于号 小于号 就可以了，剩下的回来查阅。**
448 |
449 | **总结：**
450 |
451 | 1. 是以**运算符**`&`开头,以**分号运算符**`;`结尾。
452 | 2. 他们不是标签，而是符号。
453 | 3. HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符，浏览器会将它们作为标签解析，若要正确显示，在 HTML 源代码中使用字符实体
454 |
455 | **团队约定**
456 |
457 | *推荐：*
458 |
459 | ```
460 | more >>
461 | ```
462 |
463 | *不推荐：*
464 |
465 | ```
466 | more >>
467 | ```
468 |
469 |
470 | #### 5.5 html5发展之路
471 |
472 |
473 |
474 | 
475 |
476 |
477 |
478 | #### 5.6 什么是XHTML
479 |
480 | XHTML 是更严格更纯净的 HTML 代码。
481 |
482 | - XHTML 指**可扩展超文本标签语言**（EXtensible HyperText Markup Language）。
483 | - XHTML 的目标是取代 HTML。
484 | - XHTML 与 HTML 4.01 几乎是相同的。
485 | - XHTML 是更严格更纯净的 HTML 版本。
486 | - XHTML 是作为一种 XML 应用被重新定义的 HTML。
487 | - XHTML 是一个 W3C 标准。
488 |
489 | #### 5.7 HTML和 XHTML之间有什么区别?
490 |
491 | - XHTML 指的是可扩展超文本标记语言
492 | - XHTML 与 HTML 4.01 几乎是相同的
493 | - XHTML 是更严格更纯净的 HTML 版本
494 | - XHTML 是以 XML 应用的方式定义的 HTML
495 | - XHTML 是 2001 年 1 月发布的 W3C 推荐标准
496 | - XHTML 得到所有主流浏览器的支持
497 | - XHTML 元素是以 XML 格式编写的 HTML 元素。XHTML是严格版本的HTML，例如它要求标签必须小写，标签必须被正确关闭，标签顺序必须正确排列，对于属性都必须使用双引号等。
498 |
499 | # 6. @深入阅读
500 |
501 | [HTML5的崛起之路](http://www.chinaz.com/manage/2015/0720/424831.shtml)
502 |
503 | # 7. 预习内容
504 |
505 | - 表格标签
506 |
507 | - 能够通过表格标签能够写出一个简版表格数据展示
508 |
509 | 例如：
510 |
511 | 
512 |
513 | 可以把你今天学习的内容放在表格内，再次作为总结
514 |
515 |
--------------------------------------------------------------------------------
/web前端最全笔记/biji_files/z_stat.php:
--------------------------------------------------------------------------------
1 | (function(){function p(){this.c="1253473928";this.ca="z";this.Y="";this.V="";this.X="";this.D="1555073346";this.$="z10.cnzz.com";this.W="";this.H="CNZZDATA"+this.c;this.G="_CNZZDbridge_"+this.c;this.O="_cnzz_CV"+this.c;this.P="CZ_UUID"+this.c;this.K="UM_distinctid";this.A="0";this.J={};this.a={};this.Ca()}function h(a,
2 | b){try{var c=[];c.push("siteid=1253473928");c.push("name="+g(a.name));c.push("msg="+g(a.message));c.push("r="+g(l.referrer));c.push("page="+g(e.location.href));c.push("agent="+g(e.navigator.userAgent));c.push("ex="+g(b));c.push("rnd="+Math.floor(2147483648*Math.random()));(new Image).src="http://jserr.cnzz.com/log.php?"+c.join("&")}catch(d){}return!0}var q=function(){for(var a=document.getElementsByTagName("script"),b=0,c=a.length;bthis.a.b[b].h&&delete this.a.b[b];this.I()}catch(c){h(c,
9 | "cCV failed")}},I:function(){try{var a=[],b;for(b in this.a.b){var c=[];c.push(b);c.push(this.a.b[b].da);c.push(this.a.b[b].h);var d=c.join("|");a.push(d)}if(0===a.length)return!0;var f=new Date;f.setTime(f.getTime()+157248E5);var k=this.O+"=";this.b=g(a.join("&"));k+=this.b;k+="; expires="+f.toUTCString();l.cookie=k+"; path=/"}catch(n){h(n,"sCV failed")}},sa:function(){try{return this.N=e.location.href}catch(a){h(a,"gCP failed")}},o:function(){try{return this.a.Ha=l.referrer||""}catch(a){h(a,"gR failed")}},
10 | ua:function(){try{return this.a.B=e.navigator.systemLanguage||e.navigator.language,this.a.B=this.a.B.toLowerCase(),this.a.B}catch(a){h(a,"gL failed")}},xa:function(){try{return this.a.ba=e.screen.width&&e.screen.height?e.screen.width+"x"+e.screen.height:"0x0",this.a.ba}catch(a){h(a,"gS failed")}},w:function(){try{return this.a.Da=this.i("ntime")||"none"}catch(a){h(a,"gLVST failed")}},T:function(){try{return this.a.ea=this.i("ltime")||(new Date).getTime()}catch(a){h(a,"gFVBT failed")}},wa:function(){try{var a=
11 | this.i("cnzz_a");if(null===a)a=0;else{var b=1E3*this.w(),c=new Date;c.setTime(b);(new Date).getDate()===c.getDate()?a++:a=0}return this.a.La=a}catch(d){h(d,"gRT failed")}},va:function(){try{return this.a.C=this.i("rtime"),null===this.a.C&&(this.a.C=0),0b;b++)if(-1
53 |
54 | css: /* */
55 |
56 | js: /* */ 多行 //单行
57 |
58 | ## js 的几种输出方式：
59 |
60 | 1.alert: 弹出警示框
61 | 2.console.log("") 控制面板！！！！
62 | 3.document.write("1234"); 文档打印！！！
63 | 4.prompt("请输入",123); 弹出输入框 参数 1：提示信息 参数 2： 默认值
64 |
65 | ## 变量：
66 |
67 | var num = 10;
68 | 声明一个变量名叫 num 值是 10；
69 |
70 | ### 注意：
71 |
72 | 1.即声明又给值 结果是当前的值
73 | 2.只声明不给值：undefined
74 | 3,没有声明直接给值 浏览器自动加上
75 | 4.既没有声明又没有给值 结果报错；
76 | 5.一个变量只能存储一个值！！
77 |
78 | ### 声明变量的几种方式：
79 |
80 | 1.var num = 10; var num1 = 20;
81 | 2.var num=10,num1=20;
82 | 3.var num,num1;
83 | num=10;
84 | num=20;
85 |
86 | ### 变量的命名规则：
87 |
88 | 1.由数字 字母 下划线 \$符号 组成
89 | 2.不能以数 字开头
90 | 3.不能使用 关键字 保留字
91 | 4.见名知意
92 | 5 遵循驼峰命名法 uName userSchool
93 | 6.变量名不能超过 255 个字符；
94 |
95 | ## js 的数据类型：
96 |
97 | ### 1.基本数据类型
98 |
99 | 1.数值型（十进制）
100 |
101 | 0-所有的自然数 小数 负数 NaN:不是一个数字
102 |
103 | 2.字符串
104 |
105 | 只要加引号都属于字符串 特殊字符 只适用于 console.log() \n 换行 "un'de'fined" 'und"ef"ined'
106 | str.length: 访问字符串的长度
107 | str[索引|下标] 访问对应的每一个字符 索引从 0 开始
108 | 只要与字符串相加 就会相连！！！
109 |
110 | 3.布尔型
111 |
112 | true|false
113 | 如果参与运算： true=1 false=0
114 |
115 | 4.undefined：
116 |
117 | 只声明没给值
118 |
119 | 5.null（对象）：
120 |
121 | 一般清空内存；
122 |
123 | typeof 检测数据类型
124 |
125 | isNaN判断是否是数字 如果是数字返回false 不是数字返回true
126 | "isNaN会默认尝试把内容转换成数字"!!
127 |
128 | ### 1.转换为字符型：
129 |
130 | 强制类型转化：
131 |
132 | num.toString()
133 | String(num)
134 |
135 | 隐式类型转换：
136 |
137 | 10+""
138 |
139 | ### 2.转换为数值类型：
140 |
141 | 强制类型转化：
142 |
143 | parseInt(): 1.取整。
144 | parseFloat(); 1.保留小数；
145 | Number() 1.取整--保留小数
146 |
147 | 三者的区别：
148 |
149 | parseInt
150 | 结果是整数 字母在前 NaN 字母在后 干掉字母（保留整数）！
151 | parseFloat
152 | 结果是小数 字母在前 NaN 字母在后 干掉字母（保留小数）！
153 | Number
154 | 只要有字母结果 NaN
155 |
156 | 隐式类型转换：
157 |
158 | 1. 直接加 + 号
159 | 2. -0 /1 \*1
160 |
161 | ### 3.转换为布尔类型：
162 |
163 | 强制类型转换：
164 |
165 | Boolean()
166 |
167 | 隐式类型转换：
168 |
169 | !! 双重否定等于肯定
170 |
171 | 转换成 false 的情况：
172 |
173 | 0 undefined null NaN false "" 都是 false；
174 |
175 | # js 第二天：
176 |
177 | ## 算数运算符：
178 |
179 | + - \* / %
180 | 表达式： var num = 10; num+1
181 |
182 | ### 前++与后++：
183 |
184 | var a = 1;
185 | a++：先返回 在自加
186 | ++a:先自加 在返回
187 |
188 | 区别：
189 |
190 | 1).只有一个表达式的时候两者没有区别！！
191 | 2).当有多个表达式或者直接输出 要按照两者的语法规则.
192 |
193 | ## 比较运算符： > >= < <= == != === !==
194 |
195 | ==:只判断值是否相等
196 | ===：判断值与数据类型是否相等；
197 |
198 | ## 逻辑运算符：
199 |
200 | && || !
201 | &&:一错全错；
202 | ||：一对全对
203 | !；取反
204 | ! > && >||
205 |
206 | ### 短路运算：
207 |
208 | &&找错：
209 |
210 | 如果有错直接输出！ 如果一个表达式没有错的返回 最后一个！ 0 null false undefined NaN "";
211 |
212 | ||找对：
213 |
214 | 如果有对直接输出！ 如果一个表达式没有对的返回 最后一个！
215 |
216 | ## if..else..
217 |
218 | 如果(){
219 |
220 | }否则{
221 |
222 | }
223 |
224 | ## 三元表达式：
225 |
226 | 10>5?alert(10):alert(5)
227 |
228 | ## switch:
229 |
230 | switch (参数){
231 | case "匹配项“:
232 | 执行：
233 | break；
234 | }
235 |
236 | ### 注意事项：
237 |
238 | 1.case 后面不要加判断条件
239 | 2.case 匹配的全等（匹配值与数据类型）
240 | 3.每个 case 后面加 break； ###语法:
241 |
242 | # js 第三天：
243 |
244 | for(初始变量;循环的终止条件;循环的增量){
245 | 执行的代码块
246 | }
247 |
248 | for 循环 与 while 循环
249 |
250 | for 循环一般用于知道循环次数；
251 | while 循环 不知道循环次数；
252 |
253 | while 与 do..while 区别：
254 |
255 | while:先判断在执行
256 | do..while:先执行在判断
257 |
258 | continue break 区别：
259 |
260 | continue：跳出当前循环 继续下一次循环
261 | break: 跳出整个循环
262 |
263 | # js 第四天：
264 |
265 | ## 什么是数组:
266 |
267 | 一组数据数据的集合
268 |
269 | ## 为什么使用数组：
270 |
271 | 方便对数据的统一管理
272 |
273 | var arr = ["张三","李四"];
274 | var a = "张三";
275 | var b = "李四"; ##数组的使用：
276 |
277 | ### 1.创建数组：
278 |
279 | 1.创建空数组 var arr = [];
280 | 2.创建空数组 var arr = new Array();
281 | 3.创建有元素的数组 var arr = [1,2,3,4,5];
282 | 4.创建有元素的数组 var arr = new Array(1,2,3,4,5);
283 |
284 | []与 new Array 区别：
285 |
286 | 当只有一个数据(数字) new Array 代表数组的长度 [] 代表一个数据
287 |
288 | ### 2.数组的使用:
289 |
290 | 1.获取元素：
291 |
292 | 1.下标（索引） 默认的索引从 0 开始 数组名[索引值] 当访问没有定义内容的数组 结果是 undefined
293 | 2.length 数组的长度 长度从 1 开始
294 |
295 | 2.数组里面嵌套数组：二维数组
296 |
297 | ### 3.数组的改变：
298 |
299 | 1.数组可以动态改变
300 | 2.清空数组 数组名.length = 0 数组名 = null
301 | var arr = [1,2,3]
302 |
303 | ### 4.数组可以存什么:
304 |
305 | 数组可以存储任意数据类型的元素
306 | 一般数组存储一种数据类型
307 |
308 | ### 5.数组的方法:
309 |
310 | push: 数组.push(元素) 向末尾添加元素
311 | pop: 数组.pop()删除数组末尾的元素
312 | unshift： 数组.unshift(元素) 数组的前面添加内容
313 | shift： 数组.shift()删除数组的第一个元素
314 |
315 | ### 什么是函数：
316 |
317 | 可重复使用的代码块
318 |
319 | ### 为什么使用函数：
320 |
321 | 1.减少代码量
322 | 2.使代码有模块化
323 |
324 | ### 函数的使用： 函数不调用自己不执行
325 |
326 | 定义函数：
327 |
328 | 1. function fn(){
329 | 执行的代码块
330 | }
331 |
332 | fn 是函数名;
333 |
334 | 2. var fn = function(){
335 | 执行的代码块
336 | }
337 |
338 | 函数的调用：
339 |
340 | 函数名();
341 |
342 | ### 函数的参数：
343 |
344 | 形参：形式上的参数 定义函数时候的参数 本质是变量
345 | 实参：实际上的参数 调用函数时候的参数 本质是数据
346 |
347 | ### 参数个数的问题
348 |
349 | 1.当实参大于形参：多余的实参忽略不计
350 | 2.当形参大于实参: 多余的形参赋值给 undefined
351 |
352 | 总结：实参与形参要相匹配
353 |
354 | ### return：返回值
355 |
356 | 一个函数可以有返回值 也可以没有
357 |
358 | 1.如果只是单纯的打印（看到值） 可以不加 return
359 | 2.当用函数实现某种特定的功能 要加 return
360 | 3.当遇见 return 直接退出函数体 下面不在执行
361 | 4.一个函数只有一个 return
362 | 5.不加 return 默认返回 undefined
363 |
364 | # js 第五天：
365 |
366 | ## arguments(伪数组)
367 |
368 | 伪数组：具有数据的一些属性 但是也不具有数组的一方法
369 |
370 | arguments:实参的对象 只要创建函数默认就有 arguments
371 |
372 | 一般 形参多少 实参多少
373 |
374 | arguments 用的不多！！！
375 |
376 | ## 函数以参数的形式传递----回调函数
377 |
378 | ## 作用域：
379 |
380 | 全局作用域：
381 |
382 | 在函数外部都是全部作用域
383 |
384 | 局部作用域：
385 |
386 | 在函数内部都是局部作用域
387 |
388 | 全局变量：
389 |
390 | 在任何地方都可以访问
391 |
392 | 局部变量：
393 |
394 | 只能在当前作用域下访问
395 |
396 | 总结
397 |
398 | 局部可以访问全局 全局不可以访问局部
399 |
400 | ### 作用域链的基本原理：
401 |
402 | 当调用函数---会把函数推送到执行栈（局部作用域）----全局作用域与函数的链式称为作用域链。
403 |
404 | 0 级作用域链----1 级作用域链
405 |
406 | ## 预解析：
407 |
408 | 当浏览器加载的时候 会有提前预解析的过程；
409 |
410 | 提升： var num = 10; var num;
411 | 提升: function fn(){} function fn(){}
412 |
413 | 注意:
414 |
415 | 1.在函数内部 变量名与形参重名以形参为主！！
416 | 2.函数内部不加 var 关键字是全部变量（不能与形参重名）
417 | 3.函数定义当前作用域 与函数调用没有关系（不会改变当前函数的作用域）
418 |
419 | ## 对象： 万物皆对象！！！！
420 |
421 | ### 1.键值对的集合。
422 |
423 | ### 2.功能集与数据集的集合
424 |
425 | 数据集的描述： 属性:属性值
426 | 功能集的描述： 函数名：函数
427 |
428 | ### 3.普通函数与对象的函数：
429 |
430 | 对象的函数前面加对象
431 |
432 | ### 4,对象的获取：
433 |
434 | 对象.属性名
435 | 对象["属性名"]
436 | obj.方法()
437 |
438 | ### 对象的几种创建方式：
439 |
440 | 1.创建空对象： 在动态添加值
441 |
442 | var obj = {};
443 | obj.name = "kf";
444 | obj.age = 18;
445 | obj.sex = "nan";
446 |
447 | 2.创建有内容的对象
448 |
449 | var obj = {
450 | name:"kf",
451 | age:"18",
452 | sex:"nan"
453 | }
454 |
455 | 3.创建空对象：
456 |
457 | var obj = new Object();
458 | obj.name = "kf";
459 | obj.age = 18
460 |
461 | 4.创建有内容的对象：
462 |
463 | var obj = new Object({
464 | name:"kf",
465 | age:18
466 | })
467 |
468 | ### 对象的封装：
469 |
470 | 工厂模式：
471 |
472 | function person(name, age, sex) {
473 | //var obj = {};
474 | var obj = new Object()
475 | obj.name = name;
476 | obj.age = age;
477 | obj.sex = sex;
478 | return obj;
479 | }
480 |
481 | 构造函数：
482 |
483 | function Person(name,age,sex){
484 | this.name = name;
485 | this.age = age;
486 | this.sex = sex
487 | }
488 | var per = new Person("tongtong",30,"男")
489 | var per = person("jujie",50,"男");
490 |
491 | ### new 的执行过程：
492 |
493 | 1.创建空对象（创建内存地址）
494 | 2.改变 this 指向当前对象
495 | 3.执行构造函数的代码
496 | 4.返回 this；
497 |
498 | 面向过程：
499 |
500 | 举行晚会： 1.找演员--->2.找吃的--->3.灯光摄影--->4.抽奖活动
501 |
502 | 面向对象：
503 |
504 | 举行晚会： 1.找演员--->2.找吃的--->3.灯光摄影--->4.抽奖活动
505 |
506 | # js 第六天：
507 |
508 | ## 数学对象：
509 |
510 | 1.Math.PI
511 | 2.Math.max(1,3,4)
512 | 3.Math.min()
513 | 4.random()
514 | 5.floor()
515 | 6.ceil
516 |
517 | ## 日期对象：
518 |
519 | ### 构造函数：
520 |
521 | 1.var date = new Date();
522 | 2.可以添加参数获取的是参数对应的日期
523 | 3.不添加参数 获取的是当前日期
524 |
525 | ### 方法：
526 |
527 | 1.获取年： getFullYear()
528 | 2.获取月： getMonth() 获取月要加1
529 | 3.获取日期：getDate()
530 | 4.获取星期：getDay 星期日是0
531 | 5.获取时： getHours()
532 | 6.获取分：getMinutes();
533 | 7.获取秒：getSeconds();
534 |
535 | ### 获取毫秒值：
536 |
537 | 获取的距离 1970 年 1 月 1 日
538 |
539 | 1.获取的方式
540 |
541 | 1.date.valueOf()
542 | 2.date.getTime()
543 | 3.+new Date()
544 | 4.h5 新增 Date.now()
545 |
546 | 2.typeof 判断
547 |
548 | 基本数据类型
549 |
550 | 3.判断对象（数组）
551 |
552 | 1.instanceof arr instanceof Array;
553 | 2.Array.isArray(arr);
554 |
555 | 4.数组的方法：
556 |
557 | push: 数组.push(元素) 向末尾添加元素
558 | pop: 数组.pop()删除数组末尾的元素
559 | unshift： 数组.unshift(元素) 数组的前面添加内容
560 | shift： 数组.shift()删除数组的第一个元素
561 | reverse():翻转数组
562 | arr.sort(function (a, b) { 排序
563 | return a - b 升序
564 | return b - a 降序
565 | })
566 | indexOf():查找元素 没有找到对应的元素 返回-1 找到返回对应的索引;
567 | join() 参数： 把数组以参数的形式分隔 如果不传默认是逗号分隔;
568 | concat:合并数组
569 | slice: 不修改原数组 截取 （开始索引,结束索引） 不包含结束索引 如果只传递一个参数 从当前参数截取到 最后。
570 | splice:修改原数组 截取 （开始索引,截取的长度,要替换的元素）
571 |
572 | ### 基本包装类型： 万物皆对象！！！！
573 |
574 | 基本数据类型 通过包装 转化成复杂数据类型；
575 |
576 | 1. 后台的调用 方便程序员使用一些属性和方法----基本包装类型
577 | 计算机默认：
578 | 创建对象
579 | var str = "hello";
580 | var str1 = new String("hello");
581 | 把变量给当前变量
582 | str = str1;
583 | 内存释放 销毁
584 | str1 = null
585 | 基本包装类型与复杂数据类型的区别：
586 | 1.都可以使用字符串的一些方法与属性
587 | 2.基本包装类型创建完之后立刻销毁。
588 |
589 | 1.字符串：
590 |
591 | 面试题： 如何优化代码的性能：
592 |
593 | 字符串的不可变； 用数组解决
594 |
595 | 字符串：重新开辟内存空间 原来的内容不会销毁
596 | 数组： 不会重新开辟内存空间 会把原来的覆盖。
597 | var str = "";
598 | var arr = [];
599 | for (var i = 0; i < 100; i++) {
600 | arr.push(i)
601 | }
602 | console.log(arr.join(""));
603 |
604 | indexOf:查找元素
605 |
606 | indexOf("元素",开始查找的索引) 找到返回索引 找不到返回-1
607 |
608 | str.charAt(索引)：查找对应的元素
609 |
610 | str[0] 查找对应的元素
611 |
612 | concat 拼接字符串
613 |
614 | toUpperCase:转化大写
615 |
616 | toLowerCase 转化小写
617 |
618 | substring（2,5） 字符串的截取
619 |
620 | split("-") 转化成数组
621 |
622 | ### 基本数据类型与复杂数据类型的存储方式：
623 |
624 | 基本数据类型存储在栈里面 本质是真是的数据；
625 | 复杂数据类型存储在对里面 对里面本质真是的数据 栈里面存的是地址；
626 |
--------------------------------------------------------------------------------
6 |
7 | > A modern alternative to CSS resets
8 |
9 | [![npm][npm-image]][npm-url] [![license][license-image]][license-url]
10 | [![changelog][changelog-image]][changelog-url]
11 | [![gitter][gitter-image]][gitter-url]
12 |
13 |
14 | **NPM**
15 |
16 | ```sh
17 | npm install --save normalize.css
18 | ```
19 |
20 | **CDN**
21 |
22 | See https://yarnpkg.com/en/package/normalize.css
23 |
24 | **Download**
25 |
26 | See https://necolas.github.io/normalize.css/latest/normalize.css
27 |
28 |
29 | ## What does it do?
30 |
31 | * Preserves useful defaults, unlike many CSS resets.
32 | * Normalizes styles for a wide range of elements.
33 | * Corrects bugs and common browser inconsistencies.
34 | * Improves usability with subtle modifications.
35 | * Explains what code does using detailed comments.
36 |
37 |
38 | ## Browser support
39 |
40 | * Chrome
41 | * Edge
42 | * Firefox ESR+
43 | * Internet Explorer 10+
44 | * Safari 8+
45 | * Opera
46 |
47 |
48 | ## Extended details and known issues
49 |
50 | Additional detail and explanation of the esoteric parts of normalize.css.
51 |
52 | #### `pre, code, kbd, samp`
53 |
54 | The `font-family: monospace, monospace` hack fixes the inheritance and scaling
55 | of font-size for preformatted text. The duplication of `monospace` is
56 | intentional. [Source](https://en.wikipedia.org/wiki/User:Davidgothberg/Test59).
57 |
58 | #### `sub, sup`
59 |
60 | Normally, using `sub` or `sup` affects the line-box height of text in all
61 | browsers. [Source](https://gist.github.com/413930).
62 |
63 | #### `select`
64 |
65 | By default, Chrome on OS X and Safari on OS X allow very limited styling of
66 | `select`, unless a border property is set. The default font weight on `optgroup`
67 | elements cannot safely be changed in Chrome on OSX and Safari on OS X.
68 |
69 | #### `[type="checkbox"]`
70 |
71 | It is recommended that you do not style checkbox and radio inputs as Firefox's
72 | implementation does not respect box-sizing, padding, or width.
73 |
74 | #### `[type="number"]`
75 |
76 | Certain font size values applied to number inputs cause the cursor style of the
77 | decrement button to change from `default` to `text`.
78 |
79 | #### `[type="search"]`
80 |
81 | The search input is not fully stylable by default. In Chrome and Safari on
82 | OSX/iOS you can't control `font`, `padding`, `border`, or `background`. In
83 | Chrome and Safari on Windows you can't control `border` properly. It will apply
84 | `border-width` but will only show a border color (which cannot be controlled)
85 | for the outer 1px of that border. Applying `-webkit-appearance: textfield`
86 | addresses these issues without removing the benefits of search inputs (e.g.
87 | showing past searches).
88 |
89 | ## Contributing
90 |
91 | Please read the [contribution guidelines](CONTRIBUTING.md) in order to make the
92 | contribution process easy and effective for everyone involved.
93 |
94 |
95 | [changelog-image]: https://img.shields.io/badge/changelog-md-blue.svg?style=flat-square
96 | [changelog-url]: CHANGELOG.md
97 | [license-image]: https://img.shields.io/npm/l/normalize.css.svg?style=flat-square
98 | [license-url]: LICENSE.md
99 | [npm-image]: https://img.shields.io/npm/v/normalize.css.svg?style=flat-square
100 | [npm-url]: https://www.npmjs.com/package/normalize.css
101 | [gitter-image]: https://img.shields.io/badge/chat-gitter-blue.svg?style=flat-square
102 | [gitter-url]: https://gitter.im/necolas/normalize.css
103 |
--------------------------------------------------------------------------------
/CSS三角生成工具/css/colorpicker.css:
--------------------------------------------------------------------------------
1 | .colorpicker {
2 | width: 356px;
3 | height: 176px;
4 | overflow: hidden;
5 | position: absolute;
6 | background: url(../images/colorpicker_background.png);
7 | font-family: Arial, Helvetica, sans-serif;
8 | display: none;
9 | }
10 | .colorpicker_color {
11 | width: 150px;
12 | height: 150px;
13 | left: 14px;
14 | top: 13px;
15 | position: absolute;
16 | background: #f00;
17 | overflow: hidden;
18 | cursor: crosshair;
19 | }
20 | .colorpicker_color div {
21 | position: absolute;
22 | top: 0;
23 | left: 0;
24 | width: 150px;
25 | height: 150px;
26 | background: url(../images/colorpicker_overlay.png);
27 | }
28 | .colorpicker_color div div {
29 | position: absolute;
30 | top: 0;
31 | left: 0;
32 | width: 11px;
33 | height: 11px;
34 | overflow: hidden;
35 | background: url(../images/colorpicker_select.gif);
36 | margin: -5px 0 0 -5px;
37 | }
38 | .colorpicker_hue {
39 | position: absolute;
40 | top: 13px;
41 | left: 171px;
42 | width: 35px;
43 | height: 150px;
44 | cursor: n-resize;
45 | }
46 | .colorpicker_hue div {
47 | position: absolute;
48 | width: 35px;
49 | height: 9px;
50 | overflow: hidden;
51 | background: url(../images/colorpicker_indic.gif) left top;
52 | margin: -4px 0 0 0;
53 | left: 0px;
54 | }
55 | .colorpicker_new_color {
56 | position: absolute;
57 | width: 60px;
58 | height: 30px;
59 | left: 213px;
60 | top: 13px;
61 | background: #f00;
62 | }
63 | .colorpicker_current_color {
64 | position: absolute;
65 | width: 60px;
66 | height: 30px;
67 | left: 283px;
68 | top: 13px;
69 | background: #f00;
70 | }
71 | .colorpicker input {
72 | background-color: transparent;
73 | border: 1px solid transparent;
74 | position: absolute;
75 | font-size: 10px;
76 | font-family: Arial, Helvetica, sans-serif;
77 | color: #898989;
78 | top: 4px;
79 | right: 11px;
80 | text-align: right;
81 | margin: 0;
82 | padding: 0;
83 | height: 11px;
84 | }
85 | .colorpicker_hex {
86 | position: absolute;
87 | width: 72px;
88 | height: 22px;
89 | background: url(../images/colorpicker_hex.png) top;
90 | left: 212px;
91 | top: 142px;
92 | }
93 | .colorpicker_hex input {
94 | right: 6px;
95 | }
96 | .colorpicker_field {
97 | height: 22px;
98 | width: 62px;
99 | background-position: top;
100 | position: absolute;
101 | }
102 | .colorpicker_field span {
103 | position: absolute;
104 | width: 12px;
105 | height: 22px;
106 | overflow: hidden;
107 | top: 0;
108 | right: 0;
109 | cursor: n-resize;
110 | }
111 | .colorpicker_rgb_r {
112 | background-image: url(../images/colorpicker_rgb_r.png);
113 | top: 52px;
114 | left: 212px;
115 | }
116 | .colorpicker_rgb_g {
117 | background-image: url(../images/colorpicker_rgb_g.png);
118 | top: 82px;
119 | left: 212px;
120 | }
121 | .colorpicker_rgb_b {
122 | background-image: url(../images/colorpicker_rgb_b.png);
123 | top: 112px;
124 | left: 212px;
125 | }
126 | .colorpicker_hsb_h {
127 | background-image: url(../images/colorpicker_hsb_h.png);
128 | top: 52px;
129 | left: 282px;
130 | }
131 | .colorpicker_hsb_s {
132 | background-image: url(../images/colorpicker_hsb_s.png);
133 | top: 82px;
134 | left: 282px;
135 | }
136 | .colorpicker_hsb_b {
137 | background-image: url(../images/colorpicker_hsb_b.png);
138 | top: 112px;
139 | left: 282px;
140 | }
141 | .colorpicker_submit {
142 | position: absolute;
143 | width: 22px;
144 | height: 22px;
145 | background: url(../images/colorpicker_submit.png) top;
146 | left: 322px;
147 | top: 142px;
148 | overflow: hidden;
149 | }
150 | .colorpicker_focus {
151 | background-position: center;
152 | }
153 | .colorpicker_hex.colorpicker_focus {
154 | background-position: bottom;
155 | }
156 | .colorpicker_submit.colorpicker_focus {
157 | background-position: bottom;
158 | }
159 | .colorpicker_slider {
160 | background-position: bottom;
161 | }
162 |
--------------------------------------------------------------------------------
/PHP笔记/README.md:
--------------------------------------------------------------------------------
1 | # PHP
2 |
3 | ## 服务器的概念：
4 |
5 | 是网络为客户端计算机提供各种服务的高性能计算机
6 | 服务器就是个软件
7 | 这个软件主要是可以为客户端提供服务的软件
8 | ---- 如果参与运算程序需要配合后台语言java php c；
9 | 只有当其他计算机中的浏览器发出请求时 服务器才能响应
10 | B/S架构：
11 |
12 | 浏览器与服务器交互；
13 |
14 | C/S架构：
15 |
16 | 下载到本地 在与服务器交互；
17 |
18 | ip：
19 |
20 | 每台计算机的标识 ---作为一个计算机的标识
21 |
22 | url:
23 |
24 | 地址栏中输入的网址url 统一资源定位符 http:www.baidu.com/index.html?id=1
25 |
26 | http:\\ 和 https:\\
27 |
28 | 超文本传输协议 服务器传输超文本到本地浏览器的传送协议；
29 |
30 | 注意：
31 | http是无链接 含义是每次链接只处理一个请求 收到客户的应答即断开；
32 | http请求时无状态请求 是指对事物没有记忆能力 CGI处理程序
33 |
34 | www：
35 |
36 | 万维网服务器 是指世界各地的计算机网络
37 | baidu.com： 是百度的域名
38 | index.html：文件路径
39 |
40 | 域名与ip地址对应关系：
41 |
42 | 多个域名可以对应一个ip地址
43 |
44 | ## php的特点：
45 |
46 | 1.混合了c java php自创的语法
47 | 2.php可以将程序嵌入到网页中去
48 | 3.支持所有流行的数据库以及操作系统
49 | 4.弱类型
50 |
51 | ## php的输出语句：
52 |
53 | echo 只能输出字符串 等单一数据 不能输出数据类型 数组等
54 | print(): 只能输出字符串 等单一数据 不能输出数据类型 数组等有返回值
55 | print_r(): 可以输出字符串 数组。。可以输出复杂数据类型
56 | var_dump: 字符串 数据类型 长度
57 | die() 先输出内容 退出程序
58 |
59 | ## php中的函数：
60 |
61 | isset():判断变量是否定义；
62 | 如果定义返回true 否则返回false
63 | 在php中true---->1 false---null
64 | empty():
65 | 判断值是否为空； 0 "0" false Array() null
66 | unset(): 删除变量
67 |
68 | ## php中的数组：
69 |
70 | 索引数组：通过索引操作数组
71 |
72 | $arr = Array(1,2,3,true,"abc");
73 | $arr = [1,2,3,4,5]
74 |
75 | 访问与js一样
76 |
77 | 隐形数组：$arr[] = 1;给变量增加一个中括号 系统自动生成数字下标 与值
78 |
79 | 对于索引数组： 自动递增数组的索引
80 | 对于关联数组： 从0开始索引
81 |
82 | 二维数组：
83 |
84 | $arr = Array(
85 | "first"=>Array(
86 | "name"=>"jack",
87 | "age"=>20
88 | ),
89 | "two"=>Array(
90 | "name"=>"jack",
91 | "age"=>20
92 | )
93 | );
94 |
95 | 关联数组：
96 |
97 | 以键值对的形式描述数据
98 | $arr = array(
99 | "name"=>"jack",
100 | "age"=>20,
101 | "gender"=>true
102 | )
103 |
104 | ### 遍历数组：
105 |
106 | 1.for循环
107 |
108 | for($i = 0;$i
13 |
14 | 列表页、详情页、登录页、 注册页等等。。。。
15 |
16 |
17 |
18 | # 课程安排
19 |
20 | 
21 |
22 | 就业班详情 参看： http://www.itcast.cn/course/web.shtml
23 |
24 | # HTML 第一天目标
25 |
26 | 能够写出基本的html页面（里面包含图片、链接、文字等网页元素标签）
27 |
28 | 
29 |
30 | # 认识WEB
31 |
32 | ## 1. 认识网页
33 |
34 | ```
35 | 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
36 | ```
37 |
38 | 
39 |
40 | **思考：**
41 |
42 | 网页是如何形成的呢?
43 |
44 |
45 | 
46 |
47 |
48 |
49 | ### 总结
50 |
51 | 网页有图片、链接、文字等元素组成，我们后面的任务就是要把这部分网页元素用代码写出来。。。
52 |
53 | ## 2. 浏览器（显示代码）
54 |
55 | ```
56 | 浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
57 | ```
58 |
59 | 
60 |
61 | 可能你最熟悉的是 IE浏览器，但是。。。
62 |
63 | 
64 |
65 | ### 2.1 查看浏览器占有的市场份额
66 |
67 | 查看网站： http://tongji.baidu.com/data/browser
68 |
69 | 
70 |
71 | 2008年，大名鼎鼎的互联网巨头Google公司发布了它的首款浏览器Chrome浏览器。
72 |
73 | 跟王思聪一样，没办法，生下来人家就是富二代官二代啊，后台太强，而且确实先天能力得天独厚。
74 |
75 | **pink老师 一句话说出他们:**
76 |
77 | > 出自谷歌，唯我不败；一统江湖，千秋万代。
78 |
79 | ### 2.2 常见浏览器内核（了解）
80 |
81 | 首先解释一下浏览器内核是什么东西。英文叫做：Rendering Engine，中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核.
82 |
83 | ```
84 | 负责读取网页内容，整理讯息，计算网页的显示方式并显示页面.
85 | ```
86 | 因为浏览器太多啦， 但是现在主要流行的就是下面几个：
87 |
88 | | 浏览器 | 内核 | 备注 |
89 | | :------ | :------------: | :----------------------------------------------------------- |
90 | | IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
91 | | firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。 |
92 | | Safari | webkit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭晕再厕所里面了。 |
93 | | chrome | Chromium/Blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
94 | | Opera | blink | 现在跟随chrome用blink内核。 |
95 |
96 | **拓展阅读：**
97 | ```
98 | 移动端的浏览器内核主要说的是系统内置浏览器的内核。
99 |
100 | Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于webkit二次开发。
101 |
102 | iOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident的
103 | ```
104 |
105 | ## 3. Web标准（重点）
106 |
107 | 目标
108 |
109 | * 记忆
110 | * 能说出网页 中 web 标准三层组成
111 | * 理解
112 | * 能结合人来表述web标准三层
113 |
114 | Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
115 |
116 | W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
117 |
118 | **w3c就类似于现实世界中的联合国。**
119 |
120 | ### 3.1 为什么要遵循WEB标准呢？
121 |
122 | 通过以上浏览器不同内核不同，我们知道他们显示页面或者排版就有些许差异。
123 |
124 | 
125 |
126 | ### 3.2 Web 标准的好处
127 |
128 | 遵循web标准可以让不同我们写的页面更标准更统一外，还有许多优点
129 |
130 | *1*、让Web的发展前景更广阔
131 | *2*、内容能被更广泛的设备访问
132 | *3*、更容易被搜寻引擎搜索
133 | *4*、降低网站流量费用
134 | *5*、使网站更易于维护
135 | *6*、提高页面浏览速度
136 |
137 | ### 3.3 Web 标准构成
138 |
139 | **构成：** 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
140 |
141 | | 标准 | 说明 | 备注 |
142 | | :--- | :----------------------------------------------------------- | :----------------------------- |
143 | | 结构 | 结构用于对**网页元素**进行整理和分类，咱们主要学的是HTML。 | 
|
144 | | 表现 | 表现用于设置网页元素的版式、颜色、大小等**外观样式**，主要指的是CSS | 
|
145 | | 行为 | 行为是指网页模型的定义及**交互**的编写，咱们主要学的是 Javascript | 
|
146 |
147 | 理想状态我们的源码： .HTML .css .js
148 |
149 |
150 |
151 | **结合人来记忆web标准：**
152 |
153 | * 结构标准： 
是你天然的身体
154 |
155 |
156 |
157 |
158 |
159 | * 表现标准： 
决定你是否打扮的美丽外观(衣服？化妆？)
160 |
161 |
162 |
163 |
164 |
165 | * 行为标准： 
决定你是否有吸引人的行为(动作)
166 |
167 | ****
168 |
169 | ### web标准小结
170 |
171 | * web标准有三层结构，分别是结构（html）、表现（css）和行为（javascript）
172 | * 结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作
173 | * 理想状态下，他们三层都是独立的， 放到不同的文件里面
174 |
175 | ## 4. 拓展@
176 |
177 | * **介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？**
178 |
179 | 浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。
180 | IE：Trident
181 | firefox：Gecko
182 | chrom、safari：webkit
183 | Opera：Presto
184 | Microsoft Edge：EdgeHTML
185 |
186 | 深度阅读：[五大主流浏览器内核的源起以及国内各大浏览器内核总结](http://blog.csdn.net/summer_15/article/details/71249203)
--------------------------------------------------------------------------------
/jQuery笔记/README.md:
--------------------------------------------------------------------------------
1 | # jq 特点：
2 |
3 | 1.隐式迭代
4 | 2.链式编程
5 | 当操作是设置型元素：可以一直链式编程
6 | 当操作是获取型元素：不可以一直链式编程（断链）
7 |
8 | # 1.jq 的入口函数
9 |
10 | 1.$(function(){
11 |
12 | });
13 |
14 | 2.$(document).ready(function(){
15 |
16 | });
17 |
18 | 3.jQuery(function(){
19 |
20 | });
21 |
22 | # 2.dom 与就 jq 互转
23 |
24 | dom 对象无法使用 jq 对象里的方法；
25 | jq 对象无法使用 dom 对象的属性和方法；
26 |
27 | 1.dom 对象转 jq 对象：
28 |
29 | $("div")
30 | $(div)
31 |
32 | 2.jq 转 dom 对象：
33 |
34 | $("div")[0]
35 |
36 | 3.jq 转 dom 对象
37 |
38 | $("div").get(0)
39 |
40 | # 3.jq 选择器：
41 |
42 | id 选择器： $("#id") 获取指定的id元素
43 | 全选选择器： $("\*") 获取所有
44 | 类选择器： $(".class") 获取指定的class选择器
45 | 标签选择器： $("div) 获取同一类的所有元素
46 | 并集选择器： $("div,p,li")
47 | 后代选择器： $("div li")
48 | 交集选择器： $("div.current")
49 | 子代选择器： $("div>li")
50 |
51 | 扩展几个选择器:
52 | $('div.goback') 选取div中的类名为goback的元素
53 | $("[href]") 选取带有 href 属性的元素
54 | $(":button") 可以选取所有 type="button" 的 元素 和