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-width: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-width: 500px;
    }
    .a{
        padding-bottom: 10000px;
        float:left;
        position:relative;
        box-sizing: border-box; 
        margin-bottom: -10000px;
    }
    .center{
        width: 100%;
        background-color: blue;
        padding: 0 100px 0 100px;
        padding-bottom: 10000px;
    }
    .left{
        background-color: red;
        width: 100px;
        margin-left: -100%;
    }
    .right{
        width: 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{width:100px;border:1px #333 solid; overflow:hidden;}
b,c{width: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 服務器錯誤,沒法提供服務