HTML&CSS知識點

HTML

概念：HTML是最基礎的網頁開發語言
Hyper Text Markup Language：超文本標記語言
超文本:
- 超文本是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本
標記語言:
- 由標籤構成的語言。<標籤名稱> 如 html，xml
- 標記語言不是編程語言
快速入門：
1. html文檔後綴名 .html 或者 .htm
2. 標籤分爲
  1. 圍堵標籤：有開始標籤和結束標籤。如 <html> </html>
  2. 自閉和標籤：開始標籤和結束標籤在一起。如<br/>
  3. 標籤可以嵌套：
    - 需要正確嵌套，不能你中有我，我中有你
      - 錯誤：<a><b></a></b>
      - 正確：<a><b></b></a>
  4. 在開始標籤中可以定義屬性。屬性是由鍵值對構成，值需要用引號(單雙都可)引起來
  5. html的標籤不區分大小寫，但是建議使用小寫。

<!DOCTYPE html>
<html lang="ch">
	<head>
        <meta charset="UTF-8">
		<title>title</title>
	</head>
			
	<body>
		<FONT color='red'>Hello World</font><br/>
		<font color='green'>Hello World</font>
	</body>
</html>

HTML標籤

標籤學習

文件標籤：構成html最基本的標籤
- <html></html>:html文檔的根標籤
- <head></head>：頭標籤。用於指定html文檔的一些屬性。引入外部的資源
- <title></title>：標題標籤
- <body></body>：體標籤
- <!DOCTYPE html>：html5中定義該文檔是html文檔
文本標籤
- 註釋：

單標籤

水平線：<hr>
換行：<br>
圖像：<img>
- 圖像屬性：
  - src：指定圖片的位置
  - alt：圖像無法顯示時替換圖像
  - title：鼠標懸停時的顯示文本
  - width：寬度
  - height：高度（寬高不要同時設置）
  - border：邊框

雙標籤

標籤：h1—h6
段落：<p></p>
無語義標籤：
- <div></div>：每一個div佔滿一整行。塊級標籤
- <span></span>：文本信息在一行展示，行內標籤內聯標籤
語義化標籤：html5中爲了提高程序的可讀性，提供了一些標籤
- <header></header>：頁眉
- <footer></footer>：頁腳
粗體：<strong></strong>
斜體：<em></em>
下劃線：<ins></ins>
刪除線：<del></del>
鏈接：<a href="#" target="_self"></a>
1. 創建超級鏈接：鏈接本地文件鏈接外部文件
2. 查看同一頁面的指定位置：href="#名稱" name="名稱"
3. 在新的瀏覽器窗口打開：target="_blank"
- href：指定訪問資源的URL(統一資源定位符)
- target：指定打開資源的方式
  - "_self"：默認值，在當前頁面打開
  - "_blank"：在新建的空白頁面打開
- 設置整體鏈接的打開狀態：base
  1. 放在<head></head>之間
  2. target="_blank"
  3. 所有鏈接默認都是在新標籤頁中打開
列表
- 無序列表：ul li (type：disc,square,circle)
- 有序列表：ol li (type：1,a,A,i,I)
- 自定義列表：dl dt dd
表格：<table></table>
- 標題：<caption></caption>
- 表示表格的頭部分：<thead></thead>
- 表示表格的體部分：<tbody></tbody>
- 表示表格的腳部分：<tfoot></tfoot>
- 定義行：<tr></tr>
- 定義單元格：<td></td>
  - 合併行(豎)：rowspan=“合併個數”
  - 合併列(橫)：colspan=“合併個數”
- 定義表頭單元格：<th></th>
- 表頭：thead-tr-th
- 表格主體：tbody-tr-td
- 屬性：
  - 寬度：width
  - 高度：height
  - 表格邊框：border
  - 單元格與單元格之間的間隙：cellspacing（一般設置爲0）
  - 單元格內容與邊框之間的間隙：collspadding（一般設置爲0）
  - 表格的對齊方式：align

表單標籤

概念：用於採集用戶輸入的數據的，用於和服務器進行交互。
定義表單：<form></form>
屬性：
- action：指定提交數據的URL
- method：指定提交方式
  - 分類：一共7種，2種比較常用
    - get
      1. 請求參數會在地址欄中顯示。會封裝到請求行中(HTTP協議後講解)。
      2. 請求參數大小是有限制的。
      3. 不太安全。
    - post
      1. 請求參數不會再地址欄中顯示。會封裝在請求體中(HTTP協議後講解)
      2. 請求參數的大小沒有限制。
      3. 較爲安全。
注意：表單項中的數據要想被提交，必須指定其name屬性
表單項標籤：
- <input>：可以通過type屬性值，改變元素展示的樣式
  - type屬性：
    - text：文本輸入框，默認值
      - placeholder：指定輸入框的提示信息，當輸入框的內容發生變化，會自動清空提示信息
    - password：密碼輸入框
    - radio：單選框
      - 注意：
        
        要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣。
        
        一般會給每一個單選框提供value屬性，指定其被選中後提交的值
        
        checked屬性，可以指定默認值
    - checkbox：複選框
      - 注意：
        
        一般會給每一個單選框提供value屬性，指定其被選中後提交的值
        
        checked屬性，可以指定默認值
    - file：文件選擇框
    - hidden：隱藏域，用於提交一些信息。
    - 按鈕：
      - submit：提交按鈕。可以提交表單
      - button：普通按鈕
      - image：圖片提交按鈕（src屬性指定圖片的路徑）
      - reset：重置按鈕
- label：指定輸入項的文字描述信息
  - 注意：
    - label的for屬性一般會和 input 的 id 屬性值對應。如果對應了，則點擊label區域，會讓input輸入框獲取焦點。
```
<form>
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>
```
- select: 下拉列表
  - 子元素：option，指定列表項
```
<select>
  <option value ="1">a</option>
  <option value ="2">b</option>
  <option value="3">c</option>
  <option value="4">d</option>
</select>
```
- textarea：文本域
  - cols：指定列數，每一行有多少個字符
  - rows：默認多少行。

CSS

概念： Cascading Style Sheets 層疊樣式表
層疊：多個樣式可以作用在同一個html的元素上，同時生效
好處：
1. 功能強大
2. 將內容展示和樣式控制分離
  - 降低耦合度。解耦
  - 讓分工協作更容易
  - 提高開發效率
CSS的使用：CSS與html結合方式
- 內聯樣式\行內樣式
  - 在標籤內使用style屬性指定css代碼
  - <div style="color:red;">hello css</div>
- 內部樣式
  - 在head標籤內，定義style標籤，style標籤的標籤體內容就是css代碼
```
<style>
	div{
		color:blue;
	}
</style>

<div>hello css</div>
```
- 外部樣式
  1. 定義css資源文件
  2. 在head標籤內，定義link標籤，引入外部的資源文件
```

div{
	color:green;
}


<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>
```
- 注意：
  - 三種方式css的作用範圍越來越大
  - 後期常用：內部樣式、外部樣式
```

<style>
	@import "css/a.css";
</style>
```
css語法：
```
選擇器 {
	屬性名1:屬性值1;
	屬性名2:屬性值2;
	...
}
```
- 選擇器：篩選具有相似特徵的元素（div、span…）
- 注意：每一對屬性需要使用 ; 隔開，最後一對屬性可以不加
選擇器：篩選具有相似特徵的元素
1. 基礎選擇器
  1. id選擇器：選擇具體的id屬性值的元素（建議在一個html頁面中id值唯一）
    - 語法：#id屬性值{}
  2. 元素選擇器：選擇具有相同標籤名稱的元素
    - 語法：標籤名稱{}
    - id選擇器優先級 > 元素選擇器
  3. 類選擇器：選擇具有相同的class屬性值的元素。
    - 語法：.class屬性值{}
    - 類選擇器優先級 > 元素選擇器
2. 擴展選擇器：
  1. 通配符選擇器（選擇所有元素）
    - 語法：*{}
  2. 交集選擇器
    - h2.ab{ } (類名爲ab的h2標籤)
  3. 並集選擇器
    - 語法：選擇器1,選擇器2{}
    - div,p, .ab{ }（多個選擇器一起選中）
  4. 子選擇器：篩選選擇器1元素下的選擇器2元素
    - 語法：選擇器1 選擇器2{}
  5. 父選擇器：篩選選擇器2的父元素選擇器1
    - 語法：選擇器1 > 選擇器2{}
    - div>p { }（div標籤的親兒子p標籤）
  6. 後代選擇器
    - div p{ }（div中包裹的p標籤。可以是父子關係，可以是爺孫關係）
  7. 屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
    - 語法：元素名稱[屬性名="屬性值"]{}
  8. 僞類選擇器：選擇一些元素具有的狀態
    - 語法：元素:狀態{}
    - 如<a></a>狀態
      - -:link：初始化的狀態
      - -:visited：被訪問過的狀態
      - -:active：正在訪問狀態
      - -:hover：鼠標懸浮狀態

CSS字體樣式屬性

font-size：字體大小
font-family：字體
font-weight：字體粗細（normal=400, bold=700, bolder, lighter）
font-style：字體風格（normal, italic斜體, oblique傾斜）
font 綜合設置字體樣式：
- 選擇器 {font：font-style font-weight font-size/line-height font-family}

CSS外觀屬性

color：顏色
line-height：行間距
text-indent：首行縮進(em)
text-aligh：水平對齊方式（left, center, right）
text-decoration：文本修飾（none, underline下劃線, overline文本上的一條線, line-through穿過文本的線）

標籤顯示模式

塊級元素

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素

總是從新行開始
高度，行高、外邊距以及內邊距都可以控制
寬度默認是容器的100%
可以容納內聯元素和其他塊元素

行內元素

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤是最典型的行內元素

和相鄰行內元素在一行上
高、寬無效，但水平方向的 padding 和 margin 可以設置，垂直反向的無效
默認寬度就是它本身內容的寬度
行內元素只能容納文本或則其他行內元素。（a 特殊 a裏面可以放塊級元素）

行內塊元素

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>

和相鄰行內元素（行內塊）在一行上，但是之間會有空白縫隙
默認寬度就是它本身內容的寬度
高度，行高、外邊距以及內邊距都可以控制

顯示模式的轉換

塊級元素轉換爲行內元素：display: inline
行內元素的轉換爲塊級元素：display: block
塊級元素/行內元素轉換爲行內元素：display: inline-block

注意點

div中不能放一個有寬度的塊級標籤
文本類標籤（p，h1~h6，dt）中只能放文本，不能放塊級標籤
鏈接裏面不能再放鏈接

行高：line-height

div中不能放一個有寬度的塊級標籤
文本類標籤（p，h1~h6，dt）中只能放文本，不能放塊級標籤
鏈接裏面不能再放鏈接

CSS三大特性

層疊性：樣式衝突時，遵循就近原則；樣式不衝突時，則互不影響
繼承性：子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）
優先級：通配符選擇器 < 標籤選擇器 < 類選擇器 < id選擇器 <！important

背景圖片

background-color 背景顏色
background-img：url（圖片地址）背景圖片
背景圖片是否平鋪：background-repeat：repeat（默認平鋪）/no-repeat（不平鋪）/repeat-x（水平平鋪）/repeat-y（垂直平鋪）
背景圖像方位 background-position：length（數值）/position（top、bottom、left、right、center）
①position後面可以跟方位名詞，之間沒有順序
②position如果只寫一個值，另一個默認居中
③position後面也可以跟值px，但是必須有順序，x在前，y在後
背景圖尺寸設置 background-size：width, height
背景附着 background-attachment：scroll（默認隨對象內容滾動）/fixed（背景圖像固定）
背景簡寫 background：背景顏色背景圖片地址背景平鋪背景滾動背景位置
背景透明：background：rgba（0，0，0，0~1）

盒子模型

盒子模型由元素內容、內邊距、外邊距、邊框構成
盒子邊框
1. border：border-width border-style border-color
2. border-style：solid（單實線）/dashed（虛線）/dotted（點線）/double（雙實線）
3. border-top / border-left / border-right / border-bottom
4. border-width：
  - 20px（上下左右均爲20像素）
  - 20px 30px（上下爲20像素，左右爲30像素）
  - 20px 30px 40px（上爲20像素，左右爲30像素，下爲40像素）
  - 20px 30px 40px 50px（上爲20像素，右爲30像素，下爲40像素，左爲50像素）
表格細線邊框：table{ border-collapse：collapse；}
設置內邊距（padding）後會撐開盒子
外邊距（margin）
- 外邊距水平居中（margin：0 auto）
- 外邊距塌陷
  - 相鄰塊元素垂直外邊距合併，選取較大的外邊距，避免即可
  - 嵌套塊元素垂直外邊距合併
    ①父級元素定義1px上邊框或上內邊距
    ②爲父級元素添加 overflow：hidden
盒子默認寬度
- 當父盒子有寬度定值時，則父盒子padding會撐開父盒子
- 如果盒子沒有給定寬度，用的是默認父盒子寬度，則給予的padding值不會撐開盒子
圓角邊框
- border-radius：50%（也可以取數值）
盒子陰影
- box-shadow：水平陰影垂直陰影模糊距離陰影尺寸陰影顏色（rgba）內（inset）/外陰影（默認）

浮動：float

float：left / right
浮動特性：
1. 浮動是指脫離本身的位置，把原先自己的位置讓出來了
2. 父級沒有高度，則子級浮動不會再撐開父級盒子
3. 浮動其實就是隱藏的模式轉換
清除浮動的方法
1. 額外標籤法 .clear（clear：both；）在浮動的標籤後面加一個類名爲clear的空標籤
2. 給浮動的元素父級添加 overflow：hidden
3. 使用after僞元素清除浮動, 在浮動的元素的父級元素添加 class=“clearfix”
```
.clearfix:after{
	content="";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{*zoom:1;}
```
1. 使用after和before雙僞元素清除浮動, 在浮動的元素的父級元素添加class=“clearfix”
```
.clearfix:after,clearfix:before{ content="";display:table;}
.clearfix:after { clear:both}
.clearfix{*zoom:1;}
```

定位 position

靜態定位 position: static
- 靜態位置就是各個元素在HTML文檔流中默認的位置。
相對定位 position: relative
- 相對定位通過邊偏移移動位置，但 原來所佔據的位置繼續佔有
- 每次移動位置，以自己的左上角基點移動
絕對定位 position: absolute
- 通過邊偏移移動位置，但 完全不佔據位置
- 若寫定絕對定位的子元素的所有父級元素都沒有定位的時候，以瀏覽器爲準進行偏移，若父元素有定位，則以父元素位置。
絕對定位盒子居中
1. left：50%，父盒子的一半
2. 子盒子自己外邊距負一半的值
固定定位 position: fixed;
- 固定定位元素與父級元素無關，只認瀏覽器
- 固定定位完全脫標，不佔有位置，不隨着滾動條滾動
疊放順序 z-index
- z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。
- 如果取值相同，則根據書寫順序，後來居上。
- 後面數字一定不能加單位。
- 只有相對定位，絕對定位，固定定位有此屬性。

CSS高級技巧

元素的顯示和隱藏
1. display: none; 隱藏之後，不再保留位置
2. display: block; 顯示元素
3. visibility: hidden; 隱藏之後保留原有位置
4. visibility: visible; 元素可見
溢出顯示與隱藏
1. overflow: visible; 默認不剪切內容也不添加滾動條
2. overflow: auto; 超出自動顯示滾動條
3. overflow: hidden; 超出部分隱藏
4. overflow：scroll; 不管是否超出內容，總是顯示滾動條
鼠標樣式
1. cursor: default 小白（一般狀態）
2. cursor: pointer 小手
3. cursor: move 移動（十字）
4. cursor: text 文本（I 字型）
取消input 等的輪廓線
1. outline: none;
防止文本域拖拽
1. resize: none;
垂直對齊
1. vertical-align: baseline; 默認圖片與文字基線對齊
2. vertical-align: middle; 圖片與文字垂直居中
3. vertical-align: top; 圖片與文字頂部對齊
去除圖片底部空白縫隙
1. 給img添加 vertical-align: top / middle
2. 將img轉爲塊級元素display: block;
溢出的文字隱藏（步驟）
1. 強制在一行內顯示所有文本直到文本結束或遭遇br標籤對象來才換行
  - white-space：nowrap
2. 溢出隱藏
  - overflow：hidden
3. 文字溢出
  - text-overflow：clip（不顯示省略標記直接裁剪）/ ellipsis（當對象內文本溢出是顯示省略標記）

HTML&CSS知識點

HTML&CSS知識點

HTML

HTML標籤

標籤學習

單標籤

雙標籤

表單標籤

CSS

CSS的使用：CSS與html結合方式

css語法：

選擇器：篩選具有相似特徵的元素

CSS字體樣式屬性

CSS外觀屬性

標籤顯示模式

塊級元素

行內元素

行內塊元素

顯示模式的轉換

注意點

行高：line-height

CSS三大特性

背景圖片

盒子模型

浮動：float

定位 position

CSS高級技巧

CORS error 但是 status code 是200 OK

壓縮上傳的GPU數據的方案

使用skopeo同步鏡像

HTML&CSS知識點

Mac下配置sublime實現LaTeX

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

linux以太網驅動總結