Web前端開發第一天學習筆記

阿新 • • 發佈：2020-12-15

day01

課程的規劃

第一階段、css3/html5

第二階段、JS互動

第三階段、node開發

第四階段、前端框架 :vue react

第五階段、小程式+資料視覺化

第六階段、就業指導+專案實訓

小目標：PC電商網站

前端的概述

web的發展史
- web1.0 簡單的靜態頁面早期三大門戶搜狐新浪網易
- web2.0 更注重使用者之間的互動使用者即是資訊的消費者也是製造者微博
- web3.0
  - 人工智慧
  - 複雜的頁面功能
  - 即時通訊
web的前景
- pc端的網頁
- 移動端的網頁
- ios android

vscode編譯器的使用

快捷鍵
- 複製本行到下一行 shift+alt+↓
- 複製本行到上一行 shift+alt+↑
- 查詢 ctrl+F
- 替換 ctrl+H
- 同時寫多行 1.按住滑鼠滑輪向下滑動，可以出現多個游標 2.按住alt鍵，點選左鍵，可以不同位置，出現游標

瀏覽器核心

瀏覽器的渲染引擎，作用是解析我們程式碼成為畫面
五大瀏覽器及其核心(都是自主研發核心)
chrome谷歌 firefox火狐 opera歐朋 ie（微軟） safari(蘋果)

blink（webkit分支） gecko（高版本相容谷歌核心） presto（後來版本改成blink） trident webkit
360、qq、UC、搜狗：雙核心（blink&trident）

chrome谷歌	firefox火狐	opera歐朋	ie（微軟）	safari(蘋果)
blink（webkit分支）	gecko（高版本相容谷歌核心）	presto（後來版本改成blink）	trident	webkit

網頁三層結構

HTML 結構層--頁面有什麼東西
CSS 表示層--擁有的東西是什麼樣子的
JS(javascript) 行為層--使用者的行為觸發的事情

HTML語言

html定義

hyper text markup language （超文字標記語言），不是程式語言

html文件(副檔名或者字尾名)

.txt .doc .xls
.html

html基本語法

標籤結構
- 開始標籤開始，結束標籤結束，內部可以包含文字或者其他標籤
- ```
<關鍵字>
   文字內容
  <關鍵字>
       文字內容
    </關鍵字>
</關鍵字> 
```
- 空標籤，只有開始標籤，沒有結束標籤
標籤屬性
- ```
<cxl name="cxl" age="25" profession="singer"></cxl>
```
- 標籤的屬性只能設定在開始標籤。

html基本結構

<!-- 不是標籤，是一個宣告，宣告文件型別，告訴瀏覽器以哪種規範來解析文件，這是html5的寫法 -->
<!DOCTYPE html>
<!-- html是文件的最大標籤 -->
<html lang="en">

<!-- head頭部標籤，內部寫，css樣式，元資訊，標題 -->
<head>
  <!-- 
    設定字元編碼格式
    gb2312 中文簡體
    GBK 中文簡體和繁體
    UTF-8 萬國碼，中文，英文，日文，韓文，法語
   -->
  <meta charset="UTF-8">
  <!-- 
    配置視窗資訊（移動端需要配置）
   -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 文件的標題 -->
  <title>Document</title>
</head>

<body>
<!-- body身體標籤，內部寫，所有的文件結構標籤 -->
</body>

</html>

常用標籤

常用塊級標籤及特點

div
- 最常用的塊級標籤
- 網頁應用場景
p
- 段落標籤
h1-h6
- 標題標籤
特點：垂直上下排列，獨立成行

常用內聯標籤及特點(行內標籤)

span
- 常用的行內標籤，使用者圖示
strong
b
- 加粗
em
i
- 斜體
sub
- 定義下標字
sup
- 定義上標字
del
s(基本淘汰)
- 刪除線
特點：預設在一行排列，超出一行會折行

其他標籤

br
- 換行標籤
hr
- 水平分隔線

影象標籤

img

自帶屬性：

src 引入檔案的路徑

絕對路徑

網路路徑 http:// https://

本地磁碟路徑 C:/ D:/

相對路徑

同級目錄下 ./ (可以省略)

上級目錄 ../ (上上級目錄 ../../)

alt 友好提示

title 滑鼠懸停時展示

width 圖片寬度，只設置寬度時，高度會等比例縮放

height 圖片高度