前端基础（HTML，CSS，JavaScript）知识笔记，附：前端基础面试题！！前言 HTML，CSS，JavaScr

前言

HTML，CSS，JavaScript 是前端入门必须学习的知识，也是最基础的知识。文章主要分享包括（HTML，CSS，JS）前端基础知识笔记，学习路线图，最后附前端基础面试题。 HTML 知识点

html基本结构

html标签是由 <> 包围的关键词。 html标签通常成对出现，分为标签开头和标签结尾。有部分标签是没有结束标签的，为单标签，单标签必须使用 / 结尾。页面所有的内容，都在 html 标签中。 html标签分为三部分：标签名称，标签内容，标签属性。 html标签具有语义化，可通过标签名能够判断出该标签的内容，语义化的作用是网页结构层次更清晰，更容易被搜索引擎收录，更容易让屏幕阅读器读出网页内容。标签的内容是在一对标签内部的内容。标签的内容可以是其他标签。
标签属性

class属性：用于定义元素的类名 id属性：用于指定元素的唯一 id，该属性的值在整个html文档中具有唯一性 style属性：用于指定元素的行内样式，使用该属性后将会覆盖任何全局的样式设定 title属性：用于指定元素的额外信息 accesskey属性：用于指定激活元素的快捷键 tabindex属性：用于指定元素在 tab 键下的次序 dir属性：用于指定元素中内容的文本方向，属性只有 ltr 或 rtl 两种 lang属性：用于指定元素内容的语言
事件属性

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，当媒体已停止播放但打算继续播放时触发
文本标签

段落标签：
，段落标签用来描述一段文字标题标签：，标题标签用来描述一个标题，标题标签总共有六个级别强调语句标签：，用于强调某些文字的重要性更加强调标签：和标签一样，用于强调文本，但它强调的程度更强一些无语义标签：，标签是没有语义的短文本引用标签：，简短文字的引用长文本引用标签：
，定义长的文本引用换行标签：

多媒体标签

链接标签：图片标签：视频标签：音频标签：

列表标签

无序列表标签：ul，li，

列表定义一个无序列表
代表无需列表中的每一个元素有序列表：ol,li 定义列表：
，定义列表通常和
和
标签一起使用

表格标签

表格标签
表格的一行表格的表头单元格表格合并，同一行内，合并几列colspan=“2”，同一列内，合并几行rowspan=“3”

表单标签

表单标签
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。

<form method="传送方式" action="服务器文件"> action，浏览者输入的数据被传送到的地方 method，数据传送的方式 **输入标签 ** 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按钮，下拉选择框

<option value="提交值"> 选项 </option>是下拉选择框里面的每一个选项

文本域：

当用户想输入大量文字的时候，使用文本域。cols，多行输入域的列数，rows，多行输入域的行数。

9. 其他语义化标签

盒子：<div></div> 网页头部：<header></header>，html5新增语义化标签，定义网页的头部，主要用于布局，分割页面的结构底部信息：<footer></footer>，html5新增语义化标签，定义网页的底部，主要用于布局，分割页面的结构导航：<nav></nav>，html5新增语义化标签，定义一个导航，主要用于布局，分割页面的结构文章：<article></article>，html5新增语义化标签，定义一篇文章，主要用于布局，分割页面的结构侧边栏：<aside></aside>，语义化标签，定义主题内容外的信息，主要用于布局，分割页面的结构。时间标签：<time></time>，语义化标签，定义一个时间

10. 网页结构

<!DOCTYPE html> 定义文档类型，告知浏览器用哪一种标准解释HTML <html></html>可告知浏览器其自身是一个 HTML 文档 <body></body> 标签之间的内容是网页的主要内容 <head></head> 标签用于定义文档的头部，它是所有头部元素的容器 <title></title> 元素可定义文档的标题 <link> 标签将css样式文件链接到HTML文件内 <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的区别

篇幅有限，需要前端学习资料可以点击链接：jq.qq.com/?_wv=1027&k… 免费获取《前端基础知识笔记》《前端基础面试题》 PDF完整版（包括题目与解析）。

**前端基础面试题： **

《前端基础面试题》内容大概包括 HTML，CSS，JavaScript，浏览器，性能优化