大家好，又見面了，我是你們的朋友全棧君。
前言
HTML，CSS，JavaScript 是前端入門必須學習的知識，也是最基礎的知識。文章主要分享包括 （HTML，CSS，JS）前端基礎知識筆記，學習路線圖，最後附前端基礎面試題。
HTML 知識點
1. html基本結構
- html标簽是由
<>
- html标簽通常成對出現，分為标簽開頭和标簽結尾。
- 有部分标簽是沒有結束标簽的，為單标簽，單标簽必須使用
/
- 頁面所有的内容，都在 html 标簽中。
- html标簽分為三部分：标簽名稱，标簽内容，标簽屬性。
- html标簽具有語義化，可通過标簽名能夠判斷出該标簽的内容，語義化的作用是網頁
- 結構層次更清晰，更容易被搜尋引擎收錄，更容易讓螢幕閱讀器讀出網頁内容。
- 标簽的内容是在一對标簽内部的内容。
- 标簽的内容可以是其他标簽。
2. 标簽屬性
- class屬性：用于定義元素的類名
- id屬性：用于指定元素的唯一 id，該屬性的值在整個html文檔中具有唯一性
- style屬性：用于指定元素的行内樣式，使用該屬性後将會覆寫任何全局的樣式設定
- title屬性：用于指定元素的額外資訊
- accesskey屬性：用于指定激活元素的快捷鍵
- tabindex屬性：用于指定元素在 tab 鍵下的次序
- dir屬性：用于指定元素中内容的文本方向，屬性隻有
ltr
rtl
- lang屬性：用于指定元素内容的語言
3. 事件屬性
-
window 視窗事件：
onload，在網頁加載結束之後觸發
onunload，在使用者從網頁離開時發生（點選跳轉，頁面重載，關閉浏覽器視窗等）
-
form 表單事件：
onblur，當元素失去焦點時觸發
onchange，在元素的值被改變時觸發
onfocus，當元素獲得焦點時觸發
onreset，當表單中的重置按鈕被點選時觸發
onselect，在元素中文本被選中後觸發
onsubmit，在送出表單時觸發
-
keyboard 鍵盤事件：
onkeydown，在使用者按下按鍵時觸發
onkeypress，在使用者按下按鍵後，按着按鍵時觸發。（該屬性不會對所有按鍵生效，不生效的有：alt，ctrl，shift，esc）
-
mouse 滑鼠事件：
onclick，當在元素上發生滑鼠點選時觸發
onblclick，當在元素上發生滑鼠輕按兩下時觸發
onmousedown，當元素上按下滑鼠按鈕時觸發
onmousemove，當滑鼠指針移動到元素上時觸發
onmouseout，當元素指針移出元素時觸發
onmouseup，當元素上釋放滑鼠按鈕時觸發。
-
Media媒體事件
onabort，當退出時觸發
onwaiting，當媒體已停止播放但打算繼續播放時觸發
4. 文本标簽
- 段落标簽：
<p></p>
- 标題标簽：
<hx></hx>
- 強調語句标簽：
<em></em>
- 更加強調标簽：
<strong></strong>
<em>
- 無語義标簽：
<span></span>
- 短文本引用标簽：
<q></q>
- 長文本引用标簽：
<blockquote></blockquote>
- 換行标簽：
<br/>
5. 多媒體标簽
- 連結标簽：
<a></a>
- 圖檔标簽：
<img/>
- 視訊标簽：
<video></video>
- 音頻标簽：
<audio></audio>
6. 清單标簽
- 無序清單标簽：ul，li，
<ul></ul>
<li></li>
- 有序清單：ol,li
- 定義清單：
<dl></dl>
<dt></dt>
<dd></dd>
7. 表格标簽
- 表格标簽
<table></table>
- 表格的一行
<tr></tr>
- 表格的表頭
<th></th>
- 單元格
<td></td>
- 表格合并，同一行内，合并幾列colspan=“2”，同一列内，合并幾行rowspan=“3”
8. 表單标簽
表單标簽
<form>
<form></form>
表單是可以把浏覽者輸入的資料傳送到伺服器端，這樣伺服器端程式就可以處理表單傳過來的資料。
<form method="傳送方式" action="伺服器檔案"> 複制
- action，浏覽者輸入的資料被傳送到的地方
- method，資料傳送的方式
輸入标簽
<input/>
name：為文本框命名，用于送出表單，背景接收資料用。
value：為文本輸入框設定預設值。
type：通過定義不同的type類型，input的功能有所不同。
- text 單行文本輸入框
- password 密碼輸入框（密碼顯示為***)
- radio 單選框 （checked屬性用于顯示選中狀态）
- checkbox 複選框（checked屬性用于顯示選中狀态）
- file 上傳檔案
- button 普通按鈕
- reset 重置按鈕（點選按鈕，會觸發form表單的reset事件）
- submit 送出按鈕（點選按鈕，會吃飯form表單的submit事件）
- email 專門用于輸入 e-mail
- url 專門用于輸入 url
- number 專門用于number
- range 顯示為滑動條，用于輸入一定範圍内的值
- date 選取日期和時間（還包含：month、week、time、datetime、datetime-local）
- color 選取顔色
button按鈕，下拉選擇框
<select></select>
-
<option value="送出值">
</option>
文本域：
<textarea></textarea>
當使用者想輸入大量文字的時候，使用文本域。cols，多行輸入域的列數，rows，多行輸入域的行數。
9. 其他語義化标簽
- 盒子：
<div></div>
- 網頁頭部：
<header></header>
- 底部資訊：
<footer></footer>
- 導航：
<nav></nav>
- 文章：
<article></article>
- 側邊欄：
<aside></aside>
- 時間标簽：
<time></time>
10. 網頁結構
-
<!DOCTYPE html>
-
<html></html>
-
<body></body>
-
<head></head>
-
<title></title>
-
<link>
-
<meta>
CSS 知識點
- CSS 權重及引入方式
- 用CSS畫三角形
- 元素水準垂直居中的方案
- 元素種類的劃分
- 盒子模型及其了解
- margin塌陷及合并問題
- 浮動模型及清除浮動的方法
- 聖杯布局與雙飛翼布局
- Flex 布局
- px,em,rem的差別
- 媒體查詢
- HTML5 新特性
- Grid 布局
- 行内元素的間距怎麼解決
- 僞類和僞元素有什麼不同
JavaScript 知識點
- 原始值和引用值類型及差別
- 判斷資料類型的常用方法
- 類數組和數組的差別與轉換
- 數組常見的 API
- bind,call,apply的差別
- new的原理
- 如何正确判斷this
- 閉包及其作用
- 原型和原型鍊
- 繼承的實作方式及比較
- 對象的深拷貝與淺拷貝
- 防抖和節流
- 作用域和作用域鍊、執行期上下文
- DOM 常見操作方法
- Ajax請求的過程
- JS垃圾回收機制
- JS中的String、Array和Math方法
- addEventListener 和 onClick() 的差別
- 事件委托
- BOM的location對象
- 浏覽器從輸入URL到頁面渲染的整個流程
- 跨域、同源政策及跨域實作方式和原理
- JavaScript 中的 arguments
- EventLoop事件循環
- 釋出訂閱者模式與觀察者的實作
- 函數柯裡化及其通用封裝
- “”和“=” 以及 Object.is() 的差別
- let、const和var的概念與差別
- Symbol概念及其作用
- Set 和Map 資料結構
- XSS 和 CSRF 攻擊
- 浏覽器程序及重要的線程
- 為什麼 JS 引擎是單線程的
- 為什麼 GUI 渲染線程與 JS 引擎線程互斥
- JS 引擎線程與事件觸發線程、定時器觸發線程、異步 HTTP 請求線程
- 前端常見性能優化
- defer 和 async 的差別
- Object.defineProperty 與 Proxy 的差別
- 單頁應用的好處
- 使用 IntersectionObsever API 監聽元素出現在視圖
- gitflow 工作流
- 服務端渲染與浏覽器渲染
- webpack 打包原理
- CommonJS與ES6子產品的差異
- 箭頭函數和非箭頭函數的差別
- 數組扁平化的幾種方式
- input change keyup的差別
前端基礎面試題：
《前端基礎面試題》内容大概包括 HTML，CSS，JavaScript，浏覽器，性能優化
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/147995.html原文連結：https://javaforall.cn