html复习

1.Html5的新特性
语义化 header footer
Video audio播放视频，音频
Canvas SVG 绘画的元素，canvas绘制的图片会是真，而SVG绘制的不会失真
Drag Drop 拖放api
Geolocation 获取地理位置
Localstorage sessionStorage 用于本地离线缓存
Web worker 独立于其他脚本，不影响页面性能运行
Websocket 协议
表单空间 date time email url search
2.对HTML语义化的理解
Web语义化，用正确的标签做正确的事情，页面内容结构化，没有css也能网页阅读，方便浏览器，搜索引擎解析，方便seo
3.Iframe作用和缺点【微前端】
Iframe嵌入式框架，把网页嵌入到现有的网页中。不利用seo优化，iframes阻塞页面加载，影响网页加载速度，iframe加载完毕之后才会触发window.onload事件，动态设置src可解决这个问题
4.Img的title和alt
Alt: 如果无法显示图像，浏览器将显示alt指定的内容
Title: 鼠标移动到元素上时显示title的内容
5.Label
Label标签是用来定义表单控件间的关系，当用户选择该标签的时候，浏览器会自动将交单和标签相关的表单控件中。
6.实现在一张图片上的某个区域做到点击事件
就是图片热区。通过后台配置的图片定义坐标x，y轴进行画盒子，利用map和area这俩标签，map中有个name，和img中的usemap对应
7.a元素的作用
下载文件，发送短信
8.SEO中的TDK
T: title标题标签 D: description描述标签 K： keywords关键词标签
9.如何实现图片的懒加载【前端性能优化】
10.浏览器复制粘贴【功能实现】
11.关于JSONP
关于jsonp是跨域的一种方法，需要明白啥是同源策略，两个页面的协议，域名和端口都相同，则两个页面具有相同的源。 同源策略限制了从同一个源加载的文档或脚本如何来自另一个源的资源进行交互。无法读取非同源网页的cookie，localstorage和indexeddb，无法接触非同源网页的dom， 无法向非同源地址发送ajax请求。Jsonp是前端程序员为了解决跨域问题，提出的一种解决拌饭，只支持get请求，不支持post请求，jnonsp是实现定义一个用于获取跨域响应数据的回调函数，通过没有同源策略限制的script标签发起的一个请求，将回调函数的名称放到这个请求的query参数中，然后服务端返回这个回调函数的执行，并将需要响应的数据放到回调函数的参数里，前端的script标签请求到这个执行的回到函数中立马执行，于是就拿到了执行的响应数据。

// 或

let script = document.createElement(‘script’);
script.src = “http://jsonp.js?callback=cb”;
body.append(script)
router.get(‘/’, function (req, res, next) {
(() => {
const data = {
x: 10
};
let params = req.query;
if (params.callback) {
let callback = params.callback;
console.log(params.callback);
res.send(${callback}(${JSON.stringify(data.x)}));
} else {
res.send(‘err’);
}
})();
});
但是会存在安全性的问题，csrf攻击，xss漏洞
12.doctype的作用是什么
Doctype是文档声明，位于文档的第一行，告诉浏览器的解析器用什么文档标准解析这个文档，不同的渲染模式会影响到css和JavaScript脚本的解析。文档解析类型有兼容模式，和标准模式，
13.如何实现跨域
客户端发送ajax/fetch请求。服务器端设置相关的头信息。
res.header(“Access-Control-Allow-Origin”, “http://localhost:8000”); // http://localhost:8000是允许跨域请求的地址，如果允许很多地址跨域请求，设置为""
//=>（就不能在允许携带cookie了） 具体地址
res.header(“Access-Control-Allow-Credentials”, true);
res.header(“Access-Control-Allow-Headers”, “Content-Type,Content-Length,Authorization, Accept,X-Requested-With”);
res.header(“Access-Control-Allow-Methods”, “PUT,POST,GET,DELETE,HEAD,OPTIONS”);
http proxy实现跨域请求，主要是使用webpack.config.js,使用devserver， 在里面配置changeOrigin配置允许跨域。
基于post message实现跨域处理。但是是基于同源策略
Ngnix实现反向代理
基于iframe的跨域解决方案: document.domain+iframe,适用于主域相同，子域不用的前端通信跨域场景，两个不符合同源策略的页面，主域相同，然后让其中一个页面通过iframe嵌套另一个页面，通过js设置document.domain为主语， 这样两个页面就满足了同源策略
Location.hash + iframe: 当两个不符合同源策略且主域不同的页面需要进行跨域通信。让一个页面通过iframe内嵌另一个页面，然后在这个iframe中在内嵌c页面，修改c页面location.hash传递数据，然后修改a页面location.hash传递数据，然后监听hash变化，获取数据。
使用websocket协议跨域
14.Dom是什么
Dom是文档内容在编程语言上的抽象模型，建模了文档的内容和结构，给编程语言提供了一套完成的操纵文档的api。浏览器首次解析文档的时候，把文档的标签解析成一个个节点，父节点与子节点用线连接，整个文档最终形成一个dom树的树形结构。Dom树在js环境中也是存在的，在js中，原本对文档的修改dom树和其中的节点 dom树在js环境中也是存在的，对文档的修改只需要修改dom树和其中的节点，dom节点对象是普通的js对象，有易于操作的方法和属性。
15.关于dom的api
Node接口，每个节点都有nodeType属性，表明节点的类型
Element类型：对元素标签名，子节点和特性的访问
Text类型: 纯文本类型
Attr类型: 表示元素的特性
Comment类型: comment表示html中的注释
Document：表示文档，在浏览器中，是htmlDocument的一个实例，表示整个页面。
DocumentFragment：节点中没有对应标记的类型，表示一种轻量级的文档。
节点创建的api， createElement createTextNode cloneNode createDocumentFragment 页面修改型api appendChild insertBefore removeChild replaceChild 节点查询型api getElementById document.getElementByTagName 元素属性型api setAttribute getAttribute 元素样式型 直接修改元素的样式 动态添加样式规则
16.节点类型 nodeType
Node 对象的 nodeType 属性用于获取指定节点的节点类型。
17.如何对项目中的图片进行优化
18.常见的图片格式以及使用场景
19.行内元素和块级元素，以及void元素
行内元素 span a b img input strong select label em button textarea
块级元素 div p h1-h6 ul ol li blockquote[表示引用元素] header
行内块元素 img input td
空元素 br hr img input link meta
20.什么是data-属性
Html的数据类型，用于将数据储存在标准的html元素中作为额外信息。可以通过js来访问他。
21.Canvas和SVG的区别
Canvas是基于像素点，是位图，放大缩小会失真，svg基于图形，用html描述形状，放大缩小不会是真，canvas是在js中绘制，svg实在html中绘制，canvas支持的颜色比svg多，canvas不能够会已经绘制的图像进行修改， 但是svg可以通过标签进行操作
22.HTML5dragAPI
Dragstart: 事件主体是被拖拽元素，开始拖拽的时候元素被出发
Drag: 被拖拽元素，正在拖拽元素时候出发
Dragenter: 目标元素,被拖放元素进入某元素的时候
Dragover: 目标元素，在被拖放在某元素内移动时触发。
Dragleave：目标元素，在被拖放元素移除目标元素的时候触发
Drop: 目标元素,在目标元素完全接受拖放元素的时候触发
Dragend: 被拖放元素，在整个拖拽结束后触发
23.iframe的缺点
有的设备兼容性差，产生多个页面，不容易管理，样式和脚本需要额外链入，需要额外请求，增加页面的请求次数，滚动条会让页面控件使得iframe布局混乱，还会分散访问者的注意力。Iframe会阻塞主页面的onload事件及iframe和主页面共享连接池，会影响页面的并行加载。
24.Web worker
25.script标签中的defer和async
不加的话，就是阻塞html的dom构建
Defer：延迟脚本，并行下载，等到DomContentLoaded事件触发的时候执行。
Async: 在页面load事件执行之前执行，但是不确定是在DomContentLoaded之前或之后。加载默认是异步async的。
26.Input，事件的触发顺序
通常利用冒泡来进行事件委托，但是并不是所有事件都会冒泡。
27.Dom事件流
事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点之间按照特定的顺序传播 ，dom事件流分为捕获节点，当前目标阶段，冒泡阶段。给div添加点击事件，document先接受该点击事件，如果该层没有添加点击事件，则去下一层继续查找，直到找到目标，被称为捕获阶段，然后得到这个点击事件的目标div的时候就是当前目标阶段，点击事件完成之后，就会反过来逐层向外执行。
28.所有事件都有冒泡吗
不是，blur，focus,load,unload,abort不可以冒泡，每个event都有一个event.bubbles属性，可以知道他是否可以冒泡
29.如何阻止冒泡和默认事件
阻止事件冒泡，w3c阻止冒泡的方法为e.stopPropageation IE阻止冒泡的方法为e.cancelBubble
网页中有自己的默认行为，dom中提供preventDefault方法来取消事件默认行为，ie提供的是returnValue属性。
30.Offset scroll client的区别
scroll是主要涉及元素的滚动行为，当一个元素的移除内容超过其指定的高度和宽度的时候，scroll属性允许用户通过滚动来查看全部内容
Client: Client属性主要用于描述元素的可视区域大小。它包括clientWidth和clientHeight两个属性，分别表示元素的宽度和高度（以像素为单位），不包括滚动条、边框和外边距。
Offset：offset属性用于描述元素相对于offset Parent。offsetWidth和offsetHeight表示元素的全部宽度和高度，包括滚动条、边框和外边距。
31.Target=_blank和target=blank
Target=_blank属性，点击链接会在新的浏览器窗口或标签页中打开目标网站。Target=blank，不会再新的浏览器窗口或者标签页中打开网页，会在档期啊你浏览器窗口或者标签页中加载目标网页。
32.children和childrenNode的区别
Childnodes属性是JavaScript中node的属性，用于返回一个包含子节点的nodelist,nodelist的项是对象。Element.children 是一个只读属性，返回 一个Node的子elements ，是一个动态更新的 HTMLCollection 。
33.HTMLCollection和NodeList的区别
Nodelist可以包含各种类型的节点，可以用foreach，htmlCollection只能包含html元素节点,只能用for of
34.有自己写过原生的自定义事件吗
主要是使用event,customevent这两个api。Event支持简单的自定义事件，customevent支持复杂的自定义事件。
35.Meta标签
Meta标签是提供有关html文档的元数据，元数据不会显示在页面上，但是能够被机器识别，有利于seo。这里有一个propery content属性，可以让网页称为富媒体对象，当cv这个链接的时候，就会出现这属性里面的内容
36.Viewport标签
Viewport是meta标签的name属性中可以值中的一个，指web页面上用户可见的区域，用于移动端页面设计。控制视口的大小和比例
37.SGML HTML XML XHTML
Sgml是定义标记语言的元语言，xml和html是sgml定义的两种语言，html定义外观，xml是定义数据，xhtml是xml和html的交集，W3C 在制定 HTML5 标准时，希望摆脱 SGML 的一些无用的功能和声明，并延续 HTML4 的风格，而非严格的 XHTML 的风格。
38.DTD
Dtd是一组机器刻度的规则，定义xml或者html的特定版本中允许元素以及它们的属性和层级的关系。
39.什么是行内元素
每个行内元素不占有独立的区域，仅仅依靠自己的字体大小或者图像大小来支撑结构
40.什么是块级元素
每个块级元素通常会导致独占一行或者多行，可以对其单独设置高度宽度以及对齐等属性
41.什么是空元素
没有内容的html元素被称为空元素。
42.b和strong的区别和i和em的区别
虽然样式相同，但是strong侧重于语义化标签，有利于针对seo引擎优化。
43.前端需要那些seo
控制首页链接数量， 网站首页不能有太多的链接，也不能有太少的链接。导航优化，利用布局，把重要内容html代码放到最前， 控制页面的大小，减少http请求，提高网络的加载速度。语义化html代码，符合w3c标准。Css精灵图，减少图片总字节数。使用webpack，使用懒加载，利用浏览器缓存，减少重拍，减少dom操作，图标使用iconfont替换，启用gzip压缩，使用cdn网络缓存，加快用户访问速度
44.Html5的离线储存
Html5离线缓存的原理就是将web应用程序的核心文件缓存到客户端本地存储。Html5离线缓存的工作原理，在html文件头部，使用manifest属性引用清单文件，在清单文件中列出要缓存的文件，当web应用程序首次加载的时候，浏览器会下载这些文件，当web应用程序下一次被打开时，如果网络链接不可用，浏览器将会从本地缓存中获取需要的资源，从而避免网络请求。

... CACHE MANIFEST #v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html
离线存储的manifest一般由3个部分组成
Cache表示需要离线存储的资源列表
Network在它下面列出来的资源只有在在线的情况下才能访问
Fallback: 如果第一个资源失败，那么就使用第二个资源来替换。
如果服务器对离线的资源进行了更新，必须更新manifest文件之后这些资源才能浏览器重新下载。如果只更新了资源，没有更新manifest文件的话，浏览器并不会重新下载资源，
45.Label的作用
Label标签用来定义表单控制间的关系，当用户选择该标签的时候，浏览器会自动将焦点转到和标签相关的空间。一种是id绑定，一种是嵌套
Number:
<input type=“text“name=“Name” id=“Name”/>
Date:
46.Html5的form的自动完成功能
autocomplete属性规范表单是否启用自动完成功能。自动完成允许浏览器对字段的输入，基于之前输入的值。Form设置autocompolete为on或者off来开启或者关闭自动完成功能。
47.页面可见性page visibility api
Hidden: 页面彻底不可见，visiblie: 页面至少一部分可见， prerender: 页面即将或正在渲染，处于不可见的状态。
48.Disabled 和readonly的区别
input元素设置disabled和readonly属性，都不可以编辑，但是disabled属性会将文本框变灰，readonly不会，disabled不可以通过js获取，但是readonly可以通过js获取。Disabled属性对input文本框，以及radio，chaeckbox都是使用的，但是readonly不适用。
49.Head标签
用于定义文档的头部，是所有头部元素的容器，head中的元素可以引用脚本，指示浏览器在那里找到样式表，提供元信息等。
50.渐进增强和优雅降级
渐进增强主要是针对低版本的浏览器进行页面重构，在保证基本功能的情况下，针对高级浏览器进行效果，交互等方面的改进和追加功能。
优雅降级: 一开始就构建完整的功能，然后针对低版本的浏览器进行兼容
51.Attribute和property的区别
Attributes是html元素标签的属性，而properties是dom对象的属性。
52.SEO的原理是什么，如何实现seo优化
搜索引擎排除一个能够在网上发现网页并抓取文件的程序，搜索引擎蜘蛛从数据库中已知的网页开始出发，然后跟踪连接。然后通过连接发现新的网址的时候，蜘蛛将新网页记录如数据库进行抓取。搜索引擎程序把蜘蛛抓取的网页文件存入数据库，这就是索引。用户在搜索引擎中输入关键字，进行搜索，返回信息。
Seo主要分为内部优化和外部优化，内部优化，meta标签，内部链接的优化，网页内容的更新，服务器端渲染。外部优化: 外部连接的类别，保持连接的多样性，外连运营，添加一定数量的外部连接，使关键词排名稳定提升。外链选择，友站友情链接。