html概述和基本结构

html概述

HTML意思是超文本标记语言

html基本结构

一个html的基本结构如下：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>网页标题</title>

    </head>

    <body>

          网页显示内容

    </body>

</html>
第一行是文档声明，第二行“<html>”标签和最后一行“</html>”定义html文档的整体，“<html>”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是'lang="zh-CN"',不定义也没什么影响，它一般作为分析统计用。 “<head>”标签和“<body>”标签是它的第一层子元素，“<head>”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“<body>”内编写网页上显示的内容。

HTML文档类型

目前常用的两种文档类型是xhtml 1.0和html5

两种文档的区别

1、文档声明和编码声明

2、html5新增了标签元素以及元素属性

html文档规范

xhtml制定了文档的编写规范，html5可部分遵守，也可全部遵守，看开发要求。

1、所有的标签必须小写

2、所有的属性必须用双引号括起来

3、所有标签必须闭合

4、img必须要加alt属性(对图片的描述)

html注释：

html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：

<!-- 这是一段注释  -->

html标签特点：

html的标签大部分是成对出现的,少量是单个出现的，特定标签之间可以相互嵌套，嵌套就是指一个标签里面可以包含一个或多个其他的标签，包含的标签和父标签可以是同类型的，也可以是不同类型的：

<!-- 成对出现的标签  -->

<body>......</body>

<p>......</p>

<div>......</div>

<b>......</b>

<!-- 单个出现的标签  -->

<br />

<img src="..." />

<input type="..." />

<!-- 标签之间的嵌套  -->

<p>

    <span>...</span>

    <a href="...">...</a>

</p>

<div>

      <h3>...</h3>

      <div>

              <span>...</span>

              <p>...</p>

      </div>

</div>

html标题

通过 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。

<h1>这是一级标题</h1>

<h2>这是二级标题</h2>

<h3>这是三级标题</h3>

html段落、换行与字符实体

<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开

html换行

代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行

html字符实体

代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体

html块、含样式的标签

html块

1、div标签 块元素，表示一块内容，没有具体的语义。
2、span标签 行内元素，表示一行中的一小段内容，没有具体的语义。

含样式和语义的标签

1、em标签 行内元素，表示语气中的强调词
2、i标签 行内元素，原本没有语义，w3c强加了语义，表示专业词汇
3、b标签 行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名
4、strong标签 行内元素，表示非常重要的内容

html图像、绝对路径和相对路径

html图像

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

<img src="data:images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

  • 绝对地址：相对于磁盘的位置去定位文件的地址
  • 相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

  • “ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。

  • “ ../ ” 表示当前文件所在目录下的上一级目录，比如：“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接

html链接

<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

<a href="#mao1">标题一</a>

......

......

<h3 id="mao1">跳转到的标题</h3>

html列表

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<ol>

    <li>列表文字一</li>

    <li>列表文字二</li>

    <li>列表文字三</li>

</ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：

<ul>

    <li>列表文字一</li>

    <li>列表文字二</li>

    <li>列表文字三</li>

</ul>

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：

<h3>前端三大块</h3>

<dl>

    <dt>html</dt>

    <dd>负责页面的结构</dd>

    <dt>css</dt>

    <dd>负责页面的表现</dd>

    <dt>javascript</dt>

    <dd>负责页面的行为</dd>

</dl>

html表格

table常用标签

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性：

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局：

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

css基本语法及页面引用

css基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div{ width:100px; height:100px; color:red }

css页面引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">

    div{ width:100px; height:100px; color:red }

    ......

</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

css文本设置

常用的应用文本的css样式：

  • color 设置文字的颜色，如： color:red;

  • font-size 设置文字的大小，如：font-size:12px;

  • font-family 设置文字的字体，如：font-family:'微软雅黑';

  • font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜

  • font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗 字号/行高 字体；如： font:normal 12px/36px '微软雅黑';

  • line-height 设置文字的行高，如：line-height:24px;

  • text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉

  • text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

  • text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

css颜色表示法

css颜色值主要有三种表示方法：

1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}

div{color:red}   

<div>....</div>   <!-- 对应以上两条样式 -->

<div class="box">....</div>   <!-- 对应以上两条样式 -->
2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red} 

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.red{color:red}

.big{font-size:20px}

.mt10{margin-top:10px} 

<div class="red">....</div>

<h1 class="red big mt10">....</h1>

<p class="red mt10">....</p>
4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：

.box span{color:red}

.box .red{color:pink}

.red{color:red}

<div class="box">

    <span>....</span>

    <a href="#" class="red">....</a>

</div>

<h3 class="red">....</h3>
5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

.box1,.box2,.box3{width:100px;height:100px}

.box1{background:red}

.box2{background:pink}

.box2{background:gold}

<div class="box1">....</div>

<div class="box2">....</div>

<div class="box3">....</div>
6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

.box1:hover{color:red}

.box2:before{content:'行首文字';}

.box3:after{content:'行尾文字';}

<div class="box1">....</div>

<div class="box2">....</div>

<div class="box3">....</div>

CSS盒子模型

盒子模型解释 
元素在页面中显示成一个方块，类似一个盒子，CSS盒子模型就是使用现实中盒子来做比喻，帮助我们设置元素对应的样式。盒子模型示意图如下：

把元素叫做盒子，设置对应的样式分别为：盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。

设置边框 
设置一边的边框，比如顶部边框，可以按如下设置：

border-top-color:red;    /* 设置顶部边框颜色为红色 */

border-top-width:10px;   /* 设置顶部边框粗细为10px */

border-top-style:solid;  /* 设置顶部边框的线性为实线，常用的有：solid(实线)

  dashed(虚线)  dotted(点线); */

上面三句可以简写成一句：

border-top:10px solid red;

设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。

四个边如果设置一样，可以将四个边的设置合并成一句：

border:10px solid red;

设置内间距padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */

padding-left:30px;     /* 设置左边内间距30px */

padding-right:40px;    /* 设置右边内间距40px */

padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左

四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */

padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/

padding：20px; /* 设置四边内边距为20px */

设置外间距margin

外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

margin相关技巧 
1、设置元素水平居中： margin:x auto;
2、margin负值让元素位移及边框合并

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。解决方法如下：

1、使用这种特性
2、设置一边的外边距，一般设置margin-top
3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

.clearfix:before{

    content: '';

    display:table;

}
 

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项： 
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

块元素 
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

  • 支持全部的样式
  • 如果没有设置宽度，默认的宽度为父级宽度100%
  • 盒子占据一行、即使设置了宽度

内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

  • 支持部分样式（不支持宽、高、margin上下、padding上下）
  • 宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子之间会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置垂直对齐方式

解决内联元素间隙的方法 
1、去掉内联元素之间的换行
2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

  • 支持全部样式
  • 如果没有设置宽高，宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式，用line-height属性值设置子元素垂直对齐方式

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性
display属性是用来设置元素的类型及隐藏的，常用的属性有：
1、none 元素隐藏且不占位置
2、block 元素以块元素显示
3、inline 元素以内联元素显示
4、inline-block 元素以内联块元素显示

浮动

文档流 
文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

4、浮动让行内元素或块元素自动转化为行内块元素

5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

7、浮动元素之间没有垂直margin的合并

清除浮动

  • 父级上增加属性overflow：hidden
  • 在最后一个子元素的后面加一个空的div，给它样式属性 clear:both（不推荐）
  • 使用成熟的清浮动样式类，clearfix

  • 定位

    关于定位 
    我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：

    • relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
    • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
    • fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
    • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
    • inherit 从父元素继承 position 属性的值

    定位元素特性 
    绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素

    定位元素层级 
    定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级

    典型定位布局 
    1、固定在顶部的菜单
    2、水平垂直居中的弹框
    3、固定的侧边的工具栏
    4、固定在底部的按钮

    background属性

    属性解释 
    background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

    • background-color 设置背景颜色
    • background-image 设置背景图片地址
    • background-repeat 设置背景图片如何重复平铺
    • background-position 设置背景图片的位置
    • background-attachment 设置背景图片是固定还是随着页面滚动条滚动

常用图片格式

总结 
在网页制作中，如何选择合适的图片格式呢？
1、网页制作中，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；
2、制作网页图标时候，如果图标含多种颜色，可以使用gif或png图片；如果图标是单色，而且要求有很好的显示效果，可以使用svg；如果是动画图标，可以使用gif。

CSS权重

CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0

CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

16、E:target 对应锚点的样式

CSS3圆角、阴影、rgba

CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度

CSS3 transition动画

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • cubic-bezier(n,n,n,n)

4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性

CSS3 transform变换

1、translate(x,y) 设置盒子位移
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见

CSS3 animation动画

1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线

  • linear 匀速
  • ease 开始和结束慢速
  • ease-in 开始是慢速
  • ease-out 结束时慢速
  • ease-in-out 开始和结束时慢速
  • steps 动画步数

5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction

  • normal 默认动画结束不返回
  • Alternate 动画结束后返回

8、animation-play-state 动画状态

  • paused 停止
  • running 运动

9、animation-fill-mode 动画前后的状态

  • none 不改变默认行为
  • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
  • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
  • both 向前和向后填充模式都被应用

10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性

CSS浏览器前缀

浏览器样式前缀

为了让CSS3样式兼容，需要将某些样式加上浏览器前缀：

-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari

自动添加浏览器前缀

目前的状况是，有些CSS3属性需要加前缀，有些不需要加，有些只需要加一部分，这些加前缀的工作可以交给插件来完成，比如安装： autoprefixer

Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。

HTML5新结构标签

h5新增的主要语义化标签如下：

1、header 页面头部、页眉
2、nav 页面导航
3、article 一篇文章
4、section 文章中的章节
5、aside 侧边栏
6、footer 页面底部、页脚

页面使用标签布局示意图：

HTML5 音频和视频

html5增加了audio和video标签，提供了在页面上插入音频和视频的标准方法。

audio标签 
支持格式：ogg、wav、mp3

对应属性：
1、autoplay 自动播放
2、controls 显示播放器
3、loop 循环播放
4、preload 预加载
5、muted 静音

source标签的作用是提供多个媒体文件地址，如果一个地址的文件不兼容，就使用下一个地址。

video标签 
支持格式：ogg、mp4、webM

属性：
1、width
2、height
3、Poster

可选第三方播放器：
1、cyberplayer
2、tencentPlayer
3、youkuplayer

Viewport 视口

视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。

背景图强制改变大小，可以使用background新属性

background新属性 
background-size:

    • length：用长度值指定背景图像大小。不允许负值。
    • percentage：用百分比指定背景图像大小。不允许负值。
    • auto：背景图像的真实大小。
    • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

背景图强制改变大小，可以使用background新属性

background新属性 
background-size:

    • length：用长度值指定背景图像大小。不允许负值。
    • percentage：用百分比指定背景图像大小。不允许负值。
    • auto：背景图像的真实大小。
    • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

背景图强制改变大小，可以使用background新属性

background新属性 
background-size:

    • length：用长度值指定背景图像大小。不允许负值。
    • percentage：用百分比指定背景图像大小。不允许负值。
    • auto：背景图像的真实大小。
    • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

移动端页面布局

PC及移动端页面适配方法

设备屏幕有多种不同的分辨率，页面适配方案有如下几种：

1、全适配：流体布局+响应式布局
2、移动端适配：

  • 流体布局+少量响应式
  • 基于rem的布局
  • 弹性盒模型

流体布局

流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。

calc() 
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);

box-sizing 
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内

响应式布局

响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

相应布局的伪代码如下：

@media (max-width:960px){

    .left_con{width:58%;}

    .right_con{width:38%;}

}

@media (max-width:768px){

    .left_con{width:100%;}

    .right_con{width:100%;}

}

基于rem的布局

首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

cssrem安装

cssrem插件可以动态地将px尺寸换算成rem尺寸

下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages... 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。

配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

弹性盒模型布局

1、容器属性
display : flex
声明使用弹性盒布局

flex-direction : row | row-reverse | column | column-reverse
确定子元素排列的方向

flex-wrap : nowrap | wrap | wrap-reverse
元素超过父容器尺寸时是否换行

flex-flow : flex-direction | flex-wrap
同时设置flex-direction 和 flex-wrap

justify-content : flex-start | flex-end | center | space-between | space-around
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的分布方式

align-items : flex-start | flex-end | center | baseline | stretch
子元素的尺寸确定之后，用此属性来设置flex-direction定义方向上的垂直方向的分布方式

align-content : flex-start | flex-end | center | space-between | space-around | stretch
设置多行子元素在行方向上的对齐方式

2、条目属性
flex : none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
同时设置flex-grow 和 flex-shrink 以及 flex-basis

flex-grow ： number
表示的是当父元素有多余的空间时，这些空间在不同子元素之间的分配比例

flex-shrink： number
当父元素的空间不足时，各个子元素的尺寸缩小的比例

flex-basis ：length | percentage | auto | content
用来确定弹性条目的初始主轴尺寸。

align-self ：auto | flex-start | flex-end | center | baseline | stretch
覆写父元素指定的对齐方式

order : integer
改变条目在容器中的出现顺序

JavaScript

JavaScript介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

前端三大块 
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript嵌入页面的方式

1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">

    var a = '你好！';

    alert(a);

</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

javascript语句与注释

1、一条javascript语句应该以“;”结尾

<script type="text/javascript">

var a = 123;

var b = 'str';

function fn(){

    alert(a);

};

fn();

</script>

2、javascript注释

<script type="text/javascript">    

// 单行注释

var a = 123;

/*

    多行注释

    1、...

    2、...

*/

var b = 'str';

</script>

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'

 var a = 123;

 var b = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var c = 45,d='qwe',f='68';

变量类型

5种基本数据类型：
number、string、boolean、undefined、null

1种复合类型：
object

变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

<script type="text/javascript">

    var oDiv = document.getElementById('div1');

</script>

....

<div id="div1">这是一个div元素</div>

上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边

....

<div id="div1">这是一个div元素</div>

....

<script type="text/javascript">

    var oDiv = document.getElementById('div1');

</script>

</body>

第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。

<script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementById('div1');

    }

</script>

....

<div id="div1">这是一个div元素</div>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法 
1、“.” 操作
2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过“.”操作属性：

通过“.”操作属性：

<script type="text/javascript">

    window.onload = function(){

        var oInput = document.getElementById('input1');

        var oA = document.getElementById('link1');

        // 读取属性值

        var val = oInput.value;

        var typ = oInput.type;

        var nam = oInput.name;

        var links = oA.href;

        // 写(设置)属性

        oA.style.color = 'red';

        oA.style.fontSize = val;

    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">

<a href="http://www.itcast.cn" id="link1">传智播客</a>

通过“[ ]”操作属性：

<script type="text/javascript">

    window.onload = function(){

        var oInput1 = document.getElementById('input1');

        var oInput2 = document.getElementById('input2');

        var oA = document.getElementById('link1');

        // 读取属性

        var val1 = oInput1.value;

        var val2 = oInput2.value;

        // 写(设置)属性

        // oA.style.val1 = val2; 没反应

        oA.style[val1] = val2;

    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">

<input type="text" name="setnum" id="input2" value="30px">

<a href="http://www.itcast.cn" id="link1">传智播客</a>

innerHTML 
innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementById('div1');

        //读取

        var txt = oDiv.innerHTML;

        alert(txt);

        //写入

        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';

    }

</script>

......

<div id="div1">这是一个div元素</div>

函数

函数就是重复执行的代码片。

函数定义与执行

<script type="text/javascript">

    // 函数定义

    function aa(){

        alert('hello!');

    }

    // 函数执行

    aa();

</script>

变量与函数预解析 
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">

    aa();       // 弹出 hello！

    alert(bb);  // 弹出 undefined

    function aa(){

        alert('hello!');

    }

    var bb = 123;

</script>

提取行间事件 
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!--行间事件调用函数   -->

<script type="text/javascript">

    function myalert(){

        alert('ok!');

    }

</script>

......

<input type="button" name="" value="弹出" onclick="myalert()">

<!-- 提取行间事件 -->

<script type="text/javascript">

window.onload = function(){

    var oBtn = document.getElementById('btn1');

    oBtn.onclick = myalert;

    function myalert(){

        alert('ok!');

    }

}

</script>

......

<input type="button" name="" value="弹出" id="btn1">

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<script type="text/javascript">

window.onload = function(){

    var oBtn = document.getElementById('btn1');

    /*

    oBtn.onclick = myalert;

    function myalert(){

        alert('ok!');

    }

    */

    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){

        alert('ok!');

    }

}

</script>

函数传参

<script type="text/javascript">

    function myalert(a){

        alert(a);

    }

    myalert(12345);

</script>

函数'return'关键字 
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

<script type="text/javascript">

function add(a,b){

    var c = a + b;

    return c;

    alert('here!');

}

var d = add(3,4);

alert(d);  //弹出7

</script>

条件语句

通过条件来控制程序的走向，就需要用到条件语句。

运算符 
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

if else

switch

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

定义数组的方法

//对象的实例创建

var aList = new Array(1,2,3);

//直接量创建

var aList2 = [1,2,3,'asd'];

操作数组中数据的方法 
1、获取数组的长度：aList.length;

var aList = [1,2,3,4];

alert(aList.length); // 弹出4

2、用下标操作数组的某个数据：aList[0];

var aList = [1,2,3,4];

alert(aList[0]); // 弹出1

3、join() 将数组成员通过一个分隔符合并成字符串

var aList = [1,2,3,4];

alert(aList.join('-')); // 弹出 1-2-3-4

4、push() 和 pop() 从数组最后增加成员或删除成员

var aList = [1,2,3,4];

aList.push(5);

alert(aList); //弹出1,2,3,4,5

aList.pop();

alert(aList); // 弹出1,2,3,4

5、unshift()和 shift() 从数组前面增加成员或删除成员

var aList = [1,2,3,4];

aList.unshift(5);

alert(aList); //弹出5,1,2,3,4

aList.shift();

alert(aList); // 弹出1,2,3,4

6、reverse() 将数组反转

var aList = [1,2,3,4];

aList.reverse();

alert(aList);  // 弹出4,3,2,1

7、indexOf() 返回数组中元素第一次出现的索引值

var aList = [1,2,3,4,1,3,4];

alert(aList.indexOf(1));

8、splice() 在数组中增加或删除成员

var aList = [1,2,3,4];

aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素

alert(aList); //弹出 1,2,7,8,9,4

多维数组 
多维数组指的是数组的成员也是数组的数组。

var aList = [[1,2,3],['a','b','c']];

alert(aList[0][1]); //弹出2;

获取元素的第二种方法 
document.getElementsByTagName(''),获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的dom元素。

Javascript组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法

字符串处理方法

1、字符串合并操作：“ + ”
2、parseInt() 将数字字符串转化为整数
3、parseFloat() 将数字字符串转化为小数
4、split() 把一个字符串分隔成字符串组成的数组
5、charAt() 获取字符串中的某一个字符
6、indexOf() 查找字符串是否含有某字符
7、substring() 截取字符串 用法： substring(start,end)（不包括end）
8、toUpperCase() 字符串转大写
9、toLowerCase() 字符串转小写

调试程序的方法

1、alert

2、console.log

3、document.title

定时器

定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

/*

    定时器：

    setTimeout  只执行一次的定时器

    clearTimeout 关闭只执行一次的定时器

    setInterval  反复执行的定时器

    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);

var time2 = setInterval(myalert,2000);

/*

clearTimeout(time1);

clearInterval(time2);

*/

function myalert(){

    alert('ok!');

}

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数：

function changecolor(){

    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';

}

changecolor();

封闭函数：

(function(){

    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';

})();

还可以在函数定义前加上“~”和“!”等符号来定义匿名函数

!function(){

    var oDiv = document.getElementById('div1');

    oDiv.style.color = 'red';

闭包

什么是闭包 
函数嵌套函数，内部函数可以引用外部函数的参数和变量，参数和变量不会被垃圾回收机制收回

function aaa(a){

      var b = 5;

      function bbb(){

           a++;

           b++;

         alert(a);

         alert(b);

      }

      return bbb;

  }

 var ccc = aaa(2);

 ccc();

 ccc();

改写成封闭函数的形式：

var ccc = (function(a){

  var b = 5;

  function bbb(){

       a++;

       b++;

     alert(a);

     alert(b);

  }

  return bbb;

})(2);

ccc();

ccc();

用处 
1、将一个变量长期驻扎在内存当中，可用于循环中存索引值

<script type="text/javascript">

    window.onload = function(){

        var aLi = document.getElementsByTagName('li');

        for(var i=0;i<aLi.length;i++)

        {

            (function(i){

                aLi[i].onclick = function(){

                    alert(i);

                }

            })(i);

        }

    }

</script>

......

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

    <li>555</li>

</ul>

2、私有变量计数器，外部无法访问，避免全局变量的污染

<script type="text/javascript">

var count = (function(){

    var a = 0;

    function add(){

        a++;

        return a;

    }

    return add;

})()

count();

count();

var nowcount = count();

alert(nowcount);

</script>

内置对象

1、document

document.referrer  //获取上一个跳转页面的地址(需要服务器环境)

2、location

window.location.href  //获取或者重定url地址

window.location.search //获取地址参数部分

window.location.hash //获取页面锚点或者叫哈希值

3、Math

Math.random 获取0-1的随机数

Math.floor 向下取整

Math.ceil 向上取整

面向对象

面向过程与面向对象编程

1、面向过程：所有的工作都是现写现用。

2、面向对象：是一种编程思想，许多功能事先已经编写好了，在使用时，只需要关注功能的运用，而不需要这个功能的具体实现过程。

javascript对象 
将相关的变量和函数组合成一个整体，这个整体叫做对象，对象中的变量叫做属性，变量中的函数叫做方法。javascript中的对象类似字典。

创建对象的方法 
1、单体

<script type="text/javascript">

var Tom = {

    name : 'tom',

    age : 18,

    showname : function(){

        alert('我的名字叫'+this.name);

    },

    showage : function(){

        alert('我今年'+this.age+'岁');

    }

}

</script>

2、工厂模式

<script type="text/javascript">

function Person(name,age,job){

    var o = new Object();

    o.name = name;

    o.age = age;

    o.job = job;

    o.showname = function(){

        alert('我的名字叫'+this.name);

    };

    o.showage = function(){

        alert('我今年'+this.age+'岁');

    };

    o.showjob = function(){

        alert('我的工作是'+this.job);

    };

    return o;

}

var tom = Person('tom',18,'程序员');

tom.showname();

</script>

2、构造函数

<script type="text/javascript">

    function Person(name,age,job){

        this.name = name;

        this.age = age;

        this.job = job;

        this.showname = function(){

            alert('我的名字叫'+this.name);

        };

        this.showage = function(){

            alert('我今年'+this.age+'岁');

        };

        this.showjob = function(){

            alert('我的工作是'+this.job);

        };

    }

    var tom = new Person('tom',18,'程序员');

    var jack = new Person('jack',19,'销售');

    alert(tom.showjob==jack.showjob);

</script>

3、原型模式

<script type="text/javascript">

    function Person(name,age,job){

        this.name = name;

        this.age = age;

        this.job = job;

    }

    Person.prototype.showname = function(){

        alert('我的名字叫'+this.name);

    };

    Person.prototype.showage = function(){

        alert('我今年'+this.age+'岁');

    };

    Person.prototype.showjob = function(){

        alert('我的工作是'+this.job);

    };

    var tom = new Person('tom',18,'程序员');

    var jack = new Person('jack',19,'销售');

    alert(tom.showjob==jack.showjob);

</script>

4、继承

<script type="text/javascript">

        function fclass(name,age){

            this.name = name;

            this.age = age;

        }

        fclass.prototype.showname = function(){

            alert(this.name);

        }

        fclass.prototype.showage = function(){

            alert(this.age);

        }

        function sclass(name,age,job)

        {

            fclass.call(this,name,age);

            this.job = job;

        }

        sclass.prototype = new fclass();

        sclass.prototype.showjob = function(){

            alert(this.job);

        }

        var tom = new sclass('tom',19,'全栈工程师');

        tom.showname();

        tom.showage();

        tom.showjob();

    </script>

新选择器

1、document.querySlector()
2、document.querySlectorAll()

jquery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用。

<script type="text/javascript" src="js/jquery-1.12.2.js"></script>

jQuery

jquery介绍

jquery加载

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

<script type="text/javascript">

$(document).ready(function(){

     ......

});

</script>

可以简写为：

<script type="text/javascript">

$(function(){

     ......

});

</script>

jquery选择器

jquery用法思想一 
选择某个网页元素，然后对它进行某种操作

jquery选择器 
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$(document) //选择整个文档对象

$('li') //选择所有的li元素

$('#myId') //选择id为myId的网页元素

$('.myClass') // 选择class为myClass的元素

$('input[name=first]') // 选择name属性等于first的input元素

$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素

对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li

$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行

$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li

$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

对选择集进行函数过滤

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); //选择class不等于myClass的div元素

$('div').filter('.myClass'); //选择class等于myClass的div元素

$('div').first(); //选择第1个div元素

$('div').eq(5); //选择第6个div元素

选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').parent(); //选择div的父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素

$('div').find('.myClass'); //选择div内的class等于myClass的元素

jquery样式操作

jquery用法思想二 
同一个函数完成取值和赋值

操作行间样式

// 获取div的样式

$("div").css("width");

$("div").css("color");

//设置div的样式

$("div").css("width","30px");

$("div").css("height","30px");

$("div").css({fontSize:"30px",color:"red"});

特别注意 
选择器获取的多个元素，获取信息获取的是第一个，比如：$("div").css("width")，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2

$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式

$("#div1").removeClass("divClass divClass2") //移除多个样式

$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

 

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

jquery特殊效果

fadeIn() 淡入

    $btn.click(function(){

        $('#div1').fadeIn(1000,'swing',function(){

            alert('done!');

        });

    });

fadeOut() 淡出

fadeToggle() 切换淡入淡出

hide() 隐藏元素

show() 显示元素

toggle() 依次展示或隐藏某个元素

slideDown() 向下展开

slideUp() 向上卷起

slideToggle() 依次展开或卷起某个元素

jquery链式调用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写：

$('#div1') // id为div1的元素

.children('ul') //该元素下面的ul子元素

.slideDown('fast') //高度从零变到实际高度来显示ul元素

.parent()  //跳到ul的父元素，也就是id为div1的元素

.siblings()  //跳到div1元素平级的所有兄弟元素

.children('ul') //这些兄弟元素中的ul子元素

.slideUp('fast');  //高度实际高度变换到零来隐藏ul元素

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({

    width:300,

    height:300

},1000,swing,function(){

    alert('done!');

});

参数可以写成数字表达式：

$('#div1').animate({

    width:'+=100',

    height:300

},1000,swing,function(){

    alert('done!');

});

尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height()    获取元素width和height

innerWidth()、innerHeight()  包括padding的width和height

outerWidth()、outerHeight()  包括padding和border的width和height

outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offse()

3、获取可视区高度

$(window).height();

4、获取页面高度

$(document).height();

5、获取页面滚动距离

$(document).scrollTop();

$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){

    ......

})

jquery事件

事件函数列表：

blur() 元素失去焦点

focus() 元素获得焦点

change() 表单元素的值发生变化

click() 鼠标单击

dblclick() 鼠标双击

mouseover() 鼠标进入（进入子元素也触发）

mouseout() 鼠标离开（离开子元素也触发）

mouseenter() 鼠标进入（进入子元素不触发）

mouseleave() 鼠标离开（离开子元素不触发）

hover() 同时为mouseenter和mouseleave事件指定处理函数

mouseup() 松开鼠标

mousedown() 按下鼠标

mousemove() 鼠标在元素内部移动

keydown() 按下键盘

keypress() 按下键盘

keyup() 松开键盘

load() 元素加载完毕

ready() DOM加载完成

resize() 浏览器窗口的大小发生改变

scroll() 滚动条的位置发生变化

select() 用户选中文本框中的内容

submit() 用户递交表单

toggle() 根据鼠标点击的次数，依次运行多个函数

unload() 用户离开页面

绑定事件的其他方式

$(function(){

    $('#div1').bind('mouseover click', function(event) {

        alert($(this).html());

    });

});

取消绑定事件

$(function(){

    $('#div1').bind('mouseover click', function(event) {

        alert($(this).html());

        // $(this).unbind();

        $(this).unbind('mouseover');

    });

});

主动触发与自定义事件

主动触发 
可使用jquery对象上的trigger方法来触发对象上绑定的事件。

自定义事件 
除了系统事件外，可以通过bind方法自定义事件，然后用tiggle方法触发这些事件。

//给element绑定hello事件

element.bind("hello",function(){

    alert("hello world!");

});

//触发hello事件

element.trigger("hello");

 

事件冒泡

什么是事件冒泡 
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡的作用 
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

阻止事件冒泡 
事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

$(function(){

    var $box1 = $('.father');

    var $box2 = $('.son');

    var $box3 = $('.grandson');

    $box1.click(function() {

        alert('father');

    });

    $box2.click(function() {

        alert('son');

    });

    $box3.click(function(event) {

        alert('grandson');

        event.stopPropagation();

    });

    $(document).click(function(event) {

        alert('grandfather');

    });

})

......

<div class="father">

    <div class="son">

        <div class="grandson"></div>

    </div>

</div>

阻止默认行为 
阻止右键菜单

$(document).contextmenu(function(event) {

    event.preventDefault();

});

合并阻止操作 
实际开发中，一般把阻止冒泡和阻止默认行为合并起来写，合并写法可以用

// event.stopPropagation();

// event.preventDefault();

// 合并写法：

return false;

事件委托

事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

一般绑定事件的写法

$(function(){

    $ali = $('#list li');

    $ali.click(function(event) {

        $(this).css({background:'red'});

    });

})

...

<ul id="list">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

事件委托的写法

$(function(){

    $list = $('#list');

    $list.delegate('li', 'click', function(event) {

        $(this).css({background:'red'});

    });

})

...

<ul id="list">

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

    <li>5</li>

</ul>

取消事件委托

// ev.delegateTarge 委托对象

$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

jquery元素节点操作

创建节点

var $div = $('<div>');

var $div2 = $('<div>这是一个div元素</div>');

插入节点 
1、append()和appendTo()：在现存元素的内部，从后面插入元素

var $span = $('<span>这是一个span元素</span>');

$('#div1').append($span);

......

<div id="div1"></div>

2、prepend()和prependTo()：在现存元素的内部，从前面插入元素

3、after()和insertAfter()：在现存元素的外部，从后面插入元素

4、before()和insertBefore()：在现存元素的外部，从前面插入元素

删除节点

$('#div1').remove();

 

滚轮事件与函数节流

jquery.mousewheel插件使用 
jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。

函数节流 
javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧妙地使用定时器来减少触发的次数，实现函数节流。

json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

javascript对象字面量：

var tom = {

    name:'tom',

    age:18

}

json格式的数据：

{

    "name":'tom',

    "age":18

}

与json对象不同的是，json数据格式的属性名称需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

json的另外一个数据格式是数组，和javascript中的数组字面量相同。

['tom',18,'programmer']

Ajax

ajax与jsonp

ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。

同步和异步 
现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。

局部刷新和无刷新 
ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。

同源策略 
ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提示：

XMLHttpRequest cannot load https://www.baidu.com/. No

'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed access.

$.ajax使用方法 
常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步

以前的写法：

$.ajax({

    url: 'js/user.json',

    type: 'GET',

    dataType: 'json',

    data:{'aa':1}

    success:function(data){

        ......

    },

    error:function(){

        alert('服务器超时，请重试！');

    }

});

新的写法(推荐)：

$.ajax({

    url: 'js/user.json',

    type: 'GET',

    dataType: 'json',

    data:{'aa':1}

})

.done(function(data) {

    ......

})

.fail(function() {

    alert('服务器超时，请重试！');

});

jsonp 
ajax只能请求同一个域下的数据或资源，有时候需要跨域请求数据，就需要用到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利用了script标签可以跨域链接资源的特性。

jsonp的原理如下：

<script type="text/javascript">

    function aa(dat){

        alert(dat.name);

    }

</script>

<script type="text/javascript" src="....../js/data.js"></script>

页面上定义一个函数，引用一个外部js文件，外部js文件的地址可以是不同域的地址，外部js文件的内容如下：

aa({"name":"tom","age":18});

外部js文件调用页面上定义的函数，通过参数把数据传进去。

 

正则表达式

1、什么是正则表达式： 
能让计算机读懂的字符串匹配规则。

2、正则表达式的写法：
var re=new RegExp('规则', '可选参数');
var re=/规则/参数;

3、规则中的字符 
1）普通字符匹配：
如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’

2）转义字符匹配：
\d 匹配一个数字，即0-9
\D 匹配一个非数字，即除了0-9
\w 匹配一个单词字符（字母、数字、下划线）
\W 匹配任何非单词字符。等价于[^A-Za-z0-9_]
\s 匹配一个空白符
\S 匹配一个非空白符
\b 匹配单词边界
\B 匹配非单词边界
. 匹配一个任意字符，除了换行符‘\n’和回车符‘\r’
\1 重复子项

4、量词：对左边的匹配字符定义个数 
? 出现零次或一次（最多出现一次）
+ 出现一次或多次（至少出现一次）
* 出现零次或多次（任意次）
{n} 出现n次
{n,m} 出现n到m次
{n,} 至少出现n次

5、任意一个或者范围 
[abc123] : 匹配‘abc123’中的任意一个字符
[a-z0-9] : 匹配a到z或者0到9中的任意一个字符

6、限制开头结尾 
^ 以紧挨的元素开头
$ 以紧挨的元素结尾

7、修饰参数：
g： global，全文搜索，默认搜索到第一个结果接停止
i： ingore case，忽略大小写，默认大小写敏感
m： multiple lines，多行搜索（更改^ 和$的含义，使它们分别在任意一行对待行首和行尾匹配，而不仅仅在整个字符串的开头和结尾匹配）

8、常用函数 
1、test
用法：正则.test(字符串) 匹配成功，就返回真，否则就返回假

2、search
用法：字符串.search(正则) 匹配成功，返回位置，否则返回-1

3、match
用法： 字符串.match(正则)；匹配成功，就返回匹配成功的数组，否则就返回null

4、replace
用法：字符串.replace(正则，新的字符串) 匹配成功的字符去替换新的字符

正则默认规则 
匹配成功就结束，不会继续匹配，区分大小写

本地存储

本地存储分为cookie，以及新增的localStorage和sessionStorage

1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。

jquery 设置cookie

$.cookie('mycookie','123',{expires:7,path:'/'});

jquery 获取cookie

$.cookie('mycookie');

2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

//设置：

localStorage.setItem("dat", "456");

localStorage.dat = '456';

//获取：

localStorage.getItem("dat");

localStorage.dat

//删除

localStorage.removeItem("dat");

3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。

iPhone的无痕浏览不支持Web Storage，只能用cookie。

jqueryUI

jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryUI 网址 
http://jqueryui.com/

常用jqueryUI插件：

Draggable 
1、设置数值的滑动条
2、自定义滚动条

移动端js事件

移动端的操作方式和PC端是不同的，移动端主要用手指操作，所以有特殊的touch事件，touch事件包括如下几个事件：

1、touchstart: //手指放到屏幕上时触发
2、touchmove: //手指在屏幕上滑动式触发
3、touchend: //手指离开屏幕时触发
4、touchcancel: //系统取消touch事件的时候触发，比较少用

移动端一般有三种操作，点击、滑动、拖动，这三种操作一般是组合使用上面的几个事件来完成的，所有上面的4个事件一般很少单独使用，一般是封装使用来实现这三种操作，可以使用封装成熟的js库。

zeptojs

Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库。

zepto官网：http://zeptojs.com/
zepto中文api：http://www.css88.com/doc/zeptojs_api/
zepto包含很多模块，默认下载版本包含的模块有Core, Ajax, Event, Form, IE模块，如果还需要其他的模块，可以自定义构建。
zepto自定义构建地址：http://github.e-sites.nl/zeptobuilder/

touch模块封装了针对移动端常用的事件，可使用此模块进行移动端特定效果开发，这些事件有：

    • tap 元素tap的时候触发，此事件类似click，但是比click快。
    • longTap 当一个元素被按住超过750ms触发。
    • swipe, swipeLeft, swipeRight, swipeUp, swipeDown 当元素被划过时触发。(可选择给定的方向)

    • swiper

      swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。 swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端。

      2.x版本中文网址：http://2.swiper.com.cn/
      3.x版本中文网地址：http://www.swiper.com.cn/

      swiper使用方法：

      <script type="text/javascript" src="js/swiper.min.js"></script>
      
......

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">
      
......

<div class="swiper-container">
      
  <div class="swiper-wrapper">
      
    <div class="swiper-slide">slider1</div>
      
    <div class="swiper-slide">slider2</div>
      
    <div class="swiper-slide">slider3</div>
      
  </div>
      
    <div class="swiper-pagination"></div>
      
    <div class="swiper-button-prev"></div>
      
    <div class="swiper-button-next"></div>
      
</div>

<script>
      
var swiper = new Swiper('.swiper-container', {
      
    pagination: '.swiper-pagination',
      
  prevButton: '.swiper-button-prev',
      
  nextButton: '.swiper-button-next',
      
    initialSlide :1,
      
  paginationClickable: true,
      
  loop: true,
      
  autoplay:3000,
      
  autoplayDisableOnInteraction:false
      
});
      
</script>

      swiper使用参数：

      1、initialSlide：初始索引值，从0开始
      2、direction：滑动方向 horizontal | vertical
      3、speed：滑动速度，单位ms
      4、autoplay：设置自动播放及播放时间
      5、autoplayDisableOnInteraction：用户操作swipe后是否还自动播放，默认是true，不再自动播放
      6、pagination：分页圆点
      7、paginationClickable：分页圆点是否点击
      8、prevButton：上一页箭头
      9、nextButton：下一页箭头
      10、loop：是否首尾衔接
      11、onSlideChangeEnd：回调函数，滑动结束时执行

      swiper制作实例：

      1、swiper制作移动端焦点图实例
      2、swiper制作整页滚动效果

    • bootstrap

      简单、直观、强悍的前端开发框架，让web开发更迅速、简单。 来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发。

      bootstrap中文网址：http://www.bootcss.com/

      bootstrap 容器

      • container-fluid 流体
      • container
        • 1170
        • 970
        • 750
        • 100%

      bootstrap 栅格系统

      bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，这些样式类组成了一套响应式、移动设备优先的流式栅格系统：

      1、col-lg-
      2、col-md-
      3、col-sm-
      4、col-xs-

      bootstrap响应式查询区间：

      1、大于等于768
      2、大于等于992
      3、大于等于1200

      bootstrap 表单

      1、form 声明一个表单域
      2、form-inline 内联表单域
      3、form-horizontal 水平排列表单域
      4、form-group 表单组、包括表单文字和表单控件
      5、form-control 文本输入框、下拉列表控件样式
      6、checkbox checkbox-inline 多选框样式
      7、radio radio-inline 单选框样式
      8、input-group 表单控件组
      9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
      10、form-group-lg 大尺寸表单
      11、form-group-sm 小尺寸表单

      bootstrap 按钮

      1、btn 声明按钮
      2、btn-default 默认按钮样式
      3、btn-primay
      4、btn-success
      5、btn-info
      6、btn-warning
      7、btn-danger
      8、btn-link
      9、btn-lg
      10、btn-md
      11、btn-xs
      12、btn-block 宽度是父级宽100%的按钮
      13、active
      14、disabled
      15、btn-group 定义按钮组

      bootstrap 图片

      img-responsive 声明响应式图片

      bootstrap 隐藏类

      1、hidden-xs
      2、hidden-sm
      3、hidden-md
      4、hidden-lg

      bootstrap 字体图标

      通过字体代替图标，font文件夹需要和css文件夹在同一目录

      bootstrap 下拉菜单

      1、dropdown-toggle
      2、dropdown-menu

      bootstrap 选项卡

      1、nav
      2、nav-tabs
      3、nav-pills
      4、tab-content

      bootstrap 导航条

      1、navbar 声明导航条
      2、navbar-default 声明默认的导航条样式
      3、navbar-inverse 声明反白的导航条样式
      4、navbar-static-top 去掉导航条的圆角
      5、navbar-fixed-top 固定到顶部的导航条
      6、navbar-fixed-bottom 固定到底部的导航条
      7、navbar-header 申明logo的容器
      8、navbar-brand 针对logo等固定内容的样式
      11、nav navbar-nav 定义导航条中的菜单
      12、navbar-form 定义导航条中的表单
      13、navbar-btn 定义导航条中的按钮
      14、navbar-text 定义导航条中的文本
      9、navbar-left 菜单靠左
      10、navbar-right 菜单靠右

      bootstrap 模态框

      1、modal 声明一个模态框
      2、modal-dialog 定义模态框尺寸
      3、modal-lg 定义大尺寸模态框
      4、modal-sm 定义小尺寸模态框
      5、modal-header
      6、modal-body
      7、modal-footer

      bootstrap 响应式专题网站实例

    • less、sass、stylus

      它们是三种类似的样式动态语言，属于css预处理语言，它们有类似css的语法，为css赋予了动态语言的特性、如变量、继承、运算、函数等。这么做是为了css的编写和维护。

      它们使用的文件分别是：.less、.scss、*.styl,这些文件是不能再网页上直接使用的，最终要编译成css文件来使用，编译的方法有软件编译，或者用nodejs程序。

      less、sass编译软件：
      http://koala-app.com/index-zh.html

      less中文网址：http://lesscss.cn/

      less语法：

      1、注释

          // 不会被编译的注释
      
    /* 会被编译的注释 */

      2、变量

      @w:200px;
      
.box{
      
    width:@w;
      
    height:@w;
      
    background-color:red;
      
}

      3、混合

      .border{
      
    border:1px solid #ddd;
      
}
      
.box(@w:100px,@h:50px,@bw:1px){
      
    width:@w;
      
    height:@h;
      
    border:@bw solid #ddd;
      
}
      
.box{
      
    .border;
      
    background-color:red;
      
}

      4、匹配模式

      .p(r){
      
    postion:relative;
      
}
      
.p(a){
      
    postion:absolute;
      
}
      
.p(f){
      
    postion:fixed;
      
}
      
.box{
      
    .p(f);
      
}

      5、运算

      @w:300px;
      
.box{
      
    width:@w+20;
      
}

      4、嵌套

      .list{
      
    li{
      
        ...
      
    }
      
    a{
      
        ...
      
        &:hover{
      
            ...
      
        }
      
    }
      
    span{
      
        ...
      
    }
      
}

      5、导入

      // 导入common.less,导入a.css文件

@import "common";
      
@import (less) "a.css";

      • 前端自动化

        Node.js

        Node.js可以理解为是一门后端脚本语言，使用了和JavaScript相同的语法，会使用JavaScript的程序员能很快上手node.js、nodjs在处理高并发方面性能卓越，目前许多公司都在使用nodejs作为后端数据服务和前端开发的中间层。

        node.js的中文网站：https://nodejs.org/zh-cn/

        前端自动化

        前端开发的流程越来越复杂，其中有代码的合并和压缩、图片的压缩；对less、sass的预处理；文件操作等，这些工作是重复乏味的，为了优化开发流程，提高工作效率，前端自动化工具就出现了，自动化工具可以通过配置，自动完成这些工作。

        grunt、gulp

        grunt和gulp是使用node.js编写的，前端首选的自动化工具，gulp在书写配置上比grunt更简洁，运行的性能更高，gulp逐渐成为主流。

        gulp的使用

        gulp使用步骤： 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 gulp网站：http://gulpjs.com/

        常用gulp插件：
        压缩js代码（gulp-uglify）
        less的编译（gulp-less）
        css的压缩 （gulp-minify-css）
        自动添加css3前缀（gulp-autoprefixer）
        文件改名字 (gulp-rename)

      • 前端性能优化

        从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

        前端性能优化分为如下几个方面：

        一、代码部署：

        1、代码的压缩与合并
        2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。
        3、使用内容分发网络 CDN
        4、为文件设置Last-Modified、Expires和Etag
        5、使用GZIP压缩传送
        6、权衡DNS查找次数(使用不同域名会增加DNS查找)
        7、避免不必要的重定向(加"/")

        二、编码

        html：

        1、使用结构清晰，简单，语义化标签
        2、避免空的src和href
        3、不要在HTML中缩放图片

        css：

        1、精简css选择器 2、把CSS放到顶部
        3、避免@import方式引入样式
        4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html
        5、使用css动画来取代javascript动画
        6、使用字体图标,图标库网站：http://fontawesome.io/icons/，在线制作网站：www.iconfont.cn
        7、使用css sprite
        8、使用svg图形
        9、避免使用CSS表达式

        a {star : expression(onfocus=this.blur)}

        10、避免使用滤镜

        javascript：

        1、减少引用库的个数
        2、使用requirejs或seajs异步加载js
        3、JS放到页面底部引入
        4、避免全局查找
        5、减少属性查找
        6、使用原生方法
        7、用switch语句代替复杂的if else语句
        8、减少语句数，比如说多个变量声明可以写成一句
        9、使用字面量表达式来初始化数组或者对象
        10、使用DocumentFragments或innerHTML取代复杂的元素注入
        11、使用事件代理(事件委托)
        12、避免多次访问dom选择集
        13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover
        14、使用Web Storage缓存数据
        15、使用Array的join方法来代替字符串的“+”连接(先将要连接的字符串放进数组)

python基础整理3——前端的更多相关文章

  1. python基础整理----基本概念和知识

    整理一下python的基本概念和知识, 主要用python3为语法标准. python介绍 一种面向对象的解释性计算机设计语言,具有丰富和强大的库. python定位:"优雅".& ...

  2. python基础整理笔记（九）

    一. socket过程中注意的点 1. 黏包问题 所谓的黏包就是指,在TCP传输中,因为发送出来的信息,在接受者都是从系统的缓冲区里拿到的,如果多条消息积压在一起没有被读取,则后面读取时可能无法分辨消 ...

  3. python基础整理笔记（五）

    一. python中正则表达式的一些查漏补缺 1.  给括号里分组的表达式加上别名:以便之后通过groupdict方法来方便地获取. 2.  将之前取名为"name"的分组所获得的 ...

  4. python基础整理笔记（四）

    一. python 打开文件的方法 1. python中使用open函数打开文件,需要设定的参数包括文件的路径和打开的模式.示例如下: f = open('a.txt', 'r+') 2. f为打开文 ...

  5. python基础整理笔记（一）

    一. 编码 1. 在python2里,加载py文件会对字符进行编码,需要在文件头上的注释里注明编码类型(不加则默认是ascII). # -*- coding: utf-8 -*- print 'hel ...

  6. python基础整理4——面向对象装饰器惰性器及高级模块

    面向对象编程 面向过程:根据业务逻辑从上到下写代码 面向对象:将数据与函数绑定到一起,进行封装,这样能够更快速的开发程序,减少了重复代码的重写过程 面向对象编程(Object Oriented Pro ...

  7. python基础整理1

    基础知识 名字与对象,类与类型 变量:在Python中,存储一个数据,需要一个叫做变量的东西   num2 = 87 #num2是一个变量 变量的类型: 程序中为了更充分的利用内存空间以及更有效率的管 ...

  8. python基础整理笔记（八）

    一. python反射的方式来调用方法属性 反射主要指的就是hasattr.getattr.setattr.delattr这四个函数,作用分别是检查是否含有某成员.获取成员.设置成员.删除成员. 此外 ...

  9. python基础整理笔记（七）

    一. python的类属性与实例属性的注意点 class TestAtt(): aaa = 10 def main(): # case 1 obj1 = TestAtt() obj2 = TestAt ...

随机推荐

  1. C Traps：优先级常见错误

    逻辑与关系运算符 if (flags & FLAG != 0) {...} 这类错误以前也犯过,因为!=的优先级比&要高所以实际上是这样的 if (flags & (FLAG ...

  2. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  3. [WEB面试题] web前端面试题HTML+CSS第一弹，个人整理部分面试题汇总

    以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...

  4. JavaScript小细节点罗列（1）

    共勉! 属性访问表达式 众所周知,JavaScript为属性的访问定义了两种语法方式: 表达式.标识符 // 表达式(指定对象) 标识符(指定需要访问的属性的名称) 表达式[表达式] //表达式1(指 ...

  5. 浏览器根对象window之事件

    1. [事件]动画 onanimationstart onanimationend onanimationiteration onwebkitanimationend onwebkitanimatio ...

  6. LK光流算法的三个假设

    在实际过程中采用 Lucas-Kanade 光流算法跟踪运动物体特征点的时候,一个很明显的特点是LK算法(包括其他光流算法)不能计算"大运动",加上金子塔的方法稍微好点. 这是什么 ...

  7. ulimit命令&pthread_create() error: Resource temporarily unavailable

    http://www.ibm.com/developerworks/cn/linux/l-cn-ulimit/ https://my.vertica.com/docs/5.0/HTML/Master/ ...

  8. Dlink DIR-823G 漏洞挖掘过程

    前言 本文由 本人 首发于 先知安全技术社区: https://xz.aliyun.com/u/5274 初步分析 首先下载固件 https://gitee.com/hac425/blog_data/ ...

  9. 网鼎杯 pwn 记录

    题目位置 https://gitee.com/hac425/blog_data/tree/master/wdb babyheap 通过分配和释放构建 2 个 fastbin 链 利用 show 功能, ...

  10. 程序控制结构及for循环、foreach循环、迭代器

    结构化程序设计 三种基本控制结构:顺序结构.选择结构.循环结构. 在这种思想的指导下,发展出了面向过程编程方式.面向过程编程的核心是算法+数据结构.算法可以用顺序.选择.循环这三种基本控制结构来实现. ...