# 前端教學大綱 [toc] ## 1. 教學環境 | 工具/內容 | 描述 | | --------- | -------------------- | | 編輯器 | VSCODE | | 瀏覽器 | Chrome \| FireFox | | 教學內容 | HTML5/CSS3/JS/jQuery | --- ## 2. VSCODE - [官網下載](https://code.visualstudio.com/) - 推薦插件列表 | 名稱 | 描述 | | ------------------------- | ---------------------------- | | Chinese Language ... | 中文簡體語言包 | | HTML CSS Support | html,css 語言支持包 | | Live Server | 實時臨測文件變化并刷新瀏覽器 | | Markdownlint | Markdown 語法檢查器 | | Markdown Preview Enhanced | Markdown 文檔實時預覽 | | Prettier-Code formatter | 代碼自動格式化 | | VS Color Picker | 拾色器 | - vscode 已內置 _Emmet_ 插件(一款可加速 html 代碼生成的流行插件) - vscode 已支持文件路徑的實時感知提示 --- ## 3. Chrome | FireFox | 瀏覽器 | 下載地址 | | -------------- | ------------------------------------------ | | Chrome (谷歌) | <https://www.google.cn/intl/zh-CN/chrome/> | | FireFox (火狐) | <http://www.firefox.com.cn/> | --- ## 4. 教學內容 | 知識點 | 描述 | | ---------- | --------------------------------------------- | | HTML5 | 基本常識 / 基本元素與屬性 | | CSS3 | 選擇器 / 基本元素樣式 / 盒模型 | | Flex | 彈性布局與實戰 | | Grid | 網格布局與實戰 | | JavaScript | 數據類型 / 流程控制 / DOM / 事件 / Ajax / ... | | jQuery | DOM / 事件 / Ajax / ... |