前端笔记

1.

display属性 :
block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行   可以定义高度和宽度
none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。
2.
overflow属性：
参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。
3.
target属性：
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
4.
Flash提供了ExternalInterface接口与JavaScript通信
两个方法：call和addCallback
作用：call让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。
5.
alt属性和title属性
alt是html标签的属性，而title既是html标签，又是html属性。 
title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。 
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。 
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。
6.
position属性
◆position:static　无定位
 
该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。
 
 
◆position:absolute　绝对定位
 
使用position:absolute，能够很准确的将元素移动到你想要的位置，
 
 
◆position:fixed　相对于窗口的固定定位
 
这个定位属性值是什么意思呢？元素的定位方式同absolute类似，但它的包含块是视区本身。在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。例如，它允许框架样式布局。在页式媒体如打印输出中，一个固定元素会出现于第一页的相同位置。这一点可用于生成流动标题或脚注。我们也见过相似的效果，但大都数效果不是通过CSS来实现了，而是应用了JS脚本。
请特别注意，IE6不支持CSS中的position:fixed属性。真的非常遗憾，要不然我们就可以试试这种酷酷的效果了。
 
◆position:relative　相对定位
 
所谓相对定位到底是什么意思呢，是基于哪里的相对呢？我们需要明确一个概念，相对定位是相对于元素默认的位置的定位。既然是相对的，我们就需要设置不同的值来声明定位在哪里，top、bottom、left、right四个数值配合，来明确元素的位置。
7.
文档类型
DTD（文档类型定义）是一组机器可读的规则，他们定义 XML 或 HTML 的特定版本中允许有什么，不允许有什么。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的 DOCTYPE 声明来了解要使用哪个 DTD ，由此知道要使用 HTML 的哪个版本。
 DOCTYPE 当前有两种风格，严格（ strict ）和过渡（ transitional ）。过渡 DOCTYPE 的目的是帮助开发人员从老版本迁移到新版本。
如果发送具有正确的 MIME 类型的 XHTML 文档，理解 XML 的浏览器将不显示无效的页面。

浏览器模式

    浏览器有两种呈现模式：标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。

DOCTYPE 切换

对于 HTML 4.01 文档，
  • 包含严格 DTD 的 DOCTYPE 常常导致页面以标准模式呈现。
  • 包含过度 DTD 和 URI 的 DOCTYPE 也导致页面以标准模式呈现。
  • 但是有过度 DTD 而没有 URI 会导致页面以混杂模式呈现。
  • DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

    8.
    border-style:none;和border-0;的区别
  • 1.效果
    border-style:none;//无边框         
    border-0;//边框宽度为0px  
    2.区别
    （1）性能差异
    border:0;浏览器对border-width、border-color进行渲染，占用内存。
    border:none;浏览器不进行渲染，不占用内存。
    Chrome：
    border:none;>> border:initial none initial;
    border:0;>> border:0 initial  initial ;
    Firefox、360：
    border:none; >>border:medium none;
    border:0;>> border:0 none;
    计算出的样式：
    border:0px none 元素color属性值;
    （2）浏览器兼容
    IE7-不支持border:none;
    W3C提示：请始终把border-style属性声明到border-color属性之前，元素必须在改变颜色之前获得边框。
    参考网站：https://segmentfault.com/q/1010000000694683/a-1020000001818777

    9.
    浏览器的内核引擎
    浏览器 的内核引擎，基本上是四分天下：1）Trident: IE 以Trident 作为内核引擎；2)Gecko: Firefox 是基于 Gecko 开发；3）WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器；4）Presto: Opera的内核，但由于市场选择问题，主要应用在手机平台--Opera mini
    注：2013年2月Opera宣布转向WebKit引擎
    注：2013年4月Opera宣布放弃WEBKIT，跟随GOOGLE的新开发的blink引擎
    详细点：

    1. 一、Trident内核代表产品Internet Explorer，又称其为IE内核。Trident（又称为MSHTML），是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括：IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。

    2. 2

      二、Gecko内核代表作品Mozilla FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。

    3. 3

      三、WebKit内核代表作品Safari、Chromewebkit 是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。

    4. 4

      四、Presto内核代表作品OperaPresto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而重新排版。

     
    10.

    CSS Sprites

    1.简介
    CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时避免图片载入缓慢的现象。
    2.优点
    （1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
    （2）CSS Sprites能减少图片的字节；
    （3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。
    （4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
    3.缺点
    （1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。
    （2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
    （3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
    （4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。
     
    10.

    HTML5中的二进制大对象Blob

    1、 Blob 是什么？
    • 在计算机中，BLOB常常是数据库中用来存储 二进制文件 的字段类型。
    • 这里说的是一种 JavaScript 的对象类型。
    • MYSQL中的BLOB类型就只是个二进制数据容器。而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型，这相当于对文件的储存。
    • 一个Blob对象就是一个包含有只读原始数据的类文件对象。
    2、 创建Blob 对象
    在新的方法中直接可以通过 Blob() 的构造函数来创建了。
    构造函数，接受两个参数：
    第一个为一个数据序列，可以是任意格式的值，例如，任意数量的字符串，Blobs 以及 ArrayBuffers。
    第二个参数，是一个包含了两个属性的对象，其两个属性分别是：

    （1）type -- MIME 的类型（MIME是多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访问的时候，浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名，以及一些媒体文件打开方式。）。

    （2）endings -- 决定 append() 的数据格式，

    1. <script>
    2. var blob = new Blob([ "Hello World!" ],{type: "text/plain" });
    3. </script>　　

      11.
      典型例子
      <divstyle=”400px;height:200px;”>
        <span style=”float:left;auto;height:100%;”>
                 <i style=”position:absolute;float:left;100px;height:50px;”>hello</i>
        </span>
      </div>
      其中span的宽度和高度是多少？答案是：width：0 height:200px;
      解析：首先span不是块级元素，是不支持宽高的，但是style中有了个float：left；就使得span变成了块级元素支持宽高，height:100%;即为，200，宽度由内容撑开。
      但是内容中的 i 是绝对定位，脱离了文档流，所以不占父级空间，所以span的width=0

    4. CSS伪类用于向某些选择器添加特殊的效果。 

      :active 向被激活的元素添加样式。 
      :focus 向拥有键盘输入焦点的元素添加样式。 
      :hover 当鼠标悬浮在元素上方时，向元素添加样式。 
      :link 向未被访问的链接添加样式。 
      :visited 向已被访问的链接添加样式。　　
      所以综合来看如果把鼠标移到按钮并点击时，会产生hover -> focus -> active的事件　　

    5. cellpadding属性和cellspacing属性
      • 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间单；
      • 元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离。
      　　　　　　

    6. HTML语义化

      1、什么是HTML语义化？

      <基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>

      根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

      2、为什么要语义化？

      • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
      • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
      • 有利于SEO ：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息： 爬虫依赖于标签来确定上下文和各个关键字的权重；
      • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
      • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

      3、写HTML代码时应注意什么？

      • 尽可能少的使用无语义的标签div和span；
      • 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
      • 不要使用纯样式标签，如：b、font、u等，改用css设置。
      • 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
      • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
      • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
      • 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

    7. HTTP协议

      1.简介
      HTTP协议（Hyper Text Transfer Protocol，超文本传输协议）,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。
      HTTP基于TCP/IP通信协议来传递数据。
      HTTP基于客户端/服务端（C/S）架构模型，通过一个可靠的链接来交换信息，是一个无状态的请求/响应协议。
      2.特点
      （1）HTTP是无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
      （2）HTTP是媒体独立的：只要客户端和服务器知道如何处理的数据内容，任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
      （3）HTTP是无状态：无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
      2.通信流程
       
      4.消息结构

      HTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。一旦建立连接后，数据消息就通过类似Internet邮件所使用的格式[RFC5322]和多用途Internet邮件扩展（MIME）[RFC2045]来传送。

      客户端请求消息：请求行、请求头部、空行和请求数据。
      1
      2
      3
      4
      GET /hello.txt HTTP/1.1 
      User-Agent: curl/7.16.3 libcurl/7.16.3 
      OpenSSL/0.9.7l zlib/1.2.3 
      Host: www.example.com Accept-Language: en, mi
      服务端响应消息：状态行、消息报头、空行和响应正文。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      HTTP/1.1 200 OK
      Date: Mon, 27 Jul 2009 12:28:53 GMT
      Server: Apache
      Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT
      ETag: "34aa387-d-1568eb00"
      Accept-Ranges: bytes
      Content-Length: 51
      Vary: Accept-Encoding
      Content-Type: text/plain
      5.请求方法（对资源的操作方式）
      GET 请求指定的页面信息，并返回实体主体。（获取内容）
      HEAD    类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头
      POST  向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。（新增内容）
      PUT 从客户端向服务器传送的数据取代指定的文档的内容。（更新内容）
      DELETE  请求服务器删除指定的页面。（删除内容）
      CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。
      OPTIONS 允许客户端查看服务器的性能。
      TRACE   回显服务器收到的请求，主要用于测试或诊断。
      6.状态码
      HTTP状态码分类 
      1** 信息，服务器收到请求，需要请求者继续执行操作
      2** 成功，操作被成功接收并处理
      3** 重定向，需要进一步的操作以完成请求
      4** 客户端错误，请求包含语法错误或无法完成请求
      5** 服务器错误，服务器在处理请求的过程中发生了错
      HTTP状态码列表
      100 Continue    继续。客户端应继续其请求
      101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
      200 OK  请求成功。一般用于GET与POST请求
      201 Created 已创建。成功请求并创建了新的资源
      202 Accepted    已接受。已经接受请求，但未处理完成
      203 Non-Authoritative Information   非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
      204 No Content  无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
      205 Reset Content   重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
      206 Partial Content 部分内容。服务器成功处理了部分GET请求
      300 Multiple Choices    多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
      301 Moved Permanently   永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
      302 Found   临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
      303 See Other   查看其它地址。与301类似。使用GET和POST请求查看
      304 Not Modified    未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
      305 Use Proxy   使用代理。所请求的资源必须通过代理访问
      306 Unused  已经被废弃的HTTP状态码
      307 Temporary Redirect  临时重定向。与302类似。使用GET请求重定向
      400 Bad Request 客户端请求的语法错误，服务器无法理解
      401 Unauthorized    请求要求用户的身份认证
      402 Payment Required    保留，将来使用
      403 Forbidden   服务器理解请求客户端的请求，但是拒绝执行此请求
      404 Not Found   服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
      405 Method Not Allowed  客户端请求中的方法被禁止
      406 Not Acceptable  服务器无法根据客户端请求的内容特性完成请求
      407 Proxy Authentication Required   请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
      408 Request Time-out    服务器等待客户端发送的请求时间过长，超时
      409 Conflict    服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突
      410 Gone    客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
      411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息
      412 Precondition Failed 客户端请求信息的先决条件错误
      413 Request Entity Too Large    由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
      414 Request-URI Too Large   请求的URI过长（URI通常为网址），服务器无法处理
      415 Unsupported Media Type  服务器无法处理请求附带的媒体格式
      416 Requested range not satisfiable 客户端请求的范围无效
      417 Expectation Failed  服务器无法满足Expect的请求头信息
      500 Internal Server Error   服务器内部错误，无法完成请求
      501 Not Implemented 服务器不支持请求的功能，无法完成请求
      502 Bad Gateway 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求
      503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
      504 Gateway Time-out    充当网关或代理的服务器，未及时从远端服务器获取请求
      505 HTTP Version not supported  服务器不支持请求的HTTP协议的版本，无法完成处理
       
      12.
      label
      html5中label标签只有for和form属性：
      属性值描述
      for id 规定 label 绑定到哪个表单元素。
      form formid 规定 label 字段所属的一个或多个表单。
       

      　　　　
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/fireporsche/p/6637636.html