前端知识小总结2

时间 2019-11-17

标签前端知识总结繁體版

原文原文链接

（暂时撇开内容、样式、行为的分离）javascript

一：css

1-语义化及语义化标签html

标签的语义化，是指在看到标签名的状况下基本能理解它所表明的含义，比较直观，便于浏览器的解析和阅读。java

语义化的优势，（1）为了在没有css的状况下，页面也能呈现出很好地内容结构、代码结构（2）有利于用户体验（3）有利于SEO和搜索引擎创建良好的沟通。（4）方便其余设备解析以意义的方式来渲染网页、（5）便于团队开发和维护，增长可读性。jquery

语义化的标签，<h1>~<h6> 、<p>、 <ul>、<ol>、<li>，<ul> 、<dl>、<dt>、<dd>，<dl> 、<em>、<strong>（<em> 是用做强调，<strong> 是用做重点强调）、<table>、<td>、<th>、<caption>、< title></title>、<header></header>、<nav></nav>、<article></article>、<section></section>、<aside></aside>、<footer></footer>、<figure></figure>、<cite></cite>、<figcaption></figcaption>（figure的标题，必须是figure内嵌的第一个或者最后一个元素。）、<cite></cite>（指明引用或者参考）、<blockquoto></blockquoto>、<q></q>（短的引述）、<time></time>（标记时间）、<address></address>（做者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的连接）。）等。web

2-布局ajax

（一）居中布局chrome

（水平居中）canvas

（1）文字水平居中：能够将文字放置在p标签内，而后对p标签设置text-align:center;后端

（2）图片水平居中：将图片设置为block块状显示，而后设置margin：0 auto；或者将img标签放置在div内，而后一样地设置margin。

（3）定宽块状元素：设置宽高背景色，而后设置margin：0 auto；

（4）不定宽元素：方法1，将display设置为table，margin：0 auto；方法2，父元素设置text-align:center; ，子元素中设置display:inline-block; 居中内容放在父元素或子元素均可以。方法3，position:absolute;left:50%;transform:translateX(-50%);方法4，display:flex; justify-content: center; 方法5，父元素设置float:left;position:relative;left:50%;，子元素设置position:relative;left:-50%;且水平居中内容放在子元素中。

（垂直居中）

（1）单元格中内容：直接设置vetical-align：middle；

（2）定宽元素：单行文本：垂直居中的方法是经过设置父元素的 height 和 line-height 高度一致来实现height:100px；line-height: 100px;

（3）不定宽元素：方法1，position: absolute;top:50%;transform: translateY(-50%); 方法2，<div ><div>awdfad</div></div>I E9以上。

（水平垂直居中）

（1）定宽元素：width:100px; height:80px; position:absolute; left:50%; top:50%; margin:-40px 0 0 -50px; background-color: blanchedalmond; 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，而后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

（2）不定宽元素：方法1，position: absolute;left:50%;top:50%;transform: translate(-50%,-50%); 。（IE9以上兼容，适合移动端）方法2，display: flex;justify-content: center;align-items: center;（IE9以上兼容，适合移动端，测试有问题）。方法3，<div ><div >sdscsddd</div></div> （测试有问题）

Js实现水平垂直居中：（IE中能够，Chrome只是垂直居中）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
   $(window).resize(function(){
       $(".mydiv").css({
           position:"absolute",
           left:($(window).width()-$(".mydiv").outerWidth())/2,
           top:($(window).height()-$(".mydiv").outerHeight())/2,
       });
   });
    $(function(){
        $(window).resize();
    })
</script>
</body>
</html>

（二）多列布局

（一列定宽+一列自适应）

（1）float+margin：左边左浮动，右边的左外边界与左边元素宽度一致。
    <style type="text/css">
        .left{
            float:left;
            width:100px;
            background-color: antiquewhite;
        }
        .right{
            margin-left:100px;
          background-color: aqua;
        }
    </style>

<body>
<div>
    <div class="left"><p>left</p></div>
    <div class="right"><p>right</p><p>right</p></div>
</div>
</body>

（2）float+overflow：左边元素左浮动，并设置宽度，及右外边界为0；右边元素设置overflow属性，值为hidden。

    <style type="text/css">         .left{             float:left;             width:100px;             background-color: antiquewhite;             margin-right:0px;         }         .right{             overflow:hidden;             background-color: aqua;         }     </style> <body> <div>     <div class="left"><p>left</p></div>     <div class="right"><p>right</p><p>right</p></div> </div> </body> ps：overflow属性规定当内容溢出时元素框发生的事情。其属性值有：visible（默认值，内容不会被裁剪，会呈如今元素框以外）、hidden（内容会被裁剪，且其他内容是不可见的）、scroll（内容会被裁剪，但浏览器会显示滚动条以方便查看其他内容）、auto（若是内容被裁剪，则浏览器会显示滚动条方便查看其他内容）、inherit（规定从父元素继承overflow属性值）。

（3）flex：父元素设置display：flex；左边设置宽度和右外边界margin为0,；右元素设置flex为1。
    <style type="text/css">
       .parent{
           display: flex;
           display:-webkit-box;
       }
        .left{
            width:100px;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
           flex: 1;
            -webkit-box:1;
            background-color: aqua;
        }
    </style>
<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

或

    <style type="text/css">
        .mydiv{
            display:flex;//Opera12.1，Firefox20+，
            display:-webkit-box;//Safari3.1-6，iOS 6-
            display:-moz-box;// IE9-，
            display:-ms-flexbox;//IE10，
            display:-webkit-flex;//Chrome
            height:60px;
        }
        .mydiv div{
            background-color: blue;
            flex:1; //Opera12.1，Firefox20+，
            -webkit-box-flex:1; //Safari3.1-6，iOS 6-
            -moz-box-flex:1; // IE9-，
            -webkit-flex:1; //Chrome
            -ms-flex:1; //IE10

        }
        .mydiv div+div{
            margin-left:10px;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

ps：chrome52.0、IE十一、Firefox48.0、Opera44.0、 Safari5.1.7

（多列定宽+一列自适应）

定宽列样式基本相同。

（1）float+overflow：

    <style type="text/css">
        .left,.center{
            float: left;
            width:100px;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>
<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（一列不定宽+一列自适应）

（1）float+overflow:左边左浮动，右边overflow为hidden。

    <style type="text/css">
        .left{
            float:left;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>

<body>
<div class="parent">
    <div class="left"><p>leftleft</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（2）flex：父元素display设为flex；左元素设置右外边界为0，右元素flex为1

<style type="text/css">
        .parent{
            display: flex;
            display: -webkit-box;
        }
        .left{

            background-color: antiquewhite;
            margin-right:0px;
        }
        .right{
            flex:1;
            -webkit-box:1;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left"><p>leftleft</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（多列不定宽+一列自适应）

跟不定宽一列样式基本相同。

（1）float+overflow:

    <style type="text/css">
        .left{
            float: left;
            background-color: antiquewhite;
            margin-right:0px;
        }
        .center{
            float: left;
            background-color: aquamarine;
            margin-right:0;
        }
        .right{
            overflow: hidden;
            background-color: aqua;
        }
    </style>

<div class="parent">
    <div class="left"><p>left</p></div>
    <div class="center"><p>center</p></div>
    <div class="right"><p>righsddst</p><p>risdfddsssdght</p></div>
</div>

（三）等列布局

（1）flex：

    <style type="text/css">
        .mydiv{
            display:flex;
            display:-webkit-box;
            height:60px;
        }
        .mydiv div{
            background-color: blue;
            flex:1;
            -webkit-box:1;
        }
        .mydiv div+div{
            margin-left:10px;
        }
    </style>

<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>
（2）float+margin-left：

<style type="text/css">
        .div1{
            float:left;
            background-color: aqua;
            width:100px;
        }
        .div2{
            float:left;
            margin-left:6px;
            background-color: antiquewhite;
            width:100px;
        }
      .div3{
          float:left;
          margin-left:6px;
          background-color: blueviolet;
          width:100px;
      }
      .div4{
          float:left;
          margin-left:6px;
          background-color: chartreuse;
          width:100px;
      }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

（3）百分比

<style type="text/css">
        .div1{
            background-color: chartreuse;
            float:left;
            width:20%;
        }
        .div2{
            background-color: aqua;
            margin-left:6.6%;
            float:left;
            width:20%;
        }
        .div3{
            background-color: blueviolet;
            margin-left:6.6%;
            float:left;
            width:20%;
        }
       .div4{
            background-color: coral;
            margin-left:6.6%;
            float:left;
            width:20%;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

<style type="text/css">
       .div1{
           background-color: chartreuse;
           float:left;
           width:25%;
       }
       .div2{
           background-color: aqua;
           /*margin-left:6.6%;*/
           float:left;
           width:25%;
       }
       .div3{
           background-color: blueviolet;
           /*margin-left:6.6%;*/
           float:left;
           width:25%;
       }
       .div4{
           background-color: coral;
           /*margin-left:6.6%;*/
           float:left;
           width:25%;
       }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

<style type="text/css">
       .mydiv{
           margin-left:-20px;
       }
        .div1{
            background-color: chartreuse;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div2{
            background-color: aqua;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div3{
            background-color: blueviolet;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
        .div4{
            background-color: coral;
            float:left;
            width:25%;
            padding-left:20px;
            box-sizing:border-box;
        }
    </style>
<div class="mydiv">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
</div>

或

    <style type="text/css">
         .div1{
           background-color: aqua;
            float:left;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);
              }
        .div2{
            float:left;
            margin-left:20px;
            background-color: antiquewhite;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);

        }
        .div3{
            float:left;
            margin-left:20px;
            background-color: blue;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);
        }
        .div4{
            float:left;
            margin-left:20px;
            background-color: cyan;
            width:calc(25% - 15px);
            width:-webkit-calc(25% - 15px);
            width:-moz-calc(25% - 15px);
        }
    </style>
<div class="mydiv">
    <div class="div1"><p>1</p></div>
    <div class="div2"><p>1</p></div>
    <div class="div3"><p>1</p></div>
    <div class="div4"><p>1</p></div>
</div>

Ps：Safari5.1.7不支持calc（）

Ps：calc（）：能够计算元素的长度，可使用百分比、em、px、rem等。Width:calc(表达式)；能够经过+、-、*、/运算符；可使用百分比、px、em、rem；运算符+、-其先后必须有空格。

Ps：box-sizing属性值有content-box/border-box/inherit。其中，content-box，宽度和高度分别应用到元素的内容框，在宽度和高度以外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒，即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，经过从已设定的宽度和高度分别减去边框和内边距才能获得内容的宽度和高度。inherit规定从父元素继承bo-sizing属性值。

（四）内容不一样时，背景等高

（1）flex：默认等高

    <style type="text/css">
        .parent{
            display:flex;
        }
        .left{
            width:100px;
           background-color: blueviolet;
        }
        .right{
            flex:1;
            background-color: antiquewhite;
        }
    </style>

<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

（2）float伪等高

<style type="text/css">
        .parent{
            overflow:hidden;
        }
        .left,.right{
            padding-bottom:9999px;
            margin-bottom:-9999px;
        }
        .left{
            float:left;
            width:100px;
            margin-right:6px;
            background-color: coral;
        }
        .right{
            overflow: hidden;
            background-color: aquamarine;
        }
    </style>
<div class="parent">
    <div class="left">
        <p>left</p>
    </div>
    <div class="right">
        <p>right</p>
        <p>right</p>
    </div>
</div>

3-盒子模型

网页中的元素能够看做一个盒子模型，而盒子模型包括content/padding/border/margin/四部分。盒子模型主要有两类，即W3C盒子模型和IE盒子模型。其中，W3C盒子模型给定的width不包括padding/border；而IE盒子模型的给定的width已经包含 padding/border。height相似。

eg.一个盒子模型margin为20px，border为1px，padding为10px，content宽为200px，高为50px。

若是用W3C盒子模型解释，则这个盒子须要占据的位置为宽：200+10*2+1*2+20*2=262px，高为：50+10*2+1*2+20*2=12px，盒子的实际大小为：宽200+10*2+1*2=222px，高50+10*2+1*2=72px。
若是用IE盒子模型解释，则这个盒子须要占据的位置为宽：200+20*2=240px，高为：50+20*2=70px；盒子的实际大小：宽200px，高50px。

4-兼容性问题

Safari 5.1.7不支持calc（），而flex须要css hack解决

5-H5 canvas

<canvas> 标签订义图形，好比图表和其余图像。<canvas> 标签只是图形容器，您必须使用脚原本绘制图形。

canvas元素绘制图像的两种方法：context.fill()//填充 context.stroke()//绘制边框

绘图的样式：context.fillStyle//填充的样式 context.strokeStyle//边框样式

context.lineWidth//图形边框宽度

eg.

矩形：

<canvas id="myCanvas"></canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');

var ctx=canvas.getContext('2d');

ctx.fillStyle='blue';

ctx.fillRect(0,0,60,66);

</script>

圆：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#FF0000";

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

线条：

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.moveTo(10,10);//定义线条开始坐标

cxt.lineTo(150,50);//定义线条结束坐标

cxt.lineTo(10,50);

cxt.stroke();//stroke（）方法绘制线条

渐变色：

建立渐变线条：createLinerGradient(x,y,x1,y1)

建立一个径向/圆渐变：createRadialGradient(x,y,r,x1,y1,r1);

//建立一个线性渐变，使用渐变填充矩形

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

//建立渐变

var grd=cxt.createLinearGradient(0,0,175,50);//渐变色

grd.addColorStop(0,"#FF0000"); //指定颜色中止，参数用坐标描述，0至1.

grd.addColorStop(1,"#00FF00");

//填充渐变

cxt.fillStyle=grd;

cxt.fillRect(0,0,175,50);

//建立一个径向/圆渐变，使用渐变填充矩形

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

// 建立渐变

vargrd=ctx.createRadialGradient(75,50,5,90,60,100);

grd.addColorStop(0,"red"); grd.addColorStop(1,"white");

// 填充渐变

ctx.fillStyle=grd;

ctx.fillRect(10,10,150,80);

图像：把一幅图像放到画布上，drawImage（image，x，y）

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

var

img=document.getElementById("scream");

ctx.drawImage(img,10,10);

ps：canvas左上角的左标为（0,0）

圆：

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.beginPath(); //arc(x,y,r,start,stop)

ctx.arc(95,50,40,0,2*Math.PI);

ctx

.stroke()

使用 canvas 绘制文本:

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本

strokeText(text,x,y) - 在 canvas 上绘制空心的文本

eg.

实心文本：

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

ctx

.font="30px Arial";

ctx.fillText("Hello World",10,50);

空心文本：

var c=document.getElementById("myCanvas");

var

ctx=c.getContext("2d");

ctx.font="30px Arial";

ctx

.strokeText("Hello World",10,50);

大多数 Canvas 绘图 API 都没有定义在 <canvas> 元素自己上，而是定义在经过画布的 getContext() 方法得到的一个”绘图环境”对象上。

Canvas API 也使用了路径的表示法。可是，路径由一系列的方法调用来定义，如调用 beginPath() 和 arc() 方法。一旦定义了路径，其余的方法，如 fill()，都是对此路径操做。绘图环境的各类属性，好比 fillStyle，说明了这些操做如何使用。

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您能够控制其每一像素。canvas 元素自己是没有绘图能力的。全部的绘制工做必须在 JavaScript 内部完成：

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

6-Localstorage、sessionstorage、cookie

H5中的webstorage包括了两种存储方式：sessionStorage和localStorage。存储空间相对较大，仅仅是为了本地存储数据而生，更多接口，独立的存储空间

sessionStorage：会话级别的存储，会话结束数据消失，

localStorage：持久化的本地存储，除非主动删除数据，不然数据不会过时，

cookie：存储空间小，与服务器进行交互，做为http的一部分而存在，

7-性能优化

减小http请求：

² css精灵：将多个图片合并到一个单独的图片中。

<div style=”background-image:url(‘a_lot_of_imgs.gif’); background-position:-260px -90px ; width:26px; height:24px;”>

</div>

<style type="text/css">
        #navbar{
            width:31px;
            height:31px;
            display:inline;
            float:left;
            background-image: url(/images/66.gif);
        }
        .home{
            background-position: 0 0;
            margin-right:4px;
          margin-left:4px;
        }
        .gifts{
            background-position: -32px 0;
            margin-right:4px;
        }
        .cart{
            background-position: -64px 0;
            margin-right: 4px;
        }
        .settings{
            background-position: -96px 0;
            margin-right:4px;
        }
        .help{
            background-position: -128px 0;
            margin-right:4px;
        }
    </style>
<div id="navbar" style="border:2px ridge #333;width:180px;height:32px;padding:4px 0 4px 0;" >
    <a href="javascript:alert('home')" title="Home"><span class="home"></span></a>
    <a href="javascript:alert('gifts')" title="Gifts"><span class="gifts"></span></a>
    <a href="javascript:alert('cart')" title="Cart"><span class="cart"></span></a>
    <a href="javascript:alert('settings')" title="Settings"><span class="settings"></span></a>
    <a href="javascript:alert('help')" title="Help"><span class="help"></span></a>
</div>

² 图片地图：在一个图片上关联多个超连接的图片。包括服务器端图片地图（将全部点击提交到同一个目标URL，向其传递用户点击的x、y坐标，web应用程序根据该x、y坐标映射为适当的操做。）与客户端图片地图（将用户的点击映射到一个操做，无需向后端应用程序发送请求。映射经过HTML的map标签实现。）两种。

<img usemap="#map1" border=0 src="/images/66.gif?t=1196816255"/>
<map name="map1">
    <area shape="rect" coords="0 0 31 31" href="home.html" title="home">
    <area shape="rect" coords="36 0 66 31" href="gifts.html" title="gifts">
    <area shape="rect" coords="71 0 101 31" href="cart.html" title="cart">
    <area shape="rect" coords="106 0 136 31" href="settings.html" title="settings">
    <area shape="rect" coords="141 0 171 31" href="help.html" title="help">
</map>

² 内联图片：经过使用data:URL模式能够在web页面中包含图片但无需额外的http请求。

² 合并样式及脚本文件、

使用内容发布网络

内容发布网络（CDN）是一组分布在多个不一样地理位置的web服务器，用于更加有效地向用户发布内容。

添加Expires头

长久的Expires头，可使组件存在于缓存，避免没必要要的http请求，其能够用于图片、脚本、样式表等

Expires：Mon，15 Apr 2024 20:00:00 GMT

Cache-Control： max-age=315360000 Cache-Control使用max-age指令指定组件被缓存多久，以秒为单位。Cache-Control具备优先权。

压缩组件

经过减少http响应的大小来减小响应时间。

Web客户端能够经过http请求中的Accept-Encoding头来表示对压缩的支持。Accept-Encoding： gzip，deflate

Web服务器经过响应中的Content-Encoding头来通知web客户端。Content-Encoding：gzip

压缩对象：html文档、样式表、脚本

若是是浏览器经过代理发送请求，能够选择在web服务器的响应头中添加Vary头，web服务器能够告诉代理根据一个或多个请求头来改变缓存的响应。Vary：Accept-Encoding

将样式表放在顶部

为了不无样式内容闪烁及白屏

将脚本放在底部
避免css表达式

css表达式致使频繁的求值操做，能够经过一次性表达式与事件处理器来取代css表达式。

使用外部JavaScript和css

主要源于外部文件能够缓存

减小DNS查询

Dns查找能够被缓存起来提升性能。

精简JavaScript

精简，从代码中移除没必要要的字符以减少大小。混淆，一样移除注释和空白，还可能改写代码，将较长的变量名改成更短的变量名。

避免重定向

重定向指将用户从一个URL从新路由到另外一个URL，301,302经常使用的两种重定向方式。

删除重复脚本

重复脚本的产生多是因为不一样团队贡献资源时，可能同时提供了相同的脚本，这可能致使没必要要的http请求和执行JavaScript浪费的时间。

=》脚本管理模块

配置ETag

Etag：实体标签，是web服务器和浏览器用于确认缓存组件有效性的一种机制。Etag能够用于检测浏览器缓存中的组件与原始服务器上的组件是否匹配。（实体，组件的另外一种称呼）Etag为验证明体提供了比最新修改日期更为灵活的机制。

Etag问题：一般使用组件的某些属性来构造它，这些属性对于特定的、寄宿了网站的服务器来讲是惟一的。当浏览器从一台服务器上获取了原始组件，而后再向另一台不一样的服务器发起条件GET请求时，Etag是不会匹配的。这样将会下降有效性验证的成功率，也下降了代理缓存的效率。=》配置或移除Etag

使用ajax可缓存

确保ajax请求遵照性能指导，尤为应具备长久的Expires头

8-文档类型

² HTML5：<!doctype>

² HTML 4.01:

Ø  HTML 4.01 Strict: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Ø  HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

Ø  HTML 4.01 Frameset: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

² XHTML 1.0：

Ø  XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ø  XHTML 1.0 Transitional：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ø  XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

9-行内元素、块元素、空标签

行内元素：

不占据一整行，随内容而定
不能够设置宽高，也不能够设置行高，其宽度随着内容增长，高度随字体大小而改变。
能够设置外边界，可是只有左、右外边界起做用。
能够设置内边界，可是只有左、右内边界起做用
<a>、<b>、<br>、<em>、<font>、<i>、<select>、<input>、<label>、<span>、<strong>、、、

块元素：

老是在新行上开始，占据一整行；
高度，行高以及外边距和内边距均可控制；
宽带始终是与浏览器宽度同样，与内容无关；
它能够容纳内联元素和其余块元素。
<div>、<dl>、<dt>、<dd>、<form>、<h1>、<ol>、<p>、<ul>、、、

空标签：

<br> 、<hr>、<img>