mike_caoyong
mike_caoyong

浏览器兼容性和HTTP状态了解

HTTP状态

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）
101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议（HTTP 1.1新）
200 OK 一切正常，对GET和POST请求的应答文档跟在后面。
201 Created 服务器已经创建了文档，Location头给出了它的URL。
202 Accepted 已经接受请求，但处理尚未完成。
203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝（HTTP 1.1新）。
204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。
206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它（HTTP 1.1新）。
300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”。

出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。

注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求 http://host/~user （缺少了后面的斜杠），有的服务器返回301，有的则返回302。

严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。
304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取（HTTP 1.1新）。
307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是 303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）
400 Bad Request 请求出现语法错误。
401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
404 Not Found 无法找到指定位置的资源。这也是一个常用的应答。
405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。（HTTP 1.1新）
406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。
407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）
408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。（HTTP 1.1新）
409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）
410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。（HTTP 1.1新）
411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。（HTTP 1.1新）
412 Precondition Failed 请求头中指定的一些前提条件失败（HTTP 1.1新）。
413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头（HTTP 1.1新）。
414 Request URI Too Long URI太长（HTTP 1.1新）。
416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）
500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求。
501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求。
502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。
503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头。
504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）
505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本。（HTTP 1.1新）

HTTP 400 - 请求无效
HTTP 401.1 - 未授权：登录失败
HTTP 401.2 - 未授权：服务器配置问题导致登录失败
HTTP 401.3 - ACL 禁止访问资源
HTTP 401.4 - 未授权：授权被筛选器拒绝
HTTP 401.5 - 未授权：ISAPI 或 CGI 授权失败
HTTP 403 - 对 Internet 服务管理器 (HTML) 的访问仅限于 Localhost
HTTP 403.1 禁止访问：禁止可执行访问
HTTP 403.2 - 禁止访问：禁止读访问
HTTP 403.3 - 禁止访问：禁止写访问
HTTP 403.4 - 禁止访问：要求 SSL
HTTP 403.5 - 禁止访问：要求 SSL 128
HTTP 403.6 - 禁止访问：IP 地址被拒绝
HTTP 403.7 - 禁止访问：要求客户证书
HTTP 403.8 - 禁止访问：禁止站点访问
HTTP 403.9 - 禁止访问：连接的用户过多
HTTP 403.10 - 禁止访问：配置无效
HTTP 403.11 - 禁止访问：密码更改
HTTP 403.12 - 禁止访问：映射器拒绝访问
HTTP 403.13 - 禁止访问：客户证书已被吊销
HTTP 403.15 - 禁止访问：客户访问许可过多
HTTP 403.16 - 禁止访问：客户证书不可信或者无效
HTTP 403.17 - 禁止访问：客户证书已经到期或者尚未生效
HTTP 404.1 - 无法找到 Web 站点
HTTP 404 - 无法找到文件
HTTP 405 - 资源被禁止
HTTP 406 - 无法接受
HTTP 407 - 要求代理身份验证
HTTP 410 - 永远不可用
HTTP 412 - 先决条件失败
HTTP 414 - 请求 - URI 太长
HTTP 500 - 内部服务器错误
HTTP 500.100 - 内部服务器错误 - ASP 错误
HTTP 500-11 服务器关闭
HTTP 500-12 应用程序重新启动
HTTP 500-13 - 服务器太忙
HTTP 500-14 - 应用程序无效
HTTP 500-15 - 不允许请求 global.asa
HTTP 501 - 未实现
HTTP 502 - 网关错误

错误 602 The port is already open
问题：拨号网络网络由于设备安装错误或正在使用，不能进行连接
原因：RasPPPoE没有完全和正确的安装
解决：卸载干净任何PPPoE软件，重新安装。

错误 605 Cannot set port information
问题：拨号网络网络由于设备安装错误不能设定使用端口
原因：RasPPPoE没有完全和正确的安装
解决：卸载干净任何PPPoE软件，重新安装。

错误 606 The port is not connected
问题：拨号网络网络不能连接所需的设备端口
原因：RasPPPoE没有完全和正确的安装，连接线故障，ADSL MODEM故障
解决：卸载干净任何PPPoE软件，重新安装，检查网线和 ADSL MODEM。

错误 608 The device does not exist
问题：拨号网络网络连接的设备不存在
原因：RasPPPoE没有完全和正确的安装
解决：卸载干净任何PPPoE软件，重新安装。

错误 609 The device type does not exist
问题：拨号网络网络连接的设备其种类不能确定
原因：RasPPPoE没有完全和正确的安装
解决：卸载干净任何PPPoE软件，重新安装。

错误 611 The route is not available/612 The route is not allocated
问题：拨号网络网络连接路由不正确
原因：RasPPPoE没有完全和正确的安装，ISP服务器故障
解决：卸载干净任何PPPoE软件，重新安装。

错误 617 The port or device is already disconnecting
问题：拨号网络网络连接的设备已经断开
原因：RasPPPoE没有完全和正确的安装，ISP服务器故障，连接线，ADSL MODEM故障
解决：卸载干净任何PPPoE软件，重新安装， ，检查网线和 ADSL MODEM。

错误 619 问题：与ISP服务器不能建立连接
原因：ADSL ISP服务器故障，ADSL电话线故障
解决：检查ADSL信号灯是否能正确同步。

错误 621 Cannot open the phone book file
错误 622 Cannot load the phone book file
错误 623 Cannot find the phone book entry
错误 624 Cannot write the phone book file
错误 625 Invalid information found in the phone book
问题：Windows NT或者Windows 2000 Server网络RAS网络组件故障
原因：卸载所有PPPoE软件，重新安装RAS网络组件和RasPPPoE。

错误629，已经与对方计算机断开连接。 请双击此连接，再试一次。
如果出现这个问题，情况比较复杂，因为有多种情况可以导致"错误629"，多数情况是因为同时拨入的人数过多造成的。另外，在您的拨号连接设置中应该全部采取默认设置，如"启用软件压缩"、"登陆网络"都需要选上。一般来讲，此种情况也有可能是由于您所用的MODEM或电话线的性能和质量原因，以至于在您选定的通讯速率上不能很好地建立连接，还有一种情况就是： 如果您的电话开启了防盗打功能，在拨号时将有调制解调器的握手音，但握手音响后将出现错误629，如果有分机拨打电话，电话就会报警，只要把防盗打功能关掉就可以了。

错误 630
问题：ADSL MODEM没有没有响应
原因：ADSL电话线故障，ADSL MODEM故障（电源没打开等）
解决：检查ADSL设备。

错误 633
问题：拨号网络网络由于设备安装错误或正在使用，不能进行连接。
原因：RasPPPoE没有完全和正确的安装。
解决：卸载干净任何PPPoE软件，重新安装。

错误 638
问题：过了很长时间，无法连接到ISP的ADSL接入服务器
原因：ISP服务器故障；在RasPPPoE所创建的不好连接中你错误的输入了一个电话号码
解决：运行其创建拨号的Raspppoe.exe检查是否能列出ISP服务，以确定ISP正常;把所使用的拨号连接中的 电话号码清除或者只保留一个0。

错误 645
问题：网卡没有正确响应
原因：网卡故障，或者网卡驱动程序故障
解决：检查网卡，重新安装网卡驱动程序。

错误 650
问题：远程计算机没有响应，断开连接
原因：ADSL ISP服务器故障，网卡故障，非正常关机造成网络协议出错
解决：检查ADSL信号灯是否能正确同步，；检查网卡，删除所有网络组件重新安装网络。

错误 651
问题：ADSL MODEM报告发生错误
原因：Windows处于安全模式下，或其他错误
解决：出现该错误时，进行重拨，就可以报告出新的具体错误代码。

错误676，占线。 请稍后再试。
请先检查电话线是否有问题，请将电话线拔下，直接接在电话上，用电话拨要拨的ISP电话号码（比如163，169），听一听听筒里有没有类似传真音的尖叫声，如果有此声，说明您的电话可以拨号上网，请确认在"我的电脑"->"拨号网络"->"XXX连接（您的拨号连接）"中的电话号码在ISP电话号码前没有其他数字，如您是通过分机拨号，需在电话号码之前加外线号和逗号,例如"0，163"。如果在听筒中确为占线音，且占线频率极高。

错误678，拨入方计算机没有应答。
这种情况和占线有些类似，多为偶然现象，有时是因为调制解调器刚刚开启就拨号导致的，请先确认将电话线（连接电话局的那一根）插入调制解调器的"LINE"接口上。检查电话线是否有问题，请将电话线拔下，直接接在电话上，用电话拨要拨打的ISP电话号码（比如163，169），听一听听筒里有没有类似传真音的尖叫声，如果有此声，说明您的电话可以拨号上网，请确认"我的电脑"->"拨号网络"->"XXX连接（您的拨号连接）"中的电话号码在ISP电话号码之前没有其他数字，如您是通过总机拨号，需在电话号码之前加外线号和逗号,例如"0，163"。如果是占线音，请联系ISP客户服务部。如果没有任何声音或有提示音说您不能拨打此电话号码，那这说明您的电话线有问题。

错误680 没有拨号音。
出现这个错误，请检测调制解调器是否正确连到电话线，然后检查以下几个方面：
1、先检查电话线是否连接，如果没发现问题，请将电话线拔下，直接接在电话上，用电话拨要拨的ISP电话号码试一试（比如163，169），听一听听筒里有没有类似传真音的尖叫声，如果有此声，说明您的电话可以拨号上网，可能是刚才您拨号时有电话打进来，或是您的调制解调器有故障。 如果是占线音，请联系ISP客户服务部。如果没有任何声音或有提示音说您不能拨打此电话号码，那这说明您的电话线有问题。

错误 691
问题：输入的用户名和密码不对，无法建立连接
原因：用户名和密码错误，ISP服务器故障
解决：使用正确的用户名和密码，并且使用正确的ISP账号格式(name@service)。

错误 718
问题：验证用户名时远程计算机超时没有响应，断开连接
原因：ADSL ISP服务器故障
解决：致电2022370。

错误 720
问题：拨号网络无法协调网络中服务器的协议设置
原因：ADSL ISP服务器故障，非正常关机造成网络协议出错
解决：删除所有网络组件重新安装网络。


错误 734
问题：PPP连接控制协议中止
原因：ADSL ISP服务器故障，非正常关机造成网络协议出错
解决：删除所有网络组件重新安装网络。

错误 738
问题：服务器不能分配IP地址
原因：ADSL ISP服务器故障，ADSL用户太多超过ISP所能提供的IP地址
解决：致电2022370。

错误 797
问题：ADSL MODEM连接设备没有找到
原因：ADSL MODEM电源没有打开，网卡和ADSL MODEM的连接线出现问题，软件安装以后相应的协议没有正确邦定，在创立拨号连接时，建立了错误的空连接
解决：检查电源，连接线；检查网络属性，RasPPPoE相关的协议是否正确的安装并正确邦定（相关协议），检查网卡是否出现?号或!号，把它设置为Enable;检查拨号连接的属性，是否连接的设备使用了一个"ISDN channel-Adapter Name(xx)" 的设备，该设备为一个空设备，如果使用了取消它，并选择正确的PPPoE设备代替它，或者重新创立拨号连接。


ADSL登录错误代号认识.现在在家上网的人多了..大凡是用ADSL或电话拔号的吧~~没问题时你们不会想起它们..如果某天由你来设置联机的话你遇上错误代号咋办呢?如:错吴679~~~~~~~提示你不能正常使用网络.而你又不知道它的意思咋办...来认识一下.

也可以在开始菜单的帮助与支持里输入:679

这样可以给你最快的解决方案.....个人认为很实用~~

600 某操作处于挂起状态。

601 检测到一个无效端口句柄。

602 指定的端口已经打开。

603 呼叫方缓冲区太小。

604 指定了错误的信息。

605 无法设置端口信息。

606 指定的端口未连接。

607 检测到无效事件。

608 指定了一个不存在的设备。

609 指定了一个不存在的设备类型。

610 指定了一个无效的缓冲区。

611 指定了一个无法使用的路由。

612 指定了一个没有分配的路由。

613 指定了一种无效的压缩。

614 可用缓冲区不足。

615 找不到指定的端口。

616 某异步请求处于挂起状态。

617 调制解调器已经在断开连接。

618 指定的端口没有打开。

619 指定的端口没有连接。

620 无法确定端点。

621 系统无法打开电话簿。

622 系统无法加载电话簿。

623 系统无法找到此连接的电话簿项。

624 系统无法更新电话簿文件。

625 系统在电话簿中找到无效信息。

626 无法加载字符串。

627 无法找到关键字。

628 连接被关闭。

629 连接被远程计算机关闭。

630 由于硬件故障，调制解调器断开连接。

631 用户断开了调制解调器连接。

632 检测到不正确的结构大小。

633 调制解调器正在使用中或没有进行拨出配置。

634 您的计算机无法在远程网络上注册。

635 出现未知错误。

636 连接到端口的设备不是所期望的设备。

637 检测到不能转换的字符串。

638 请求超时。

639 异步网络不可用。

640 发生与 NetBIOS 有关的错误。

641 服务器不能分配支持客户端时所需的 NetBIOS 资源。

642 计算机的某个 NetBIOS 名已经在远程网络上注册。

643 服务器端的网络适配器出现故障。

644 您将无法接收网络弹出式消息。

645 发生内部身份验证错误。

646 此时不允许该帐户登录。

647 此帐户被禁用。
648 该帐户的密码已过期。

649 帐户没有拨入的权限。

650 远程访问服务器没有响应。

651 调制解调器报告错误。

652 有一个来自调制解调器的无法识别的响应。

653 在设备 .INF 文件部分中未找到调制解调器所需的宏。

654 设备 .INF 文件部分中的命令或响应引用了未定义的宏。

655 在设备 .INF 文件部分中未找到 宏。

656 设备 .INF 文件部分中的 宏包含未定义的宏。

657 无法打开设备 .INF 文件。

658 设备 .INF 或媒体 .INI 文件中的设备名太长。

659 媒体 .INI 文件引用了未知的设备名。

660 设备 .INF 文件不包含对命令的响应。

661 设备 .INF 文件缺少命令。

662 试图设置设备 .INF 文件部分中没有列出的宏。

663 媒体 .INI 文件引用了未知的设备类型。

664 系统内存不足。

665 未正确配置调制解调器。

666 调制解调器未正常工作。

667 系统不能读取媒体 .INI 文件。

668 连接被终止。

669 媒体 .INI 文件中的用法参数无效。

670 系统不能从媒体 .INI 文件中读取部分名称。

671 系统不能从媒体 .INI 文件中读取设备类型。

672 系统不能从媒体 .INI 文件中读取设备名称。

673 系统不能从媒体 .INI 文件中读取用法。

674 系统不能从媒体 .INI 文件中读取最大的连接速率 (bps)。

675 系统不能从媒体 .INI 文件中读取最大的载波连接速度。

676 电话线忙。

677 某人而不是调制解调器作出了应答。

678 没有应答。

679 系统无法检测到载波。

680 没有拨号音。

681 调制解调器报告常规错误。

691 因为用户名和/或密码在此域上无效，所以访问被拒绝。

692 调制解调器出现硬件故障。

695 未启动状态机。

696 已启动状态机。

697 响应循环未完成。

699 调制解调器的响应导致缓冲区溢出。

700 设备 .INF 文件中的扩展命令太长。

701 调制解调器使用了 COM 驱动程序不支持的连接速度。

703 连接需要您提供信息，但应用程序不允许用户交互。

704 回拨号码无效。

705 授权状态无效。

707 出现与 X.25 协议有关的错误。

708 帐户过期。

709 更改域上的密码时发生错误。密码可能太短或者可能与以前使用的密码匹配。

710 当与调制解调器通讯时检测到序列溢出错误。

711 无法启动“远程访问服务管理器”。事件日志中提供了其他信息。

712 双路端口正在初始化。等几秒钟再重拨。

713 没有活动的 ISDN 线路可用。

714 没有 ISDN 信道可用于拨号。

715 由于电话线质量差，所以发生过多错误。

716 远程访问服务 IP 配置不可用。

717 在远程访问服务 IP 地址的静态池中没有可用的 IP 地址。

718 等待远程计算机作出有效响应时连接超时。

719 连接被远程计算机终止。

721 远程计算机没有响应。

722 从远程计算机接收到无效的数据。该数据被忽略。

723 电话号码（包含前缀和后缀）太长。

726 IPX 协议不能用于在多个调制解调器上同时向外拨号。

728 系统找不到 IP 适配器。

729 除非安装 IP 协议，否则不能使用 SLIP。

731 未配置协议。

732 您的计算机和远程计算机的 PPP 控制协议无法一致。

733 您的计算机和远程计算机的 PPP 控制协议无法一致。

734 PPP 链接控制协议被终止。

735 请求的地址被服务器拒绝。

736 远程计算机终止了控制协议。

737 检测到环回。

738 服务器没有指派地址。

739 远程服务器所需的身份验证协议不能使用存储的密码。请重拨，并显式输入密码。

740 检测到无效拨号规则。

741 本地计算机不支持所需的数据加密类型。

742 远程计算机不支持所需的数据加密类型。

743 远程服务器要求数据加密。

751 回拨号码包含无效的字符。只允许有下列字符：0 到 9、T、P、W、(,)、-、@ 和 空格。

752 当处理脚本时遇到语法错误。

753 由于连接是由多协议路由器创建的，所以该连接无法断开。

754 系统无法找到多路链接束。

755 由于该项已经指定自定义的拨号程序，所以系统不能执行自动拨号。

756 已经拨打该连接。

757 远程访问服务不能自动启动。事件日志中提供了其他信息。

758 该连接上已经启用 Internet 连接共享。

760 启用路由功能时发生错误。
761 启用连接的 Internet 连接共享时发生错误。

..763 不能启用 Internet 连接共享。除了要共享的连接之外，还有两个或多个局域网连接。

..764 未安装智能卡阅读器。

..765 不能启用 Internet 连接共享。LAN 连接已经配置了自动 IP 定址所需的 IP 地址。

..767 不能启用 Internet 连接共享。专用网络上选定的 LAN 连接配置了多个 IP 地址。在启用 Internet 连接共享之前，请使用单个 IP 地址重新配置 LAN 连接。

..768 由于数据加密失败，导致连接尝试失败。

..769 指定的目的地是不可访问的。

..770 远程机器拒绝连接尝试。

..771 由于网络忙，导致连接尝试失败。

..772 远程计算机的网络硬件与请求的呼叫类型不兼容。

..773 由于目标号码已更改，导致连接尝试失败。

..774 临时故障导致连接尝试失败。请再次尝试连接。

..775 呼叫被远程计算机阻塞。

..776 由于目标已经调用“请勿打扰”功能，所以该呼叫无法连接。

..777 远程计算机上的调制解调器出现故障，导致连接尝试失败。

..778 不能验证服务器的身份。

..780 所尝试使用的功能对此连接无效。

..783 不能启用 Internet 连接共享。被选为专用网络的 LAN 连接不存在，或者已与网络断开连接。启用 Internet 连接共享前，请确保已连接 LAN 适配器。

..784 登录时无法使用该连接进行拨号，因为它配置使用的用户名和智能卡上的不一样。如果要在登录时使用它，必须对它进行配置以使用智能卡上的用户名。

..785 登录时无法使用该连接进行拨号，因为没有将其配置成使用智能卡。如果要在登录时使用它，必须编辑该连接的属性以便使用智能卡。

..788 L2TP 连接尝试失败，因为安全层无法与远程计算机协商兼容参数。

..789 L2TP 连接尝试失败，因为安全层在与远程计算机进行初始协商时遇到处理错误。

..791 L2TP 连接尝试失败，因为没有找到该连接的安全策略。

..792 L2TP 连接尝试失败，因为安全协商超时。

..793 L2TP 连接尝试失败，因为协商安全时发生错误。

..794 该用户的帧协议 RADIUS 属性不是 PPP。

..795 该用户的隧道类型 RADIUS 属性不正确。

..796 该用户的服务类型 RADIUS 属性既不是成帧也不是回拨成帧。

..797 无法建立到远程计算机的连接，因为找不到调制解调器或者调制解调器忙。

..799 由于网络上存在 IP 地址冲突，所以无法启用 Internet 连接共享 (ICS)。ICS 要求将主机配置成使用 192.168.0.1。请确保网络上没有其他客户端被配置成使用 192.168.0.1。

..800 无法建立 VPN 连接。可能无法连接 VPN 服务器，或者该连接的安全参数配置不正确。

 

 

 

浏览器兼容性了解

1.在同一个文件里针对不同的浏览器写她们各自调用的样式

针对属性：比如容器的height属性

IE6 专用  _height: 100px；

IE7 专用  *+height: 100px；

IE6、IE7  共用 *height: 100px；

IE7、FF  共用 height: 100px !important；

IE8、FF不认识* ，在CSS里加上*height:20px，IE8和FF就没有20px的高度；
 
针对样式： 比如ID 名为example 的样式
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */

 

2.IE6：设置为float的div在ie下设置的margin会加倍

在这个div里面加上display:inline此问题就解决了

 

3.文字下沉

在容器里加上：display:block;overflow:hidden;

 

4. IE与宽度和高度的问题 

IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两 个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。   
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：   
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

 

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当 做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为div指定一个类, 然后CSS这样设计：   
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}   
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。  

 

5.float的div闭合;清除浮动;自适应高度

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)  
这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签 闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会 产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}   

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。   
例如某一个wrapper如下定义：   
.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}   

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:  

  
  
  
   
  
比 如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决   
  
  
  
  
  
  
  
再嵌入一个float left而宽度是100%的DIV解决之  

④万能float 闭合(非常重要!)   
关 于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下 代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.   
/* Clear Fix */   
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }   
.clearfix { display:inline-block; }   
/* Hide from IE Mac */   
.clearfix {display:block;}   
/* End hide from IE Mac */   
/* end of clearfix */   
或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示} 

 

IE和Firefox的Javascript兼容性总结

长久以来JavaScript兼容性一直是Web开发者的一个主要问题。在正式规范、事实标准以及各种实现之间的存在的差异让许多开发者日夜煎熬。为此，主要从以下几方面差异总结IE和Firefox的Javascript兼容性:

　　一、函数和方法差异；

　　二、样式访问和设置；

　　三、DOM方法及对象引用；

　　四、事件处理；

　　五、其他差异的兼容处理。

 

一、函数和方法差异

1. getYear()方法

【分析说明】先看一下以下代码：

    
    
    
    

     
     
     
     var year= new Date().getYear();
document.write(year);
复制代码

　　在IE中得到的日期是"2010"，在Firefox中看到的日期是"110"，主要是因为在 Firefox 里面 getYear 返回的是 "当前年份-1900" 的值。

【兼容处理】

　　加上对年份的判断，如:

    
    
    
    

     
     
     
     var year= new Date().getYear();
year = (year<1900?(1900+year):year);
    
    
    
    

    
    
    
    

     
     
     
     document.write(year);
复制代码

　　也可以通过 getFullYear getUTCFullYear 去调用:

    
    
    
    

     
     
     
     var year = new Date().getFullYear();
document.write(year);
复制代码

 

2. eval()函数

【分析说明】在IE中，可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象；Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象。

【兼容处理】统一用getElementById("idName")来取得id为idName的HTML对象。

 

3. const声明

【分析说明】在 IE 中不能使用 const 关键字。如：

    
    
    
    

     
     
     
     const constVar = 32;

在IE中这是语法错误。

【兼容处理】不使用 const ，以 var 代替。

 

4. var

【分析说明】请看以下代码：

    
    
    
    

     
     
     
     echo=function(str){
 document.write(str);
}
    
    
    
    
pre>

　　这个函数在IE上运行正常，Firefox下却报错了。

【兼容处理】而在echo前加上var就正常了，这个就是我们提到var的目的。

 

5. const 问题

【分析说明】在 IE 中不能使用 const 关键字。如 const constVar = 32; 在IE中这是语法错误。

【解决方法】不使用 const ，以 var 代替。

 

二、样式访问和设置

1. CSS的"float"属性

【分析说明】Javascript访问一个给定CSS 值的最基本句法是：object.style.property，但部分CSS属性跟Javascript中的保留字命名相同，如"float"，"for"，"class"等，不同浏览器写法不同。

在IE中这样写：

    
    
    
    

     
     
     
     document.getElementById("header").style.styleFloat = "left";

在Firefox中这样写：

    
    
    
    

     
     
     
     document.getElementById("header").style.cssFloat = "left";

【兼容处理】在写之前加一个判断，判断浏览器是否是IE：

    
    
    
    

     
     
     
     if(document.all){
    
    
    
    

    
    
    
    

     
     
     
     　　document.getElementById("header").style.styleFloat = "left";
    
    
    
    

    
    
    
    

     
     
     
     }
else{
    
    
    
    

    
    
    
    

     
     
     
     　　document.getElementById("header").style.cssFloat = "left";
    
    
    
    

    
    
    
    

     
     
     
     }

 

2. 访问

【分析说明】和"float"属性一样，同样需要使用不现的句法区分来访问

在IE中这样写：

    
    
    
    

     
     
     
     var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");

在Firefox中这样写：

    
    
    
    

     
     
     
     var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");

【兼容处理】解决的方法也是先 判断浏览器类型。

 

3. 访问和设置class属性

【分析说明】同样由于class是Javascript保留字的原因，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。

IE8.0之前的所有IE版本的写法：

    
    
    
    

     
     
     
     var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

适用于IE8.0 以及 firefox的写法：

    
    
    
    

     
     
     
     var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

　　另外，在使用setAttribute()设置Class属性的时候，两种浏览器也存在同样的差异。

　　setAttribute("className",value);

　　这种写法适用于IE8.0之前的所有IE版本，注意：IE8.0也不支持"className"属性了。

　　setAttribute("class",value);适用于IE8.0 以及 firefox。

【兼容处理】

方法一，两种都写上：

    
    
    
    

     
     
     
     var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
    
    
    
    

    
    
    
    

     
     
     
      //设置header的class为classValue

方法二，IE和FF都支持object.className，所以可以这样写：

    
    
    
    

     
     
     
     var myObject = document.getElementById("header");
myObject.className="classValue";//设置header的class为classValue

方法三，先判断浏览器类型，再根据浏览器类型采用对应的写法。

 

4. 对象宽高赋值问题

【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效。

【兼容处理】统一使用 obj.style.height = imgObj.height + ‘px’;

 

三、DOM方法及对象引用

1. getElementById

【分析说明】先来看一组代码：

　　在Firefox中，按钮没反应，在IE中，就可以，因为对于IE来说，一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用，而Firefox中不可以。

【兼容处理】尽量采用W3C DOM 的写法，访问对象的时候，用document.getElementById("id") 以ID来访问对象，且一个ID在页面中必须是唯一的，同样在以标签名来访问对象的时候，用document.getElementsByTagName("div")[0] 。该方式得到较多浏览器的支持。

    
    
    
    

     
     
     
     

    
    
    
    

     
     
     
       οnclick="alert(document.getElementById('id').value)" />

 

2. 集合类对象访问

【分析说明】IE下，可以使用()或[]获取集合类对象；Firefox下，只能使用[]获取集合类对象。如：

    
    
    
    

     
     
     
     document.write(document.forms("formName").src);
    
    
    
    

    
    
    
    

     
     
     
     //该写法在IE下能访问到Form对象的scrc属性

 【兼容处理】将document.forms("formName")改为 document.forms["formName"]。统一使用[]获取集合类对象。

 

3. frame的引用

【分析说明】IE可以通过id或者name访问这个frame对应的window对象，而Firefox只可以通过name来访问这个frame对应的window对象。

　　例如如果上述frame标签写在最上层的window里面的htm里面，那么可以这样访问：

IE： window.top.frameId或者window.top.frameName来访问这个window对象；

Firefox：只能这样window.top.frameName来访问这个window对象。

【兼容处理】使用frame的name来访问frame对象，另外，在IE和Firefox中都可以使用window.document.getElementById(”frameId”)来访问这个frame对象。

 

4. parentElement

【分析说明】IE中支持使用parentElement和parentNode获取父节点。而Firefox只可以使用parentNode。 

【兼容处理】因为firefox与IE都支持DOM，因此统一使用parentNode来访问父节点。

 

5. table操作

【分析说明】IE下table中无论是用innerHTML还是appendChild插入都没有效果，而其他浏览器却显示正常。

【兼容处理】解决的方法是，将加到table的元素中，如下面所示：

     
     
     
     

      
      
      
      var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_text = document.createTextNode("插入的内容");
cell.appendChild(cell_text);
row.appendChild(cell);
document.getElementsByTagName("tbody")[0].appendChild(row);

 

6. 移除节点removeNode()和removeChild()

【分析说明】appendNode在IE和Firefox下都能正常使用，但是removeNode只能在IE下用。

　　removeNode方法的功能是删除一个节点，语法为node.removeNode（false）或者node.removeNode（true），返回值是被删除的节点。

　　removeNode（false）表示仅仅删除指定节点，然后这个节点的原孩子节点提升为原双亲节点的孩子节点。

　　removeNode（true）表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点，不再具有有孩子节点和双亲节点。

【兼容处理】Firefox中节点没有removeNode方法，只能用removeChild方法代替，先回到父节点，在从父节点上移除要移除的节点。

    
    
    
    

     
     
     
     node.parentNode.removeChild(node); 
    
    
    
    

    
    
    
    

     
     
     
      // 为了在ie和firefox下都能正常使用，取上一层的父结点，然后remove。

 

7. childNodes获取的节点

【分析说明】childNodes的下标的含义在IE和Firefox中不同，看一下下面的代码：

    
    
    
    

     
     
     
     
     
  
  • 1
    • 
  
  • 2
    • 
  
  • 3
    • 

 

    
    
    
    

     
     
     
     "alert(document.getElementById('main').childNodes.length)">

分别用IE和Firefox运行，IE的结果是3，而Firefox则是7。Firefox使用DOM规范，"#text"表示文本（实际是无意义的空格和换行等）在Firefox里也会被解析成一个节点，在IE里只有有实际意义的文本才会解析成"#text"。

【兼容处理】

方法一，获取子节点时，可以通过node.getElementsByTagName()来回避这个问题。但是 getElementsByTagName对复杂的DOM结构遍历明显不如用childNodes，因为childNodes能更好的处理DOM的层次结构。

方法二，在实际运用中，Firefox在遍历子节点时，不妨在for循环里加上：

    
    
    
    

     
     
     
     if(childNode.nodeName=="#text") continue;//或者使用nodeType == 1。

这样可以跳过一些文本节点。

延伸阅读

　　《IE和FireFox中的childNodes区别》

 

8. Firefox不能对innerText支持

【分析说明】Firefox不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。也可以用js写个方法实现，可参考《为firefox实现innerText属性》一文。

【兼容处理】通过判断浏览器类型来兼容：

    
    
    
    

     
     
     
     if(document.all){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}

 

四、事件处理

　　如果在使用javascript的时候涉及到event处理，就需要知道event在不同的浏览器中的差异，主要的JavaScript的事件模型有三种（参考《Supporting Three Event Models at Once》），它们分别是NN4、IE4+和W3C/Safar。

 

1. window.event

【分析说明】先看一段代码

    
    
    
    

     
     
     
     function et()
{ 
    alert(event);//IE: [object]
}

　　以上代码在IE运行的结果是[object]，而在Firefox无法运行。

　　因为在IE中event作为window对象的一个属性可以直接使用，但是在Firefox中却使用了W3C的模型，它是通过传参的方法来传播事件的，也就是说你需要为你的函数提供一个事件响应的接口。

【兼容处理】添加对event判断，根据浏览器的不同来得到正确的event：

    
    
    
    

     
     
     
     function et()
{ 
    evt=evt?evt:(window.event?window.event:null); 
    
    
    
    

    
    
    
    

     
     
     
      　　//兼容IE和Firefox
    alert(evt);
}

 

2. 键盘值的取得

【分析说明】IE和Firefox获取键盘值的方法不同，可以理解，Firefox下的event.which与IE下的event.keyCode相当。关于彼此不同，可参考《键盘事件中keyCode、which和charCode 的兼容性测试》

【兼容处理】

     
     
     
     

      
      
      
      function myKeyPress(evt){
     
     
     
     

     
     
     
     

      
      
      
          //兼容IE和Firefox获得keyBoardEvent对象
    evt = (evt) ? evt : ((window.event) ? window.event : "") 
     
     
     
     

     
     
     
     

      
      
      
           //兼容IE和Firefox获得keyBoardEvent对象的键值
    var key = evt.keyCode?evt.keyCode:evt.which; 
     
     
     
     

     
     
     
     

      
      
      
          if(evt.ctrlKey && (key == 13 || key == 10)){ 
     
     
     
     

     
     
     
     

      
      
      
       　　　　　　//同时按下了Ctrl和回车键
        //do something;
    }
}

 

3. 事件源的获取

【分析说明】在使用事件委托的时候，通过事件源获取来判断事件到底来自哪个元素，但是，在IE下，event对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。 

【兼容处理】

    
    
    
    

     
     
     
     ele=function(evt){ //捕获当前事件作用的对象
   evt=evt||window.event;
　　return
    
    
    
    

    
    
    
    

     
     
     
      　　(obj=event.srcElement?event.srcElement:event.target;);
}

 

4. 事件监听

【分析说明】在事件监听处理方面，IE提供了attachEvent和detachEvent两个接口，而Firefox提供的是addEventListener和removeEventListener。

【兼容处理】最简单的兼容性处理就是封装这两套接口：

     
     
     
     

      
      
      
      function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, function(){
     
     
     
     

     
     
     
     

      
      
      
      　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
     
     
     
     

     
     
     
     

      
      
      
       　　　　//此处使用回调函数call()，让this指向elem
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
     
     
     
     

     
     
     
     

      
      
      
      }
function removeEvent(elem, eventName, handler) {
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, function(){
     
     
     
     

     
     
     
     

      
      
      
      　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
     
     
     
     

     
     
     
     

      
      
      
       　　　　//此处使用回调函数call()，让this指向elem
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}

　　需要特别注意，Firefox下，事件处理函数中的this指向被监听元素本身，而在IE下则不然,可使用回调函数call，让当前上下文指向监听的元素。

 

5. 鼠标位置

【分析说明】IE下，even对象有x，y属性，但是没有pageX，pageY属性；Firefox下，even对象有pageX，pageY属性，但是没有x，y属性。 

【兼容处理】使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX。复杂点还要考虑绝对位置。

     
     
     
     

      
      
      
      function getAbsPoint(e){
    var x = e.offsetLeft, y = e.offsetTop;
    while (e = e.offsetParent) {
        x += e.offsetLeft;
        y += e.offsetTop;
    }
    alert("x:" + x + "," + "y:" + y);
}

 

五、其他差异的兼容处理

1. XMLHttpRequest

【分析说明】new ActiveXObject("Microsoft.XMLHTTP");只在IE中起作用，Firefox不支持，但支持XMLHttpRequest。

【兼容处理】

     
     
     
     

      
      
      
      function createXHR() {
    var xhr=null; 
    if(window.XMLHttpRequest){
        xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
    }else{ 
        try { 
            xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
        } 
        catch() { 
            xhr=null; 
        } 
    }
    if(!xhr)return;
    return xhr;
}

 

2. 模态和非模态窗口

【分析说明】IE中可以通过showModalDialog和showModelessDialog打开模态和非模态窗口，但是Firefox不支持。 

【解决办法】直接使用window.open(pageURL,name,parameters)方式打开新窗口。 如果需要传递参数，可以使用frame或者iframe。

 

3. input.type属性问题

IE下 input.type属性为只读，但是Firefox下可以修改

 

4. 对select元素的option操作

设置options，IE和Firefox写法不同：

Firefox:可直接设置

    
    
    
    

     
     
     
     option.text = 'foooooooo';

IE:只能设置

    
    
    
    

     
     
     
     option.innerHTML = 'fooooooo';

删除一个select的option的方法：

Firefox:可以

    
    
    
    

     
     
     
     select.options.remove(selectedIndex);

IE7:可以用

    
    
    
    

     
     
     
     select.options[i] = null;

IE6:需要写

    
    
    
    

     
     
     
     select.options[i].outerHTML = null;

 

5. img对象alt和title的解析

【分析说明】img对象有alt和title两个属性，区别在于，alt：当照片不存在或者load错误时的提示。

title：照片的tip说明, 在IE中如果没有定义title，alt也可以作为img的tip使用，但是在Firefox中，两者完全按照标准中的定义使用 

在定义img对象时。

【兼容处理】最好将alt和title对象都写全，保证在各种浏览器中都能正常使用 。

 

6. img的src刷新问题

【分析说明】先看一下代码：

    
    
    
    

     
     
     
     
    
    
    
    

     
     
     
         src="aa.jpg" style="cursor: pointer"/>

在IE 下，这段代码可以用来刷新图片，但在FireFox下不行。主要是缓存问题。

【兼容处理】在地址后面加个随机数就解决了: 

 

总结

　　IE和Firefox的Javascript方面存在着不少的差异，要做到兼容，我觉得很有必要把一些常见的整理成一个js库，如DOM的操作，事件的处理，XMLHttpRequest请求等，或者也可以选择使用现有的一些库(如jQuery，YUI，ExtJs等)，不过我觉得还是有必要了解一下这些差异，这样对于我们参加兼容性和可用性代码很有帮助。

　　办法总比问题多，无论浏览器兼容如何折腾人，做前端开发的总能迎刃而解的！

 

CSS 针对各个浏览器的兼容性

在网站设计的时候，应该注意 css 样式兼容不同浏览器问题，特别是对完全使用 DIV CSS 设计的网，就应该更注意 IE6 IE7 FF 对 CSS 样式的兼容，不然，你的网乱可能出去不想出现的效果！
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE6 专用 *height: 100px;
IE7 专用 *+height: 100px;
IE7 、 FF 共用height: 100px !important;
一、 CSS 兼容
以下两种方法几乎能解决现今所有兼容 .
1, !important ( 不是很推荐，用下面的一种感觉最安全 )
随着 IE7 对 !important 的支持 , !important 方法现在只针对 IE6 的兼容 .( 注意写法 . 记得该声明位置需要提前 .)
代码 :

2, IE6/IE77 对 FireFox
*+html 与 *html 是 IE 特有的标签 , firefox 暂不支持.而*+html又为IE7特有标签.
代码 :

注意 :
*+html 对 IE7 的兼容必须保证 HTML 顶部有如下声明：
代码 :

二、万能 float 闭合 ( 非常重要 !) 可以用这个解决多个 div 对齐时的间距不对，
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入 Global CSS 中 , 给需要闭合的 div 加上 class=”clearfix” 即可 , 屡试不爽 .
代码 :


三、其他兼容技巧 ( 相当有用 )
1, FF 下给 div 设置 padding 后会导致 width 和 height 增加 , 但 IE 不会 .( 可用 !important 解决 )
2, 居中问题 .
1). 垂直居中 . 将 line-height 设置为 当前 div 相同的高度 , 再通过 vetical-align: middle.( 注意内容不要换行 .)
2). 水平居中 . margin: 0 auto;( 当然不是万能 )
3, 若需给 a 标签内内容加上 样式 , 需要设置 display: block;( 常见于导航标签 )
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题 .
5, ul 标签在 FF 下面默认有 list-style. 和 padding . 最好事先声明 , 以避免不必要的麻烦 . ( 常见于导航标签和内容列表 )
6, 作为外部 wrapper 的 div不要定死高度,最好还加上overflow: hidden . 以达到高度自适应.
7, 关于手形光标 . cursor: pointer. 而 hand 只适用于 IE. 贴上代码 :
兼容代码 : 兼容最推荐的模式。
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
*html .submitbutton {
margin-top: 21px;
}
*+html .submitbutton {
margin-top: 21px;
}
什么是浏览器兼容：当我们使用不同的浏览器（ Firefox IE7 IE6 ）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写 CSS 的时候会很恼火，刚修复了这 个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个 CSS 里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！
最近微软发布的 IE7 浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担，虽然 IE7 已经走向标准化，但还是有许多和 FF 不同的地方，所以需要用 到 IE7 的兼容，有许多朋友问过 IE7 的兼容是什么，其实我也不知道。暂时还没找到 IE7 专用的兼容。除了前面那片文章，《针对 firefox ie6 ie7 的 css 样式》中的兼容方式也是很好用的。
有一点逻辑思想的人都会知道可以用 IE 和 FF 的兼容结合起来使用，下面介绍三个兼容，例如：（适合新手，呵呵，高手就在这里路过吧。）
程序代码
第一个兼容， IE FF 所有浏览器公用（其实也不算是兼容）
height:100px;
第二个兼容 IE6 专用
_height:100px;
第三个兼容 IE6 IE7 公用
*height:100px;
介绍完了这三个兼容了，下面我们再来看看如何在一个样式里分别给一个属性定义 IE6 IE7 FF 专用的兼容，看下面的代码，顺序不能错哦：
程序代码
height:100px;
*height:120px;
_height:150px;
下面我简单解释一下各浏览器怎样理解这三个属性：
在 FF 下，第 2 、 3 个属性 FF 不认识，所以它读的是 height:100px;
在 IE7 下，第三个属性 IE7 不认识，所以它读第 1 、 2 个属性，又因为第二个属性覆盖了第一个属性，所以 IE7 最终读出的是第 2 个属性 *height:120px;
在 IE6 下，三个属性 IE6 都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前 2 个属性，所以 IE6 最终读取的是第三个属性。
1 针对 firefox ie6 ie7 的 css 样式
现在大部分都是用 !important 来兼容，对于 ie6 和 firefox 测试可以正常显示，但是 ie7 对 !important 可以正确解释，会导致页面 没按要求显示！找到一个针对 IE7 不错的兼容方式就是使用 “*+html” ，现在用 IE7 浏览一下，应该没有问题了现在写一个 CSS 可以这样：
#1 { color: #333; }
* html #1 { color: #666; }
*+html #1 { color: #999; }
那么在 firefox 下字体颜色显示为 #333 ， IE6 下字体颜色显示为 #666 ， IE7 下字体颜色显示为 #999 。
2 css 布局中的居中问题
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义 TEXT-ALIGN: center; 这个的意思就是在父级元素内的内容居中；对于 IE 这样设定就已经可以了。
但在 mozilla 中不能居中。解决办法就是在子元素定义时候设定时再加上 “MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个 DIV 里，你可以依次拆出多个 div ，只要在每个拆出的 div 里定义 MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释 .
#box{
width:600px;
//for ie6.0- w/idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width :500px;
//for ie6.0-
}
4 浮动 ie 产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; // 这种情况之下 IE 会产生 200px 的距离 display:inline; // 使浮动忽略 }
这里细说一下 block,inline 两个元素 ,Block 元素的特点是 : 总是在新行上开始 , 高度 , 宽度 , 行高 , 边距都可以控制 ( 块元素 );Inline 元素的特点是 : 和其他元素在同一行上 ,… 不可控制 ( 内嵌元素 );
#box{ display:block; // 可以为内嵌元素模拟为块元素 display:inline; // 实现同一行排列的的效果 diplay:table;
5 IE 与宽度和高度的问题
IE 不认得 min- 这个定义，但实际上它把正常的 width 和 height 当作有 min 的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里 这两个值就不会变，如果只用 min-width 和 min-height 的话， IE 下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。要解决这个问题，可以这样：
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}
6 页面的最小宽度
min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但 IE 不认得这个，而它实际上把 width 当做最小宽度来使。为了让这一命令在 IE 上也能用，可以把一个

放到 标签下，然后为 div 指定一个类：
然后 CSS 这样设计：
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个 min-width 是正常的；但第 2 行的 width 使用了 Javascript ，这只有 IE 才认得，这也会让你的 HTML 文档不太正规。它实际上通过 Javascript 的判断来实现最小宽度。
7 清除浮动
. 兼容 box{
display:table;
// 将对象作为块元素级的表格显示
}
或者
. 兼容 box{
clear:both;
}
或者加入 :after （伪对象） , 设置在对象后发生的内容，通常和 content 配合使用， IE 不支持此伪对象，非 Ie 浏览器支持，所以并不影响到 IE/WIN 浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV 浮动 IE 文本产生 3 象素的 bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距 .
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
// 这句是关键
}
HTML 代码




9 属性选择器 ( 这个不能算是兼容 , 是隐藏 css 的一个 bug)
p[id]{}div[id]{}
p[id]{}div[id]{}
这个对于 IE6.0 和 IE6.0 以下的版本都隐藏 ,FF 和 OPera 作用
属性选择器和子选择器还是有区别的 , 子选择器的范围从形式来说缩小了 , 属性选择器的范围比较大 , 如 p[id] 中 , 所有 p 标签中有 id 的都是同样式的 .
10 IE 捉迷藏的问题
当 div 应用复杂的时候每个栏中又有一些链接， DIV 等这个时候容易发生捉迷藏的问题。
有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。
解决办法：对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用
margin 或 paddign 时。例：

p 对象中的内容



CSS ：
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法：在 P 对象上下各加 2 个空的 div 对象 CSS 代码： .1{height:0px;overflow:hidden;} 或者为 DIV 加上 border 属性。
屏蔽 IE 浏览器（也就是 IE 下不显示）
*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;}
这里 select 是选择符，根据情况更换。第二句是 MAC 上 safari 浏览器独有的。
仅 IE7 识别
*+html {…}
当面临需要只针对 IE7 做样式的时候就可以采用这个兼容。
IE6 及 IE6 以下识别
* html {…}
这个地方要特别注意很多地主都写了是 IE6 的兼容其实 IE5.x 同样可以识别这个兼容。其它浏览器不识别。
html >body select {……}
这句与上一句的作用相同。
仅 IE6 不识别
select { display :none;}
这里主要是通过 CSS 注释分开一个属性与值，流释在冒号前。
仅 IE6 与 IE5 不识别
select { display :none;}
这里与上面一句不同的是在选择符与花括号之间多了一个 CSS 注释。
仅 IE5 不识别
select { display:none;}
这一句是在上一句中去掉了属性区的注释。只有 IE5 不识别
盒模型解决方法
selct {width:IE5.x 宽度 ; voice-family :""}""; voice-family:inherit; width: 正确宽度 ;}
盒模型的清除方法不是通过 !important 来处理的。这点要明确。
清除浮动
select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
在 Firefox 中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个清除浮动的兼容来对父级做一次定义，那么就可以解决这个问题。
截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前 Firefox 并不支持。
只有 Opera 识别
@media all and (min-width: 0px){ select {……} }
针对 Opera 浏览器做单独的设定。
以上都是写 CSS 中的一些兼容，建议遵循正确的标签嵌套 (div ul li 嵌套结构关系 ) ，这样可以减少你使用兼容的频率，不要进入理解误区，并不是一个页面就需要很多的兼容来保持多浏览器兼容 ) ，很多情况下也许一个兼容都不用 也可以让浏览器工作得非常好，这些都是用来解决局部的兼容性问题，如果希望把兼容性的内容也分离出来，不妨试一下下面的几种过滤器。这些过滤器有的是写在 CSS 中通过过滤器导入特别的样式，也有的是写在 HTML 中的通过条件来链接或是导入需要的补丁样式。
IE5.x 的过滤器，只有 IE5.x 可见
@media tty {
i{content:"";}} @import ’ie5win.css’;
IE5/MAC 的过滤器，一般用不着
下面是 IE 的条件注释，个人觉得用条件注释调用相应兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面，当浏览器版本符合的 时候就可以调用那个被兼容的样式，这样不仅使用起来非常方便，而且对于制作这个 CSS 本身来讲，可以更严格的观察到是否有必要使用兼容，很多情况下，当我 本人写 CSS 如果把全部代码包括兼容都写到一个 CSS 文件的时候的时候会很随意，想怎么兼容就怎么兼容，而你独立出来写的时候，你就会不自觉的考虑是否有 必要兼容，是先兼容 CSS ？还是先把主 CSS 里面的东西调整到尽可能的不需要兼容？当你仅用很少的兼容就让很多浏览器很乖很听话的时候，你是不是很有成就感呢？你知道怎么选 择了吧～～呵呵
IE 的 if 条件兼容自己可以灵活使用参看这篇 IE 条件注释
Only IE
所有的 IE 可识别
只有 IE5.0 可以识别
Only IE 5.0+
IE5.0 包换 IE5.5 都可以识别
仅 IE6 可识别
Only IE 7/-
IE6 以及 IE6 以下的 IE5.x 都可识别
Only IE 7/-
仅 IE7 可识别
Css 当中有许多的东西不不按照某些规律来的话，会让你很心烦，虽然你可以通过很多的兼容，很多的 !important 来控制它，但是你会发现长此以往你会很不甘心，看看许多优秀的网站，他们的 CSS 让 IE6,Ie7,Firefox, 甚至 Safari,Opera 运行起 来完美无缺是不是很羡慕？而他们看似复杂的模版下面使用的兼容少得可怜。其实你要知道 IE 和 Firefox 并不不是那么的不和谐，我们找到一定的方法，是完全可以让他们和谐共处的。不要你认为发现了兼容的办法，你就掌握了一切，我们并不是兼容的奴隶。
div ul li 的嵌套顺序
今天只讲一个规则。就是
  • 的三角关系。我的经验就是
    在最外面，里面 是
      ，然后再是
    • ，当然
    • 里面又可以嵌套
      什么的，但是并不建议你嵌套很多 东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是
      里面放
    • ，而不 用
        的时候，你会发现你的间隙十分难控制，一般情况下， IE6 和 IE7 会凭空多一些间距。但很多情况你来到下一行，间隙就没了，但是前 面的内容又空了很大一块，出现这种情况虽然你可以改变 IE 的 Margin ，然后调整 Firefox 下面的 Padding ，以便使得两者显示起来得效果很相 似，但是你得 CSS 将变得臭长无比，你不得不多考虑更多可能出现这种问题补救措施，虽然你知道千篇一律来兼容它们，但是你会烦得要命。
        具体嵌套写法
        遵循上面得嵌套方式，
        < /div> 然后在 CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style.:none;} ，其中 list-style.:none 是不 让
      • 标记的最前方显示圆点或者数字等目录类型的标记，因为 IE 和 Firefox 显示出来默认效果有些不一样。因此这样不需要做任何手 脚，你的 IE6 、和 IE7 、 Firefox 显示出来的东西 ( 外距，间距，高度，宽度 ) 就几乎没什么区别了，也许细心的你会在某一个时刻发现一、两个象素的 差别，但那已经很完美了，不需要你通过调整大片的 CSS 来控制它们的显示了，你愿意，你可以仅仅兼容一两个地方，而且通常这种兼容可以适应各种地方，不需 要你重复在不同的地方调试不同的兼容方式 – 减轻你的烦。你可以 ul.class1, ul.class2, ul.class3 {xxx:xxxx} 的方式方便的整理出你要兼容的地方，而统一兼容。尝试一下吧，再也不要乱嵌套了，虽然在 Div+CSS 的方式下你几乎可以想怎么嵌套 就怎么嵌套，但是按照上面的规律你将轻松很多，从而事半功倍！

         

        使用JQuery 解决浏览器兼容性一例

        场景:当用户在名为abc的input控件按下回车键时,触发另一控件imgLogin的click事件

         

        在IE 中 document.getElementById('abc').click();能够调用abc的click事件

        但是在FF中却不行..

        必须以下这样:

         

        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", true, true);
        document.getElementById("imgLogin").dispatchEvent(evt);

         

        才能执行input控件的click 事件

         

        如果通过JQuery的话.

        $("#abc").keydown(function(e) {
                    if (e.keyCode == 13) {
                        $("#imgLogin").click();

                    }

        });

         

        就这样简单几句话就可以了,也不必要去判断浏览器

         

        console导致IE提示对象未定义错误解决

        1.console 只支持在firefox，不支持ie，把它注释掉就可以了。

        2.安装Firebug Lite
        具体安装方法查看Firebug Lite的主页
        http://getfirebug.com/lite.html

        3.添加一段javascript到页面中
        if (!window.console || !console.firebug)

        {
            var names         = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
                    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

            window.console         = {};
                    for (var i = 0; i < names.length; ++i)
                window.console[names[i]]         = function() {}
        }

        4.或直接下载firebugx.js
        http://getfirebug.com/firebug/firebugx.js

         

        下载文件时的提示“IE已阻止从此站点下载文件到您的计算机”

        1、在IE工具栏点击“工具”菜单栏下的“INTERNET选项” 点击弹出窗口的“隐私”选项卡，去掉“打开弹出窗口阻止程序”前面的勾。

        2、点击“安全”选项卡，点击“自定义级别”。启用 “文件下载的自动提示”。

         

        script语法错误

        jscript语法错误是指当jscript语句违反了jscript脚本语言的一条或多条语法规则时导致的错误。jscript语法错误发生在程序编译阶段，在开始运行该程序之前。（错误发生在开发过程中），以下是32个语法错误

        错误号描述
        十进制 十六进制 说明
        1001 800a03e9 内存不足
        1002 800a03ea 语法错误
        1003 800a03eb 需要＆#8220;：＆#8221;
        1004 800a03ec 需要＆#8220;；＆#8221;
        1005 800a03ed 需要＆#8220;(＆#8221;
        1006 800a03ee 需要＆#8220;)＆#8221;
        1007 800a03ef 需要＆#8220;]＆#8221;
        1008 800a03f0 需要＆#8220;{＆#8221;
        1009 800a03f1 需要＆#8220;}＆#8221;
        1010 800a03f2 需要标识符
        1011 800a03f3 需要＆#8220;=＆#8221;
        1012 800a03f4 需要＆#8220;/＆#8221;
        1013 800a03f5 无效数
        1014 800a03f6 非法字符
        1015 800a03f7 字符串常数未结束
        1016 800a03f8 注释未结束
        1018 800a03fa 函数外有＆#8217;return＆#8217;语句
        1019 800a03fb 在循环外不能有＆#8220;break＆#8221;
        1020 800a03fc 在循环外不能有＆#8220;continue＆#8221;
        1023 800a03ff 需要十六进制数
        1024 800a0400 需要＆#8220;while＆#8221;
        1025 800a0401 标签定义重复
        1026 800a0402 未找到标签
        1027 800a0403 一条＆#8220;switch＆#8221;语句中只能有一个＆#8220;default＆#8221;
        1028 800a0404 需要标识符、字符串或者数字
        1029 800a0405 需要＆#8221;
        1030 800a0406 条件编译已关闭
        1031 800a0407 需要常数
        1032 800a0408 需要＆#8220;@＆#8221;
        1033 800a0409 需要＆#8220;catch＆#8221;
        1034 800a040a 需要＆#8220;var＆#8221;
        1035 800a040b ＆#8220;throw＆#8221;的后面必须跟有一个表达式，且在同一源代码行上


        jscript运行时错误
        jscript运行时错误是指当jscript脚本试图执行一个系统不能运行的动作时导致的错误。当正在运行脚本、计算变量表达式、或者正在动态分配内存时出现jscript运行时错误时。
        以下是76个运行时错误

        错误号描述
        十进制 十六进制 说明
        5 800a0005 非法过程调用或参数
        6 800a0006 溢出
        7 800a0007 内存不足
        9 800a0009 下标超界
        10 800a000a 此数组被固定或临时锁定
        11 800a000b 零除错误
        13 800a000d 类型失配
        14 800a000e 串空间不足
        17 800a0011 不能执行所请求的操作
        28 800a001c 栈空间不足
        35 800a0023 子过程或函数未找到
        48 800a0030 装载dll出错
        51 800a0033 内部出错
        52 800a0034 坏文件名或数
        53 800a0035 文件未找到
        54 800a0036 坏文件模式
        55 800a0037 文件已经打开
        57 800a0039 设备i/o错误
        58 800a003a 文件已经存在
        61 800a003d 磁盘空间已满
        62 800a003e 输入超出文件尾
        67 800a0043 文件太多
        68 800a0044 设备不可用
        70 800a0046 权限禁用
        71 800a0047 磁盘未准备好
        74 800a004a 不能用不同的驱动重命名
        75 800a004b 路径/文件访问错误
        76 800a004c 路径未找到
        91 800a005b 对象变量或with块变量未设置
        92 800a005c for循环未初始化
        94 800a005e null使用无效
        322 800a0042 不能建立所需的临时文件
        424 800a01a8 需要对象
        429 800a01a9 automation服务器不能建立对象
        430 800a01ae 类不支持automation
        432 800a01b0 在automation操作中找不到文件名或类名
        438 800a01b6 对象不支持这个属性或方法
        440 800a01b8 automation错误
        445 800a01bd 对象不支持这个动作
        446 800a01be 对象不支持指定的参数
        447 800a01bf 对象不支持当前区域设置
        448 800a01c0 指定的参数未找到
        449 800a01c1 参数不可选
        450 800a01c2 错误的参数数目或非法属性分配
        451 800a01c3 对象不是一个集合
        453 800a01c5 指定的dll函数未找到
        458 800a01ca 变量使用了一个jscript不支持的automation类型
        462 800a01ce 远程服务器机器不存在或不可用
        501 800a01f5 不能分配给变量
        502 800a01f6 对象对于脚本不安全
        503 800a01f7 对象对于初始化不安全
        504 800a01f8 对象对建立不安全
        5000 800a1388 不能分配给＆#8220;this＆#8221;
        5001 800a1389 需要number类型
        5002 800a138a 需要function对象
        5003 800a138b 不能给函数返回值赋值
        5004 800a138c 不能索引对象
        5005 800a138d 需要string
        5006 800a138e 需要date对象
        5007 800a138f 需要object类型
        5008 800a1390 非法赋值
        5009 800a1391 未定义标识符
        5010 800a1392 需要boolean
        5011 800a1393 不能执行来自一个自由脚本的代码
        5012 800a1394 需要对象的成员
        5013 800a1395 需要vbarray
        5014 800a1396 需要jscript对象
        5015 800a1397 需要enumerator对象
        5016 800a1398 需要正则表达式对象
        5017 800a1399 正则表达式语法错误
        5018 800a139a 未预期的限定符
        5019 800a139b 正则表达式中缺少＆#8220;]＆#8221;
        5020 800a139c 正则表达式中缺少＆#8220;)＆#8221;
        5021 800a139d 字符集范围无效
        5022 800a139e 异常抛出，但无法抓住
        5023 800a139f 函数没有合法的prototype（原型）对象
        5024 800a13a0 待解码的uri包含有非法字符
        5025 800a13a1 待解码的uri编码非法
        5026 800a13a2 小数部分的位数越界
        5027 800a13a3 精度越界
        5028 800a13a4 需要array或arguments对象
        5029 800a13a5 数组长度必须为一有限正整数
        5030 800a13a6 必须赋给数组长度

         

         js判断浏览器的类型

         

        js判断浏览器的类型

        var request = false;

        var btype=getinternet(); 
        function getinternet()   
        {   
        if(navigator.userAgent.indexOf ("msie")>0) {   
                      return "msie";       //ie浏览器 
        } 
        if(isfirefox=navigator.userAgent.indexOf ("firefox")>0){   
                      return "firefox";     //firefox浏览器 
        } 
        if(issafari=navigator.userAgent.indexOf ("safari")>0) {   
                      return "safari";      //safan浏览器 
        } 
        if(iscamino=navigator.userAgent.indexOf ("camino")>0){   
                      return "camino";   //camino浏览器 
        } 
        if(ismozilla=navigator.userAgent.indexOf ("gecko/")>0){   
                      return "gecko";    //gecko浏览器 
        }   
        }  
        try {
          request = new xmlhttprequest();
        } catch (trymicrosoft) {
          try {
            request = new activexobject("msxml2.xmlhttp");//支持microsoft
          } catch (othermicrosoft) {
            try {
              request = new activexobject("microsoft.xmlhttp");//支持非microsoft
            } catch (failed) {
              request = false; 
            } 
        }
        }

        http报文详解


        HTTP请求报文解剖 

        HTTP请求报文由3部分组成（请求行+请求头+请求体）： 

         

        下面是一个实际的请求报文： 

         

        ①是请求方法，GET和POST是最常见的HTTP方法，除此以外还包括DELETE、HEAD、OPTIONS、PUT、TRACE。不过，当前的大多数浏览器只支持GET和POST，Spring 3.0提供了一个HiddenHttpMethodFilter，允许你通过“_method”的表单参数指定这些特殊的HTTP方法（实际上还是通过POST提交表单）。服务端配置了HiddenHttpMethodFilter后，Spring会根据_method参数指定的值模拟出相应的HTTP方法，这样，就可以使用这些HTTP方法对处理方法进行映射了。 

        ②为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL，③是协议名称及版本号。 

        ④是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。 

        ⑤是报文体，它将一个页面表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。 

        对照上面的请求报文，我们把它进一步分解，你可以看到一幅更详细的结构图： 

         


        引用

        HttpWatch是强大的网页数据分析工具，安装后将集成到Internet Explorer工具栏中。它不用代理服务器或一些复杂的网络监控工具，就能抓取请求及响应的完整信息，包括Cookies、消息头、查询参数、响应报文等，是Web应用开发人员的必备工具。



        HTTP请求报文头属性 

        报文头属性是什么东西呢？我们不妨以一个小故事来说明吧。 

        引用

        快到中午了，张三丰不想去食堂吃饭，于是打电话叫外卖：老板，我要一份[鱼香肉丝]，要12：30之前给我送过来哦，我在江湖湖公司研发部，叫张三丰。



        这里，你要[鱼香肉丝]相当于HTTP报文体，而“12：30之前送过来”，你叫“张三丰”等信息就相当于HTTP的报文头。它们是一些附属信息，帮忙你和饭店老板顺利完成这次交易。 

        请求HTTP报文和响应HTTP报文都拥有若干个报文关属性，它们是为协助客户端及服务端交易的一些附属信息。 

        常见的HTTP请求报文头属性

        Accept

        请求报文可通过一个“Accept”报文头属性告诉服务端 客户端接受什么类型的响应。

        如下报文头相当于告诉服务端，俺客户端能够接受的响应类型仅为纯文本数据啊，你丫别发其它什么图片啊，视频啊过来，那样我会歇菜的~~~：

        Java代码  Accept:text/plain 


        Accept属性的值可以为一个或多个MIME类型的值，关于MIME类型，大家请参考：http://en.wikipedia.org/wiki/MIME_type

        Cookie

        客户端的Cookie就是通过这个报文头属性传给服务端的哦！如下所示：
        Java代码  Cookie: $Version=1; Skin=new;jsessionid=5F4771183629C9834F8382E23BE13C4C 

        服务端是怎么知道客户端的多个请求是隶属于一个Session呢？注意到后台的那个jsessionid=5F4771183629C9834F8382E23BE13C4C木有？原来就是通过HTTP请求报文头的Cookie属性的jsessionid的值关联起来的！（当然也可以通过重写URL的方式将会话ID附带在每个URL的后面哦）。


        Referer

        表示这个请求是从哪个URL过来的，假如你通过google搜索出一个商家的广告页面，你对这个广告页面感兴趣，鼠标一点发送一个请求报文到商家的网站，这个请求报文的Referer报文头属性值就是http://www.google.com。

        引用

        唐僧到了西天.
        如来问：侬是不是从东土大唐来啊？
        唐僧：厉害！你咋知道的！
        如来：呵呵，我偷看了你的Referer...

         

        很多貌似神奇的网页监控软件（如著名的 我要啦），只要在你的网页上放上一段JavaScript，就可以帮你监控流量，全国访问客户的分布情况等报表和图表，其原理就是通过这个Referer及其它一些HTTP报文头工作的。

        Cache-Control

        对缓存进行控制，如一个请求希望响应返回的内容在客户端要被缓存一年，或不希望被缓存就可以通过这个报文头达到目的。

        如以下设置，相当于让服务端将对应请求返回的响应内容不要在客户端缓存：
        Java代码  Cache-Control: no-cache 


        其它请求报文头属性

        参见：http://en.wikipedia.org/wiki/List_of_HTTP_header_fields

        如何访问请求报文头

        由于请求报文头是客户端发过来的，服务端当然只能读取了，以下是HttpServletRequest一些用于读取请求报文头的API：

        Java代码  //获取请求报文中的属性名称 
        java.util.Enumeration   getHeaderNames(); 
         
        //获取指定名称的报文头属性的值 
        java.lang.String getHeader(java.lang.String name)  


        由于一些请求报文头属性“太著名”了，因此HttpServletRequest为它们提供了VIP的API：

        Java代码  //获取报文头中的Cookie(读取Cookie的报文头属性） 
         Cookie[]   getCookies() ; 
         
        //获取客户端本地化信息（读取 Accept-Language 的报文头属性） 
        java.util.Locale    getLocale()  
         
        //获取请求报文体的长度（读取Content-Length的报文头属性） 
        int getContentLength(); 


        HttpServletRequest可以通过
        Java代码  HttpSession getSession()  

        获取请求所关联的HttpSession,其内部的机理是通过读取请求报文头中Cookie属性的JSESSIONID的值，在服务端的一个会话Map中，根据这个JSESSIONID获取对应的HttpSession的对象。（这样，你就不会觉得HttpSession很神秘了吧，你自己也可以做一个类似的会话管理  ）



         

        HTTP响应报文解剖 

        响应报文结构 

        HTTP的响应报文也由三部分组成（响应行+响应头+响应体）： 

         

        以下是一个实际的HTTP响应报文： 

         

        ①报文协议及版本； 
        ②状态码及状态描述； 
        ③响应报文头，也是由多个属性组成； 
        ④响应报文体，即我们真正要的“干货”。 

        响应状态码 

        和请求报文相比，响应报文多了一个“响应状态码”，它以“清晰明确”的语言告诉客户端本次请求的处理结果。 

        HTTP的响应状态码由5段组成： 

        • 1xx 消息，一般是告诉客户端，请求已经收到了，正在处理，别急...
        • 2xx 处理成功，一般表示：请求收悉、我明白你要的、请求已受理、已经处理完成等信息.
        • 3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
        • 4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。
        • 5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。



        以下是几个常见的状态码： 

        200 OK 

        你最希望看到的，即处理成功！ 

        303 See Other 

        我把你redirect到其它的页面，目标的URL通过响应报文头的Location告诉你。 

        引用

        悟空：师傅给个桃吧，走了一天了 
        唐僧：我哪有桃啊！去王母娘娘那找吧



        304 Not Modified 

        告诉客户端，你请求的这个资源至你上次取得后，并没有更改，你直接用你本地的缓存吧，我很忙哦，你能不能少来烦我啊！ 

        404 Not Found 

        你最不希望看到的，即找不到页面。如你在google上找到一个页面，点击这个链接返回404，表示这个页面已经被网站删除了，google那边的记录只是美好的回忆。 

        500 Internal Server Error 

        看到这个错误，你就应该查查服务端的日志了，肯定抛出了一堆异常，别睡了，起来改BUG去吧！ 


        其它的状态码参见：http://en.wikipedia.org/wiki/List_of_HTTP_status_codes 

        有些响应码，Web应用服务器会自动给生成。你可以通过HttpServletResponse的API设置状态码：

        Java代码  //设置状态码，状态码在HttpServletResponse中通过一系列的常量预定义了，如SC_ACCEPTED，SC_OK 
        void    setStatus(int sc)  


        常见的HTTP响应报文头属性

        Cache-Control

        响应输出到客户端后，服务端通过该报文头属告诉客户端如何控制响应内容的缓存。

        下面，的设置让客户端对响应内容缓存3600秒，也即在3600秒内，如果客户再次访问该资源，直接从客户端的缓存中返回内容给客户，不要再从服务端获取（当然，这个功能是靠客户端实现的，服务端只是通过这个属性提示客户端“应该这么做”，做不做，还是决定于客户端，如果是自己宣称支持HTTP的客户端，则就应该这样实现）。

        Java代码  Cache-Control: max-age=3600 


        ETag

        一个代表响应服务端资源（如页面）版本的报文头属性，如果某个服务端资源发生变化了，这个ETag就会相应发生变化。它是Cache-Control的有益补充，可以让客户端“更智能”地处理什么时候要从服务端取资源，什么时候可以直接从缓存中返回响应。

        关于ETag的说明，你可以参见：http://en.wikipedia.org/wiki/HTTP_ETag。
        Spring 3.0还专门为此提供了一个org.springframework.web.filter.ShallowEtagHeaderFilter（实现原理很简单，对JSP输出的内容MD5，这样内容有变化ETag就相应变化了），用于生成响应的ETag，因为这东东确实可以帮助减少请求和响应的交互。

        下面是一个ETag：
        Java代码  ETag: "737060cd8c284d8af7ad3082f209582d" 


        Location

        我们在JSP中让页面Redirect到一个某个A页面中，其实是让客户端再发一个请求到A页面，这个需要Redirect到的A页面的URL，其实就是通过响应报文头的Location属性告知客户端的，如下的报文头属性，将使客户端redirect到iteye的首页中：

        Java代码  Location: http://www.iteye.com 


        Set-Cookie

        服务端可以设置客户端的Cookie，其原理就是通过这个响应报文头属性实现的：

        Java代码  Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1 

         

        其它HTTP响应报文头属性

        更多其它的HTTP响应头报文，参见：http://en.wikipedia.org/wiki/List_of_HTTP_header_fields


        如何写HTTP请求报文头

        在服务端可以通过HttpServletResponse的API写响应报文头的属性：

        Java代码  //添加一个响应报文头属性 
        void    setHeader(String name, String value)  


        象Cookie，Location这些响应都是有福之人，HttpServletResponse为它们都提供了VIP版的API：
        Java代码  //添加Cookie报文头属性 
        void addCookie(Cookie cookie)  
         
        //不但会设置Location的响应报文头，还会生成303的状态码呢，两者天仙配呢 
        void    sendRedirect(String location)  

         


         

        初探浏览器缓存实现原理 

        浏览器缓存将文件保存在客户端，好的缓存策略可以减少对网络带宽的占用，可以提高访问速度，提高用户的体验，还可以减轻服务器的负担。因此我们有必要了解它的实现原理，用来提高网站的性能。
        当一个客户端请求web服务器, 请求的内容可以从以下几个地方获取：服务器、浏览器缓存中或缓存服务器中。这取决于服务器端输出的页面信息。页面文件有三种缓存状态。
        1.最新的：选择不缓存页面，每次请求时都从服务器获取最新的内容。
        2.未过期的：在给定的时间内缓存，如果用户刷新或页面过期则去服务器请求，否则将读取本地的缓存，这样可以提高浏览速度。
        3.过期的：也就是陈旧的页面，当请求这个页面时，必须进行重新获取。

        页面的缓存状态是由http header决定的，一个浏览器请求信息，一个是服务器响应信息。主要包括Pragma: no-cache、Cache-Control、 Expires、 Last-Modified、If-Modified-Since。其中Pragma: no-cache由HTTP/1.0规定，Cache-Control由HTTP/1.1规定。

        Cache-Control的主要参数

        Cache-Control: private/public Public 响应会被缓存，并且在多用户间共享。 Private 响应只能够作为私有的缓存，不能再用户间共享。
        Cache-Control: no-cache：不进行缓存
        Cache-Control: max-age=x：缓存时间 以秒为单位
        Cache-Control: must-revalidate：如果页面是过期的 则去服务器进行获取。

        Expires：显示的设置页面过期时间
        Last-Modified：请求对象最后一次的修改时间 用来判断缓存是否过期 通常由文件的时间信息产生
        If-Modified-Since ：客户端发送请求附带的信息 指浏览器缓存请求对象的最后修改日期 用来和服务器端的Last-Modified做比较

        如IE的设置里面有四种方式(如图)的"每次访问页面检查"，用户使用重新加载或超过了过期日期，浏览器就会认为这个页面是陈旧的(它将发送附加一个If- Modified-Since的信息. 如果页面没有改变，服务器端响应一个304状态 Not Modified，而不发送整个页面，这样就会很快，但服务器必须要生成有效的Last-Modified headers且服务器时间必须是有效的。



        一个不进行缓存的服务器端响应

        HTTP/1.0 200 OK
        Content-Type: text/html
        Content-Length: 19662
        Pragma: no-cache
        Cache-Control: no-cache
        Server: Roxen/2.1.185
        Accept-Ranges: bytes
        Expires: Wed, 03 Jan 2001 00:18:55 GMT

        有时候仅仅设置Pragma: no-cache Cache-Control: no-cache 还是不保险，需要将过期时间设置成过去的时间就确保了对象不被缓存。

        一个允许缓存的服务器端响应

        HTTP/1.1 200 OK
        Date: Tue, 13 Feb 2001 14:50:31 GMT
        Server: Apache/1.3.12
        Cache-Control: max-age=43200
        Expires: Wed, 14 Feb 2001 02:50:31 GMT
        Last-Modified: Sun, 03 Dec 2000 23:52:56 GMT
        ETag: "1cbf3-dfd-3a2adcd8"
        Accept-Ranges: bytes
        Content-Length: 3581
        Connection: close
        Content-Type: text/html

        Cache-Control: max-age=43200 表示缓存12个小时

        我们来看一个浏览器缓存的具体例子
        第一次请求文件
        Request：
        GET /file.html HTTP/1.1
        Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd.ms-excel, application/msword, application/x-comet, */*
        Accept-Language: en-us
        Accept-Encoding: gzip, deflate
        User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
        Host: 24.5.203.101
        Connection: Keep-Alive

        Response：
        HTTP/1.1 200 OK
        Date: Tue, 13 Feb 2001 20:00:22 GMT
        Server: Apache
        Cache-Control: max-age=604800
        Last-Modified: Wed, 29 Nov 2000 15:28:38 GMT
        ETag: "1df-28f1-3a2520a6"
        Accept-Ranges: bytes
        Content-Length: 10481
        Keep-Alive: timeout=5, max=100
        Connection: Keep-Alive
        Content-Type: text/html

        这里返回了Last-Modified和ETag，这两个信息就是用来以后比较当前浏览器缓存的文件是否和服务器端文件一致，如果不一直就获取最新，一直则读取本地缓存。

        第二次请求
        Request：
        GET /file.html HTTP/1.1
        Accept: */*
        Accept-Language: en-us
        Accept-Encoding: gzip, deflate
        If-Modified-Since: Wed, 29 Nov 2000 15:28:38 GMT
        If-None-Match: "1df-28f1-3a2520a6"
        User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
        Host: 24.5.203.101
        Connection: Keep-Alive

        Response：
        HTTP/1.1 304 Not Modified
        Date: Tue, 13 Feb 2001 20:01:07 GMT
        Server: Apache
        Connection: Keep-Alive
        Keep-Alive: timeout=5, max=100
        ETag: "1df-28f1-3a2520a6"
        Cache-Control: max-age=604800

        请求中的If-None-Match信息就是第一次响应的ETag，用来验证和当前响应的ETag是否一致。服务器返回Not Modified，浏览器就读取本地缓存。

        我们还可以使用专门缓存服务器来改善性能。他的原理和浏览器的缓存原理一样，所有的浏览器请求将由缓存服务器响应，缓存服务器可以用自己的缓存文件或获取新的文件来响应用户的请求。因此有了缓存服务器的，将大大提高网站的性能。



        象Cookie，Location这些响应都是有福之人，HttpServletResponse为它们都提供了VIP版的API： 

        Java代码  收藏代码

        1. //添加Cookie报文头属性  
        2. void addCookie(Cookie cookie)   
        3.   
        4. //不但会设置Location的响应报文头，还会生成303的状态码呢，两者天仙配呢  
        5. void    sendRedirect(String location)   


         浏览器缓存机制

         

        浏览器缓存机制，其实主要就是HTTP协议定义的缓存机制（如： Expires； Cache-control等）。但是也有非HTTP协议定义的缓存机制，如使用HTML Meta 标签，Web开发者可以在HTML页面的节点中加入标签，代码如下：

        html code
         

         

        上述代码的作用是告诉浏览器当前页面不被缓存，每次访问都需要去服务器拉取。使用上很简单，但只有部分浏览器可以支持，而且所有缓存代理服务器都不支持，因为代理不解析HTML内容本身。

        下面我主要介绍HTTP协议定义的缓存机制。

        Expires策略
        Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据，而无需再次请求。

        下面是宝宝PK项目中，浏览器拉取jquery.js web服务器的响应头：

        clip_image001
         

        注：Date头域表示消息发送的时间，时间的描述格式由rfc822定义。例如，Date: Mon,31 Dec 2001 04:25:57GMT。

        Web服务器告诉浏览器在2012-11-28 03:30:01这个时间点之前，可以使用缓存文件。发送请求的时间是2012-11-28 03:25:01，即缓存5分钟。

        不过Expires 是HTTP 1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略。

        Cache-control策略（重点关注）
        Cache-Control与Expires的作用一致，都是指明当前资源的有效期，控制浏览器是否直接从浏览器缓存取数据还是重新发请求到服务器取数据。只不过Cache-Control的选择更多，设置更细致，如果同时设置的话，其优先级高于Expires。

        http协议头Cache-Control    ：
         
        值可以是public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age

        各个消息中的指令含义如下：

        Public指示响应可被任何缓存区缓存。
        Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
        no-cache指示请求或响应消息不能缓存
        no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
        max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
        min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
        max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
         

        还是上面那个请求，web服务器返回的Cache-Control头的值为max-age=300，即5分钟（和上面的Expires时间一致，这个不是必须的,说明本地缓存文件时间有可能小于服务器文件的修改时间，这也是产生304的原因）。

         clip_image002

        Last-Modified/If-Modified-Since
        Last-Modified/If-Modified-Since要配合Cache-Control使用。

        l  Last-Modified：标示这个响应资源的最后修改时间。web服务器在响应请求时，告诉浏览器资源的最后修改时间。

        l  If-Modified-Since：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Last-Modified声明，则再次向web服务器请求时带上头 If-Modified-Since，表示请求时间。web服务器收到请求后发现有头If-Modified-Since 则与被请求资源的最后修改时间进行比对。若最后修改时间较新，说明资源又被改动过，则响应整片资源内容（写在响应消息包体内），HTTP 200；若最后修改时间较旧，说明资源无新修改，则响应HTTP 304 (无需包体，节省浏览)，告知浏览器继续使用所保存的cache（虽然已经过期）。

        Etag/If-None-Match
        Etag/If-None-Match也要配合Cache-Control使用。

        l  Etag：web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器觉得）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。

        l  If-None-Match：当资源过期时（使用Cache-Control标识的max-age），发现资源具有Etage声明，则再次向web服务器请求时带上头If-None-Match （Etag的值）。web服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。

        既生Last-Modified何生Etag？
        你可能会觉得使用Last-Modified已经足以让浏览器知道本地的缓存副本是否足够新，为什么还需要Etag（实体标识）呢？HTTP1.1中Etag的出现主要是为了解决几个Last-Modified比较难解决的问题：

        l  Last-Modified标注的最后修改只能精确到秒级，如果某些文件在1秒钟以内，被修改多次的话，它将不能准确标注文件的修改时间

        l  如果某些文件会被定期生成，当有时内容并没有任何变化，但Last-Modified却改变了，导致文件没法使用缓存

        l  有可能存在服务器没有准确获取文件修改时间，或者与代理服务器时间不一致等情形

        Etag是服务器自动生成或者由开发者生成的对应资源在服务器端的唯一标识符，能够更加准确的控制缓存。Last-Modified与ETag是可以一起使用的，服务器会优先验证ETag，一致的情况下，才会继续比对Last-Modified，最后才决定是否返回304。

        用户行为与缓存
        浏览器缓存行为还有用户的行为有关！！！

        用户操作

        Expires/Cache-Control

        Last-Modified/Etag

        地址栏回车

        有效

        有效

        页面链接跳转

        有效

        有效

        新开窗口

        有效

        有效

        前进、后退

        有效

        有效

        F5刷新

        无效

        有效

        Ctrl+F5刷新

        无效

        无效

         

        总结
        浏览器第一次请求：

        clip_image004

        浏览器再次请求时：

        clip_image006

         

        个人总结：上面所讲的缓存机制均是对于本地文件缓存而言。需要注意的是假如第一个请求到服务器，由于是

        第一次请求，自然本地就没有缓存文件，此时服务器会返回请求的资源信息状态码是200，当然同时会把一些相应头信息返回，如Last-Modified文件的修过时间，以及expire过期时间，注意一点是浏览器本地缓存文件的日期是根据countrl-catch里面的max-mag浏览器生成的，此日期只能比服务器文件修改时间短，这也是产生304的问题根本。当第二次请求时候，这里需要说明以下，譬如对于图片来说，本地缓存文件中一般会保存一份该图片第一次返回过来时候得响应头信息，我们也可以把他理解为缓存文件的数据库，还有一份是真实的数据如图片，文档等等。每次请求时候，浏览器都会去本地缓存文件中读取这些数据库文件，然后根据文件中的响应头信息，如会找到是否包含last-modify字段，然后再本地找相应的缓存文件，注意这样一种情况，当第二次请求某个资源时候，浏览器查到本地的数据库响应文件发现文件里面包含last-modify字段值，而且没有过期，正常的他会去读本地缓存文件，可此时我手动把浏览器的缓存文件删除了在，只保留了响应头数据文件，那么此时浏览器就报错，错误信息是无法找到文件。

你可能感兴趣的:(web)

  • 理解Gunicorn：Python WSGI服务器的基石 范范0825 ipythonlinux运维
    理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
  • Google earth studio 简介 陟彼高冈yu 旅游
    GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
  • PHP环境搭建详细教程 好看资源平台 前端php
    PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • git - Webhook让部署自动化 大猪大猪
    我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验 张风捷特烈 iderust开发语言后端
    theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Java爬虫框架（一）--架构设计 狼图腾-狼之传说 java框架java任务html解析器存储电子商务
    一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
  • Java：爬虫框架 dingcho Javajava爬虫
    一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
  • MongoDB知识概括 GeorgeLin98 持久层mongodb
    MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
  • Python实现下载当前年份的谷歌影像 sand&wich python开发语言
    在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像
  • Spring MVC 全面指南：从入门到精通的详细解析 一杯梅子酱 技术栈学习springmvcjava
    引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
  • Spring Boot中实现跨域请求 BABA8891 springboot后端java
    在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
  • WebMagic：强大的Java爬虫框架解析与实战 Aaron_945 Javajava爬虫开发语言
    文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
  • 00. 这里整理了最全的爬虫框架（Java + Python） 有一只柴犬 爬虫系列爬虫javapython
    目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
  • 【Golang】实现 Excel 文件下载功能 RumIV Golanggolangexcel开发语言
    在当今的网络应用开发中，提供数据导出功能是一项常见的需求。Excel作为一种广泛使用的电子表格格式，通常是数据导出的首选格式之一。在本教程中，我们将学习如何使用Go语言和GinWeb框架来创建一个Excel文件，并允许用户通过HTTP请求下载该文件。准备工作在开始之前，请确保您的开发环境中已经安装了Go语言和相关的开发工具。此外，您还需要安装GinWeb框架和excelize包，这两个包都将用于我
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • metaRTC8.0，一个全新架构的webRTC SDK库 metaRTC webrtc音视频
    概述metaRTC8.0是metaRTC开源以来架构变化最大的一个版本，是metaIPC3.0等高性能的基础。metaRTC8.0是一个全新架构版本，并非在metaRTC7.0版本上简单升级，在QOS/语音对讲/内存占用/视频文件录制读取等方面新增多个模块，在弱网对抗/语音对讲/内存优化等效果上有显著提升。metaRTC8.0在一年多的开发中进行了近200次迭代，metaRTC8.0社区版计划在2
  • metaRTC/webRTC QOS 方案与实践 metaRTC metaRTC解决方案webrtcqos
    概述质量服务(QOS/QualityofService)是指利用各种技术方案提高网络通信质量的技术，网络通信质量需要解决下面两个问题：网络问题：UDP/不稳定网络/弱网下的丢包/延时/乱序/抖动数据量问题：发送数据量超带宽负载和平滑发送拥塞控制是各种技术方案的数据基础，丢包恢复解决丢包问题，抗乱序抖动解决网络乱序抖动问题，流量控制解决平滑发送数据/数据超带宽负载/延时问题。拥塞控制(Congest
  • metaRTC5.0 API编程指南(一) metaRTC metaRTCc++c语言webrtc
    概述metaRTC5.0版本API进行了重构，本篇文章将介绍webrtc传输调用流程和例子。metaRTC5.0版本提供了C++和纯C两种接口。纯C接口YangPeerConnection头文件:include/yangrtc/YangPeerConnection.htypedefstruct{void*conn;YangAVInfo*avinfo;YangStreamConfigstreamco
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • 原力元宇宙：Web3时代下的虚拟现实融合与普通人逆袭的机遇 口碑信息传播者
    在数字化浪潮席卷全球的今天，一个崭新的概念——原力元宇宙，正以其独特的魅力吸引着越来越多的目光。作为元宇宙国际性的一个项目，原力元宇宙不仅融合了Web3第三代互联网的前沿技术，更将虚拟现实与现实生活紧密相连，为我们描绘出一幅前所未有的数字新世界画卷。13分钟视频内容讲明白原力元宇宙创富项目，中国区运营服务对接微信：ForceZen原力元宇宙，是一个时代的跨越，它代表着互联网技术的又一次革新。Web
  • html+css网页设计 旅游网站首页1个页面 html+css+js网页设计 htmlcss旅游
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
  • bat+ffmpeg批处理图片，图片批量转码 张雨zy 音视频ffmpeg
    直接在cmd中输入//批量转码文件for%ain("*.png")doffmpeg-i"%a"-fs1024k"%~na.webp"//删除所有pngdel*.png@echooff表示执行了这条命令后关闭所有命令(包括本身这条命令)的回显。而echooff命令则表示关闭其他所有命令(不包括本身这条命令)的回显，@的作用就是关闭紧跟其后的一条命令的回显脚本完整代码写入脚本中后，需要多加一个%，例如
  • css设置当字数超过限制后以省略号（...）显示 周bro css前端vuecss3html经验分享
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l