原创 關於babel

babel是什麼? babel是一個javascript轉譯器,負責把ES6轉換爲ES5 爲什麼需要babel? 瀏覽器不能編譯新版本的javascript語法 babel相應版本 babel-preset-es2015 將es201

原创 HTML文檔基礎結構

HTML元素:HTML標籤成對出現的地方,而且上面包含一定的信息;DOCTYPE元素 :HTML頂級元素/根元素(只能包含head元素或者body元素); --文檔聲明,告訴瀏覽器使用哪個HTML版本進行解析head元素:HTML文檔的屬

原创 CSS僞類和僞元素;

僞類選擇器:你要獲取的選擇器對象在當前頁面找不到,它是抽象的;實例:a:hover {color:#FF00FF;} /* 鼠標劃過鏈接 *僞元素選擇器:你要獲取的選擇器存在於當前頁面;實例:p::first-line { color:#

原创 JS設計模式

什麼是模式? 已驗證的解決方案 容易被複用 富有表達力 什麼是設計模式? 設計模式是解決軟件設計常見問題的可複用方案 什麼是反模式? 反模式是一種針對某個特定問題的不良解決方案,該方案會導致槽糕的情況發生 定

原创 CommonJS、Requier、SeaJs(模塊加載器)

服務器端 CommonJS(同步加載) 1.文件即模塊 2.使用module.exports(exports) 暴露對外的接口 3.require同步加載依賴模塊 function area(r){ return Math

原创 HTML轉義字符(字符實體)

在 HTML 中,某些字符是預留的不能直接使用,如小於號(<)和大於號(>),直接使用HTML文檔解析會誤認爲它們是標籤。所以如果我們希望正確地顯示預留字符,那必須在 HTML 源代碼中使用字符實體(character entities)

原创 web性能優化手段

1、減少請求文件數;2、減少資源體積;3、提高網絡傳輸;減少請求文件數:小圖片合併雪碧圖或者使用iconfont;JS、CSS文件合併;...減少資源體積:精簡代碼;壓縮css、js、圖片;開啓Gzip(壓縮技術方案);提高網絡傳輸:使用

原创 css單位

絕對單位:px、in、pt、mm、cm相對單位:%、em、vm、vh、rem個人設計中常用的字體單位:px:像素,一個像素對應於計算機屏幕上的一個點(分辨率越高對應的點越多);em: 相對於瀏覽器默認字體大小的單位,如果瀏覽器默認字體大小

原创 CSS媒體查詢

媒體:設備(手機、平板、電腦);媒體解析:獲取不通屏幕尺寸(寬度和高度);根據媒體設計樣式:當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面;CSS 語法:@media mediatype and|not|only

原创 CSS網格佈局;

網格分析:N行N列組成網格(拐來拐去又變爲表格);在CSS佈局中我們只需要實現一行N列效果,然後組成多行多列:必須調整全局盒模型:* { box-sizing: border-box; }響應式網格視圖通常是 每行12 列,行寬度

原创 web模塊化

爲什麼需要模塊化 ? 業務發展>代碼量變大,難以維護 什麼是模塊化? 拆分代碼成多個文件>將特定功能的代碼放到同一個文件 模塊化優點: 1.模塊化有自己的命名空間,避免變量衝突; 2.使用對象創建命名空間能減少全局變量污染以及提高代碼

原创 什麼是 Viewport?

Viewport:就是你設備屏幕的可視寬度和高度;手機瀏覽器是把頁面放在一個虛擬的"窗口"(viewport)中(因爲當時你設計網頁的時候是按瀏覽器的寬度和高度來設計,現在突然放到你手機屏幕瀏覽而你手機屏幕尺寸太小了產生了衝突不協調),通

原创 塊級元素和行內元素

塊級元素:1、默認佔據整行的寬度;2、默認塊級元素前後自動換行;行內元素:1、同行顯示(不換行);2、寬度由內容決定;3、行內元素上下外邊距無效;由display屬性決定:block --定義爲塊級元素;inline --定義爲行內元素;

原创 HTML元素結構

單個元素結構如下:

原创 HTML樹型結構

HTML元素的嵌套展示最終形成一種HTML樹形結構;結構分兩種:豎型結構(父元素、子元素)、橫向結構(兄弟元素);父元素統稱祖先元素,子元素統稱後代元素;結構之間的關係如下: