前端學習筆記Day01

阿新 • • 發佈：2021-08-25

一、基礎認識

基礎概念

認識網頁
- 網頁有哪些部分組成？
  
  文字、圖片、音訊、視訊、超連結
- 我們看到的網頁背後的本質是什麼？
  
  前端程式設計師所寫的程式碼
- 前端程式碼通過什麼軟體轉換成使用者看到的頁面？
  
  瀏覽器

五大瀏覽器和渲染引擎

五大瀏覽器
- 瀏覽器：是網頁顯示、執行的平臺，是前端開發的必備利器
- 常見的五大瀏覽器：
  
  IE瀏覽器、火狐瀏覽器（FireFox）、谷歌瀏覽器（Chrome）、Safari瀏覽器、歐朋瀏覽器（Opear）

渲染引擎

渲染引擎（瀏覽器核心）：瀏覽器專門對程式碼進行解析渲染的部分

瀏覽器出品的公司不同，內在的渲染引擎也是不同的：

瀏覽器	核心
IE	Trident	IE、獵豹安全、360極速瀏覽器、百度瀏覽器
FireFox	Gecko	火狐瀏覽器核心
Safari	Webkit	蘋果瀏覽器核心
Chrome/Opera	Blink	Blink其實是Webkit的分支

注意點：
- 渲染引擎不同，導致解析相同程式碼時的速度、效能、效果也不同的
- 谷歌瀏覽器的渲染引擎速度快、效能高、效果好，所以更吸引使用者的喜愛(推薦)

Web標準
- 為什麼需要Web標準
  - 不同瀏覽器的渲染引擎不同，對於相同程式碼解析的效果會存在差異
    
    如果使用者想看一個網頁，結果用不同瀏覽器開啟效果不同，使用者體驗極差!
  - Web標準:讓不同的瀏覽器按照相同的標準顯示結果，讓展示的效果統一!
- Web標準的構成
  
  構成語言說明
  
  結構 HTML 頁面元素和內容
  
  表現 CSS 網頁元素的外觀和位置等頁面樣式(如:顏色、大小等)
  
  行為 JavaScript 網頁模型的定義與頁面互動
- Web標準的記憶方法
  - Web標準要求頁面實現:結構、表現、行為三層分離
    - 結構:HTML(決定了身體)
    - 表現:CSS(決定了樣式美觀)
    - 行為:JavaScript(決定了互動的動態效果)

HTML初體驗
1. HTML的感知
  - HTML(Hyper Text Markup Language)中文譯為:超文字標記語言專門用於網頁開發的語言，主要通過HTML標籤
    
    對網頁中的文字、圖片、音訊、視訊等內容進行描述
  - 案例:文字變粗案例體驗構建一個網頁，需要在網頁中顯示一個加粗的文字
    - 網頁體驗-構建基本網頁的步驟
      1. 在程式碼資料夾中點選滑鼠右擊 → 新建文字文件 → 命名為:文字變粗案例.txt
      2. 雙擊這個檔案，輸入程式碼等內容 → 記得儲存!
      3. 在檔案上點選滑鼠右鍵 → 重新命名 → 修改檔案字尾為為.html
      4. 雙擊文字變粗案例.html ，瀏覽器會自動開啟檔案並顯示之前輸入的內容
        
        文字要變粗體
        <strong>文字要變粗體</strong>
        <h1>文字要變成一號標題變成粗體</h1>
2. HTML骨架結構
  - HTML頁面固定結構
    - 網頁類似於一篇文章:
      - 每一頁文章內容是有固定的結構的，如:開頭、正文、落款等......
      - 網頁中也是存在固定的結構的，如:整體、頭部、標題、主體
    - 網頁中的固定結構是要通過特點的 HTML標籤 進行描述的
```
<html>
  <head>
    <title>網頁的標題</title>
  </head>
  <body>
    網頁的主體內容
  </body>
</html>
```
3. 開發工具的使用
  1. 為什麼使用VS Code？
    - 通過文字編輯器，如:記事本，完全可以編寫網頁原始碼
      
      但是效率......不忍直視
    - 實際開發中，注重開發的效率和便捷性，因此我們會使用一些開發工具
      
      開發工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
    - 前端開發神器:VS Code → 速度快、體積小、外掛多
  2. VS Code使用前安裝要求
    - VSCode 軟體安裝完畢
    - Chinese (Simplified) Language Pack for Visual Studio Code 簡體中文外掛安裝完畢
    - open in browser 直接開啟瀏覽器外掛安裝
  3. VS Code建立網頁的步驟
    - 雙擊開啟VS Code軟體
    - 將day01程式碼資料夾用滑鼠左鍵按住不放，拖拽到VS Code視窗中，資料夾會顯示在左側目錄上
    - 點選目錄上的+新建檔案按鈕建立頁面，注意:檔案字尾名需要是.html
  4. VS Code的基本快捷鍵
    - 快速生成標籤:英文 + tab
    - 儲存檔案:ctrl + s(win)/command+s(mac)
      - 注意1:寫完檔案之後務必需要儲存檔案，否則網頁無變化
      - 注意2:可以設定自動儲存省去每次儲存的麻煩
    - 快速檢視網頁效果:右擊 → Open in Default Browser
      - 快捷鍵:alt + b(win)/option+b(mac)
      - 注意:必須安裝了open in browser 外掛
    - 快速生成結構標籤:! + tab
      - 注意1:!必須是英文的，中文!無效
      - 注意2:必須保證當前檔案字尾名是.html，否則無效
      - VS Code自動生成的骨架多了其他標籤，之後會介紹
  5. VS Code的其他快捷鍵
    - 快速複製一整行:ctrl + c(win)/command+c(mac)
    - 快速貼上一整行:ctrl + v(win)/command+v(mac)
    - 快速刪除(剪下)一整行:ctrl + x(win)/command+x(mac)
      
      ......
    - 其他快捷鍵會在學習過程中用到一個介紹一個，同學們先需要把基礎快捷鍵操作記牢!
語法規範
1. HTML的註釋
  1. 什麼是註釋
    - 註釋的作用:
      - 為程式碼新增的具有解釋性、描述性的資訊，主要用來幫助開發人員理解程式碼
      - 瀏覽器執行程式碼時會忽略所有的註釋
    - 註釋的快捷鍵:
      - 在VS Code中:ctrl + /
  2. 註釋的作用和寫法
    - 註釋的作用:
      - 為程式碼新增的具有解釋性、描述性的資訊，主要用來幫助開發人員理解程式碼
      - 瀏覽器執行程式碼時會忽略所有的註釋
    - 註釋的快捷鍵:
      - 在VS Code中:ctrl + /
2. HTML標籤的構成
  - HTML標籤的結構
    - 標籤的結構圖:
    - 結構說明:
      1. 標籤由<、>、/、英文單詞或字母組成。並且把標籤中<>包括起來的英文單詞或字母稱為標籤名
      2. 常見標籤由兩部分組成，我們稱之為:雙標籤。前部分叫開始標籤，後部分叫結束標籤，兩部分之間包裹內容**
      3. 少數標籤由一部分組成，我們稱之為:單標籤。自成一體，無法包裹內容
  - 小結
    - 常見標籤由幾部分組成?稱之為?
      
      兩部分，雙標籤
    - 少數標籤由幾部分組成?稱之為?
      
      一部分，單標籤
    - 以下標籤按照結構劃分，分別屬於哪一類標籤?
```
<p>我是標籤</p>
<h1>我是標籤</h1>
<hr>
<br>
```
3. HTML標籤的屬性
  - HTML標籤的屬性
    - 標籤的完整結構圖:
    - 屬性注意點:
      1. 標籤的屬性寫在開始標籤內部
      2. 標籤上可以同時存在多個屬性
      3. 屬性之間以空格隔開
      4. 標籤名與屬性之間必須以空格隔開 5. 屬性之間沒有順序之分
  - 小結
    - 雙標籤的屬性需要寫在開始標籤還是結束標籤中? • 開始標籤
    - 標籤上可以同時存在幾個屬性?
      
      多個
    - 標籤名與屬性之間，屬性與屬性之間以什麼隔開? • 空格
4. HTML標籤的關係
  - HTML標籤與標籤之間的關係可分為:
    - 父子關係(巢狀關係)
```
<head>
  <title></title>
</head>
```
    - 兄弟關係(並列關係)
```
<head></head>
<body></body>
```
  - 小結
    - 標籤之間的關係可分為哪幾種?
      - 父子關係(巢狀關係)
      - 兄弟關係(並列關係)
    - 以下標籤之間的關係書寫錯誤的是?
```
A:
  <head></head>
  <body></body>
B:
  <div><p></p></div>
C:
  <head><title></head></title>
D:
  <body><div></div></body>
答案：C
```

構成	語言	說明
結構	HTML	頁面元素和內容
表現	CSS	網頁元素的外觀和位置等頁面樣式(如:顏色、大小等)
行為	JavaScript	網頁模型的定義與頁面互動

二、HTML標籤學習

排版標籤
1. 標題標籤
  - 場景:在新聞和文章的頁面中，都離不開標題，用來突出顯示文章主題
  - 程式碼:h系列標籤
```
 <h1>我是1級標題</h1>
 <h2>我是2級標題</h2>
 <h3>我是3級標題</h3>
 <h4>我是4級標題</h4>
 <h5>我是5級標題</h5>
 <h6>我是6級標題</h6> 
```
  - 語義:1~6級標題，重要程度依次遞減
  - 特點:
    - 文字都有加粗
    - 文字都有變大，並且從h1 → h6文字逐漸減小
    - 獨佔一行
  - 注意點:h1標籤對於網頁尤為重要，開發中有特定的使用場景，如:新聞的標題、網頁的logo部分
  - 小結
    - 標題標籤一共有幾個?分別表示什麼含義?
      - h1標籤:一級標題
      - h2標籤:二級標題
      - h3標籤:三級標題
      - h4標籤:四級標題
      - h5標籤:五級標題
      - h6標籤:六級標題
    - 標題標籤有哪些特點?
      - 文字都有加粗
      - 文字都有變大，但是從h1 → h6文字逐漸減小
      - 獨佔一行
2. 段落標籤
  - 場景:在新聞和文章的頁面中，用於分段顯示
  - 程式碼
```
<p>我是一段文字</p>
```
  - 語義:段落
  - 特點:
    - 段落之間存在間隙
    - 獨佔一行
  - 小結
    - 段落標籤的標籤名是?
      - p標籤
    - 段落標籤有哪些特點?
      - 段落之間存在間隙
      - 獨佔一行
3. 換行標籤
  - 場景:讓文字強制換行顯示
  - 程式碼:
```
<br/>
  
```
  - 語義:換行
  - 特點:
    - 單標籤
    - 讓文字強制換行
4. 水平線標籤
  - 場景:分割不同主題內容的水平線
  - 程式碼:
```
<hr/> 

```
  - 語義:主題的分割轉換
  - 特點:
    - 單標籤
    - 在頁面中顯示一條水平線
文字格式化標籤
1. 文字格式化標籤的介紹
  - 場景:需要讓文字加粗、下劃線、傾斜、刪除線等效果
  - 程式碼:
  標籤說明標籤說明
  
  b 加粗 strong 加粗
  
  u 下劃線 ins 下劃線
  
  i 傾斜 em 傾斜
  
  s 刪除線 del 刪除線
  - 語義:突出重要性的強調語境
2. 標籤語義化(瞭解)
  - 實際專案開發中選擇標籤的原則:標籤語義化
    - 即:根據語義選擇對應正確的標籤
    - 如:需要寫標題，就使用h系列標籤
    - 如:需要寫段落，就使用p標籤
    - ......
  - 好處:
    - 對人:好理解，好記憶
    - 對機器:有利於機器解析，對搜尋引擎(SEO)有幫助
  - 推薦:
    - strong、ins、em、del，表示的強調語義更強烈!

標籤	說明	標籤	說明
b	加粗	strong	加粗
u	下劃線	ins	下劃線
i	傾斜	em	傾斜
s	刪除線	del	刪除線

媒體標籤

圖片標籤
1. 圖片標籤的介紹
  - 場景:在網頁中顯示圖片
  - 程式碼:
```
<img src="" alt="">
```
  - 特點:
    - 單標籤
    - img標籤需要展示對應的效果，需要藉助標籤的屬性進行設定
2. 圖片標籤的src屬性
  - 屬性名:src
  - 屬性值:目標圖片的路徑
  - 注意點:
    - 當前網頁和目標圖片在同一個資料夾中，路徑直接寫目標圖片的名字即可(包括字尾名)
    - 路徑的情況有很多
```
<body>
 <img src="./1.jpg" alt="" title="">
</body>
</html>
```
3. 圖片標籤的alt屬性
  - 屬性名:alt
  - 屬性值:替換文字
    - 當圖片載入失敗時，才顯示alt的文字
    - 當圖片載入成功時，不會顯示alt的文字
4. 圖片標籤的title屬性
  - 屬性名:title
  - 屬性值:提示文字
    - 當滑鼠懸停時，才顯示的文字
  - 注意點:title屬性不僅僅可以用於圖片標籤，還可以用於其他標籤
5. 圖片標籤的width和height屬性
  - 屬性名:width和height
  - 屬性值:寬度和高度(數字)
  - 注意點:
    - 如果只設置width或height中的一個，另一個沒設定的會自動等比例縮放(此時圖片不會變形)
    - 如果同時設定了width和height兩個，若設定不當此時圖片可能會變形
路徑
1. 路徑的介紹
  - 場景:頁面需要載入圖片，需要先找到對應的圖片
  - 類似於:生活中兩個人，我要去找你，需要通過一定的路徑才能找到!
  - 同理:頁面需要找到圖片，也是需要通過路徑才能找到
  - 路徑可分為:
    - 絕對路徑(瞭解)
    - 相對路徑(常用
2. 絕對路徑(瞭解)
  - 絕對路徑:指目錄下的絕對位置，可直接到達目標位置，通常從碟符開始的路徑
  - 例如:
    - 碟符開頭:D:\day01\images\1.jpg
    - 完整的網路地址:https://www.itcast.cn/2018czgw/images/logo.gif(瞭解)
3. 相對路徑有哪三種情況:
  - 同級目錄:直接寫:目標檔名字!
  - 下級目錄:直接寫:資料夾名/目標檔名字!
  - 上級目錄:直接下:../目標檔名字!
4. VScode中路徑的快捷鍵
  - 同級和下級目錄:./ 之後選擇即可
  - 上級目錄:../ 之後選擇即可
音訊標籤
- 場景:在頁面中插入音訊
- 程式碼:
```
<audio src="./music.mp3" controls autoplay loop></audio>
```
- 常見屬性:
  
  屬性名功能
  
  src 音訊的路徑
  
  controls 顯示播放的控制元件
  
  autoplay 自動播放（部分瀏覽器不支援）
  
  loop 迴圈播放
- 注意點:
  - 音訊標籤目前支援三種格式:MP3、Wav、Ogg

屬性名	功能
src	音訊的路徑
controls	顯示播放的控制元件
autoplay	自動播放（部分瀏覽器不支援）
loop	迴圈播放

視訊標籤

場景:在頁面中插入音訊

程式碼:

<video src="./video.mp4" controls autoplay muted loop></video>

常見屬性:

屬性名	功能
src	視訊的路徑
controls	顯示播放的控制元件
autoplay	自動播放（部分瀏覽器不支援)→谷歌瀏覽器中寫muted可以完成靜音的自動播放
loop	迴圈播放

注意點:
- 音訊標籤目前支援三種格式:MP4 、WebM 、Ogg

連結標籤
1. 連結標籤的介紹
  - 場景:點選之後，從一個頁面跳轉到另一個頁面
  - 稱呼: a標籤、超連結、錨鏈接
  - 程式碼:
```
<a href="https://www.baidu.com/">超連結</a>
```
  - 特點:
    - 雙標籤，內部可以包裹內容
    - 如果需要a標籤點選之後去指定頁面，需要設定a標籤的href屬性
2. 連結標籤的href屬性
  - 屬性名:href
  - 屬性值:點選之後跳轉去哪一個網頁(目標網頁的路徑)
    - 外部連結:
```
<a href="https://www.baidu.com/">百度一下</a>
```
    - 內部連結:
```
<a href="./目標網頁.html">目標網頁</a>
```
3. 連結標籤的顯示特點(瞭解)
  - a標籤預設文字有下劃線
  - a標籤從未點選過，預設文字顯示藍色
  - a標籤點選過之後，文字顯示為紫色(清除瀏覽器歷史記錄可恢復藍色)
4. 連結標籤的target屬性
  - 屬性名:target
  - 屬性值:目標網頁的開啟形式
    
    取值效果
    
    _self 在當前視窗中跳轉
    
    _blank 在新視窗中跳轉
1. 空連結(拓展補充)
  - 程式碼:
```
<a href="#">空連結</a>
```
  - 功能:
    - 點選之後回到網頁頂部
    - 開發中不確定該連結最終跳轉位置，用空連結佔個位置