HTML、CSS知識學習與整理

時間 2019-12-12

標籤 html css 知識學習整理欄目 HTML 简体版

原文原文鏈接

命名

1.駝峯式命名法：css

(1) 大駝峯命名法：首字母大寫。
(2) 小駝峯命名法：首字母小寫。html

2.文件資源命名：web

(1) 不得含有空格。
(2) 建議只使用小寫字母，除了某些爲說明文件的狀況（如 README，LICENSE 等），通常均不使用大寫字母。
(3) 包含多個單詞時，單詞間使用半角的連詞線（-）分割。
(4) 引入資源使用相對路徑，通常狀況下不要指定資源所帶的具體協議。瀏覽器

3.變量命名：ide

(1) 命名方式：小駝峯式命名。
(2) 命名規範：類型+對象（如：numTitle）。svg

4.函數：函數

(1) 命名方式：小駝峯式命名。
(2) 命名規則：前綴爲動詞（如：getName）。佈局

5.常量：測試

(1) 命名方式：所有大寫。
(2) 命名規範：使用大寫字母和下劃線組合命名，使用下劃線來分割單詞。flex

6.類的成員：

(1) 公共屬性和方法：命名方式同變量命名，即小駝峯式命名。
(2) 私有屬性和方法：前綴爲下劃線，後面爲與公共屬性和方法同樣的命名方式，小駝峯式。

7.註釋：

(1) 單行註釋：雙斜槓與註釋文字之間保留一個空格。
(2) 代碼後註釋：雙斜線與代碼之間，與註釋文字之間均保留一個空格。
(3) 多行註釋：開始與結束至少三行，第一行爲 /* ，最後行爲 */ ，其餘行爲 * 開始，註釋文字均與 * 保留一個空格。
(4) 函數（方法）註釋：
1) 語法：

/**
 * 函數說明
 * @關鍵字
 */

2) 經常使用註釋關鍵字：
@param（參數）、@return（返回值）、@author（做者）、@version（版本）、@example（測試）

規範

1.HTML 規範：

(1) 文檔規範：使用 HTML5 的文檔聲明類型 <!DOCTYPE html>。
(2) 腳本加載：全部瀏覽器推薦，CSS 放在 <head> 裏，JS 放在 HTML 代碼下方，<body> 內部。
(3) 語義化：根據元素被創造出的初始意義使用，不要單一的使用 <div> 和 <span>，靈活使用正確的標籤。
(4) alt 屬性不爲空。
(5) 結構、表現、行爲三者分離。儘可能在文檔和模板中只包含結構性的 HTML；表現代碼移入樣式表中；動做行爲移入腳本中；爲了使三者之間的聯繫儘量小，在文檔和模板中應儘可能少的引入樣式和腳本文件。
(6) HTML 只關注內容。HTML 只顯示展現內容信息；儘可能不要引入特定的 HTML 結構來解決視覺設計效果；儘可能不要將 <img> 做爲專門作視覺設計的元素，<img> 與 <svg> 使用時的意義爲它呈現了與內容相關的信息。

2.CSS 規範：

(1) id 與 class 的命名能夠反映元素目的和用途。
(2) CSS 選擇器中避免使用標籤名。
(3) 儘可能使用子選擇器，如 .header>ul{...}。
(4) 儘可能使用縮寫屬性，如：background: #ffffff url(a.png) no-repeat fixed top;。
(5) 0後儘可能不帶單位，如：margin: 0;。
(6) 屬性順序格式：結構性屬性(display -> position -> overflow、float、clear -> margin、padding)->表現性屬性(background、border -> font、text)。

CSS 佈局

1.傳統盒模型：

(1) 文檔流佈局：最基本的佈局，按照文檔的順序顯示。
(2) 浮動佈局：使用 float 屬性，使元素脫離文檔流顯示。
(3) 定位佈局：經過 position 屬性進行定位，屬性值分別有：static、relative、absolute、fixed。
1) static：元素塊正常生成。
2) relative：相對定位。相對於元素的原始位置進行定位。元素偏移某個距離，其本來空間仍保留。
3) absolute：絕對定位。相對於其包含塊定位，也能夠說是相對於除 static 定位外第一個父元素進行定位，元素在原正常文檔流中所佔空間會關閉，不佔位。
4) fixed: 相對於瀏覽器窗口進行定位。

2.經常使用CSS佈局：

(1) 固定寬度水平居中：
1) margin: 0 auto;
2) 絕對定位居中：父容器相對定位，子容器絕對定位，top: 50%;left: 50%; margin-left 和 margin-top 均設爲寬高的一半的負值;
3) 使用 transform（須要注意的是瀏覽器兼容 ie9+ 不適宜用於移動開發）：父容器相對定位，子容器絕對定位，top: 50%;left: 50%;transform: translate(-50%,-50%);
(2) 未知寬度水平居中：
子容器設爲 inline-block 屬性，父容器設置 text-align: center;
(3) 多個塊級元素水平居中：
1) 子容器設爲 inline-block 屬性，父容器設置 text-align: center;
2) flex 佈局：父容器設置爲 display: flex;justify-content: center; 即將子元素在主軸上的對齊方式設置爲居中。
(4) 單行元素垂直居中：將子元素的行高設置等於高度，即 height 與 line-height 設置爲相等。
(5) 多行元素垂直居中：
table-cell 方式：父容器設置爲 display: table; 子容器設置爲 display: table-cell;vertical-align: middle;。

3.flex 佈局：

(1) 彈性佈局，使用方法是將 display 屬性設置爲 flex，也能夠設置行內的 flex。
(2) 注意：
1) webkit 內核的瀏覽器要加上 -webkit 前綴。
2) 設爲 flex 佈局後，子元素的 float、clear 與 vertical-align 屬性均失效。
(3) flex 佈局，父容器屬性：
1) flex-direction：主軸的方向。row(默認值，水平方向起點在左)、row-reverse(水平方向起點在右)、column(垂直方向起點在上)、column-reverse(垂直方向起點在下)。
2) flex-wrap：超出父容器子容器的排列樣式。nowrap(默認值，不換行)、wrap(換行，第一行在上)、wrap-reverse(換行，第一行在下)。
3) flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式，默認值爲 row nowrap。
4) justify-content：子容器在主軸的排列方向。flex-start(默認值，左對齊)、flex-end(右對齊)、center(居中)、space-between(兩端對齊，間隔相等)、space-around(兩側間隔相等)。
5) align-items：子容器在交叉軸的排列方向。flex-start(交叉軸的起點對齊)、flex-end(交叉軸的終點對齊)、center(交叉軸的中點對齊)、baseline(項目第一行文字的基線對齊)、stretch(默認值，未設置高度或設爲auto的將佔滿整個容器的高度)。
6) align-content：定義了多根軸線的對齊方式，一根軸線該屬性失效。flex-start(交叉軸的起點對齊)、flex-end(交叉軸的終點對齊)、center(交叉軸的中點對齊)、space-between(交叉軸的兩端對齊，軸線間隔平均分佈)、space-around(軸線兩側間隔相等)、stretch(默認值，軸線佔滿整個交叉軸)。
(4) flex 佈局，子容器屬性：
1) order：子容器的排列順序。
2) flex-grow：子容器剩餘空間的拉伸比例。
3) flex-shrink：子容器超出空間的壓縮比例，此屬性生效，父容器屬性要設爲nowrap。
4) flex-basis：子容器在不伸縮狀況下的原始尺寸。
5) flex：子元素的 flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡寫。
6) align-self：容許單個項目有與其餘項目不同的對齊方式。可覆蓋父容器 align-items 屬性，默認值爲 auto，表示繼承父元素的 align-items 屬性，若是沒有父元素，則等同於 stretch。

4.grid 網格佈局：

(1) 網格佈局，使用方法是經過 display 屬性設置屬性值爲 grid 或 inline-grid 或 subgrid。
(2) 注意：
1) 當元素設置了網格佈局，column、float、clear、vertical-align 屬性無效。
2) 設置網格佈局後，網格容器的全部子元素會自動變成網格項目(grid item)，而後設置列(grid-template-columns)和行(grid-template-rows)的大小，設置 grid-template-columns 有多少個參數，生成的 grid 列表就有多少列，沒有設置 grid-template-columns，則默認只有一列，寬度爲父元素的100%。
(3) css fr 單位：一個新出的自適應單位，被用於在一系列長度值中分配剩餘空間。
(4) 建立行或列的最小或最大尺寸：minmax() 函數。
第一個參數定義網格軌道的最小值，第二個參數定義網格軌道的最大值。能夠接受任何長度值，也接受 auto 值。auto 值容許網格軌道基於內容的尺寸拉伸或擠壓。
(5) 建立重複的網格軌道：repeat() 屬性。
建立相等尺寸的網格項目和多個網格項目。第一個參數定義網格軌道應該重複的次數，第二個參數定義每一個軌道的尺寸。
(6) 建立列與列之間的距離：grid-column-gap。
(7) 建立行與行之間的距離：grid-row-gap。
(8) 定義網格區域：grid-template-areas。
grid-template-areas 佈局優點：在不設置高度的狀況下（父容器和 grid-template-rows 的值，或者 grid-template-rows 設置爲 auto 時，slider 和 content 的高度是一致的，而且會根據其內的高度自適應）。

網格佈局舉例：

html部分：

<div class="grid_container">
    <div class="header">header</div>
    <div class="sidebar">sidebar</div>
    <div class="content">content
        <ul>
            <li>lists</li>
            <li>lists</li>
            <li>lists</li>
            <li>lists</li>
            <li>lists</li>
            <li>lists</li>
        </ul>
    </div>
    <div class="footer">footer</div>
</div>

css部分：

.grid_container {
    padding: 20px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    background-color: #FAE3D9;
    grid-template-areas: "header header" "sidebar content" "footer footer";
    grid-template-rows: auto;
    grid-template-columns: 200px;
}
.header {
    grid-area: header;
    padding: 20px;
    background-color: #61C0BF;
}
.sidebar {
    grid-area: sidebar;
    padding: 15px;
    background-color: #BBDED6;
}
.content {
    grid-area: content;
    padding: 15px;
    background-color: #FFB6B9;
}
.content>ul li {
    padding: 3px 0;
    text-align: left;
    padding-left: 30px;
    box-sizing: border-box;
}
.footer {
    grid-area: footer;
    padding: 20px;
    background-color: #61C0BF;
}

截圖示意：