图片的懒加载预加载及标签包含规范

一、HTML标签包含规范及行内元素，行内块元素、块元素
1、块元素可以包含块。行内等
2、行内元素可以包含行内元素，不要包含块
3、p标签不可包含h与div,而h是可以包含的

			1)块元素(大多为结构性标签)：div  p  h1-h6   ul-li  ol-li  dl-       hr等
			
			          块状元素特征：       (1)能够识别宽高
			　　　　　　　　　   (2)margin和padding的上下左右均对其有效
			　　　　　　　　   　(3)可以自动换行
			　　　　　　　　　   (4)多个块状元素标签写在一起，默认排列方式为从上至下
			
			2)行内元素 （行内大多为描述性标记） span  a  strong等
			
			             行内元素特征：(1)设置宽高无效
			　　　　　　　　　(2)对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
			　　　　　　　　　(3)不会自动进行换行，即一行显示
			3)行内块元素
			               行内块状元素特征：(1)不自动换行
			　　　　　　　　　　　        (2)能够识别宽高
			　　　　　　　　　　　        (3)默认排列方式为从左到右

二、样式的继承性
1、样式属性的继承性
字体系列属性 font-
文本系列属性除
元素可见性：visibility
表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style-type、list-style-image、list-style-position、list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性：page、page-break-inside、windows、orphans
声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、
pitch-range、stress、richness、、azimuth、elevation

2、关于盒子、定位、布局的属性，都不能继承。如height、width、border、padding、margin等 背景属性、定位属性等

三、图片的懒加载预加载 参考链接：https://juejin.im/post/5b0c3b53f265da09253cbed0

1、懒加载也叫延迟加载，是一种很好优化网页性能的方式。在长网页中用户滚动到它们之前，可视区域外的图像不会加载。在长网页上使用延迟加载将1）使网页加载更快 2）提高用户的体验。3）还可以帮助减少服务器负载。图片懒加载使用图片很多页面很长的网页设计中。
懒加载实现原理
首先将页面上的图片的 src 属性设为空字符串，而图片的真实路径则设置在data-original属性中，
当页面滚动的时候需要去监听scroll事件，在scroll事件的回调中，判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。

2、预加载就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。
好处：在网页全部加载之前，对一些主要内容进行预加载，给用户更好的体验，减少用户等待的时间。
预加载的实现

      （1）使用HTML标签  <img src=".jpg" />
      （2）使用Image对象 
                  var image= new Image()
                  image.src="http://........jpg"
      （3）使用XMLHttpRequest  异步对象,虽然存在跨域问题，但会精细控制预加载过程（ajax）

补充网页性能优化（如何提高网页加载速度 80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上）
（1）加快请求速度，预解析DNS，减少域名数
(2) 减少http请求（例如图片使用懒加载 CSS Sprites）
（3）增加本地缓存（Cookie,LocalStorge,SessionStorge）
（4）使用外部的js、css
（5）将样式表放在头部
（6）将脚本放在底部
（7）使用CDN CDN（内容发布网络）是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布请求内容，有助于缓和Web流量峰值压力
（8）文件图片的合并压缩。js精简，去除注释，使用简短的变量名等，css精简等
（9）避免重定向（将用户从一个URL重新路由到另一个URL） 当页面发生了重定向，就会延迟整个HTML文档的传输

四、单位
% 百分比
in 英寸
cm
mm
em(1em 等于当前的字体尺寸,2em 等于当前字体尺寸的两倍)可以自动适应用户所使用的字体
ex字体尺寸的一半
pt 1 pt 等于 1/72 英寸
pc
px像素 (计算机屏幕上的一个点)
rem
五、css媒介

	  @media 规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介
			<style>
			@media screen
			{
			    p.test {font-family:verdana,sans-serif; font-size:14px}
			}
			
			@media print
			{
			    p.test {font-family:times,serif; font-size:10px}
			}
			
			@media screen,print
			{
			   p.test {font-weight:bold}
			}

不同的媒介类型
all || print（用于打印机） || screen（用于电脑显示器）|| handheld（用于小的手持的设备） || tv用于电视机类型的设备

六、层叠上下文 有一些特定的CSS属性创建的

文档中的层叠上下文由满足以下任意一个条件的元素形成：
	根元素 (HTML),
	z-index 值不为 "auto"的 绝对/相对定位，
	一个 z-index 值不为 "auto"的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
	opacity 属性值小于 1 的元素
	transform 属性值不为 "none"的元素，
	mix-blend-mode 属性值不为 "normal"的元素，
	filter值不为“none”的元素，
	perspective值不为“none”的元素，
	isolation 属性被设置为 "isolate"的元素，
	position: fixed
	在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
	-webkit-overflow-scrolling 属性被设置 "touch"的元素

<----注意 : 其子元素的 z-index 值只在父级层叠上下文中有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元---->

准则 谁大谁上
后来居上