type
status
date
slug
summary
tags
category
icon
password

HTML

  • HTML5是一种超文本标记语言
  • 基本格式
  • 语法
    • html文档后缀名.html或.htm
    • 标签分为围堵标签,如<html></html>和自闭和标签,如<br/>
    • 正确嵌套,不能你中有我,我中有你
      • 错误:<a><b></a></b>
      • 正确: <b><a></a></b>
    • 在开始标签中可以定义属性,属性由键值对构成,需要用引号引起来
    • html标签不区分大小写,建议小写
 

基本结构标签

notion image
 

文件标签

首部标签<head>
基础地址标签<base>
用于为页面上所有的超链接设置默URL地址。当该文档中使用了相对路径时,浏览器会用base标签指定的URL进行补全
元数据标签<meta>
用于提供当前HTML文档文档的元数据,对于机器是可读的,其中Charset为字符集设置
链接标签<link>
用于连接外部资源和当前HTML文档,只出现在<head>标签中,通常用于连接外部样式,如CSS
 

文档注释

<!--需要注释的内容-->
 

常用标签

基础标签

段落标签<p>
段落和段落之间默认空一行进行分割
标题标签<h1>~<h6>
使用的数字越大,字体越小,默认为左对齐的黑体字
水平线标签<hr>
在网页上画一条水平线,可以单独使用,默认是宽度为1像素的黑色水平线
  • color:颜色
  • width:宽度
  • size:高度
  • align:对齐方式
    • center:居中
    • left:左对齐
    • right:右对齐
换行标签<br>
该标签可以代替回车键,每次只能换一行
文本格式标签
HTML不支持<font><center>标签!
斜体字标签<i>
将文本内容显示为斜体字效果
粗体字标签<b>
将文本内容显示为粗体字效果
上标标签<sup>
将文本内容显示为上标的样式
上标标签<sub>
将文本内容显示为下标的样式
删除线标签<del>
在文本内容上显示一条贯穿线,表示删除
下划线标签<ins>
在文本内容下显示下划线
预格式化标签<pre>
保留文本内容的空格和排版
 

列表标签

有序列表标签<ol>
用于定义带有编号的列表,需要和列表项目标签<li>配合使用,可以用start定义编号起始值,可以用type属性声明编号样式
无序列表标签<ul>
用于定义不带编号的列表,需要和列表项目标签<li>配合使用,可以用type属性声明编号样式
列表标签<dl>
每条表项需要结合词条标签<dt>和定义标签<dd>一起使用,<dt>需要标记在每个词条的开头,<dd>需要标记在每个定义的开头
图像标签<img>
可单独使用,用src属性指明图像的存储路径,通常是URL形式,alt属性是无法找到图像时的代替文本,该属性可省略不写
 

超链接标签

外部链接
  • href:指定访问资源的URL
  • target:指定打开资源的方式
    • _self:默认值,在当前页面打开
    • _blank:在空白页面打开
可包含文本内容或图片内容
内部链接
单击跳转到同一页面的指定区域,指定区域名可以自定义,但同时目标区域必须标记出相应的名称
 

表格标<table>

  • width:宽度
  • border:边框
  • cellpadding:定义内容和单元格的距离
  • cellspacing:定义单元格之间的距离,如果指定为0,单元格的线会合为一条
  • bgcolor:背景色
  • align:对齐方式
表格行标签<tr>
用于定义表格中的一行
  • bgcolor:背景色
  • align:对齐方式
单元格标签<td>
用于定义表格行中的一个数据单元格,数据单元格可以包含表单,文本,水平线,图片,列表,段落甚至新的表格内容,默认状态下单元格内容为左对齐
  • colspan:合并列
  • rowspan;合并行
表头标签<th>
用于定义表格的第一行表头,默认粗体字,居中对齐
表格标题标签<caption>
为表格添加标题
表格布局标签
  • <thead>:表示表格头部分
  • <tbody>:表示表格体部分
  • <tfoot>:表示表格脚部分
 

框架标签

HTML5不支持<frame><framest>标签!
 

内联框架<iframe>

用于指定框架内部的网页来源
其中news.html的内容为
 

容器标签

<div>
可将网页页面分割成不同的独立部分,通常用于定义文档中的区域或节,该标签为块级元素,浏览器会自动在<div>和</div>所标记的区域前后放置换行符,每个标签可有独立id号
<span>
通常作为文本容器,没有特定的含义和样式,只有与css同时使用才可以指定文本设置样式属性,该标签是一个内联元素,与块级元素相反,内联元素不会再前后放置换行符,因此内联元素会默认在一行显示
<div>标签<span>的区别
  • <div>为块级元素,它包含的元素会自动换行,<span>为行内元素,前后不换行
  • <span>可以作为<div>的子元素,但<div>不能作为<span>的子元素
  • <span>元素的宽度由被包围内容的宽度决定,适用于想对一行中的文字或图片单独设置样式,又在不需要换行的条件下不影响其他行的内容的情况
 

HTML5新增常用标签

新增文档结构标签

页眉标签<header>
用于定义整个网页文档或其中一节的标题,通常为网站名称
导航标签<nav>
用于定义导航菜单栏,可通过超链接跳转到其他页面
节标签<section>
用于定义节段落,里面可包含一篇或多篇文章
文章标签<article>
  • 用于定义正文内容,每个article都可以包含自己的页眉页脚,根据文章内容的长短也可以包含一个或多个段落元素<p>
侧栏标签<aside>
用于定义网页正文两侧的侧栏内容
页脚标签<footer>
用于定义整个网页文档或其中一节的页脚,通常包含文档作者,版权,联系方式等
 

新增格式标签

记号标签<mark>
用于突出显示指定区域的文本内容,可以为文字添加黄色底色
进度标签<progress>
用于显示任务的进度状态,配合JavaScript使用可显示任务进度的动态效果
  • value:当前值
  • max:最大值
度量标签<meter>
用于表示标量测试结果,不用于任务进度指示
  • value:实际数值
  • min:规定范围内最小数值
  • max:规定范围内最大数值
  • low:规定范围内的较低值,当value数值小于low属性时,度量显示为红色
  • high:规定范围内的较高值,当value数值大于low,并且小于high时,度量显示为黄色,高于high时显示绿色
  • optimum:规定范围内最佳值
 

表单API

表单标签

<form>和</form>用于定义完整的表单框架
  • action 属性为URL地址,规定表单提交数据的服务器地址
  • method 属性值get或post,规定用于发送表单数据的HTTP方法,默认为get
  • name 属性为自定义表单名称,规定表单的名称,具有唯一性
  • enctype 规定表单数据发送之前的编码要求
  • target 属性值为_blank _self _parent _top _iframename,规定在何时打开action属性中的URL地址
method的两种提交方式:
  • get方法:提交表单数据时,get方法会将表单组件的数据名称和值转化为文本形式的参数并直接加至原URL地址后面,点击提交后可以直接从浏览器地址栏看到全部内容,每次传输不能超过2KB
  • post方法:表单数据会放在HTML表头,用户无法直接看到参数内容,没有数据传递的容量要求
enctype的三个属性值:
  • application/x-www-form-urlencoded 该属性为默认值,这种编码方式用于处理表单控件中所有的value属性值
  • multipart/form-data 以二进制流处理数据,除了表单控件中的value属性值,也可以把用于上传文件的内容封装到参数中,该方法适用于表单上传文件时使用
  • text-plain 用于通过表单发送邮件,适用于当表单的action属性值为mailto:URL的情况
输入标签
input 为常用的表单标签,是行内元素,不会自动换行。根据其type属性值的不同可以显示多种表单元素样式
  • accept 属性值为HTML的文件类型,只能与<input type="file"> 的文件上传控件配合使用,用于规定文件上传控件可选择的文件类型
  • alt 属性为文本内容,只能与<input type="image">的图像按钮配合使用,用于规定无法显示图像时的提示文字
  • checked 属性值checked,只能与<input type="radio">的单选按钮或<input type="checkbox">的复选框配合使用,用于规定页面加载时默认为选中状态
  • disabled 属性值为disabled 用于规定加载时禁用此元素
  • maxlength 属性为数值,用于规定输入框中字符的最大长度
  • name 自定义,用于规定<input>标签的名称,如果没有填写name属性值,则表单组件的内容无法被正确提交
  • readonly 属性值为readonly,用于定义输入标签中的文本为不可编辑的制度状态
  • type 用于规定输入标签的类型
  • value 属性值为文本值,用于规定输入标签的值
type属性的十种类型
  • text 显示单行文本输入内容
  • password 显示密码输入款,其中字符会被*遮挡
  • radio 单选按钮
  • checkbox 复选按钮
  • submit 提交按钮,将表单数据提交给服务器
  • reset 重置按钮,可以清除表单中的所有属性
  • button 显示无动作按钮,通常配合JavaScript使用
  • image 显示图像形式的提交按钮
  • file 显示文件上传控件,包括输入区域和浏览按钮
  • hidden 隐藏输入字段
单行文本框text
在同一个表单中,单行文本框的name属性必须是唯一的,在大部分浏览器中该组件的默认值为20个字符,可以使用<input> 标签的size属性规定可见字符的宽度,或者使用CSS样定义该标签的width属性
默认情况下,单行文本框在首次加载时内容为空,可以为其添加value属性预设初始文本内容
单选按钮radio
样式为空心圆形区域,点击时会出现实心,value属性值为该元素提交数据时传递的数据值,单行文本框和密码框提交的都是文本框中输入的内容,单选按钮传递的只能是事先定义好的value值
多个radio类型的按钮可以通过添加相同的name表示一组,属于同一个组的按钮不能同时被选中,最多只能选择其中一个选项
可以使用checked属性设置默认选中的选项,没有checked属性,页面首次加载时所有选项均为未选中状态,若多个选项都标明了该属性,浏览器只会默认最后一个使用了
复选框checkbox
样式为可勾选的空心方形区域
多个checkbox类型的按钮可以通过添加相同的name表示一组,同组多有选中的复选框选项值将以数值的形式对应同一个参数名称进行数据传递
可以使用checked属性设置默认选中的选项,允许多个选项同时使用该属性
提交按钮submit
value属性值可以用于定义自定义按钮上的文字内容,若省略不写,则按钮默认的文字为submit
无动作按钮button
图片提交按钮image
图片提交按钮只支持图片样式,无法允许文本加背景图片的形式按钮出现,如果需要可以选择ps或者专门的按钮标签button
标记标签
label 又称为标注标签,可放置在input标签前后为其定义标记,通常作补充说明,显示效果与普通文本一致,但该标签可以在被点击时为对应的表单控件生成焦点
可以在label元素的首标签中使用for属性引用对应表单控件的ID名称,ID名称可以和name名称相同
多行文本标签
textarea 标签可以实现多行文本区域,允许文本回车换行
  • rows 属性值为正整数数值,规定文本框可见行数
  • cols 属性值为正整数数值,规定文本框可见的宽度
  • wrap 属性值为soft或hard,规定文本框的换行方式,默认值为sort
列表标签
select 标签可以用于创建单选或多选菜单,菜单的样式根据属性值的不同显示为下拉菜单或列表框,只显示其中一条默认选项,需要点开才能看到所有选项内容,并且只能单选
  • disabled 属性值为disabled,禁用列表菜单
  • multiple 属性值为multiple,规定允许同时选中多个选项
  • name 自定义,规定列表元素名称
  • size 属性值为数值,规定列表菜单中可见选项的个数
其中multiple属性会使select元素的显示样式从默认的下拉列表变更为列表框,并允许同时选中多个选项栏目,最常见的用法为select配合若干个option标签使用,形成简易的下拉列表,其中option有四种属性值
  • disabled 属性值为disabled,首次加载时禁用当前选项
  • label 属性值为文本内容,规定选项的简写内容,该内容取代原选项内容显示在列表中
  • selected 属性值为selected,规定首次加载时当前选项为选中状态,如果多个显示则默认最后一个带有
  • value 属性值为文本内容,规定提交表单时发送给服务器的选项值,不显示在网页上
如果列表项目较多需要分类,可以使用optgroup标签定义选项组,该标签的label文本内容也会显示在列表内作为分组选项的标题,点击时不会变为选中状态
  • disabled 属性值为disabled,禁用选项组中的所有选项
  • label 属性值为文本内容,规定选项组的标题
按钮标签
button 可用于在网页上生成自定义样式的按钮,在button标签之间可以包含普通纯文本内容,图像,文本格式化标签等内容,该按钮也可以配合Js脚本形成多样化功能。而input提交的提交(submit),重置(reset)或无动作按钮(button)类型都只允许包含无样式的普通文本,如果需要图片则需要使用专门的图像提交按钮(image)
  • disabled 属性为disabled,禁用当前按钮元素
  • name 自定义,规定按钮的名字
  • type 属性值为button reset submit ,规定按钮的类型
  • value 属性值为文本内容,规定按钮的初始值
因为不同浏览器会提交不同的按钮,对button按钮的默认类型也均不相同,所以尽量使用input元素在表单中创建按钮
域标签和域标题标签
域标签<fieldet>可以用于将同一个表单中的多个表单元素分组显示,当把一组表单元放在该标签之间,浏览器会形成边框效果凸显分组,配合域标题标签可以为每个分组的区域显示独立的标题
 

HTML5表单新特性

七周年六种样式不同的时间日期选择器控件统称为Date Pickers
  • tel 电话号码
  • email 电子邮箱地址
  • url URL网址
  • number 数值
  • range 包含数值范围的滚动条
  • datetime UTC日期(包含年月日)和时间(包含时,分)
  • datetime-local 本地日期和时间
  • time 选择时间(包含时分)
  • date 选择日期(包含年月日)
  • week 选择星期(包含年周)
  • month 选择月份(包含年月)
  • search 搜索栏目的文本输入域
  • color 颜色选择器
电话号码类型
tel 用于输入电话号码,在pc端与普通文本行没有区别,但在手机移动端使用会显示数字键盘
电子邮箱类型
用于输入电子邮箱,该类型只允许输入包含@字样的标准电子邮箱,该输入类型在表单标签form内使用可用于验证用户填写的是否为正确的邮箱地址,当用户提交表单时,浏览器会自动验证输入域的值是否有效
地址类型
url 用于显示包含URL地址的输入框,当用户提交表单时浏览器会自动验证输入框内值是否有效
数值类型
number 显示只能包含数值内容的文本输入框,还可以用max和min属性限定数值的最大值和最小值的范围
数值范围类型
range 用于显示包含数值范围的滑动条,用户直接拖动滑动条上的点进行数据值的选择
日期选择器
Date Pickers 又称为日期选择器,是各种日期选择器类型的总称
  • datetime UTC日期(包含年月日)和时间(包含时,分)
  • datetime-local 本地日期和时间
  • time 选择时间(包含时分)
  • date 选择日期(包含年月日)
  • week 选择星期(包含年周)
  • month 选择月份(包含年月)
探索框类型
search 用于显示搜索域,显示效果为普通单行文本
 

媒体API

音频和视频在浏览器上使用插件播放,但例如苹果系统等主用的Safari浏览器,该浏览器就无法使用Flash插件
目前HTMl支持的音频格式有MP3,Ogg,Wav三种,目前尚不存在得到所有浏览器支持的音频格式
目前HTMl支持的音频格式有MPEG4,Ogg,WebM三种,目前尚不存在得到所有浏览器支持的视频格式
 

音频的应用

audio 基本语法
  • autoplay 当音频准备就绪后自动播放(谷歌浏览器不支持)
  • controls 显示播放,暂停按钮和声音调节控件
  • loop 当音频结束后自动重新播放
  • muted 静音状态
  • preload 音频预加载,并准备播放,该属性不和autoplay同时使用
  • src 播放音频的URL地址
除了autoplay与preload不可同时使用外,其他属性均可同时使用,并可以简写
检查浏览器支持情况
直接在audio标签的之间插入提示语句用于提示浏览器不支持的情况
若浏览器不支持则会直接在页面显示该语句,若支持则不显示
音频来源多样性
不同浏览器支持格式不同,可使用source标签指定多个音频文件,浏览器会按照先后顺序识别,若支持首个,则播放后停止向下判断,若不支持则依次向下,直至返回无法判断的错误标签
自定义音频控制
 

视频的应用

video 基本语法
  • autoplay 当视频准备就绪后自动播放(谷歌浏览器不支持)
  • controls 显示播放,暂停按钮和声音调节控件
  • loop 当视频结束后自动重新播放
  • preload 视频预加载,并准备播放,该属性不和autoplay同时使用
  • src 播放视频的URL地址
  • width 设置播放器宽度
  • height 设置播放器高度
除了autoplay与preload不可同时使用外,其他属性均可同时使用,并可以简写,没有指定高度和宽度则默认为视频文件的原始尺寸
检查浏览器支持情况
直接在video标签的之间插入提示语句用于提示浏览器不支持的情况
若浏览器不支持则会直接在页面显示该语句,若支持则不显示
视频来源多样性
不同浏览器支持格式不同,可使用source标签指定多个视频文件,浏览器会按照先后顺序识别,若支持首个,则播放后停止向下判断,若不支持则依次向下,直至返回无法判断的错误标签,如果能明确视频文件所需视频解码器的值,也可以直接在source标签的type属性中指定
自定义视频控制
 

其他通用功能

标记媒体播放时间范围
设置src属性时,可以加入额外信息指定需要播放的时间段,开始时间不写则默认为是音频或视频的开头,终止时间不写则默认为音频或视频的结尾,可以写成分:秒的形式
跳转媒体播放时间点
可以通过设置audio或video标签内的currentTime来完成
获取媒体播放时间
可以通过设置audio或video标签内的seekable来完成,其中的start用于获取媒体的开始时间,end用于获取媒体的结束时间
终止媒体文件下载
API中的pause()可以用于暂停音频或视频的播放,但是即便是暂停状态,浏览器仍会在后台继续下载,解决方法是先暂停,随后清除媒体文件的URL地址
使用Flash播放器
不支持audio和video标签额浏览器会执行该标签首尾标记内部的内容,可以为此类浏览器增加Flash播放器,保证浏览器能正常播放媒体文件
 

CSS

CSS样式表

CSS有三种使用方式,根据声明位置的不同分为内联样式表,内部样式表和外部样式表
 

内联样式表

又称行内样式表,通过style属性为各种HTML元素添加样式,作用于指定的HTML元素内部
  • background-color:背景色
  • color:前景色(例如字体色)
  • font-size:字体大小
  • border:边框
  • width:宽度
  • height:高度
 

内部样式表

通常位于<head></head>标签内,使用<style></style>标签标记各类样式规则,作用范围于当前整个文档,为多个元素批量设置相同的样式
 

外部样式表

独立的CSS文件,其后缀名为.css或.CSS,在<head></head>标签内使用<link>标签对其进行引用即可作用于当前整个文档
外部CSS文件中的内容无需使用<style></style>标签进行标记,其格式和内部样式表<style>标签内的内容风格完全一致
 

样式表层叠优先级

样式条件冲突时,CSS会选择优先级别高的样式条件渲染在网页上,三种样式表的优先级依次为,内联样式表—最高,内部样式表—次高,外部样式表—最低,若三种样式表均不存在,网页文档会显示当前浏览器的默认效果
 

CSS选择器

元素选择器

又名类型选择器,用于匹配HTML文档中某一个元素类型的所有元素
 

ID选择器

使用指定的id名称匹配元素,和元素结构器类型,但在声明时需要在id名称前加“#”号
 

类选择器

类选择器可以将不同的元素定义为共同的样式,需要在声明前加“.”号
 

属性选择器

属性选择器允许基于元素所拥有的属性进行匹配
 

语法规则

注释语句

内部样式表和外部样式表文件中均可以用/*注释内容*/的形式为CSS进行注释,支持单行和多行注释
 

@charset

该语法在外部样式表文件内使用,用于指定当前样式表使用的字符编号
 

!important

用于标记CSS样式的优先级
 

CSS常用样式

CSS背景

背景颜色
backgound-color 为所有HTML指定元素指定背景颜色,默认为transparent(透明色)
背景图像
background-image 用于为元素设置背景图像
背景图像平铺方式
background-repeat 用于设置背景图像的平铺方式,默认为
背景图像在水平和垂直方向上同时被重复平铺
  • repeat-x:水平方向平铺
  • repeat-y:垂直方向平铺
  • repeat:水平和垂直方向都平铺
  • no-repeat:不平铺,只显示原图
固定/滚动背景图像
background-attachment 用于设置背景图像是固定在屏幕上还是随着页面滚动
  • scroll:图像随着页面滚动
  • fixed:图像固定在屏幕
定位背景图像
background-position 用于设置背景图像的位置,可以根据属性值的组合将图像放置到指定位置,
关键词定位
  • center:水平或垂直居中
  • top:垂直方向置顶显示
  • bottom:垂直方向底部显示
  • left:水平方向左对齐
  • right:水平方向右对齐
使用关键词组合的方式定位图像,需要表示水平方向和垂直方向的关键词。因为关键词指示的方向非常明显,因此组合时可以不分先后顺序,当关键词定位简写成单个时,会默认另一个关键词为center
长度值定位
以元素内边距区域左上角的点作为原点,解释背景图像左上角的点对原点的偏移量
百分比定位
将HTML元素与其背景图像在指定的点上重合对齐
背景简写
声明顺序:[background-color],[background-image],[background-repeat],[background-attachment],[background-position]
 

CSS框模型

又称盒状模型,用于描述HTML元素形成的矩形盒子,每个HTML都具有元素内容,内边距,外框和外边距
内边距
设置各边内边距
padding 设置HTML内边距,可以理解为是元素周围的填充物,而因为内边距不影响当前元素与其他元素的距离,所以它只能作用于增加元素内容与元素边框的距离
设置单边内边距
只需要为HTML元素的某一个边设置内边距,可以使用padding属性的4种单边内边距属性
  • padding-top:设置元素上边内边距
  • padding-bottom:设置元素下边内边距
  • padding-left:设置元素左边内边距
  • padding-right:设置元素右边内边距
边框
border 可以使用相关属性为HTML元素创建不同宽,样式,颜色的边框
  • border-width:设置边框宽度
  • border-style:设置边框样式
  • border-color:设置边框颜色
  • border:上述所有属性的综合简写方式
边框宽度 border-width
  • thin:较窄的边框
  • medium:中等宽度的边框
  • thick:较宽的边框
  • 像素值:自定义像素值的边框
该属性必须和border-style属性一起使用
边框样式border-style
  • none:定义无边框
  • botted:定义点状边框
  • dashed:定义虚线边框
  • solid:定义实线边框
  • double:定义双线边框
  • groove:定义3D凹槽边框
  • ridge:定义3D脊状边框
  • inset:定义3D内嵌边框
  • outset:定义3D外凸边框
  • inherit:从父元素继承边框样式
边框简写
属性值无规定顺序,彼此用空格隔开,某个属性没有规定可以省略
外边距
margin 也可以理解为元内容周围的填充物,其数值可以是长度值或百分比
设置单边外边距
只需要为HTML元素的某一个边设置外边距,可以使用padding属性的4种单边外边距属性
  • margin-top:设置元素上边外边距
  • margin-bottom:设置元素下边外边距
  • margin-left:设置元素左边外边距
  • margin-right:设置元素右边外边距
外边距合并
  • 当元素A出现在元素B下面时,元素A的下边距会和B的上边距发生重合
  • 当元素B包含在元素A内部时,如果元素B的上下内边距均为0,也会发生上下外边距合并现象
  • 当空元素没有边框和内边距时,上下外边框也会发生合并
  • 只有普通块级元素的垂直外边框才会发生合并,如果是特殊情况,如浮动框,行内框或者绝对定位之间的外边距是不会发生合并的
 

CSS文本

  • text-indent:设置文本缩进
  • text-align:设置文本对齐方式
  • text-decoration:设置文本装饰
  • text-transform:设置文本大小写的转换
  • letter-spacing:设置字符间距
文本缩进
text-indent 为段落文本设置首行缩进效果
文本对齐
text-align 用于为文本设置对齐效果
  • left:文本内容左对齐
  • right:文本内容右对齐
  • center:文本内容居中显示
  • justify:文本内容两端对齐
文本装饰
text-decoration 为文本添加装饰效果
  • underline:添加下划线
  • line-through:添加删除线
  • overline:添加上划线
  • none:正常状态文本,适用于去掉超链接文本内容的下划线
文本转换
text-transform 属性设置文本的大小写
  • uppercase:每个字母专为大写
  • lowercase:每个字母转为小写
  • capitalize:文中首字母转为大写
  • none:不做转换
字符间距
letter-spacing 用于设置文本中字符的间距,其属性值为长度值
 

CSS字体

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font
字体系列
font-family CSS将字体分为两类,一类是特定字体系列(family-name),指的是拥有具体名称的某一种字体,比如宋体,楷体,黑体等。另一类是通用字体系列(generic family),指具有相同外观特征的字体系列
  • Serif 字体
  • Sans-serif 字体
  • Monospace 字体
  • Cursive 字体
  • Fantasy 字体
字体风格
font-style 可以用于设置字体风格是否为斜体字
  • normal:正常字体
  • italic:斜体字
  • oblique:倾斜字体
字体变化
font-variant 用于设置字体变化
  • normal:正常字体
  • small-caps:小号字的大写字母,如果浏览器不支持则显示为正常大小字号的大写字母
字体粗细
font-weight 用于控制字体的粗细程度
  • normal:默认值,标准正常字体
  • bold:加粗字体
  • bolder:更粗的字体
  • lighter:更细的字体
  • 100-900:每个数字相差一百,数字越大字体越粗,400等同于normal,700等同于bold
字体大小
font-size 用于设置字体大小,其属性值为长度值,可以用绝对单位或相对单位,绝对单位使用的是固定尺寸,不允许用户在浏览器中更改文本大小,采用了物理度量单位,例如cm,mm,px等,相对单位是相对于周围的参照元素进行设置大小,允许用户在浏览器中更改字体大小,字体相对单位有em,ch等
简写font
CSS中的font属性可以用于概括其他五种字体属性,将相关属性汇总在同一行,属性值用空格隔开,没有规定可以不写,声明顺序为font-style,font-variant,font-weight,font-size,font-family
 

CSS超链接

为超链接设置不同状态的CSS样式时必须遵守两条规则,a:hover的声明必须在a:link个a:visited之后,a:active的声明必须在a:hover之后
  • a:link:未被访问的超链接
  • a:visited:已被访问的超链接
  • a:hover:鼠标悬浮在上面的超链接
  • a:active:正在被点击的超链接
 

CSS列表

  • list-style-type 设置列表标志类型
  • list-style-image 设置列表标志图标
  • list-style-position 设置列表标志位置
  • list-style-type 所有属性的综合简写
样式类型
list-style-type 用于设置列表标志类型
  • none 无标记符号
  • disc 默认属性,实心圆点
  • circle 空心圆
  • square 实心方块
样式图片
list-style-image 可以设置列表的标志图标,可以是来源于本地或者网络的图像文件,如果已经用该属性声明,则不能同时使用list-style-type属性声明列表的状态类型,否则后者将无显示效果
样式位置
list-style-position 用于定义列表标志的位置
  • outside 默认值,表示列表标志放置在文本左侧
  • inside 列表标志放置在文本内部,多行文本根据标志对齐
  • inherit 继承父元素的属性值
简写样式,
list-style 属性可以用于概括其他三种字体属性,声明顺序如下
list-style-type,list-style-position,list-style-image
属性值之间空格隔开,没有规定可以不写
 

CSS表格

  • border-collapse 设置表格的边框样式
  • border-spacing 设置表格中双线边框的分割距离
  • caption-side 设置表格中的标题位置
  • empty-cells 设置表格中空单元格边框和背景的显示方式
  • table-layout 规定表格中的布局方式
折叠边框
在默认情况下,表格的边框如果设置为实线,则会显示双层线条的样式效果,border-collapse 用于设置是否将表格的双层边框折叠为单一线条边框
  • separate 默认值,分开的双层线条效果
  • collapse 边框会合并为单一线条的边框
  • inherit 继承父元素的属性值
边框距离
border-spacing 用于定义表格中双线边框的分割距离,该属性只在表格能显示边框,并且border-collapse属性值为默认值separate时生效,否则该属性被忽略
  • 长度值 表示水平和垂直方向上的距离
  • 长度值1 长度值2 长度值1用于表示水平方向的距离,2用来表示垂直方向上的距离
  • inherit 继承父元素属性值
标题位置
caption-side 用于定义表格中标题的位置
  • top 默认值,表示标题在表格上方
  • bottom 标题在表格下方
  • inherit 继承父元素属性值
空单元格
empty-cells 用于定义表格中空单元格边框和背景的显示方式
  • show 默认值,正常显示空白单元格的边框与背景
  • hide 表示不显示空白单元格的边框与背景
  • inherit 继承父元素的属性值
表格布局
table-layout 用于规定表格的布局方式,包括固定表格布局和根据内容调整布局
  • automatic 默认值,单元格的宽度由内容决定
  • fixed 单元格的宽度由样式设置决定
  • inherit 继承父元素的属性值
 

CSS定位

绝对定位
通过规定HTML元素在水平和垂直方向上的位置来固定元素,基于绝对定位的元素不占空间,使用绝对定位需要将HTML元素的position属性设置为absolute(绝对的),并使用四种方位的属性关键词,left(左边),right(右边),bottom(底部),top(顶部)中的部分内容设置元素的位置,一般来说从水平和垂直方向各选一个关键词即可
绝对定位的位置生命是相对已定位的并且包含关系最近的祖先元素,如果当前被被定位元素没有已定位的先祖元素做参考,则相对于整个网页进行定位
相对定位
相对定位与绝对定位的区别在于它的参照点不是左上角的原点,而是该元素本身原先的起点位置,即使该元素偏移到了新的位置,也仍然从原始的起始点处占空间
使用相对定位需要将HTML元素的position属性值设置为relative(相对的),并使用四种方位的属性关键词,left(左边),right(右边),bottom(底部),top(顶部)中的部分内容设置元素的位置,一般来说从水平和垂直方向各选一个关键词即可
相对定位的位置是相对元素自身的正常初始位置而言,因此即便是内容完全一样的相对定位代码作用于初始位置不同的多个元素上也仅能保证位移的方向一致,并不能代表这些元素最终出现在相同的位置上
层叠效果
除了定义HTML元素在水平和垂直方向上的位置,还可以定义多个元素一起叠放的层次,使用属性z-index可以为元素规定层次顺序,其属性值为整数,并且该数值越大将叠放在越靠上的位置
浮动
float 可以令元素向左或者向右浮动,常用语文字环绕图像,实际上任何元素都可以应用浮动效果
  • left 向左浮动
  • right 向右浮动
  • none 默认值,表示元素不浮动
  • inherit 继承父元素的属性值
清理浮动元素clear,可以规定元素的哪一侧不允许出现浮动元素
  • left 元素左侧不允许有浮动元素
  • right 元素右侧不允许有浮动元素
  • both 左右两侧均不允许有浮动元素
  • none 默认值,允许浮动出现在元素左右两侧
  • inherit 继承父元素属性值
 

JavaScript

js基础

使用方式有两种,在HTML文档中直接添加代码,或将代码写入外部的js文件并引入
 

作用域

通常来说,一段代码中所用到的名字并不总是有效的和可用的,限定这个名字可用性的代码范围就是这个名字的作用域,即代码在某个范围内起作用和效果
在es6之前作用域分为全局作用域和局部作用域
  • 全局作用域:整个script标签或者一个单独的js文件
  • 局部作用域:在函数内部,代码的名字只在函数内部起作用和效果
  • 函数作用域可以互相嵌套
根据作用域的不同,变量分为全局变量和局部变量,全局变量只有浏览器关闭的时候才会销毁,比较占内存,局部变量在程序执行完毕就会销毁,比较节约
 

作用域链

用链式查找决定那些数据能够被内部函数访问或者各个作用域的嵌套关系组成一条作用域链。例子中 bar 函数的作用域链式 fun -> fn -> 全局, fn函数保存在作用域链式 fn -> 全局
作用域链主要是进行标识符(变量和函数)的查询,标识符解析就是沿着作用域链一级一级的搜索标识符的过程,而作用域链就是保证对变量和函数的有序访问。
  • 如果自身作用域中声明该变量,则无需使用作用域链
  • 如果自身作用域中未声明该变量,则需要使用作用域链进行查找
 

预解析

js代码是由浏览器中的js解析器来执行的,js解析器在运行js代码的时候分两步,预解析和代码执行
预解析:js引擎会把js里面所有的var还有function提升到当前作用域的最前面。分为变量预解析(变量提升)和函数预解析(函数提升)
  • 变量预解析:把所有的变量声明提升到当前作用域的最前面,不提升赋值操作
  • 函数预解析:把所有的函数声明提升到当前作用域的最前面,不调用函数,仅限于关键字 function 声明的函数,用变量声明的不进行提升,函数表达式必须写在函数调用前
代码执行:按照代码书写的顺序从上往下执行
案例
 

JavaScript语法

  • 单引号和双引号不能混用
  • 与Java相似,严格区分大小写
  • 有效变量命名的首字符必须是字母,下划线或者美元符号
  • 没有分号也可被正确执行,但考虑到浏览器的兼容性,还是尽量不要省略分号
  • 一些关键词不能作为变量或函数的名称
  • js有两种注释方式,单行注释"//",多行注释"/**/",与Java相似,两种符号仅可以在js范围内使用,即<script>标签内
  • js是一种弱类型的脚本语言,无论类型统一使用关键词var加上变量名称进行声明
书写位置
  • HTMl推荐使用双引号,JS推荐使用单引号
输入输出语句
  • alert('要弹出的语句') 在浏览器弹出警示框
  • console.log('在浏览器控制台打印的语句') 在浏览器控制台打印输出语句
  • prompt('弹出可输入的输入框') 浏览器弹出输入框,用户可输入,括号内的信息会显示在输入框上面
变量
  • 只声明不赋值,输出结果为 underfined
  • 可以不声明直接赋值使用,不推荐
  • 由字母,数字,下划线和美元符号组成
  • 严格区分大小写
  • 不能以数字开头
  • 不能是关键字

JavaScript基本数据类型

  • js的变量数据类型是程序在运行过程中根据等号右边的值确定的
    • Number(基本包装类)
    • Boolean (基本包装类)
    • String (基本包装类)
    • Null
    • Undefined
typeof常见返回值
  • undefined 该变量未赋值
  • boolean 布尔值
  • String 字符串
  • number 数值
  • object 变量为空值null或对象
Undefined类型
该类型的输出值都是undefined,当需要输出的变量从未声明,或使用关键词声明但未进行赋值时就会显示该字样
Null类型
表示变量的内容为空,可用于初始化变量,或者清空已赋值变量
String类型
基本包装数据类型,用于存储文本内容,为变量进行赋值时需要引号,字符串不可变,拼接字符串即开辟新空间,所以不要大量拼接字符串,所以字符串的所有方法都不会修改原字符串,而是返回操作后的新字符串
  • charAt() 返回指定位置上的字符
  • charCodeAt() 返回指定字符的Unicode(ASCII)编码
  • concat() 连接字符串
  • indexOf() 正序检索字符串中指定内容的位置
  • lastIndexOf() 从后往前查找,只找第一个匹配的
  • lastIndexOf() 倒序检索字符串中指定内容的位置
  • match() 返回匹配正则表达式的索引值
  • replace('被替换的内容','替换的内容') 替换字符串中匹配正则表达式的指定内容
  • search() 返回匹配正则表达式的索引值
  • slice() 根据指定位置节选字符串片段
  • split('分隔符') 把字符串分割成字符串数组
  • substr('截取的起始位置','截取几个字符') 根据指定位置节选字符串片段
  • toLowerCase() 将字符串中的所有字母转化为小写
  • toUpperCase() 将字符串中的所有字母转化为大写
Number类型
js中使用浮点数进行计算会产生误差,使用时将两个数都乘以10计算后再除以10还原
特殊Number值
  • Infinity 正无穷大,在js中表示为Number.POSITIVE_INFINITY
  • Infinity 负无穷大,在js中表示为Number.NEGATIVE_INFINITY
  • NaN 非数字,在js中使用Numer.NaN表示
  • Number.MAX_VALUE 数值范围内允许的最大值,约等于1.8e308_
  • Number_MIN_VALUE 数值范围内允许的最小值,大约等于5e-324
Infity
  • 当数值超过js允许范围就会显示为Infity(超过上限)和-Infity(超过下限),两个Infity数值比较大小时,无论原数值为多少都判断为true
  • 使用数字0作为除数不会报错,正整数除以零返回值为Infity,负整数除以零返回-Infity,0除以0返回NaN
  • Infity与其他正常数字进行数学运算返回的结果均为它本身
NaN
非数字,用于表示数据转换成Number类型失败的情况,从而无需抛出异常,即使两个值均为NaN,它们也并不相等,js还提供了判断是否为数值的方法isNaN(),其返回值是布尔类型,当检测数据无法正确转换为Number类型时返回true,其他情况返回fase
Boolean
false,0,空字符串,NaN,undefined,null都会转为false,其他类型都会转为true
数据类型转换
使用表单和prompt获取的数据类型默认是字符串,需要转换后才能进行加减法运算
转为字符串
转为数字
转为布尔型
只有Boolean()函数一个方法

JavaScript对象类型

对象由事物的属性和方法组成,属性是事物的特征,方法是事物的行为
对象类型分为本地对象(自定义对象),内置对象和宿主对象(浏览器对象),本地对象是ECMAScript定义的引用类型,内置对象是无需实例化可直接使用的对象,前两个是js的基础,最后的也是特殊的宿主对象指的是用户的机器环境,包括BOM和BOM,是js特有的对象
创建对象方式
  • 利用对象字面量(花括号"{ }")创建对象
  • 即用new Object创建对象
  • 利用构造函数创建对象
    • 前面创建对象的方式一次只能创建一个对象,几个对象中有很多属性和方法大量相同,可以利用构造函数的方法重复这些相同的代码。
    • 构造函数就是把对象里相同的属性和方法抽象出来封装到函数里面
  • 构造函数首字母大写
  • 构造函数不需要return就能返回结果
  • 只要new一下就相当于创建了一个对象
  • 属性和方法前面必须添加this
变量,属性,函数和方法的区别
  • 变量和属性相同点:都用来存储属性
    • 变量特点:单独声明并赋值,使用的时候直接写变量名,单独存在
    • 属性特点:在对象里不需要声明,使用的时候必须是对象.属性,即使用前必须加对象
  • 函数和方法的相同点:都是实现某种功能
    • 函数特点:单独声明并调用 函数名() 单独存在
    • 方法特点:方法在对象里 对象.方法名()
构造函数和对象的区别
  • 构造函数泛指某一大类,类似Java语言的类(class),对象是一个具体的事物
  • 利用构造函数创建对象的过程也称为对象的实例化
new关键字
  • new 构造函数可以在内存中创建一个空的对象
  • this 就会指向刚才创建的空对象
  • 执行构造函数里面的代码,给这个空对象添加属性和方法
  • 不需要return,因为new关键字就能返回这个对象
遍历对象
for...in 语句用于对数组或对象的属性进行循环操作
内置对象
相关文档:MDN
就是指js语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基础而必要的功能(属性和方法),其最大优点是帮助我们快速开发
数学对象Math
  • 不是构造函数,不需要new调用,直接用类名调用
  • Math.max()方法内没有参数则返回-Infinity,有非数字参数则返回NaN
    • Math.PI 圆周率
    • Math.floor() 向下取整,往小取整
    • Math.ceil() 向上取整,往大取整
    • Math.round() 四舍五入,就近取整,其他数字四舍五入,.5特殊,往大了取,比如-1.5,-1大于-2,所以取得数值是-1,正数1.5,2大于1,所以取2
    • Math.abs() 绝对值,隐式转换,会把字符串转为数字型,但是如果字符串无法转为数字,则会返回NaN
    • Math.max()/Math.min() 最大值和最小值
    • Math.random() 随机数
数组Arrays
与Java的区别是,js中的数组可以直接修改数组的length值,还可以通过未引用的索引增加元素,例如一个数组长度为3,索引3为空,在js中可以直接调用该索引赋值
  • concat(array1,array2……) 用于在数组结尾处连接一个或多个新的数组或数组元素,参数一必填,后面参数不限,参数内容可以是数组或数组元素的值
  • join(separator) 把数组中的所有元素用指定的分隔符进行分割,并在同一个字符串汇总显示出来,其中separator参数表示指定的自定义分隔符,不填写则默认为用逗号分割
  • pop() 删除数组中的最后一个元素,并返回该元素的值,数组内容是空则返回undefined,并不执行操作
  • push(element1,element2) 在数组结尾处插入一个或多个元素,并返回最新数组长度,其中参数一为必填,至少添加一个元素,后面参数不限
  • reverse() 将数组中所有元素倒序重组,会直接更改原始数组,而不是另外生成一个新的数组
  • shift() 删除数组中的第一个元素,并返回该元素的值,数组内容是空则返回undefined,并不执行操作
  • slice(start,end) 用于返回数组中指定了开始与结束范围的一系列元素,end不包括元素本身,没有指定则一直取到最后一个元素,如果填写了负数,表示从数组末尾开始计算,向前倒退
  • toString() 用于把数组元素显示在同一个字符串中,并用逗号分隔,相当于没有指定分隔符的join()方法
  • unshift(element1……element2) 在数组开头插入一个或多个元素,并返回最新的数组长度
检测是否为数组
添加删除数组元素
数组排序
查找索引
数组转换字符串
冒泡排序
日期Date
日期对象是一个构造函数,需要new关键字创建对象
  • Date() 没有参数,获取当前日期和当前时间
  • getDate() 获取Date对象处于一个月中的哪一日
  • getDay() 获取Date对象处于星期几,星期日返回的是0
  • getMonth() 获取Date对象处于几月份,从0开始,返回的月份小一个月
  • getFullYear() 获取Date对象的完整年份
  • getHours() 获取Date对象的小时
  • getMinutes() 获取Date对象的分钟
  • getSeconds() 获取Date对象的秒
  • 通过valueOf() 和 getTime() 可以获得从1970年1月1日至今的毫秒数(时间戳)
正则表达式
  • pattern 该参数为字符串形式,用于规定正则表达式的匹配规则或填入其他正则表达式
  • attributes 该参数为可选参数,可包含属性值g,i和m,分别表示全局匹配,区分大小写匹配与多行匹配
判断对象属性
 

简单数据类型和复杂数据类型

简单数据类型又叫基本数据类型或值类型,复杂类型又叫做引用类型
  • 值类型,简单数据类型/基本数据类型,在存储变量中存储的是值本身,因此叫做值类型,简单数据类型的五大类为 string number boolean undefined null ,其中null比较特别
  • 引用类型,复杂数据类型,在存储时变量中存储的仅仅是地址(引用),因此叫做引用数据类型,通过new关键字创建的对象(系统对象,自定义对象),如 object Array Date
堆和栈
  • 栈:由操作系统自动分配释放存放函数的参数值,局部变量的值等,操作方法类似于数据结构中的栈,简单数据类型存放到栈里面
  • 堆:存储复杂数据类型(对象),一般由程序员分配释放,若程序员不释放,由垃圾回收机制回收,复杂数据类型存放到堆里面
  • js中没有堆和栈的概念,但因为js是在其他编程语言的基础上进行开发的,所以其中隐含了堆和栈的思想
数据类型内存分配
  • 简单数据类型存放在栈里面,栈立面会直接开辟一个空间,存放的是值
  • 复杂数据类型首先在栈里面存放地址,十六进制表示,这个地址指向堆里面的数据
  • 函数的形参也可以看做是一个变量,当我们把一个数值型变量作为参数传递给函数的型参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内对形参做任何修改都不会影响到外部变量
  • 函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参的时候,就是把变量在栈空间里保存的堆地址给了形参,形参和实参其实保存的是同一个地址,所以操作的是同一个对象

运算符

算术运算符
尽量避免用浮点数参与运算,浮点数的最高精度是17位小数,但在计算时精准度远不如整数
前置递增和后置递增
比较运算符
逻辑运算符
逻辑与两侧都为真,结果才是真,否则为假,逻辑或两侧都为假,结果才为假,否则为真
短路运算(逻辑中断)
当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运算右边的表达式的值

运算符优先级

notion image
 

流程控制

notion image
三元表达式
 

函数

  • 如果实参的个数多于形参的个数,会取到形参的个数
  • 如果实参的个数少于形参的个数,没有对应值的形参会被定义为undefined
  • 函数都有返回值,有return返回return后的值,没有就返回undefined
arguments
当不确定有多少个参数传递的时候,可以用arguments获取,在js中,arguments是当前函数的一个内置对象,所有函数都内置了一个arguments对象,也只有函数中才有该对象,该对象中存储了传递的所有实参
arguments的展示形式是一个伪数组,可以用数组遍历的方式遍历,伪数组特点如下
  • 具有length属性
  • 按索引方式储存数据
  • 不具有数组的push,pop等方法
 

DOM

  • 文档对象模型,通过DOM可以改变网页的内容,样式和结构
    • notion image
      notion image

获取元素

DOM在实际开发中主要用来操作元素,获取页面中的元素有以下几种方法
  • 根据ID获取
  • 根据标签名获取,元素过多,不方便设置id的情况下使用
  • 通过HTML5新增的方式获取,注意兼容性
  • 特殊元素获取,例如bodyd等只有一个的标签
 

事件基础

notion image
notion image
notion image
改变元素内容
  • InnerText 非标准
  • innerHTML 标准,推荐使用
修改表单
  • disabled 表单中的隐藏元素
样式属性操作
  • js样式采取驼峰命名法
  • element.style 修改style样式,产生的是行内样式,该样式会覆盖原来选择器中的样式
  • display:none 样式中的隐藏元素
  • element.className 类名样式操作,会直接修改元素的类名,覆盖原先的类名
排他思想
获取自定义属性
notion image
  • element修改类名需要.className
  • attribute直接放入class即可
    • notion image
      notion image
  • 如果自定义属性中有多个-连接的单词,获取的时候采用驼峰命名法
  • dataset是一个集合里面存放了所有以date开头的自定义属性
  • h5新增的获取自定义属性的方法,只能获取date开头的
 

事件高级

注册事件(绑定事件)
notion image
notion image
删除事件
事件流
notion image
  • dom事件流 三个阶段
  • JS代码汇总只能执行捕获或者冒泡其中的一个阶段
  • onclick和attachEvent只能得到冒泡阶段
  • 有些事情没有冒泡,比如onblur,onfocus,onmouseenter,onmouseleave
事件委托
不是给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
事件对象
notion image
常见的事件对象属性和方法
notion image

事件操作

notion image
notion image
鼠标事件对象
图片跟随鼠标案例
常用键盘事件
键盘对象
notion image
 

节点操作

notion image
notion image
获取节点
  • 子节点获取方式和父节点一致,但 childNodes 会返回值中包含所有的元素节点,文本节点等,需要只会获取元素节点要特殊处理,所以不提倡使用
  • 获取第一个和最后一个子元素的两个方法都有兼容性问题,ie9以上才支持
  • 获取父子节点
  • 获取兄弟节点
添加节点
notion image

删除节点

  • 删除父节点中的子节点

复制节点

  • node.cloneNode() 返回调用该方法的节点的一个副本,如果括号参数为空或者FALSE,则是浅拷贝,只克隆复制节点本身,不克隆里面的子节点,即只有标签,没有内容,为true则复制标签并复制其中的内容
 

BOM

浏览器对象模型,提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window,兼容性较差
  • window对象是浏览器的顶级对象,具有双重角色
  • 它是JS访问浏览器窗口的一个接口
  • 它是一个全局对象,定义在全局作用域中的变量,函数都会变成window对象的属性和方法,调用的时候可以省略window
  • 声明变量的时候最好不要用name关键词,因为window有一个特殊属性window.name
    • notion image
      notion image
 

window对象常见事件

窗口加载事件
  • window.onload是窗口(页面)加载事件,当文档内容完全加载完毕后才会触发该事件
调整窗口大小事件
  • window.onresize是调整窗口大小的加载事件,只要窗口大小发生像素变化,就会触发这个事件
  • 响应式布局,window.innerWidth当前屏幕宽度
定时器
  • window.setTimeout(调用函数,[延迟的毫秒数]),该定时器在定时到期后执行调用函数,只调用一次就结束
  • window.setInterval(回调函数,[间隔的毫秒数]),该定时器会反复调用一个函数,每隔一定的时候就调用一次
  • window在调用时可以省略
回调函数
  • setTime()调用函数也被称为回调函数callback
  • 普通函数按照代码顺序调用,而回调函数需要等待时间到了才去调用,即等上一件事做完,再回头调用这个函数
this
this的指向在函数定义的时候无法确定,只有函数执行时才能确定,一般指向调用它的对象
  • 在全局作用下或普通函数中this指向全局变量window(定时器里的this指向window)
  • 方法调用中的this指向调用它的方法对象

JS执行队列

notion image
  • 流水线上各个程序的执行顺序不同
    • notion image
      notion image
      notion image
  • 会先执行同步任务中的1,然后按着顺序向下,将第二步的回调函数放到任务队列,不调用,紧接着将2输出,同步任务执行完毕,查看异步任务,有内容就调用到执行站的最下面再输出
    • notion image
  • 当有多个异步任务时,会用异步进程处理
  • 先执行同步任务,第二个点击事件没有点击则不放入任务队列,执行到最后一个任务,将fn放入异步任务队列,同步执行完后,检查任务队列,有内容就调回执行栈最后一个执行
  • 执行栈会反复检查消息队列是否有异步任务,被称为事件循环,当触发点击事件后,异步进程会将点击事件放入任务队列,同步任务执行后执行异步任务,和回调函数的执行顺序看放入信息队列先后
notion image
notion image
 

location对象

  • location属性用于获取或设置窗体的URL,可以用于解析URL,返回一个对象
    • notion image
      notion image
 

navigator对象

notion image
 

history对象

notion image
 
 
爬虫Git
bhddgt
bhddgt
一个普通的干饭人🍚
公告
type
status
date
slug
summary
tags
category
icon
password
🎉NotionNext 4.0即将到来🎉
-- 感谢您的支持 ---
👏欢迎更新体验👏