前端學習總結筆記——入門（一）
前端學習總結筆記 ——入門（一）
什麼是前端
狹義：使用HTML、CSS、JavaScript等專業技能和工具將產品UI設計稿實現成網路產品，涵蓋pc端、移動端網頁、處理視覺和互動問題。
廣義：所有使用者終端產品與視覺和互動有關的部分，都是前端工程師的專業領域。
前端需要了解的知識
- 網站和網頁：網站指的是整站，而網頁值得是單獨頁面。
- 主頁和內頁：主頁的名字必須是index，通過主頁的超連結跳轉至內頁。
- 內頁的資訊：包括內頁所有可以展現的內容，文字、圖片、超連結、視訊、音訊等。
- 動態頁面和靜態頁面：幾臺頁面的東西是固定不變的，動態頁面內容會根據使用者的操作和實際情況改變,其中的資料從後臺獲。
- 前端和後端：前端處理頁面展示效果和使用者互動，後端處理資料在伺服器進行增、刪、改、查、等。
-
常用工具簡介
- 常用編輯器：VSCODE、Sublime.....
- 常用瀏覽器：火狐瀏覽器（Gecko核心）、谷歌瀏覽器（Webkit核心）、IE瀏覽器（Trident核心）
國內瀏覽器早年使用的是IE的Trdent核心，現在基本為Webkit或者Webkit和Trident雙核心瀏覽器。
-
設計與測量工具：Photoshop
HTML、CSS初識
HTML標籤關係
- 巢狀關係； 父子標籤關係時，為了程式碼美觀規範，子元素最好縮排下一行。
<head>
<title></title>
</head>- 並列關係；為了程式碼美觀，最好上下對齊。
<head></head> <body></body>文件型別
- <!DOCTYPE html> HTML5相容性好，可相容老版本XHTML的文件型別。
- 字符集 ulf-8為目前最常用字符集，包含全世界所有國家所用字元。 中常用字符集還有gb2312(中文簡體)、BIG5（繁體中文）、GBK（簡體繁體皆相容）。
HTML常用標籤
- 標題標籤；六個等級，文字大小逐級遞減。
<h1>這是標題 1</h1> <h2>這是標題 2</h2> <h3>這是標題 3</h3> <h4>這是標題 4</h4> <h5>這是標題 5</h5> <h6>這是標題 6</h6> - 段落標籤；
<p>文字內容</p> - 水平線標籤；該標籤為單標籤，hr後面寫一個空格。
<hr /> - 換行標籤；
<br />div span標籤；div獨佔一行，span可以一行存在多個。
<div>獨佔一行</div>
<span>多個並行</span>粗體標籤；
<b>粗體</b>
<strong>粗體</strong>- 斜體標籤；
<i>斜體</i> <em>斜體</em> - 加刪除線標籤；
<s>刪除線</s> <del>刪除線</del> - 加下劃線標籤；
<u>下劃線</u>
<ins>下劃線</ins>- 註釋標籤：
<!--註釋 -->元素的屬性和樣式：
-
title屬性：標記的標題，可以在滑鼠移入該元素時顯示出來
-
class屬性：元素的類名，多個元素可以使用相同的類名，常用元素類名:
-
header;logo;aside;bannner;nav;menu;rearch;
-
scroll;main;content;list;title;service;hot;
-
news;download;regsiter;partner;btn;footer;
-
id屬性：元素的編號，id是唯一的。
-
style屬性：元素的樣式，用來書寫CSS層疊樣式表，常用樣式：
- width/height
- color(賦值方式有英文、16進位制和RGB)
- font-size:字型大小（使用px畫素作為單位）
- line-height字型行高（可做文字居中垂直）
- text-align文字對齊方式（可做文字水平垂直）
-
可在瀏覽器中按F12，開發者工具中檢視程式碼。
選擇器
- 統配選擇器：在head裡設定一個style標籤，用選擇器的樣式的寫法叫做內部樣式表，該方法對當前頁面有效（適量使用）；
- *（通配選擇器）:
- 型別選擇器（如：div）：獲取所有該種元素；
- 類名選擇器（.加上class屬性的值）：獲取所有具有該類名的元素；
- id選擇器（#加上id屬性的值）：獲取具有該id值得元素；
- 特殊用法：包含選擇器（如#id.class）——獲取第一種選擇器後代中第二種選擇器選中的元素。
- 選擇器的優先順序：
- id選擇器>class選擇器>型別選擇器>統配選擇器。
- 包含選擇器層級較多時，可以約分包含選擇器：如#id.class的優先順序高於#id,#id.class與.class#id相同。
- 如果多個選擇器優先順序一致：後面覆蓋前面。
盒子模型
模型圖：
不同位置的名字就不一一贅述了，圖中可尋。
- 外邊距重疊：相鄰的兩個盒子，外邊距和結合成一個單獨和外邊距。這種合併方式被稱為摺疊，並且因而所結合的外邊距為摺疊外邊距，摺疊結果遵循以下規則：
- 兩個相鄰的外邊距都是正數時，摺疊結果是兩者中較大的值。
- 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值較大的數。
- 兩個相鄰的外邊距一正一負時，摺疊結果是兩者相加的值。
盒模型相容問題的解決方法：
- 在個種瀏覽器中，實際盒模型有兩種結構：一種是常規盒模型（也稱內容盒模型），一種是怪異盒模型（也稱邊框盒模型）。
- 盒模型的公式（以水平方向為例）：
盒子的寬=width+ padding-left + padding-right + border-left-width +border-right-width
- 低版本的 IE 瀏覽器中用的是怪異盒模型，怪異和模型的特點：我們為元素所設定的寬為盒子的實際寬；而在標準和模型中則是內容寬。
- 兩種不同的和模型會導致我們設定的樣式在不同瀏覽器中顯示不同，為了解決這個問題css3中提出了一個樣式 box-sizing:border-box/content-box(預設)，該樣式用來修改盒模型的種類。
- 由於該樣式是CSS3樣式，低版本瀏覽器不相容，一次易班我們將盒模型的值設定為border-box（怪異盒模型）來統一效果，並且該盒模型在頁面佈局時計算也會較為方便。
元素種類
區塊元素：
- 每個元素獨佔一行。
- 支援所有樣式。
- 不設定寬高時寬度等於父元素寬度，不設定高度時高度為0，有內容時由內容撐開。
- 不解析換行符。
- 常見區塊元素：div(盒子)、ul(無序列表)、ol(有序列表)、dl(定義列表)、li(列表的項)、p(段落)、h1-h6(標題)、table(表格)、form(表單)、pre(原始碼)、hr(分割線)
內聯元素：
- 在一行內空間時，可以和非區塊在同一行顯示。
- 不支援寬高樣式，使用部分樣式會出現問題。
- 寬高完全由內容（文字圖片等）撐開。
- 換行符會被解析。
-
常見的內斂元素：span(行間元素)、a(超連結)、b(加粗)、strong(加粗)、i(斜體)、em(斜體)、sub(下標)、sup(上標)、ins(表單項)、del(刪除線)、img(圖片)、input(表單項)、label(表單標記)、br(換行)
內斂塊元素：
- 在一行有空間時，可以和非區塊元素同一行顯示。
- 支援所有樣式。
- 不設定寬高時完全由內容撐開。
- 換行符會被解析。
- 雖然img和input都是內聯元素，但是他們表現的是內聯塊元素的效果，既可以設定寬高等樣式。
在我們需要改變他們元素種類的時候可以用樣式display的值修改樣式，block（區塊元素）、inline（內聯元素）、inline-block（內聯塊元素）、none（不佔位元素，既隱藏）
photoshop
- 在前端中的用途：切圖、修圖、測量。
- PS工具的快捷鍵:
- 移動工具：v
- 矩形選框工具（區塊大小的測量工具）：m
- 裁切工具：c
- 吸管工具和拾色器（文字顏色和背景顏色的測量工具）：i
- 橫排文字工具（字型大小測量工具）：t
- 手抓：h 在當前工具上使用空格
- 複製：ctrl + c
- 貼上（配合截圖：Print Screen）：ctrl + v
- 新建畫布（如果複製版裡有圖會按照那張圖的大小新建畫布）：ctrl + n
- 儲存：ctrl + s
- 自由變形：ctrl + t
- 放大：ctrl + 加號
- 縮小：ctrl + 減號
- 標尺：ctrl + r
- 顯示/隱藏輔助線：ctrl + h
- 蓋印選中圖層:ctrl + e
- 儲存為web格式:ctrl + alt + shift + s
- 蓋印可見圖層:ctrl + alt + shift + e
- 歷史記錄
圖層的使用:
- 新建圖層
- 建立新組
- 柵格化圖層
- 圖層的順序
- 刪除圖層
- 選區的變形、測量和擷取
圖片格式：
- PSD：原始檔（只能用PS開啟）
- JPG：不支援透明半透明，所有空白區域填充白色；使用：網頁中的大圖，高清圖（體積大）
- GIF：支援透明，不支援半透明；使用：網頁中的小圖示（動畫圖片）
- png-8：支援透明，不支援半透明；使用：網頁中的小圖示
- png-24：支援透明，也支援半透明；使用：影象中存在半透明效果的圖片