HTML与css杂项

目录结构

doc
src
    css
    img
    js
        404.html
        index.html
        robots.txt
        humans.txt
        favicon.icon
.editorconfig---IDE配置代码风格文件
.gitignore---配置git忽略文件
LECENSE.txt---版权声明
README.md---项目简介,使用方式,相关链接
CHANGELOG.md---版本更新说明

设备尺寸与分辨率

尺寸

物理像素--实际发光的点,在视网膜屏上会是两个物理像素组成1px;
px--是屏幕实际显示的一个点,浏览器默认字体是16px;
em--相对父元素的尺寸,在html设置font-size为62.5%后,1em=10px;如果父元素为2em,再将子元素也设置2em,则此时子元素相对于根元素为4倍;
rem--只相对于根元素的尺寸;

媒体查询

　　@media all[媒体类型] and (min-800px) and (orientation:landscape){...}
　　　返回真或假,然后决定执行{...}
　　　媒体属性媒介:
　　　width,height---视口
　　　device-width/height---渲染表面/就是设备屏幕
　　　orientation---设备是纵向还是横向

布局相关

BFC与盒模型

BFC
一个独立渲染的盒子,内部不会影响到外面
成为BFC:
根元素;
float不为none;(浮动的元素?);
position:absolute,fixed;
overflow不为visible;
display:block,inline-block,table,table-cell,flex,inline-flex;
属性:
box垂直方向一个一个往下排列;
box的margin左边会接触到包含块的左边;
相邻的margin重叠;
BFC区域不会与float元素区域重叠;

inline
padding: 上下padding会将背景扩大,但是不会占据位置,不像block会将别的元素挤走;但是左右的和block一样;
margin: 上下无margin,左右有,左右方向margin,padding和块元素一样,上下方向无margin,padding会显示,但是不占据位置;
width,height: 都不起作用,内部大小由内部元素撑开;
无vertical-align,overflow;

float

clear:左右和both
a,b,c---a,c{float:left},b{clear:both}
左浮动 a 无 | 清除右浮动 b 无 | 左浮动 c 无

经典布局

圣杯布局
	.container{
		overflow:hidden;
		min- 500px;
	}
	.a{
		padding-bottom: 10000px;
		float:left;
		position:relative;
     	box-sizing: border-box; 
		margin-bottom: -10000px;
	}
	.center{
		 100%;
		background-color: blue;
		padding: 0 100px 0 100px;
		padding-bottom: 10000px;
	}
	.left{
		background-color: red;
		 100px;
		margin-left: -100%;
	}
	.right{
		 100px;
		background-color: yellow;
		margin-left: -100px;
	}

	<div class="container">
		<div class="a center">center</div>
		<div class="a left">left</div>
		<div class="a right">right</div>
	</div>

</div>
通过margin-left为负,来使元素移动,再padding使中间的内容居中,再left;
也可以将两侧的设置为absulute来实现margin-left效果

居中
1.水平居中-margin-left-right:auto;块元素-对浮动和绝对定位的无效;
2.垂直居中-text-align:center;inline或inline-block;
3.文字垂直居中-line-height:; 只能对于单行文字;
4.块元素内的 display:table-cell;verticla-align:middle;
--block margin:auto;
--inline-block text-align:center;
5.绝对定位 top,left:50% 然后margin-left-top:-xx ;
6.绝对定位 top,right,bottom,left :0; margin:auto; 然后改变定位偏移量还可以偏移.

设置等高列
a{100px;border:1px #333 solid; overflow:hidden;}
b,c{50px;float:left;padding-bottom:1000px;margin-botom:-1000px;}
b{bgcolor:red}
c{bgcolor:blue}
<a>
<b>XXXXX
<c>XXXXXXXXXXXXX
<d style="clear:both">
</a>
通过margin和padding,overflow设置自适应并且登高的列.
clear:both清除浮动引起的父元素坍塌.

负边距的使用
margin-top-left: 文档流位置发生变化,元素移动;
margin-bottom-right: 元素不移动,下方,右方的元素移动;
相对定位的top,left,right,bottom,元素移动,文档流位置不发生变化,还是占据原来的位置;

flex

cross 垂直方向
main 水平方向
axis 轴
box属性
    flex-direction 主轴的方向
        row 默认 水平左到右
        row-reverse 水平右到左
        column
        colum-reverse
    flex-wrap 一行排不下时换行规则
        nowrap 默认,不换行
        wrap 换行
        wrap-reverse 换行,右下往上排
    flex-flow 方向和换行的简写
    justify-content 对齐规则
        flex-start 默认 左对齐
        flex-end 右对齐
        center
        space-between 两端对齐 项目中间间隔相等
        space-around 两端对齐,项目中间间隔相等,两端有间隔,为中间间隔的一半
    align-items 在垂直轴上的对齐方式
        flex-start
        flex-end
        center
        stretch 默认 拉伸-当未设置高度或auto
        baseline 项目第一行文字基线对齐(文字底部)
    align-content 也是垂直轴的对齐,多根轴线才会起作用
        flex-start
        flex-end
        center
        stretch
        space-between
        space-around
item属性
    order 排列顺序
        flex-grow 放大比例 默认0(如果有多余位置)
        flex-strink 缩小比例 默认1 如果位置不足,会缩小(如果位置不够用)
        flex-basis 宽度
        flex:放大缩小宽度的简写 auto(1,1,auto)|none(0,0,auto),或自定义
        align-slef 用来覆盖align-items的值 默认auto,即继承父元素

meta

•meta--元数据
元数据不显示到页面,但是对于设备和浏览器是可读的

***<meta charset="">
***<meta name="将content属性关联到一个名称" content="属性">

SEO优化:
1.keywords 关键字
2.description 页面描述
3.robots

<!--

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；

index：文件将被检索；

follow：页面上的链接可以被查询；

noindex：文件将不被检索；

nofollow：页面上的链接不可以被查询。

-->

移动设备:

4.viewport 移动窗口设定

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>

5.伪装app 全屏离线使用

name="app-mobile-web-app-capable" content="yes"

6.隐藏,设置状态栏颜色--只有webapp下生效

name="apple-mobile-web-app-status-bar-style" content="black/black-translucent/default"

7.添加到主屏后的标题

name="apple-mobile-web-app-title" content="标题"

8.忽略数字自动识别成号码,忽略识别邮箱

name="format-detection" content="telephone=no" /"email=no"

9.添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

10.其他

<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->

<meta name="HandheldFriendly" content="true">

<!-- 微软的老式浏览器 -->

<meta name="MobileOptimized" content="320">

<!-- uc强制竖屏 -->

<meta name="screen-orientation" content="portrait">

<!-- QQ强制竖屏 -->

<meta name="x5-orientation" content="portrait">

<!-- UC强制全屏 -->

<meta name="full-screen" content="yes">

<!-- QQ强制全屏 -->

<meta name="x5-fullscreen" content="true">

<!-- UC应用模式 -->

<meta name="browsermode" content="application">

<!-- QQ应用模式 -->

<meta name="x5-page-mode" content="app">

<!-- windows phone 点击无高光 -->

<meta name="msapplication-tap-highlight" content="no">

页面相关:

1.

***<meta http-equiv="将content属性关联到一个http头部" content="">

1.expires(期限)

说明:设置网页到期时间,到期后,必须到服务器重新传输;

content="GTM时间格式"

2.pragma(cache模式)

说明:禁止浏览器从缓存中调阅页面--无法脱机使用

content="no-cache"

3.refresh(刷新)

说明:自动刷新页面,并指向新页面

content="x;URL=" x代表多少秒后跳转

4.Set-Cookie(cookie设定)

说明:如果网页过期,那么cookie也会被删除;

content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/";

5.Window-target(显示窗口的设定)

说明:强制页面独立使用--禁止调入别的页面的框架里使用

content="_top";

6.content-Type(设置页面字符集)

content="text/html;charset=utf-8"

7.优先使用edge和chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

或者<meta http-equiv="X-UA-Compatible" content="IE=8" >这样用,切换内核

8.<meta http-equiv="Cache-Control" content="no-siteapp" />

防止百度转码

<meta http-equiv="将content属性关联到一个http头部" content="">`

1.expires(期限)

2.pragma(cache模式)

3.refresh(刷新)

4.Set-Cookie(cookie设定)

•style
media属性--设置样式适用媒体 (是否没必要使用 局限性太大 没有移植性--直接在css文件中使用media)
•link--链接资源
可以用来加载图标到标题区域,也有media属性
•script
延迟脚本加载--defer
异步加载脚本--async 如果脚本不依赖顺序的执行 即与文档,其他脚本无关联 可以异步加载,例如收集客户数据.
•noscript

hack与CDN

ie兼容

gt大于 /gte 大于等于 /lt 小于 /lte 小于等于
<!--[if lte IE8]>
ie8及以下可见
<![endif]-->

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

动画效果

1.尽可能多的利用硬件能力，如使用3D变形来开启GPU加速
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
2.如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
3.如一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性
4.尽可能少的使用box-shadows与gradients,往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们，所以拥抱扁平化设计吧。
5.尽可能的让动画元素不在文档流中，以减少重排
position: fixed;
position: absolute;

其他

• 关于选择器优先级

js赋值 > 标签内 > (内联样式表和外连的优先级同等) ID > class > 标签选择
其中 优先级大的,无视优先级小的串联,如id>class.class同优先级的,串联多的优先 .class.class>.class;

• 将js在html末尾引入和加defer属性 是将js推迟到DOM加载完还是页面加载完?
  全部加载完--window.onload,$(window).load,defer.
  DOM加载完--$(window).read,$(function(){ });

yahoo军规

1.减少HTTP请求--合并css,js,图片;
2.利用CDN加速服务
3.Cache-control设置头文件过期或者静态缓存
4.启用Gzip压缩
5.css放顶部,使用户尽早看到网站完整样式
6.js尽量放在底部
7.避免css表达式
8.使用外联(如谷歌,百度的jquery文件),用户可能已经缓存
9.减少DNS查找
10.删除重复脚本
11.配置ETags
12.缓存AJax
13.尽早释放缓冲
14.用GET进行AJAX请求
15.延迟加载组件,如图片
16.预加载组件
17.减少DOM数量
18.跨域分离组件
19.减少iframe数量
20.no 404
21.减少cookie
22.对组件使用无cookie的域名
23.减少DOM访问次数
24.开发灵活的事件处理句柄
25.避免使用过滤器
26.css sprites--css精灵-多图组合
27.不使用缩放图
28.缓存icon
HTTP状态码
常见:
2XX 成功
3XX 重定向类
4XX 客户端错误
5XX 服务端错误
200 OK
301/302 重定向
404 未找到资源
501 服务器错误,无法提供服务