零碎知识点

HTML5(上一个版本是HTML4.01)

• 互联网使用URL统一资源定位符标识分布在因特网上的各种文档
• HTML5支持HTML4中的所有表单控件

标签

• 空元素：不需要闭合的标签

• 常见的空元素：

<img> <input> <embed> <link> <area> <base> <br> <col> <command> <hr> <keygen>  <meta> <param> <source> <track> <wbr>

• 常见标签：

textarea:
- 多行文本输入，可容纳无限数量的文本
- 通过cols和rows属性来规定textarea的尺寸
- 属性有：cols、rows、disabled、maxlength、placeholder、readonly、required、form、name、autofocus、wrap
object:
- 用于包含对象，如视频、音频等
- 可以通过width来设置宽度
embed:
- 用于定义嵌入的内容，如插件等
- 可以通过width来设置宽度
sup:
- 上标文本
sub:
- 下标文本
source:
- 定义多个数据源，提供备份支持并解决媒体支持问题
- 例如<source src="html.mp4" type="video/mp4"></source><source src="html.ogv" type="video/ogg"></source>
track:
- 为媒介(例如audio或vedio)规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
pre:（块级元素）
- 可用于定义预格式化的文本。被包围在<pre>标签元素中的文本通常会保留空格和换行符，而文本也会呈现等宽字体。
dir:
- 定义目录列表
dfn:
- 术语标签
abbr:
- 缩写
cite:
- 定义作品的标题
base:
- 为页面上的所有的相对链接规定默认URL或者默认目标
mark:
- 表示标记或高亮显示文本，定义带有星号的文本
a:
- 链接，能用于发电子邮件<a href="mailto:love@baidu.com">love@baidu.com</a>
- a标签可以不需要href属性值，此时为超链接的一个占位符。href属性的可选值有：绝对路径(href="https://www.baidu.com")、相对路径(href="index.html")、锚(href="#top")
- a标签的target属性可以指向一个具名的窗口或iframe。target属性的可选值有：_blank、_self、_new、_top、_parent等。_new和_blank都能打开新窗口，但_new多次点击该链接时始终在同一个新窗口中打开，而_blank多次点击该链接时都打开不同的新窗口。_top在顶层页面中打开链接；_parent在当前页面的上一层打开链接。
- 当a的rel属性有多个值时，使用空格分隔
iframe:
- 会创建包含另一个文档的内联框架（即行内框架）
meter:
- 用于显示已知范围内的标量测量，包括min,max,value,optimal,low,high,form等属性
progress:
- 显示指示任务完成进度的指示器，该指示器通常显示为进度栏
output:
- 可以定义不同类型的输出。for属性用于定义输出字段相关的一个或多个元素。form属性定义输入字段所属的一个或多个表单。name属性定义对象的唯一名称。
param:
- 可以作为object和applet的参数
caption:
- 表示表格标题，不加粗
article:
- 文本或嵌入内容，可以用来提供作者信息
picture:
- 该元素可以让图片资源的调整更加灵活。可以用于屏幕适配。
<picture>
	<source media="(min-width:650px)" src="demo1.png"></source>
	<source media="(min-width:465px)" src="demo2.png"></source>
	<img src="img_girl.png"/>
</picture>
fieldset:
- 可将表单内的相关元素分组.legend为标题
<fieldset>
	<legend>Personalia:</legend> 
	Name: <input type="text"/>
	Email: <input type="text"/>
</fieldset>

• head标签中必不可少的是<meta>和<title>
• 一个页面中只能有一个title元素。若存在main元素，也只能有一个
• HTML5中的属性名对大小写不敏感，一般是小写
• H5中可以通过data-*来自定义属性

<ul>
    <li data-animal-type="fish">🐟</li>
    <li data-animal-type="bird">🐦</li>
</ul>

列表

<!-- 自定义列表 -->
<dl>
    <dt></dt> 标题
    <dd></dd> 描述
</dl>

<!--  表格 -->
<table>
    <th></th> 定义表头
    <tr> 可以通过tr的个数判断该表格有几行
    	<td></td> td表示单元格，可以通过有最多td的那一行判断该表格的列数
    </tr>
</table>

<!-- optgroup在select中创建了一组选项，此元素不应该嵌套 -->
<select>
    <optgroup label="swedish cars">
    	<option value="vovo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
</select>

Canvas与SVG

SVG知识点：
- 使用XML格式定义图形
- 是HTML下的一个分支
- 可缩放的矢量图片
- 文件小，放大缩小不会失真
- 通过<embed>、<object>、<iframe>标签，可以直接嵌入进HTML页面中
- 不依赖分辨率，支持事件绑定，大型渲染区域的程序(例如百度地图)，不能用来实现网页游戏

区别：
- canvas是通过js来完成图形绘制的
- canvas中绘制的元素不可以通过浏览器提供的接口获取到，因为它所绘制的图形不是dom元素。而SVG中绘制的元素可以通过浏览器提供的接口获取到。
- canvas产生的DOM数量比SVG要少
- SVG可以使用CSS设置动画样式

canvas知识点：
- Ctx.arc(x,y,r,0,Math.PI,true);//这句代码的作用是在给定点绘制一个半圆。参数释义：x圆心，y圆心，r半径，0起始弧度，Math.PI结束弧度。
- 使用canvas在画布上绘制需要调用getContext()这个内建对象
- 依赖分辨率，不支持事件绑定，适合网页游戏

手写动画的最小时间间隔是16.7ms=1s/60帧

DHTML

DHTML知识点：
- DHTML是动态的HTML，是HTML、CSS和客户端脚本的一种集成
- 其中HTML确定页面框架，CSS和脚本确定页面动态样式、动态内容和动态定位
- DHTML实现了网页从服务器下载后无需再经过服务器的处理，就能在浏览器中直接动态地更新网页的内容、排版样式和动画的功能。
- DHTML包括HTML、HTML DOM、JS和CSS

readonly与disabled区别

- readonly=true时，页面上无法修改内容，内容会被提交，但是可以通过JS修改，可以获得焦点
- disabled=true时，内容无法被修改，也不会被提交，但是可以通过JS修改

事件调用在html和react中的区别

- 在HTML中，调用已定义的函数：onclick="add()"
- 在react中，调用已定义的函数：onClick={add}

数据存储方式

1. WebStorage：包括localStorage和sessionStorage
2. WebSQLDatabase：客户端本地化的一套数据库系统，可以将大量的数据保存在客户端，无须与服务器端进行交互

全局属性

也就是所有标签都可以使用的属性，包括id\style\class等
带有ID的DOM树元素会变成全局变量
ID值不能以数字开头

标签

- p标签中不能嵌套某些标签，例如<li>\<div>。文本类的块级元素不能嵌套块级元素。
- 在a标签的href中添加javascript:;能使得页面不跳转。
- class和id都能设置伪类
- align只能用在div标签中，目的是使div元素中的内容水平对齐；text-align规定元素中的文本水平对齐。两个属性使用的地方不同，但是作用相同。
	<div align="center"></div>
	<div style="text-align:center"></div>

兼容

- display:inline 兼容目前所有的浏览器
- border-radius：IE9+支持、firefox和chrome以及safari支持所有边框属性、opera支持border-radius和border-shadow，但对border-image需要前缀-o-
- HTML5能向后兼容旧浏览器

clientWidth

Element.clientWidth表示元素的内部宽度，包括内边距，不包括边框和外边距，即clientWidth = width+左右padding

微信公众号相关H5页面的测试

概念：
- H5页面是指一个可以无缝整合到微信资料中的移动网站，以创建互动营销活动。作为网页，微信H5页面和HTML5有相似的特点。H5是传统桌面网站的轻量级版本，支持无法嵌入到传统网页的功能。
- H5页面第一次打开时，需要测试公众号授权
- 手机定位未打开，H5和公众号没有权限，手动选择也不行
- 公众号未授权进行定位时，H5页面的定位将要手动选择
- H5页面需要测试页面是否能被浏览器正常打开

元数据(meta content)包括

base\link\meta\noscript\style\script\title

input标签

• multiple属性允许input当type为file时上传多个文件
• type的取值可以是image checkbox button file password radio reset submit text hidden date data-time email等
• 新属性：search number tel
• 输入类型data用于选取年、月、日；输入类型month选取年、月；输入类型week选取年、周；输入类型time用于选取时间(小时和分钟)

select标签

• multiple属性对于select来说是设置多选

网页数值单位

• 相对单位(不依赖其他元素大小)：em ex ch rem vw vh vmax vmin
• 绝对单位(依赖其他元素大小)：cm mm q in pt pc px

table标签

• 常见元素：tr\td\th
• 更复杂的元素：caption\col\colgroup\thead\tfoot\tbody

属性

hidden
- 功能是通知浏览器不渲染元素，该元素处于不可见状态，但元素中的内容还是浏览器创建的。也就是说页面装载后允许使用JS脚本将该属性取消，取消后该元素变为可见状态。

控件包含复选框、组合框、编辑框、列表框

Form表单

获取表单中的文本

<!-- 目标： -->
<form name="a">
    <select name="a" size="1" id="obj">
        <option value="a">1</option>
        <option value="b">2</option>
        <option value="c">3</option>
    </select>
</form>

// 代码
window.onload = function(){
    var obj = document.getElementById(obj);
    var value = obj.value;
    var options = obj.options;
    //获取第几个option的value值
    var value1 = options[0].value;
    //获取第几个option的text值
    var text1 = options[0].text;
    var index = obj.selectedIndex;
    var selectedText = options[index].text;
}

enctype属性：规定如何对表单数据进行编码

- application/x-www-form-urlencoded：默认编码方式，在发送前编码所有字符
- multipart/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用
- text/plain：将空格转换为“+”号，但不对特殊字符编码

action属性：规定向何处发送表单

可能的值：
- 绝对URL：指向其他站点
- 相对URL：指向站点内的文件

method属性只有两个选项：get和post(其他方法是ajax里面的)

HTML5中新增表单元素属性是

placeholder
multiple
required
pattern

元素优先级

在HTML中，帧元素(frameset)的优先级最高，表单元素比非表单元素的优先级要高。

CSS

• CSS加载不会阻塞DOM树的解析；CSS加载会阻塞DOM树的渲染；CSS加载会阻塞后面JS语句的执行
• 去掉超文本链接的下划线：text-decoration: none
• 去掉ul\li前面黑点：list-style-type: none
• 将ul \ li前的小黑点改成正方形：list-style-type: square

属性

• text-transform: capitalize；首字母大写
• text-transform: lowercase；所有字母小写
• text-transform: uppercase；所有字母大写
• font-weight: bold；字体为粗体

锚伪类：用来表示链接的不同状态的伪类

• a:link:未访问的链接
• a:visited:已访问的链接
• a:hover：鼠标移动到链接上
• a:active:选定的链接

属性方向

• margin:20 20 30 40;(上右下左)
• text-shadow属性中的四个值(length、length、length、color)代表的含义：阴影离开文字的横方向距离、阴影离开文字的纵方向距离、阴影的模糊半径、阴影的颜色

CSS使用服务器端的字体

@font-face{font-family:dreamy;font-weight:bold;src:url(http:www.xx.com/font.eot)}

@keyframes规则用于创建动画

JQuery

• $(selector).fadeIn()：使用淡入效果显示元素
• $(selector).fadeOut()：使用淡入效果隐藏元素
• $(selector).fadeToggle()：使用淡入效果显示/隐藏元素来回切换
• $(selector).fadeTo()：使元素的透明度逐渐变化到指定值
• $(selector).slideUp()：隐藏
• $(selector).slideDown()：显示
• $().children()：沿着DOM树查询第一个直接子元素
• $().html()：返回DOM结构，返回页面源码
• $().contents()：能拿到所有子元素
• $().find()：查询某个元素
• $().text()：返回纯文本
• $().attr()：返回元素属性值
• $().val()：返回设置或表单字段的值

寻找元素

• siblings：同辈元素
• find：后辈元素
• eq(index)：第index个元素
• next：下一个元素

JS

• 在JS中，0可以作为分母，0/0的结果为NaN，不会抛异常

• rejected状态的promise需要一个捕获异常的回调函数，否则会报错

  //报错
  Promise.reject(123).finally(a=>console.log(a));
  //正确的写法
  Promise.reject(123).catch(err=>err).finally(a=>console.log(a));

• 在JS中，当一般变量、函数、函数参数重名时，它们的优先级：已初始化的一般参数>函数>函数参数>未初始化的一般参数

JSON与XML

XML特点

• 只有唯一的根元素
• 是标记语言，不是编程语言
• 格式是严格要求，每个元素的开闭必须完整，不允许交叉开闭
• 大小写敏感

XML优点

• 格式统一，符合标准
• 容易与其他系统进行远程交互，数据传输比较方便

XML缺点

• XML文件庞大，文件格式复杂，传输占带宽
• 服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护
• 客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码
• 服务器端和客户端解析XML需要花费较多资源和时间

JSON优点

• 数据格式比较简单，易于读写，格式都是压缩的，占用带宽小，传输速度比XML快
• 易于解析，JS可以通过eval_r()进行读取
• 支持多种语言，包括java、python等，便于服务器端解析
• JSON格式能够直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，易于维护

JSON缺点

• 没有XML格式那么使用广泛，没有XML通用性高
• JSON格式在web应用中的推广还属于初级阶段

JSON与XML的区别

• JSON是javascript object notation；XML是可扩展的标记语言。
• JSON基于JS；XML源于SGML。
• JSON是一种表示对象的方式，XML是一种标记语言，使用标记结构来表示数据项。但是JSON比XML更能表达结构化数据。
• JSON不提供对命名空间的支持，XML支持命名空间。
• JSON支持数组，XML不支持数组
• XML文件相对难以理解和阅读，JSON文件非常易于阅读
• XML对数据的类型描述表达比JSON更丰富
• JSON不使用结束标签，XML有开始和结束标签
• JSON安全性较低，XML安全性比JSON高
• JSON不支持注释，XML支持
• JSON仅支持UTF-8编码，XML支持各种注释
• 存在一些数据库，直接支持XML或JSON数据的操作，例如mongodb，postgresql

React

Hook

• hook还无法覆盖class的所有使用场景，不常用的getSnapshotBeforeUpdate、getDerivedStateFromError和componentDidCatch生命周期还没有Hook的等价写法

useEffect

• 模拟三个生命周期（挂载、更新、卸载前）。挂载componentDidMount：第二个参数为空，或空数组。更新componentDidUpdate：第二个参数为需要观察的依赖，依赖变化则执行副作用函数。卸载前componentWillUnmount：在useEffect的回调函数中返回一个函数。

useDebugValue

• 可以在react开发者工具中显示自定义hook的标签

Context

• context提供了一种在组件之间共享值的方式，而不必显式地通过组件树逐层传递props
• context的设计目的是为了共享那些对于一个组件树而言是全局的数据，组件树中的所有组件都能访问到这些数据，也能访问到后续数据的更新
• 但是context会使组件的复用性变差

redux

• 单一数据源
• state只读
• 使用纯函数来执行修改

StrictMode

• 检测过时的context API
• 识别不安全的生命周期
• 检测意外的副作用
• 仅在开发环境生效

错误边界

若class组件定义了getDerivedStateFromError()或componentDidCatch()这两个生命周期方法中的任意一个，那么它就变成了错误边界。抛出错误后，需要使用getDerivedStateFromError()渲染备用UI，使用componentDidCatch()打印错误信息

lazy和suspense

const OtherComponent = React.lazy(()=>import('./OtherComponent'));
function MyComponent(){
    return (
    	<>
        	// Suspense中的fallback属性指定加载指示器，此处为Component1，在加载过程中展示，以防其组件树中的某些子组件尚未具备渲染条件
			<React.Suspense fallback={<Component1 />}>
        		<div>
                    <OtherComponent></OtherComponent>
            	</div>
        	</React.Suspense>
        </>
    )
}

• React.lazy()允许定义一个动态加载的组件
• lazy懒加载组件，经常和suspense组件搭配使用，常用于渲染异步组件。suspense可以做加载动画，代码拆分，用于加载完之前先渲染一个加载动画或者占位符

路由组件

• history的属性值有：createMemoryHistory、hashHistory、browserHistory

ReactDOM.render()

• ReactDom.render()不会修改容器节点，只会修改容器节点的子节点。可以在不覆盖现有子节点的情况下，将组件插入已有的DOM节点中。会返回对根组件ReactComponent实例的引用。

JSX

• JSX代码最终会被转换成使用React.createElement()方法生成的react元素

生命周期

• componentWillUnmount()中可以执行：清除timer、取消网络请求、清除在componentDidMount()中创建的订阅等操作，但不能调用setState，因为该组件将永远不会重新渲染。

剪贴板事件

• onCopy、onCut、onPaste

refs

• 适合的使用场景：1）管理焦点，文本选择或媒体播放 2）触发强制动画 3）集成第三方DOM库

React.findDOMNode

• 组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM 。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 React.findDOMNode 方法。
• 只在已挂载的组件上可用。如果尝试调用未挂载的组件，则将引发异常。
• 在严格模式下，使用此方法会报警告。

ReactDOM.createPortal(child, container)

• 可以将子节点渲染到存在于父组件以外的DOM节点上
• 从portal内部触发的事件会一直冒泡至含React树的祖先
• portal可以被放置在DOM树种的任何地方，其行为和普通的React子节点行为一致

注释

• html：<!-- -->
• CSS: /* */
• js: //