首页 > > 网页制作 > css >

chenxi的html学习笔记

2018-06-24 00:46:49来源：未知阅读 ()

0.本文主体源自：http://www.cnblogs.com/coco1s/p/4034937.html，有兴趣的可以直接去那里看，也可以看看我整理加拓展的。
1.浏览器内核：
1.ie：trident（三叉戟）内核
2.firefox：gecko（壁虎）内核
3.safari：webkit（浏览器核心）内核
4.opera：以前是presto（急速）内核，现在改用谷歌的blink（闪烁）内核
5.Chorme：blink（基于webkit，谷歌和opera software共同开发）

（附：浏览器内核的理解？）
浏览器内核分成两部分：渲染引擎和js引擎。

1.渲染引擎：负责取得网页内容、整理讯息，以及计算网页的显示方式，然后输出至显示器或打印机。浏览器的内核不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
2.js引擎：解析和执行js来实现网页的动态效果；

2.对web标准以及w3c的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索引擎机器人的搜索几率，正确的使用语义化标签，使用外链的css、js脚本，结构表现行为分离；容易维护，改版方便，不需要变动页面内容，提供打印版本而不需要复制内容、提高网站的易用性。

3.xhtml和html有什么区别
html是一种基本的web网页设计语言，xhtml是基于xml的标记语言
区别：
xhtml元素必须被正确的嵌套
xhtml元素必须被关闭
标签名必须使用小写
xhtml必须拥有根元素

（附：xml拓展）
什么是xml？
xml(extensible markup language)可拓展标记语言，是对超文本标记语言的补充。它是一种用来传输和存储数据的标准，一种独立于软件和硬件的信息传输工具。一种不同设备之间通讯协议。
4.Doctype
用于声明文档使用哪种规范（html/xhtml），一般分为严格（strict）和过度（Transitional）模式，基于框架的html文档。
Doctype不存在或者格式不正确会导致文档以兼容模式呈现；

（拓展：标准模式和兼容模式的区别？）
标准模式的排版和js运作都是以该浏览器支持的最高标准执行。
在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

（附：html5为什么只需要写<!DOCTYPE HTML>？）
1、html5不基于SGML(标准通用标记语言/Standard Generalized Markup Language)，因此不需要对DTD(文档类型声明/Document Type Declaration)进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）
2、HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

5.什么是BFC？
BFC （block formatting context块级格式化上下文）
它是一个独立的渲染区域，它规定了内部如何布局，并且与这个区域外部毫不相干
什么会生成BFC？
根元素：html
float不为none的浮动框
position为absolute、fixed
display为：inline-block,table-cell,flex,table-caption,inline-flex非块框的块容器
overflow不为visible的块框.
触发ie的hasLayout特性

（附1：display常用属性拓展）
每个元素默认都有一个display值，但是均可以被显式设置重写。
：none；将元素及其子元素从普通文档流中移除，如不存在过。
：inline；该元素生成一个或多个行内框，行内级元素所占的空间就是它的标签所定义的大小，无法设置上下margin、padding和宽高。
：block；该元素生成块级框。所有的块级元素开始于新的一行，延展到其容器的宽度；
：list-item；元素被渲染为列表项呈现的方式，确切的说就像是一个块级元素，但是会生成一个可以被list-style属性进行样式修饰的标记框。
：inline-
block；该元素生成一个块级别框，但是整个框的行为就像是一个内联元素。可以设置宽高等块级元素素的属性。然而ie6并不能识别该属性，但是使用inline-block在ie下会触发layout，从而使得内联元素有了inline-block的表症（设置宽高）。
解决方法：1.div{display:inline-block} // 先触发layout
div{display:inline} //再设置inline 必须分开成两步
2.直接设置为inline，再利用zoom来触发layout实现类似效果
div{*display:inline;*zoom:1}
(附1.1：zoom)
ie浏览器的专有属性，设置或检索对象的缩放比例，可以触发ie的hasLayout属性，清除浮动、清除margin的重叠。

（附2：ie中的hasLayout属性摘要）
haslayout是ie浏览器渲染引擎的一个内部组成部分，一个元素要么自己对自己的内容计算大小和组织。要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了hasLayout的属性，属性值可以为true或false。当一个元素的hasLayout属性值为true时，我们说这个元素有一个布局（layout），负责对自己和可能的子孙进行尺寸计算和定位.

6.quirks模式是什么？它和standards模式有什么区别？
在ie6之前版本，如果网页没有声明DTD，浏览器会向前兼容，采用兼容之前的布局方式。就是quirks模式，也叫做怪异模式。

区别：
盒模型：在w3c标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在quirks模式下，ie的宽度和高度还包含了padding和border；

设置行内元素的高宽:在标准模式下，给行内元素设置宽高都不会生效，而在quirks模式下，则会生效，上下margin也会生效。

设置百分比的宽高：在standards模式下，一个元素的宽高是由其包含的内容来决定的；如果父元素没有设置百分比的宽高，子元素设置一个百分比的宽高是无效的。而怪异模式下，子元素的百分比宽度生效，高度贼怪异（未知解答）。
（附：父元素未设置宽高，子元素百分比宽高ie8以下版本一样全部生效）

用margin：0 auto；设置水平居中：在标准模式下可以，而在怪异模式下则不行。

7.什么是语义化的html？
直观的认识标签，让页面内容结构化，便于对浏览器、搜索引擎解析，爬虫依赖于标签来确定上下文和各个关键字的权重，方便其他设备解析（屏幕阅读器、盲人阅读器、移动设备）。在没有css样式的时候也能以一种清晰的文档结构显示。

8.div+css的布局较table有什么优点？
改版的时候更方便，只需要更改css文件
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离
易于优化seo，排名更容易靠前。

9.img的alt和title有何区别？strong与em的区别？
alt属性能在图片加载失败的时候显示作为替换文字。
title属性可以为设置该属性的元素设置说明或建议性的文字，在鼠标移入时显示。

strong 表示强调内容的重要性，同时它带有默认样式加粗的标签；
em 表示更强烈的内容强调点，带有默认样式斜体的标签。

10.渐进增强和优雅降级之间的不同？
渐进增强：首先针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级：一开始就构建完整的功能，然后再针对低版本进行兼容。

区别：优雅降级从复杂的情况开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级意味着往回看，而渐进增强意味着朝前看，同时保证其根基处于安全地带。

12.描述一下cookie、sessionStorage和localStorage的区别？
sessionStorage用于本地存储一个session中的数据，这些数据只有在同一个会话页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage（包含sessionStorage和localStorage）和cookie的区别：
web storage的概念与cookie相似，区别是它是为了更大容量存储设计的。cookie的大小是受限的，并且每次发送请求新页面的时候cookie都会被发送过去，这样无形当中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
web storage拥有setItem，getItem，romoveItem，clear等方法，cookie需要开发者自己封装setCookie，getCookie。
Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而web storage仅仅是为了本地“存储”数据而生。

13.src与href的区别
src（source）指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档中，如js脚本，img图片和iframe等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，类似于将所指向资源嵌入当前标签内。
href（hypertext reference/超文本引用）指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加<link href="common.css" rel="stylesheet"/>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也就是为什么建议使用link方式加载css而不是使用@import方式。

（附1：css引入方式）
1.link
2.@import "style.css";/@import url("style.css")
(官方定义 import规则一定要先于除了@charset的其他任何css规则)
不建议使用@import的理由：
1.影响浏览器的并行下载
2.多个@import导致下载顺序紊乱
（附2：详解为什么要避免使用@import）
如果使用css @import，这样会导致css无法并行下载，在使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才会去下载，然后下载后开始解析、构建渲染树（render tree）等一系列操作，因此css @import 引起的css解析延迟会加长页面留白期。所以，要尽量避免使用css @import而尽量采用link标签的方式引入。
(拓展：link和@import的详细区别？)
1、link属于XHTML标签，除了加载css，还能用于定义RSS，定义rel链接属性等作用；而@import是CSS提供的，只能用于加载CSS。
2、页面被加载时，link会并行加载，而@import引用的CSS会等到页面被加载完再加载（详细如上。）
3、import是CSS2.1提出的，只在IE5以上才被识别，而linkXHTML标签无兼容问题；

14.css、js的性能优化，从用户刷新网页开始，一次js请求一般情况下哪些地方会有缓存处理？
dns缓存，cdn缓存，浏览器缓存，服务器缓存。
（附：缓存介绍）
DNS（Domain Name System/域名解析系统）：
短时间内多次访问某个网址，系统会设计一个本地“dns缓存”，当第一次访问chenxixunhan.com，dns返回了正确的ip后，系统就会将这个结果临时存储起来，这就是dns缓存。它会有一个失效时间，在这时间内，当再次访问时，系统会从电脑本地的dns缓存中把结果交还给你，而不必再去询问dns服务器，变相“加速”了网址的解析。
CDN（Content Delivery Network/内容分发网络）
通过在不同地点缓存内容，然后通过负载平衡等技术将用户请求定向到最近的缓存服务器上获取内容，提高用户访问网站的响应速度。
浏览器缓存
为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。
web服务器缓存
Web缓存服务器的应用模式主要是正向代理和反向代理。正向代理(Proxy)模式是代理网络用户访问internet，客户端将本来要直接发送到internet上源服务器的连接请求发送给代理服务器处理。正向代理的目的是加速用户在使用浏览器访问Internet时的请求响应时间，并提高广域网线路的利用率。正向代理浏览器无需和该站点建立联系，只访问到Web缓存即可。通过正向代理，大大提高了后续用户的访问速度，使他们无需再穿越Internet，只要从本地Web缓存就可以获取所需要的信息，避免了带宽问题，同时可以大量减少重复请求在网络上的传输，从而降低网络流量，节省资费。
反向代理(Reverse Proxy)模式是针对Web服务器加速功能的，在该模式中，缓存服务器放置在web应用服务器的前面，当用户访问web应用服务器的时候，首先经过缓存服务器，并将用户的请求和应用服务器应答的内容写入缓存服务器中，从而为后续用户的访问提供更快的响应。

15.页面大量图片，如何优化加载，优化用户体验？
1、图片懒加载。在页面的未可视区域添加一个滚动事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
2、如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
3、如果图片为css图片，可以使用CSSsprite，SVGsprite等技术。
4、如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
5、如果图片展示区域小于图片的真实大小，应在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

16.以前端的角度出发做好SEO(Search Engine Optimization/搜索引擎优化)需要考虑什么？
1、了解搜索引擎如何抓取网页和如何索引网页。
2、meta标签优化
包括主题（title），网站描述（description），和关键字（keywords）。还有其它的隐藏文字如author（作者），category（目录），language（编码语种）等。
（拓展：meta？（元信息/meta-information））
meta元素可提供有关页面的元信息，如针对搜索引擎和更新频度的描述。
位于文档头部，一种辅助性的标签（详细：https://zhidao.baidu.com/question/2052283721385566387.html）

3、如何选取关键词并在网页中放置关键词
搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先给网站确定关键词（一般在5个上下），然后针对这些关键字进行优化，包括关键词密度（Density），相关度（Relavacy），突出性（Prominency）等等。
4、了解主要的搜索引擎
对网站流量主要起决定作用的几个。
英文：Google，Yahoo，Bing等；
中文：百度，搜狗，有道等。
不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。各搜索门户和搜索引擎的关系。
5、主要的互联网目录。
6、按点击付费的搜索引擎
7、搜索引擎登录
8、链接交换和链接广泛度
9、合理的标签使用（详细链接http://www.jb51.net/css/238279.html 第十六点）

17.html5的新特性？处理html5标签的浏览器兼容问题？
htm5现在已经不是SGML的子集，主要关于图像、位置、存储，多任务等功能的增加；
1.绘画canvas；
2.用于媒介回放的video和audio
3.本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失。
4.sessionStorage的数据在浏览器关闭后自动删除；
5.语义化更好的内容元素，如article、footer、header、nav、section
6.表单控件，calendar、date、time、email、url、search；
7.新的计数webworker（多线程），websocket（双向通信），geolocation（地理定位）；（新的理解）

兼容性：
1.ie6~ie8支持通过document.createElement方法产生的标签,利用这一特性让这些浏览支持html5新标签，并需要添加默认样式。
2. 使用成熟的框架如：html5shiv；

18、从输入url到网页最终展现到用户面前，中间发生了什么？
1、输入地址
2、浏览器查找域名的ip地址
（包括dns查找：浏览器缓存->系统缓存->路由器缓存）
dns查找过程如下：
1、浏览器缓存——浏览器会缓存dns记录一段时间，但是操作系统不会告诉浏览器存储dns的记录事件，所以不同浏览器会自固定一个时间（2~30分钟）；
2、系统缓存——如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用，以便获得系统缓存中的记录；
3、路由器缓存——接着，请求发向路由器，它一般会有自己的dns缓存；
4、ISP（网络服务提供商）DNS缓存——接下来检查ISP缓存DNS的服务器。这里一般能找到相应的缓存记录。
5、递归搜索——ISP的DNS服务器从根域名服务器开始进行递归搜索，从com顶级域名服务器到example的域名服务器。
3、浏览器给web服务器发送一个HTTP请求
请求中可能包含存储该域名的cookies，也会存储登录用户名和密码以及一些用户设置等。
4、HTTP（超文本传输协议）请求的建立
建立TCP（传输控制协议）链接：在HTTP工作开始之前，web浏览器首先要通过网络与web服务器建立连接，该连接通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层的应用层协议。根据规则只有低层协议建立之后，才能进行更高层协议的连接。因此，首先要建立TCP链接，一般TCP链接的端口号是80。在TCP/IP协议中，TCP协议提供可靠的连接服务，采用三次握手建立一个连接。
第一次握手：主机A发送位码syn=1，随机产生seq（sequence序列号） number=1234567的数据包到服务器，主机B由syn=1知道，A要求建立联机；
第二次握手：主机B收到请求后确认联机信息，向A发送ack（Acknowledgement 确认信息） number=(主机A的seq+1)，syn=1，ack=1.随机产生seq=7654321的包；
第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1，以及位码syn是否为1，若正确，主机A会再发送ack number=（主机B的seq+1），ack=1；主机B收到后确认seq值与ack=1则链接建立成功。
完成三次握手，主机A与主机B开始传送数据。
一旦建立了TCP连接，web浏览器就会向web服务器发送请求命令。
浏览器发送其求命令之后，还要以头信息的形式向web服务器发送一些别的信息，之后浏览器发送一空白行来通知服务器，它已经结束了该头信息的发送。
5、服务器的永久重定向响应
服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“http://www.chenxixunhan.com/”而非"http://chenxixunhan.com/"。
为什么要重定向而不直接发回用户想看到的网页内容？
其中一个原因跟搜索引擎排名相关。
如果一个页面有两个地址，就像“http://www.chenxixunhan.com/”和"http://chenxixunhan.com/"，搜索引擎会认为他们是两个网站，结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向，会把访问带www的和不带www的地址归到同一个网站排名下。
还有一个原因是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时，它可能会在缓存里出现好几次。
HTTP/1.1 301 Moved Permanently
Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,
pre-check=0
Expires: Sat, 01 Jan 2000 00:00:00 GMT
Location: HTTP://www.facebook.com/
P3P: CP=”DSP LAW”
Pragma: no-cache
Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;
path=/; domain=.facebook.com; httponly
Content-Type: text/html; charset=utf-8
X-Cnection: close
Date: Fri, 12 Feb 2010 05:09:51 GMT
Content-Length: 0
6、浏览器跟踪重定向地址
现在，浏览器知道了“http://www.chenxixunhan.com/”才是要访问的正确地址，所以它会发送另一个获取请求也就是
GET HTTP://www.facebook.com/ HTTP/1.1
Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]Accept-Encoding: gzip, deflate
Connection: Keep-Alive
Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]Host: www.facebook.com
头信息以之前请求中的意义相同；
7、服务器“处理”请求
服务器接收到获取请求，然后处理返回一个响应。
8、服务器发回一个HTML响应
HTTP/1.1 200 OKCache-Control: private, no-store, no-cache, must-revalidate, post-check=0,pre-check=0Expires: Sat, 01 Jan 2000 00:00:00 GMTP3P: CP=”DSP LAW”Pragma: no-cacheContent-Encoding: gzipContent-Type: text/html; charset=utf-8X-Cnection: closeTransfer-Encoding: chunkedDate: Fri, 12 Feb 2010 09:05:55 GMT 2b3Tn@[...]整个响应大小为35kB，其中大部分在整理后以blob（二进制）类型传输。
内容编码头告诉浏览器整个响应体用gzip算法进行压缩。解压blob块后，你可以看到html文档。
关于压缩，头信息说明了是否缓存这个页面，如果缓存的话如何去做，有什么cookies要去设置（前面响应没有这点）和隐私信息等等。
注意：报头中把Content-type设置为“text/html”。报头让浏览器将该响应内容以HTML形式呈现，而不是以文件格式下载它。浏览器会根据报头信息决定如何解释该响应，不过同时也会考虑像URL扩展内容等其他因素。
9、浏览器开始显示HTML
在浏览器没有完整接受全部HTML文档时，它就开始显示这个页面了。
10、浏览器发送获取嵌入在HTML中的对象
在浏览器显示HTML时，它会注意到需要获取其它地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。
下面几个是一个叫雷锋的作者访问facebook.com时需要重获取的几个URL
* 图片
HTTP://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
HTTP://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
…* CSS 式样表
HTTP://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
HTTP://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
…* JavaScript 文件
HTTP://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
HTTP://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js

这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS查找这些域名，发送请求，重定向等等。
但不像动态页面那样，静态文件会允许浏览器对其进行缓存。有的文件可能不需要与服务器通讯，而从缓存中直接读取。服务器的相应中包含了静态文件保存的期限信息，所以浏览器知道要把它们缓存多长时间。还有，每个响应度可能包含像版本号一样的ETag（电子标签）头（被请求变量的实体值），如果浏览器观察到文件的版本ETag信息已经存在，就马上停止这个文件的传输。
11、浏览器发送异步（Ajax）请求
在web2.0伟大精神的指引下（。。。骚货），页面显示完成后客户仍与服务器端保持着联系。
以Facebook聊天功能为例，它会持续与服务器保持联系来及时更新你那写亮亮灰灰的好友状态。
为了更新这些头像亮着的好友状态，在浏览器中执行的javascript代码服务器发送异步请求。这个异步请求发送给特定的地址，它是一个按照程式构造的获取或发送请求。
facebook聊天功能提供了关于ajax一个有意思的问题案例：把数据从服务器端推送到客户端，因为HTTP是一个请求-响应协议，所以聊天服务器不能把新消息发给客户。取而代之的是客户端不得不隔几秒就轮询下服务器端看自己有没有新消息。
这些情况发生时长轮询是个减轻服务器负载挺有趣的技术。如果当被轮询时服务器没有新消息，它就不理这个客户端。而当尚未超时的情况下收到了该客户的新消息，服务器就会找到未完成的请求，把新消息作为响应返回给客户端。
（我擦，你可真是个磨人的小妖精，真尼玛能搞，源自：http://www.qdfuns.com/notes/15102/a5bee6b87d22ab0ecb28101f385db2e4.html）

（拓展：请求url响应返回状态代码及其文本描述？（详情：D:\notes_web_book\HTTP协议详解.pdf））
状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

常见状态代码、状态描述说明：
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的 URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后，可能恢复正常
eg：HTTP/1.1 200 OK

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有