前端知識總結之H5C3篇

時間 2019-11-17

標籤前端知識總結 h5c3 欄目 C&C++ 简体版

原文原文鏈接

一. H5新增瞭如下的幾大類元素:

內容元素: header , nav , footer , section
表單控件: calender , date , time , email , url , search
本地存儲: localStorage 長期存儲數據,瀏覽器關閉後數據不會丟失, SessionStorage 數據在瀏覽器關閉以後自動刪除
媒介播放: video , audio
繪畫使用: canvas

二. 語義化的理解:

HTML語義化讓頁面的內容結構化,結構更清晰,便於對瀏覽器,搜索引擎解析;
在沒有css樣式的狀況下也能以一種文檔顯示,而且是容易閱讀的
利於SEO,語義化和搜索引擎創建良好的關係,有利於爬蟲抓取更多有效信息,爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重
便於團隊開發和維護,語義化更具可讀性,便於閱讀,維護和理解

三. XHTML和HTML有什麼區別?

XHTML文檔必須擁有根元素
XHTML元素必須被正確的嵌套
XHTML元素必須被關閉
標籤名必須用小寫字母

四. C3新特性有哪些?

動畫: animation
2D,3D轉換: transform
過分: transition
邊框圓角:border-radius, 陰影:box-shadow
盒子模型: box-sizing
文字陰影: text-shadow
背景: background-size, background-origin背景圖片原點
漸變: linear-gradient
伸縮佈局: flex
顏色: rgba()

五. 清除浮動有幾種方式?

父級元素設置height
結尾處加空div標籤clear:both
父級元素設置overflow: hidden / auto
使用僞類:after 必須設置content: '';

六. 媒體查詢的原理是什麼?

H5的新特性,使用@media查詢,你能夠針對不一樣的媒體類型定義不一樣的樣式

七. 流式佈局

按照頁面元素的寬度按照屏幕分辨率進行適配調整,但總體佈局不變,使用%百分比定義寬度,高度大都是用px來固定,可根據可視區域和父元素的實時尺寸來調整,儘量適應各類分辨率

八. 響應式佈局

主要實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式,經過響應式設計能使網站在手機和平板上有更好的瀏覽閱讀體驗

九. 性能優化

網絡通訊方法:(下降請求次數,下降傳輸量)css
- 文件合併
- 精靈圖
- 代碼壓縮
- 圖片的壓縮
- 啓用CDN託管服務
- 啓用gzip壓縮(網絡傳輸的壓縮),二進制壓縮,大概能夠壓縮爲原來的1/3
代碼層: (節省內存)canvas
- 儘可能不使用閉包
- 杜絕無效的循環
- 遞歸過程優化(添加緩存)
- 業務相關的業務邏輯優化

十. 如何居中一個元素

水平居中
- 行內元素水平居中
  - 父容器使用text-align: center設置
- 塊級元素水平居中
  - 將左右外邊距設置爲auto: margin: 0 auto
  - 將父元素設置爲相對定位,子元素絕對定位,向右移動子元素,距離爲父容器的一半,而後在向左移動自身的一半
```
<div class= "parent">
    <div class= "child"></div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
複製代碼
```
  - 父元素設置爲flex佈局,使用justify-content: center
  - 父元素設置爲flex佈局,子元素使用margin: 0 auto
- 浮動元素水平居中
  - 利用flex佈局,使用justify-content: center實現水平居中
- 絕對定位元素水平居中
  - 經過子元素絕對定位,外加margin: 0 auto實現
```
<div class= "parent">
    <div class= "child"></div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        margin: 0 auto;  /*水平居中*/
        left: 0;        /*不能省略,且爲0*/
        right: 0;       /*不能省略,且爲0*/
    }
</style>
複製代碼
```

垂直居中

單行行內元素垂直居中使用行高=高line-height
多行行內元素垂直居中
- 使用flex佈局,調整主軸方向爲縱向flex-direction: column,在使用justify-content: center

塊級元素垂直居中

使用絕對定位距離頂部50%,並設置margin-top向上偏移元素高度的一半(已知高度)

<div class= "parent">
    <div class= "child">固定高度的塊級元素垂直居中</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        height: 100px;
        margin-top: -50%;
    }
</style>
複製代碼

使用絕對定位+transform(未知高度)

<div class= "parent">
    <div class= "child">未知高度的塊級元素垂直居中</div>
</div>
<style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
</style>
複製代碼

使用flex佈局中align-items: center屬性,使子元素垂直居中

水平垂直居中

絕對定位與負邊距實現(已知寬高,兼容全部瀏覽器)

<div class= "parent">
        <div class= "child" style="width: 100px; height= 100px;"></div>
    </div>
    <style>
        .parent {
            position: relative;
        }
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -50px 0 0 -50px;
        }
    </style>
複製代碼

絕對定位+margin: auto(不須要知道寬高,不兼容低版本IE)

<div class= "parent">
        <div class= "child" style="width: 100px; height= 100px;"></div>
    </div>
    <style>
        .parent {
            position: relative;
            height: 200px;   /*父容器必須有高度*/
        }
        .child {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
複製代碼

絕對定位+translate

.parent {
    position: relative;
    height: 200px;   /*父容器必須有高度*/
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製代碼

flex佈局主軸對齊,側軸對齊(不兼容低版本IE)

.parent {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}
複製代碼

父元素flex佈局,子元素直接margin: auto便可(最簡單的,也不兼容低版本IE)

.parent {
    height: 100px;
    display: flex;
}
.child {
    margin: auto;
}
複製代碼

十一 . meta標籤有哪些特性? viewport的原理是什麼

meta標籤能夠用來作SEO優化,指定移動端viewport的展示形式,設置http請求,告訴瀏覽器緩存靜態資源的模式等等
- meta標籤的做用取決於定義的屬性和屬性值
  - charset: 定義文檔的字符編碼
  - name: 把content屬性鏈接到某個名稱
  - content: 定義與http-equiv或name屬性相關的信息
  - http-equiv: 把content屬性關聯到http頭部
viewport原理:
- 手機瀏覽器把頁面放在一個虛擬的窗口中,一般這個虛擬的窗口比屏幕寬,這樣就不用把每一個網頁擠到很小的窗口中,用戶能夠經過平移和縮放在看網頁的不一樣部分.

十二. 瀏覽器兼容問題

不一樣的瀏覽器的默認初始值不一樣 --->引入全局控制樣式
塊級標籤float後,又有橫行的margin的狀況下,在IE6顯示margin比設置的大 --->在float的標籤樣式控制中加入display:inline,將其轉化爲行內屬性
設置小於10px高度標籤,在IE6,7中沒法正常顯示設置高度 ---> 給超出高度的標籤設置overflow:hidden,或者設置行高line-height小於你設置的高度
圖片之間默認有間距 --->使用float屬性爲img佈局
行內元素設置display:block後採用float佈局,又有橫行的margin的狀況,IE6間距bug ---> 在display:block後面加入display:inline;display:table

十三. 盒子模型

margin(外邊距)+padding(內邊距)+border(邊框)+content(內容)

十四. 浮動元素引發的問題和解決辦法?

浮動會引發一下問題:
- 因爲浮動元素已脫離文檔流,因此父元素沒法被撐開,影響與父級元素同級的元素
- 與浮動元素同級的非浮動元素(內聯元素)會跟隨其後,也是因爲浮動元素脫離文檔流,不佔據文檔流中的位置
- 若是該浮動元素不是同級第一個浮動的元素,則他以前的浮動也會應該浮動,不然容易影響頁面結構
清除浮動的經常使用方法:
- 父級元素設置height
- 結尾處加空div標籤clear:both
- 父級元素設置overflow: hidden / auto
- 使用僞類:after 必須設置content: '';

十五. flexbox的使用場景

flex佈局的主要思想是讓容器有能力來改變項目的寬度和高度,以填滿能夠控件的能力,flexbox佈局是最合適的一個應用程序的組件,以及小規模的佈局,而網格佈局是用於較大規模的佈局.

十六. inline和inline-block的區別?

inline元素設置寬高屬性無效
inline元素不會獨佔一行,多個相鄰的行內元素會排列在同一行裏,直到一行排列不下,纔會換行,其寬度隨元素的內容而變化
inline元素的margin和padding屬性,水平方向的padding-left,padding-right,margin-left,margin-right都會產生邊距效果,垂直方向的padding-top,padding-bottom,magin-top,margin-bottom不會產生邊距效果