（1）H5+C3——————H5，選擇器，盒子模型，佈局，圖標，文本樣式，設置背景和表格

選擇器

1，元素選擇器

語法：
標籤名 { }
比如p則會選中頁面中的所有p標籤，h1會選中頁面中的所有h1標籤。

2，類選擇器

語法：
.className { }
比如.hello會選中頁面所有class屬性爲hello的元素

3，ID選擇器

語法：
#id { }
• 比如#box會選中頁面中id屬性值爲box的元素，和class屬性不同，id屬性是不能重複的。

4，複合選擇器

語法：
選擇器1選擇器2 { }
例如div.box1會選中頁面中具有box1這個class的div元素。

5，羣組選擇器

語法：
選擇器1,選擇器2,選擇器3 { }
比如p,.hello,#box會同時選中頁面中p元素，class爲hello的元素，id爲box的元素。

6，通用選擇器

通用選擇器，可以同時選中頁面中的所有元素。
語法：
*{ }

7，後代選擇器

後代選擇器可以根據標籤的關係，爲處在元素內部的代元素設置樣式。
語法：
祖先元素後代元素後代元素 { }
比如p strong 會選中頁面中所有的p元素內的strong元素
標籤之間的關係

祖先元素：直接或間接包含後代元素的元素。

後代元素：直接或間接被祖先元素包含的元素。

父元素：直接包含子元素的元素。

子元素：直接被父元素包含的元素。

兄弟元素：擁有相同父元素的元素。

8，屬性選擇器

屬性選擇器可以挑選帶有特殊屬性的標籤。
語法:
[屬性名]，選取含有指定屬性的元素
[屬性名=“屬性值”]，選取屬性值等於指定值的元素
[屬性名~=“屬性值”]，如果需要根據屬性值中的詞列表的某個詞進行選擇，則需要使用波浪號
[屬性名|=“屬性值”]
[屬性名^=“屬性值”]，選取屬性值以指定內容開頭的元素
[屬性名$=“屬性值”]，選取屬性值以指定內容結尾的元素
[屬性名*=“屬性值”]，選取屬性值中包含指定內容的元素

9，僞類和僞元素

僞類和僞元素用來表示元素所處的一個特殊的狀態，或者是一個特殊的位置

屬性	描述
:link	表示一個普通的鏈接（未訪問過的鏈接）
:visited	表示訪問過的鏈接
:hover	鼠標移入的鏈接，也可以爲其他元素設置hover
:active	正在被點擊的鏈接，也可以爲其他元素設置active
:focus	表示元素獲取焦點的狀態，一般用於文本框
::selection	表示內容被選中的狀態，在火狐中使用::-moz-selection來代替
:first-letter	表示第一個字符
:first-line	表示文字的第一行
:before	選中元素的最前邊，一般該僞類都會結合content一起使用，通過content可以向指定位置添加內容
:after	選中元素的最後邊，一般該僞類都會結合content一起使用，通過content可以向指定位置添加內容

提示：

在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 之後，纔是有效的。

在 CSS 定義中，a:active 必須被置於 a:hover 之後，纔是有效的。

僞類名稱對大小寫不敏感。
否定僞類（從一組元素中將符合要求的元素剔除出去）

語法：
```
  :not(選擇器)
```

10，選擇器的優先級

當樣式發生衝突時，需要將相關的選擇器優先級進行求和計算，優先級高的優先顯示，如果優先級一樣，則顯示靠後的樣式，優先級計算時，總大小不能超過他的最大的數量級，可以在樣式後邊添加一個!important，如果樣式中添加了該內容，則該樣式將會獲取最大的優先級，將會優先於所有的樣式顯示，包括內聯樣式，但是這個屬性要慎用。
不同的選擇器有不同的權重值
內聯樣式：1000
id選擇器：100
類和僞類選擇器：10
元素選擇器：1
通配選擇器：0
如果選擇器編寫過於長的話，瀏覽器解析起來性能會比較差，所以在編寫選擇器時，越短越好。
通配選擇器，性能也比較差，要避免使用通配選擇器

盒子模型

一個盒子我們會分成幾個部分：

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

1，內容區

如果沒有爲元素設置內邊距和邊框，則內容區大小默認和盒子大小是一致的。
通過width和height兩個屬性可以設置內容區的大小。

2，內邊距

內邊距指的就是元素內容區與邊框以內的空間。
默認情況下width和height不包含padding的大小。
使用padding屬性來設置元素的內邊距。
例如：

padding:10px 20px 30px 40px; --> 這樣會設置元素的上、右、下、左四個方向的內邊距

padding:10px 20px 30px; --> 分別指定上、左右、下四個方向的內邊距

padding:10px 20px; --> 分別指定上下、左右四個方向的內邊距

padding:10px; --> 同時指定上左右下四個方向的內邊距

同時在css中還提供了padding-top、padding-right、padding-right、padding-bottom分別用來指定四個方向的內邊距。

3，邊框

使用border屬性來設置盒子的邊框：

border:1px red solid;  --> 上邊的樣式分別指定了邊框的寬度、顏色和樣式

也可以使用border-top/left/right/bottom分別指定上右下左四個方向的邊框。
邊框可以設置多種樣式：

none（沒有邊框）

dotted（點線）

dashed（虛線）

solid（實線）

double（雙線）

groove（槽線）

ridge（脊線）

inset（凹邊）

outset（凸邊）

4，外邊距

使用margin屬性可以設置外邊距。
用法和padding類似，同樣也提供了四個方向的margin-top/right/bottom/left。
當將左右外邊距設置爲auto時，瀏覽器會將左右外邊距設置爲相等，所以這行代碼margin:0 auto可以使元素居中。
display：
block：設置元素爲塊元素
inline：設置元素爲行內元素
inline-block：設置元素爲行內塊元素
none：隱藏元素（元素將在頁面中完全消失）
visibility：
- 和display不同，使用visibility隱藏一個元素，隱藏後其在文檔中所佔的位置會依然保持，不會被其他元素覆蓋
  visible：可見的
  hidden：隱藏的
overflow：
- 可以通過overflow來控制內容溢出的情況
  visible：默認值
  scroll：添加滾動條
  auto：根據需要添加滾動條
  hidden：隱藏超出盒子的內容

佈局

1，浮動

所謂浮動指的是使元素脫離原來的文本流，在父元素中浮動起來，使用float屬性。
可選值：
none：不浮動
left：向左浮動
right：向右浮動
塊級元素和行內元素都可以浮動，當一個行內元素浮動以後將會自動變爲一個塊級元素。當一個塊級元素浮動以後，寬度會默認被內容撐開，所以當漂浮一個塊級元素時我們都會爲其指定一個寬度。
清除浮動，clear屬性可以用於清除元素周圍的浮動對元素的影響，也就是元素不會因爲上方出現了浮動元素而改變位置。
可選值：
left：忽略左側浮動
right：忽略右側浮動
both：忽略全部浮動
none：不忽略浮動，默認值

2，解決高度塌陷問題

.clearfix::before,
.clearfix::after{
	content: '';
    display: table;
    clear: both;
}

3，定位

position屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。可以使用position屬性把一個元素放置到網
頁中的任何位置。
可選值：
static
relative
absolute
fixed

4，相對定位

每個元素在頁面的文檔流中都有一個自然位置。相對於這個位置對元素進行移動就稱爲相對定位。周
圍的元素完全不受此影響。
當將position屬性設置爲relative時，則開啓了元素的相對定位。當開啓了相對定位以後，可以使用top、right、bottom、left四個屬性對元素進行定位。
相對定位的特點：
- 如果不設置元素的偏移量，元素位置不會發生改變。
- 相對定位不會使元素脫離文本流。元素在文本流中的位置不會改變。
- 相對定位不會改變元素原來的特性。
- 相對定位會使元素的層級提升，使元素可以覆蓋文本流中的元素。

5，絕對定位

絕對定位指使元素相對於html元素或離他最近的祖先定位元素進行定位。
當將position屬性設置爲absolute時，則開啓了元素的絕對定位。當開啓了絕對定位以後，可以使用top、right、bottom、left四個屬性對元素進行定位。
絕對定位的特點
- 絕對定位會使元素完全脫離文本流。
- 絕對定位的塊元素的寬度會被其內容撐開。
- 絕對定位會使行內元素變成塊元素。
- 一般使用絕對定位時會同時爲其父元素指定一個相對定位，以確保元素可以相對於父元素進行定位。

6，固定定位

固定定位的元素會被鎖定在屏幕的某個位置上，當訪問者滾動網頁時，固定元素會在屏幕上保持不動。
當將position屬性設置爲fixed時，則開啓了元素的固定定位。當開啓了固定定位以後，可以使用top、right、bottom、left四個屬性對元素進行定位。
固定定位的其他特性和絕對定位類似。

7，z-index

當元素開啓定位以後就可以設置z-index這個屬性。這個屬性可以提升定位元素所在的層級。
z-index可以指定一個整數作爲參數，值越大元素顯示的優先級越高，也就是z-index值較大的元素會顯示在網頁的最上層。

圖標

1，Font Awesome圖標庫

點擊此處進入官網可進行下載，分爲兩個版本，一個收費版一個免費版
具體使用情況根據官網的使用說明

2，阿里矢量圖標庫

點擊此處進入官網查看，爲了避免版權問題，矢量圖標一般是由自己公司來開發
使用說明

       登錄，選擇自己需要的圖標

       加入購物車

       點擊購物車，添加至項目，新建項目

       下載到本地，下載完成後，打開，裏面由個demo會教我們如何使用

文本樣式

1，文本後面內容省略樣式

white-space：設置網頁如何處理空白
可選值：
normal：正常
nowrap：不換行
pre：保留空白
案例如下：

.box1{
	width: 200px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

<div class="box1">固定定位的元素會被鎖定在屏幕的某個位置上，當訪問者滾動網頁時，固定元素會在屏幕上保持不動。</div>

設置背景

1，設置背景顏色

background-color屬性用來爲元素設置背景顏色，如果不設置背景顏色，元素默認背景顏色爲透明，實際上會顯示父元素的背景顏色
linear-gradient徑向漸變
方向值：常用的是to top，to bottom，to left，to right,to right top等等
角度值：常用的是0deg、180deg等等
使用案例

background-image: linear-gradient(0deg,red,yellow);

radial-gradient徑向漸變
默認情況下徑向漸變的形狀根據元素的形狀來計算的：正方形–>圓形長方形 -->橢圓形，也可以指定漸變的位置
語法：radial-gradient（大小 at 位置，顏色位置，顏色位置，顏色位置）
- 大小：
  circle 圓形
  ellipse 橢圓
  closest-side近邊
  closest-side遠邊
  farthest-corner 遠角
- 位置：top right left center bottom

2，設置背景圖片

background-image可以爲元素指定背景圖片。需要一個url地址作爲參數，url地址需要指
向一個外部圖片的路徑，如：background-image: url(1.jpg)

3，控制背景圖片重複

background-repeat用於控制背景圖片的重複方式。如果只設置背景圖片默認背景圖片將會使用平鋪的方式，可以通過該屬性進行修改。
可選值：
repeat：默認值，圖片左右上下平鋪
no-repeat：只顯示圖片一次，不會平鋪
repeat-x：沿x軸水平平鋪一張圖片
repeat-y：沿y軸水平平鋪一張圖片

4，設置背景圖片位置

background-position用來精確控制背景圖片在元素中的位置。
可以通過三種方式來確定圖片在水平方向和垂直方向的起點。
關鍵字：top right bottom left center
百分比
數值

5，設置背景圖片是否隨頁面滾動

background-attachment用來設置背景圖片是否隨頁面滾動。
可選值：
scroll：隨頁面滾動
fixed：不隨頁面滾動

表格

1，表格的基本標籤

table、tr、th、td
使用table標籤創建一個表格。
tr表示表格中的一行。
tr中可以編寫一個或多個th或td。
th表示表頭。
td表示表格中的一個單元格。
caption、thead、tbody、tfoot
caption表示表格的標題。
thead表示表格的頭部。
tbody表示表格的主體。
tfoot表示表格的底部。

2，合併單元格

合併單元格指將兩個或兩個以上的單元格合併爲一個單元格。合併單元格可以通過在th或td中設置屬性來完成。
橫向合併：colspan，縱向合併：rowspan

3，表格的樣式

text-align：設置文本的水平對齊。
vertical-align：設置文本的垂直對齊。
可選值：top、baseline、middle、bottom
border-spacing：邊框間距
border-collapse：合併邊框
collapse：合併邊框
separate：不合並邊框

下一章，（2）JavaScript——————後端開發需要掌握的JavaScript基礎知識

（1）H5+C3——————H5，選擇器，盒子模型，佈局，圖標，文本樣式，設置背景和表格

選擇器

盒子模型

佈局

圖標

文本樣式

設置背景

表格

前端使用 Konva 實現可視化設計器（13）- 折線 - 最優路徑應用【思路篇】

（1）MYSQL——————基礎，函數，分組查詢，子查詢，分頁查詢以及聯合查詢

（13）Filter過濾器

（2）JDBC——————數據庫事務，數據庫連接池和Apache-DBUtils實現CRUD操作

（3）Oracle——————分組函數，子查詢，創建和管理表和數據處理

（12）Cookie和Session

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結