$number{01}前端基礎(chǔ)知識總結(jié)2024-01-04匯報人：<XXX>目錄HTML基礎(chǔ)CSS基礎(chǔ)JavaScript基礎(chǔ)前端框架與庫前端工具與環(huán)境前端性能優(yōu)化01HTML基礎(chǔ)HTML定義了網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，通過各種標簽來描述網(wǎng)頁中的元素，如標題、段落、鏈接、圖片等。HTML文檔由一系列的標簽組成，通過嵌套的方式組織內(nèi)容，形成樹狀結(jié)構(gòu)。HTML是HyperTextMarkupLanguage（超文本標記語言）的縮寫，用于創(chuàng)建網(wǎng)頁的標準標記語言。HTML簡介HTML標簽通常成對出現(xiàn)，如`<p>`和`</p>`，表示一個段落。標簽可以包含屬性，提供有關(guān)元素的額外信息。例如，`<img>`標簽的`src`屬性指定圖像的來源。常見的HTML標簽包括`<h1>`到`<h6>`（標題）、`<p>`（段落）、`<a>`（鏈接）、`<img>`（圖片）等。HTML標簽HTML5引入了一系列語義化標簽，如`<header>`、`<footer>`、`<article>`、`<section>`等，這些標簽有助于提高網(wǎng)頁的可訪問性和可維護性。語義化標簽不僅提供了更明確的語義信息，還有助于搜索引擎更好地理解網(wǎng)頁內(nèi)容，提高SEO效果。HTML語義化標簽HTML5引入了更多新的元素和API，如`<video>`和`<audio>`標簽支持多媒體內(nèi)容，`<canvas>`標簽支持繪圖等。HTML5還支持自定義數(shù)據(jù)屬性（data-*），用于存儲私有定制數(shù)據(jù)，方便JavaScript獲取和使用。HTML5還提供了對Web存儲的支持，包括localStorage和sessionStorage，用于在客戶端存儲數(shù)據(jù)。HTML5新特性02CSS基礎(chǔ)CSS是層疊樣式表的簡稱，用于描述HTML或XML（包括如SVG,MathML等衍生技術(shù)）文檔的呈現(xiàn)。CSS描述了如何在屏幕、紙張或其他媒介上渲染元素。CSS是網(wǎng)頁設(shè)計的重要組成部分，它使得網(wǎng)頁內(nèi)容與表現(xiàn)分離，提升了用戶體驗。CSS有多種版本，包括CSS2、CSS3等，CSS3引入了許多新特性，如圓角、漸變、動畫等。01020304CSS簡介元素選擇器類選擇器ID選擇器屬性選擇器偽類選擇器CSS選擇器根據(jù)HTML元素來選擇元素。通過類屬性來選擇元素。通過ID屬性來選擇元素。根據(jù)元素的屬性來選擇元素。用于選擇元素的特定狀態(tài)，如:hover、:active等。

CSS樣式樣式規(guī)則由兩部分組成：選擇器和聲明塊。聲明塊包含一個或多個聲明，每個聲明由屬性和值組成。屬性和值之間使用冒號(:)分隔，多個聲明之間使用分號(;)分隔。常用的CSS屬性包括顏色、字體、大小、邊距、填充等。CSS布局CSS布局主要涉及如何將元素放置在頁面上，以及元素之間如何相互影響。常見的CSS布局方式包括：浮動布局、定位布局、Flexbox和Grid等。Flexbox是一種一維布局模型，適用于在容器中排列項目。Grid是一種二維布局模型，適用于創(chuàng)建復(fù)雜的網(wǎng)頁布局。03JavaScript基礎(chǔ)JavaScript是一種高級的、動態(tài)類型的編程語言，主要用于Web開發(fā)。它最初被設(shè)計用于為網(wǎng)頁添加交互性，但現(xiàn)在已經(jīng)廣泛用于構(gòu)建復(fù)雜的單頁應(yīng)用。JavaScript運行在瀏覽器端，可以與DOM（文檔對象模型）進行交互，控制HTML和CSS。010203JavaScript簡介JavaScript語法基于ECMAScript標準，由關(guān)鍵字、變量、數(shù)據(jù)類型、運算符和控制結(jié)構(gòu)組成。變量是用來存儲數(shù)據(jù)的，數(shù)據(jù)類型包括數(shù)值、字符串、布爾值、對象等。運算符用于執(zhí)行算術(shù)、比較、邏輯等操作?？刂平Y(jié)構(gòu)包括條件語句和循環(huán)語句。JavaScript語法函數(shù)是一段可重復(fù)使用的代碼塊，用于執(zhí)行特定任務(wù)。JavaScript中有兩種類型的函數(shù)：內(nèi)置函數(shù)和自定義函數(shù)。內(nèi)置函數(shù)是語言本身提供的，如alert()和console.log()。自定義函數(shù)由用戶定義，可以接受參數(shù)并返回值。函數(shù)可以嵌套，一個函數(shù)內(nèi)部可以調(diào)用另一個函數(shù)。JavaScript函數(shù)JavaScript中的方法實際上是附加在對象上的函數(shù)，可以通過對象來調(diào)用。JavaScript是一種基于原型的面向?qū)ο缶幊陶Z言。這意味著它沒有類的概念，而是通過原型鏈實現(xiàn)繼承。在JavaScript中，對象是鍵值對的集合，可以通過點符號或方括號訪問屬性。對象可以包含其他對象作為其屬性。JavaScript面向?qū)ο缶幊?4前端框架與庫React是一個用于構(gòu)建用戶界面的JavaScript庫，由Facebook開發(fā)并開源。總結(jié)詞React允許開發(fā)者使用組件化的方式構(gòu)建復(fù)雜的用戶界面，具有高效渲染、組件化架構(gòu)和豐富的生態(tài)系統(tǒng)等特點。它采用JSX語法擴展JavaScript，使得HTML結(jié)構(gòu)和邏輯代碼能夠混合編寫。React還提供了狀態(tài)管理工具ReactRouter和Redux等。詳細描述ReactVue是一個漸進式的JavaScript框架，用于構(gòu)建用戶界面?？偨Y(jié)詞Vue的核心庫只關(guān)注視圖層，易于與其他庫或已有項目整合。Vue采用數(shù)據(jù)驅(qū)動的視圖方式，通過簡潔的聲明式語法，可以輕松創(chuàng)建復(fù)雜的單頁應(yīng)用。Vue還提供了路由、狀態(tài)管理等擴展功能。詳細描述Vue總結(jié)詞Angular是一個強大的、開源的前端JavaScript框架，由Google維護。詳細描述Angular基于TypeScript，采用模塊化、組件化的方式構(gòu)建單頁應(yīng)用。它提供了完整的應(yīng)用開發(fā)框架，包括指令、服務(wù)、依賴注入等。Angular還支持指令、作用域、控制器等概念，使得開發(fā)人員可以更加高效地構(gòu)建復(fù)雜的用戶界面。Angular05前端工具與環(huán)境控制臺面板用于顯示網(wǎng)頁加載過程中產(chǎn)生的錯誤和警告信息，以及在網(wǎng)頁上執(zhí)行的JavaScript代碼的輸出結(jié)果。元素面板用于查看和編輯網(wǎng)頁的HTML結(jié)構(gòu)和CSS樣式。腳本面板用于調(diào)試JavaScript代碼，設(shè)置斷點、單步執(zhí)行、查看調(diào)用堆棧等。瀏覽器開發(fā)者工具是瀏覽器自帶的用于調(diào)試和開發(fā)網(wǎng)頁的工具集合，包括控制臺、網(wǎng)絡(luò)、元素、樣式、腳本等面板。網(wǎng)絡(luò)面板用于監(jiān)控和調(diào)試網(wǎng)絡(luò)請求，查看請求的詳細信息和響應(yīng)內(nèi)容。樣式面板用于查看和編輯元素的CSS樣式，可以直接在頁面上修改樣式并實時預(yù)覽效果。010203040506瀏覽器開發(fā)者工具123Node.js環(huán)境npm包管理器用于安裝和管理Node.js的第三方模塊和包。Node.js是一個基于ChromeV8引擎的JavaScript運行環(huán)境，用于在服務(wù)器端運行JavaScript代碼。Node.js環(huán)境提供了豐富的模塊和包，使得JavaScript可以在服務(wù)器端進行文件操作、網(wǎng)絡(luò)請求、數(shù)據(jù)庫交互等操作。Webpack配置文件前端構(gòu)建工具Webpack前端構(gòu)建工具（如Webpack）通常使用webpack.config.js文件來配置Webpack的行為，包括入口文件、輸出文件、加載器、插件等配置。用于自動化構(gòu)建、打包和優(yōu)化前端項目的一組工具集合。是一個常用的前端構(gòu)建工具，可以將多個模塊化的JavaScript文件、CSS文件、圖片等資源打包成一個或多個文件，并優(yōu)化代碼性能。06前端性能優(yōu)化使用工具如TinyPNG或JPEGmini等對圖片進行壓縮，以減小文件大小，提高加載速度。圖片壓縮圖片格式選擇圖片懶加載根據(jù)需求選擇合適的圖片格式，如PNG、JPEG、GIF等，以降低文件大小并保持適當(dāng)?shù)膱D像質(zhì)量。通過延遲加載非視口內(nèi)的圖片，以減少頁面初次加載時的負擔(dān)，提高頁面加載速度。030201圖片優(yōu)化懶加載是一種優(yōu)化技術(shù)，通過延遲加載非視口內(nèi)的內(nèi)容，以減少頁面初次加載時的負擔(dān)，提高頁面加載速度。懶加載適用于圖像、視頻、廣告等非關(guān)鍵內(nèi)容，可以按需加載或滾動加載