前端基礎知識總結

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

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