| Warren's

[toc]

检测媒体 @media 后可用的查询 window.matchMedia('print').addListener((res) => {});

浏览器解析文档过程

解析html文档，构建DOM树（遇到img标签就加载资源）
加载样式，解析样式，构建样式规则树
加载js，执行js代码
把DOM树与样式树匹配构建渲染树（加载背景tupian）
计算元素位置进行布局
渲染绘制

DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等

render tree不包含隐藏的节点 (比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到 render tree中

重绘：render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color

回流：render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建

input 标签相关操作：

disabled='disabled' 可用于option标签和input标签

readonly='readonly'用于input标签，不能修改的。仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。

input 标签设置属性 autofocus 自动获取焦点

inputElement.focus()

checked 在标签上只要出现就会被勾选，如果是用js代码设置 checked 的值为 true 或 false 即正常;获取也用checked

enterkeyhint 属性可用于修改手机键盘 enter 按钮的文字

form 和 input 等，可以设置 autocomplete 解决背景问题

/* 常规输入框用这个即可 */
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #333; 
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #fff; /* 选中时的颜色 */
    transition: background-color 50000s ease-out 10000s; /* 时间设置一定要长 */
}

或者设置如下属性 autocomplete="off" 关闭自动填充 autocomplete="new-password" 阻止密码字段的自动填充

p 标签中不能放块级元素,内联元素中不能放块级元素;

是用 img 来加载图片还是用背景图片：

页面会先加载img图片，若图片大会影响后面的内容的加载
如果用背景来加载图片的话，就不会影响到页面的显示效果
图片比较重要且资源小就用img
alt属性有利于seo（搜索引擎优化）；更好的有利于seo用a标签加css的背景；

&nbsp占位符

table{ border-collapse: collapse; }
th{ padding: 10px; background-color: red;color:#fff;}
tr:first-child td{border-top: 1px solid red;}
td{border-bottom: 1px solid red;border-right: 1px solid red;padding: 10px 0}
td:first-child, th:first-child{border-left: 1px solid red;}
th:last-child{ border-right: 1px solid red; }

tbody {
    display:block;
    height:50px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
}

属性:
colspan= 2  占多少列；
rowspan=2  占多少行；
align=left；   
cellspacing="0"：两个单元格之间空间的大小；
cellpadding="0"：单元的内容和边框之间的空间； 
border="1px"

样式：
border-collapse: collapse; 去掉 table 中边框间间隔，合并边框

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化，样式设计。table内，caption元素之后,thead之前（https://www.runoob.com/try/try.php?filename=tryhtml_colgroup_test）

可以利用该标签，设置可拖动表格宽度

<abbr title='people's republic of china'>PRC</abbr>

为浏览器拼写和检查和搜索引擎提供有用的信息。新增的结构标签：（由DIV派生出来）

section:页面中的一个内容区块（不用来布局，只用来划分网页）

article：定义页面独立的区域

aside：侧边栏内容

hgroup：对网页或是区块（section）的标题进行整合

footer：定义section或是文档的页脚

nav：导航

figure：独立的流内容，图片等

mark:标记

progress：进度条（支持性不好）

time：定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。它的标注是给搜索引擎用的，方便搜索引擎生成更智能的的搜索结果。

(属性datetime='2013-10-18T09：00Z'，pubdate 告诉搜索引擎这是该文档或是文章的创建时间。)

T是分隔符Z表示UTC格式；

<details> <!-- 以树形结构显示 -->
    <summary>总结</summary><p>kkk</p>
</details>

<input id='myCar' list='car'/><!-- 用于输入时，提示预先存储的值。 -->
<datalist id='car'><option value='12'></option></datalist>

<pre></pre>: 定义预格式化的文本（保留文本中的空格和换行符）和 white-space:pre 类似；通常用来包含代码

video 和 audio

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
    <!-- Ogg、MPEG4、WebM -->
</video>

timeupdate 事件在音频/视频（audio/video）的播放位置发生改变时触发
play 事件在音频/视频（audio/video）点击播放时时触发
设置播放时间点 document.getElementById("xxx").currentTime = 5;

label

<label>Do you like peas? <input type="checkbox" name="peas"></label> <!-- 包含 -->
<label for="username">Click me</label> <input type="text" id="username"> <!-- 利用 for 和 id 结合 -->

属性

<html manifest= 'XX X.X X X'> 缓存网页

<!-- 
    rel='shortcut icon' 是历史标准 不应该使用了 
    图像通常可以使用任何被浏览器支持的图像格式
    type:gif,png,ico(image/vnd.microsoft.icon)
    favicon.ico类型的图标所有桌面浏览器都支持，推荐把16×16, 32×32 以及 48×48这几个尺寸的图标整合在favicon.ico中
    现代桌面浏览器，推荐使用PNG图标作为favicon
-->
<link rel='icon' type='images/png' href='images/delete.png'/>
<!-- 防止页面 默认去获取 icon -->
<link rel="icon" href="data:image/png;base64,">

<link rel='dns-prefetch' href='//g.tbcdn.cn'>
在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行DNS的解析

<base href = 'http ://www.w3school.com.cn/i/' />
<base target='_blank' />
会在所有的URL（img link a...）前面加上base的href内容，并且跳转方式会用base的target值

列表

<!-- 描述说明性质的列表 -->
<dl> <dt>Name 类似标题</dt> <dd>Warren 这里会缩进</dd> <dl/>
<!-- 属性 type = 1，a，A，i，I 显示的序号类型-->
<!-- 属性 start = 2 表示从2开始 -->
<!-- 属性 reversed = true 表示是否反序显示 -->
<!-- li 中的 value 属性 重新定义序号的值 -->
<ol reversed="true" start='5' type='I'><li value="2"></li></ol>

<input type='file' multiple(多选文件)/> 获取元素的files属性则是一个FileList对象，该对象是一个类数组对象，一个file对象就是一个Blob。有name，type，size（files[0].name）是火狐的标准+谷歌也可以。 size 是大小乘以 1024 比如不超过 10M => 10*1024*1024 当没有加multiple时只有一个文件也是用files[0]来获取, change事件用 e.target.files

Filereader对象，图片预览等

返回的值在 r.target.result中

accept: MIME类型，多个之间用逗号隔开 accept="audio/*,video/*,image/*"

全局属性：

data-*：自定义属性;

hidden='hidden'隐藏元素;

spellcheck='true/false'检查有无拼写错误；

tableindex='1'设置按tab键的时候跳转顺序；

contentEditable=true用contentEditable来让元素的内容可以编辑，还提供了一个javascript方法，window.document.designMode='on/off'让所有的内容是否可以修改。react 开发环境会包warring

embed

AllowScriptAccess:naver/aways 参数可以防止从一个域中承载的 SWF文件访问来自另一个域的 HTML页面中的脚本。

allowNetworking:

all: SWF 文件中允许使用所有网络API;

internal: SWF 文件可能不调用浏览器导航或浏览器交互API，但是它会调用任何其它网络API.

none: SWF 文件可能不调用浏览器导航或浏览器交互API，并且它无法使用任何SWF 到 SWF 通信 API

与 dom 操作相关

MDN DOMopen in new window

以下接口都从 Node 继承其方法和属性：

Document, Element, Attr, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entit

htmlElement 继承自父接口Element和 GlobalEventHandlers的属性

htmlElement.dataset.name = 'hew' 给元素添加自定义属性 data-name="hew"

元素的插入

parentElement.insertBefore(Element, 在父元素中的某个子元素); // 在元素插入到指定元素前面

Element.appendChild(Element); // 在元素内部最后插入元素

ParentNode.prepend(Node,DOMString,...); // 在元素内部第一个元素前插入节点 IE不支持所以建议用 insertBefore 替代
if(parentNode.prepend) {
    parentNode.prepend(Element);
} else {
    var firstNode = parentNode.childNodes[1];
    parentNode.insertBefore(Element, firstNode);
}

node.nodeType 1 元素节点 2属性节点(被废弃) 3文本节点
node.parentElement 返回当前节点的父元素节点
node.parentNode 指定节点的父节点返回值可能是一个元素(Element )节点,也可能是一个文档(Document )节点,或者是个文档碎片(DocumentFragment)节点

元素的动画 Element.animate 参考骰子open in new window

移除元素 node.parentNode.removeChild(node) 兼容性好

document.querySelector('#id').cloneNode(true) true表示子节点也clone，返回新 Node
获取原始图片的真实宽高，非css样式修改后的宽高

// 注意是要在 onload 加载后才能调用
var width = htmlImageElement.naturalWidth  
var height = htmlImageElement.naturalHeight
// htmlImageElement 可以是 document.querySelector 等类似方法获取的 img 元素 也可以是 new Image() 创建的元素

元素宽高,与滑动条

获取 img 标签宽高：htmlImageElement.width | height htmlImageElement 提供了特别的属性和方法
window.innerWidth | innerHeight 只能通过window调用获取当前显示区域宽高，如果是在iframe中则获取当前所在iframe的显示区域宽高 (都兼容)
htmlElement.clientWidth | clientHeight 包括内边距（兼容性好）
htmlElement.offsetWidth | offsetHeight 包括内边距和边框的宽度
返回元素相对于父元素的位置，element.offsetLeft 和 offsetTop，用了position更精确。
window.screen.width 获取电脑屏幕宽度 (兼容ie10，有问题)
htmlElement.scrollHeight 所有内容包括未被滚动到的没有滚动条时 scrollHeight 和 clientHeight 相同
js原生，让元素滚动到可见区域

element.scrollIntoView({ behavior: "smooth"});

element.scrollLeft/scrollTop 来设置或获取滑动条的位置; 只能作用于元素上，window上无效
pageXOffset(scrollX)/pageYOffset(scrollY) 只能作用于 window 上, 推荐 pageXOffset，兼容ie9；只读属性
谷歌的页面滚动是用的body，火狐是用的html；
谷歌:当 scrollTop 的值小于1时会直接返回0，所以用y=1除以a的x次方指数函数来趋近0来由快到慢的滑动。
window.scroll() 和 window.scrollTo() 用法一致参数为两种形式（1）配置对象（2）(x,y) 值
Element.getBoundingClientRect() 元素的大小及其相对于视口的位置(当页面滑动后，值会更改) 兼容良好

x: 推荐用left
y: 推荐用top
top: 距视口顶部距离
left: 距视口左边距离
width: 元素宽度
height: 元素高度
right: 元素右边距离视口左边的距离
bottom: 元素底部距离视口顶部的距离

querySelector

注意选择符中的 # . 关键字会被识别未 id、类 querySelectorAll 返回的是 Static Node List(是一次对文档的快照，若是该快照下对文档有什么更改不会影响本次操作);
document.querySelectorAll('选择符')：返回匹配元素集合。
document.querySelector ('选择符')：返回匹配第一个元素。
而 getElementsBy 系列的返回的是 Live Node List：

var ul = document.getElementsByTagName('ul')[0],  
    lis = ul.getElementsByTagName("li");  
for(var i = 0; i < lis.length ; i++){   //这里就是lis.length在一直变化  
    ul.appendChild(document.createElement("li"));  
}

每一次调用lis都会去遍历一下文档，最终会无限循环。

相同： HTMLCollection 和 NodeList 十分相似，都是一个动态的元素集合，每次访问都需要重新对文档进行查询。
不同： HTMLCollection 是属于 Document Object Model HTML 规范，而 NodeList 属于 Document Object Model Core 规范。所以在现代浏览器中，querySelectorAll 的返回值是一个静态的 NodeList(包含：entries forEach item keys length) 对象而 getElementsBy 系列的返回值实际上是一个 HTMLCollection (包含 item length nameItem) 对象
NodeList 高版本浏览器可以用 forEach

iframe

window.parent 当使用了多个 .parent 超出了实际层级，会返回最后一个层级，不会报错
全局作用域下打印 length console.log(length); 不会报 is not defined 会返回 iframe 的个数
子页面获取父窗口及其元素 window.parent.document.getElementById() 在chrome中window.parent.document 要在服务器上才能使用。
获取当前的内嵌页面url,就直接在该页面使用window.location.href即可
父页面查找子页面的元素：

// 跨域会有问题
// 注意要放入 onload 中  等待子页面加载完成才能获取
document.getElementById('iframeId').contentWindow.[document||document.body||document.getElementById('子页面ID')]；

不同域可以在两个页面都设置document.domain='主域名'
父子窗口传递消息

// 父窗口
document.getElementById('iframeId').contentWindow.postmessage('')
// 子窗口iframe中使用
window.onmessage=function(e){e.data}

允许子页面 video 全屏设置 allowfullscreen

http 请求返回完整的 html 怎么预览

将html注入到 localStorage

/* page1 */
localStorage.removeItem('displayHtmlText')
localStorage.setItem('displayHtmlText', '这是一个后端返回的完整html文件字符串')
window.open('page2')

/* page2 */
// 在打开页面将 localStorage 中的html显示出来
// 打开一个文档，以便写入数据 
document.open();
// 写入文档内容
document.write(localStorage.getItem('preview'))
// 关闭文档
document.close();

Html5 消息通知

Notification（首字母大写）或刷新title

谷歌测试时,要启用本地服务的方式

Notification.requestPermission(function(permission){}),方法要用onclick等用户操作方法来调用。

在手机上只有火狐的实现了

预览pdf

<!-- 方式一 -->
<embed src="./pdf.pdf" type="application/pdf" width="100%" height="100%" internalinstanceid="81" />
            
<!-- 方式二 -->
<iframe src="./pdf.pdf" width="100%" height="100%">
    当前浏览器不支持在线预览PDF，请<a href="./pdf.pdf">下载 PDF</a>
</iframe>


<!-- 方式三 -->
<object data="./pdf.pdf" type="application/pdf" width="100%" height="100%">
    当前浏览器不支持在线预览PDF，请<a href="./pdf.pdf">下载 PDF</a>
</object>

# 浏览器解析文档过程

# input 标签相关操作：

# 标签

# 属性

# meta

# embed

# 与 dom 操作相关

# 元素宽高,与滑动条

# querySelector

# iframe

# http 请求返回完整的 html 怎么预览

# Html5 消息通知

# 预览pdf