前端面试 HTML篇
src和href的区别
src和href都是用来加载外部资源，区别如下
- src：当浏览器解析到该元素时，会暂停其他资源的加载和处理，直到该资源加载完成。 它会将资源内容嵌入到当前标签所在的位置，将其指向的资源下载应用到文档内，如js脚本等。常用在img、script、iframe等标签。
- href：指向外部资源所在的位置，和当前元素位置建立链接，当浏览器解识别到它指向的位置，将其下载的时候不会阻止其他资源的加载解析。常用在a 、 link标签。
HTML5新增特性
- 新增语义化标签，head、footer、nav、main、section等
- 新增表单类型属性，email、number、时间控件、color颜色拾取器、placeholder、autofocus自动获取焦点...
- 新增音视频标签，video、audio
- 新增canvas画布、websocket通信、拖拽等
- 新增本地存储localStorage、sessionStorage
对HTML语义化理解
根据内容来选择合适的标签
- 方便浏览器爬虫更好的识别内容。
- 有利于代码可读性，开发者能清晰的看出网页的结构，便于团队的开发与维护。
DOCTYPE(⽂档类型) 的作⽤
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，是用来告诉浏览器的解析器，该用什么样的方式去加载识别文档。
iframe 有那些优点和缺点？
iframe通常用来加载外部链接，不会影响网页内容的加载。
优点
- 可以将网页原封不动的加载进来
- 增加代码的可用性
- 用来加载显示较慢的内容，如广告、视频等
缺点
- 加载的内容无法被浏览器引擎识别，对SEO不友好
- 会阻塞onload事件加载
- 会产生很多页面，不利于管理
Canvas和SVG的区别
- canvas画布，是通过javascript来绘制2d图，是逐像素进行渲染。
- SVG矢量图，是基于XML描述的2D图形语言，每个元素都是可用的，可以为其添加事件。
行内元素、块级元素、空（void）
- 行内： a、b、span、input、img、select、 strong
- 块：p、div、h1、ul、ol、li、dl、dt、dd
- 空：<hr>、<br>、<img>、<input>、<link>、<meta>
怎样添加、移除、移动、复制、创建和查找节点
- 添加节点document.appendChild(dom)
- 移除节点document.removeChild(dom)
- 移动节点document.appendChild(targetDom)
- 复制节点dom.cloneNode(true)，参数true表示是否复制子节点
- 创建节点document.createElement(dom)
- 查找节点:
-
- document.getElementById("elementId")
- document.getElementsByClassName("className")
- document.getElementsByTagName("tagName")
- document.querySelector("selector")
- document.querySelectorAll("selector")