1.HTML、XML、XHTML 的区别
- HTML：超文本标记语言，是语法较为松散的、不严格的
Web语言； - XML：可扩展的标记语言，主要用于存储数据和结构，可扩展；
- XHTML：可扩展的超文本标记语言，基于
XML，作用与HTML类似，但语法更严格。
2.行内元素和块级元素
行内元素
- 行内元素：
a,b,span,img,input,select,strong等; - 行内元素特征：
- 设置宽高无效
- 对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
- 不会自动进行换行
块级元素
- 块级元素
div,nav,aside,header,footer,ul,li,dl,dt,dd,h1-5,p等； - 块级元素特征：
- 能够识别宽高
- margin和padding的上下左右均对其有效
- 可以自动换行
- 多个块状元素标签写在一起，默认排列方式为从上至下
display属性实现行内块级元素转换
display:inline： 转换为行内元素(默认属性)display:block： 转换为块状元素display:inline-block： 转换为行内块状元素
3.src和href区别
- src(source): 是指向外部资源的位置，是引入外部资源；在请求
src资源时会将其指向的资源下载并嵌入到文档中，例如js脚本，img图片和frame等元素。 - ref(超文本引用): 用来建立当前元素和文档之间的连接，用在
link和a等元素上。 区别：
src: 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完，再继续解析(js脚本放在底部的原因)href: 会识别该文档为css文件，会下载但不会阻塞对当前文件的处理
4.标签上title属性与alt属性的区别是什么
alt是为了在图片未能正常显示时（屏幕阅读器）给予文字说明。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
5.HTML5新特性
5.1 语义化标签
语义化的标签，就是让标签有自己的含义，方便阅读，有利于团队合作开发；有利于搜索引擎优化(SEO)。
header：页眉通常包括网站标志、主导航、全站链接以及搜索框。nav：标记导航，仅对文档中重要的链接群使用。article：定义外部的内容，其中的内容独立于文档的其余部分。section：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。aside：侧边栏，定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。footer：页脚，只有当父级是body时，才是整个页面的页脚。
5.2 Canvas绘图和SVG绘图
Canvas和SVG是HTML5支持的可视化技术，用于图形的绘制。
- Canvas: 是一块画布，必须通过JS脚本来绘制图像
- SVG： 矢量图，使用xml格式绘制图形 区别：
- 格式不同：
Canvas绘制的图片依赖分辨率，缩小放大会失真；SVG绘制的是矢量图，缩小放大不失真 - 事件处理：
Canvas绘制的图形在画布里，不支持事件处理；SVG绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改
可以学习 基于 JavaScript 的开源可视化图表库echarts : Apache ECharts
5.3 HTML5的本地存储
HTML5的Web storage的存储方式有两种：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话中的数据，当会话结束后就会销毁；localStorage用于持久化的本地存储，除非用户主动删除数据，否则数据永远不会过期；cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 更详细的知识可以参考这篇：cookie和session、localStorage和sessionStorage
6.通过判断元素是否进入视口
通过判断元素是否进入视口，一般有三种方式进行判断：
1. el.offsetTop - document.documentElement.scrollTop <= viewPortHeight
2. el.getBoundingClientRect().top <= viewPortHeight
3. intersectionRatio > 0 && intersectionRatio <= 1
根据元素与视口是否相交，可以进行吸顶、吸底、曝光上报、列表加载更多、图片懒加载等操作。前面两种需要通过监听scroll事件，为了防止频繁触发，需要做防抖处理。
更多可以看这篇：使用IntersectionObserver优化图片加载
