| meta标签 | meta作用：告诉机器浏览器该如何解析该页面，描述这个页面的主要内容，可以设置服务器发送到浏览器的http头部内容。charset="utf-8"设置页面使用的字符编码。viewport 设置视口，移动端的适配 |
| css与javascript引入位置 | script标签的引入一般放在body最后，这样避免脚本过大，加载时间长，导致页面长时间空白，这是因为渲染进程与js进程是互斥的，脚本会阻塞页面的渲染，脚本之间的加载是同步进行的，按引入顺序执行 |
| HTML 的块级元素，行内元素，行内块元素有哪些?区别是什么? | 块级元素：div，h1-h6，p，ul，ol，dl，li，hr，dt，dd，form，table标行内元素：em，i，del，small标签，strong标签，ins，span标签，a标签 行内块元素：img，input(表单元素，除去form) .知名的空元素：br,hr, img, input, link ,meta |
| src 和 href 的区别 | href 是超文本引用，它是指向资源的位置，建立与目标文件的联系；src 目的是把资源下载到页面中；浏览器解析 href 不会阻塞对文档的处理（这就是官方建议使用 link 引入而不是 @ import 的原因），src 会阻塞对文档的处理。（defer和async的区别（将js文件转为异步加载）：首先都是实现js文件的异步加载，不阻塞页面的渲染；区别就是defer必须等到整个文档渲染完成后才执行，而async在加载完成后，会暂停html的解析，转去执行js。） |
| DOCTYPE 标签 | DOCTYPE声明于文档最前面，告诉浏览器以何种方式来渲染页面。1.在标准模式中，浏览器以其支持的最高标准呈现页面 2.在混杂模式中，页面以一种比较宽松的向后兼容（兼容老的版本）的方法显示，混杂模式通常模拟老浏览器的行为以防止老站点无法工作 |
| |
| H5新特性 | 新增语义化标签：nav、header、footer、aside、section、article。音频、视频标签：audio、video 。数据存储：localStorage、sessionStorage。canvas（画布）、Geolocation（地理定位）、websocket（通信协议） input标签新增属性：placeholder、autocomplete、autofocus、required 。history API：go、forward、back、pushstate应用：vue编程式导航的灵感来源；vue-router的history模式 |
| 从输入网址（URL）到页面显示的过程？(一次完整的http请求) | 1.域名解析，对输入的url进行dns域名解析，得到对应的ip地址。2.根据这个ip地址，找到对应的服务器，发起tcp连接（三次握手）。3.建立tcp连接后发送http请求。4.服务器响应http请求，浏览器得到html代码。5.浏览器解析html代码，并请求html代码中的js、css、图片等资源。6.浏览器对页面进行渲染并呈现给用户。7.断开TCP连接（四次挥手）。 |
| html页面渲染过程 | 1.解析html文件，创建DOM树。2.解析css，生成CSSOM（CSS Object Model），即CSS对象模型。3.dom和css合并，构建渲染树（render tree）。4.layout 布局（渲染）（依照盒子模型，计算每个节点在屏幕中的尺寸和位置）。5.painting 绘制（渲染）（按照计算出来的规则，通过显卡，将内容画到屏幕上。）6.重新渲染（<1>重排（即重新layout）：当节点位置或者尺寸发生变化事会发生重排。<2>重绘（即重新paint）：改变某个元素的背景色、文字颜色等不影响它周围或内部布局的属性时，屏幕的一部分需要重画，但是元素的尺寸没有改变。<3>特点：重绘不一定导致重排；重排一定会导致重绘，因为重绘是浏览器渲染页面的最后一步） |
| 列出常见的标签，并简单介绍这些标签用在什么场景？ | <a href="http://www.baidu.com"> 用于超链接. <article> 用于一篇文章<aside> 用于页面的侧边栏 .<blockquote> 用于大段的引用内容 .<br> 换行 .<code> 用于包裹一段代码内容 .<dd> 用于一个dl列表的某个dt名词的描述. <del> 用于删除一些不需要的文字 .<footer> 用于包裹页面底部内容. <header> 用于包裹页面的头部内容 . <head> 用于包裹页面的元信息 如<meta>,<link>,<title> .<form> 用于制造一个表单 . <iframe> 用于嵌套另一个小页面到一个页面中 . <textarea> 用于制作一大块文本输入框 |
| 在 input 里，name 有什么作用？ | name属性用于对提交到服务器后的表单数据进行标识，只有在form表单中设置了name属性，才能在提交表单值获取到他们的值 |
| title 属性和 alt 属性分别有什么作用？ | alt属性和title属性的区别是前者是在图片无法加载时才会显示值，title是在图片正常加载鼠标划上去显示值 |
| label标签的作用 | label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。 |
| a标签中 如何禁用href 跳转页面 或 定位链接 | e.preventDefault();href="javascript:void(0); |
| canvas在标签上设置宽高 和在style中设置宽高有什么区别 | canvas标签的width和height是画布实际宽度和高度，绘制的图形都是在这个上面。而style的width和height是canvas在浏览器中被渲染的高度和宽度。如果canvas的width和height没指定或值不正确，就被设置成默认值 。 |
| 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? | IE: trident内核 。Firefox：gecko内核 。Safari:webkit内核 。Opera:以前是presto内核，Opera现已改用GoogleChrome的Blink内核 。Chrome(Blink于webkit，Google与Opera Software共同开发) |
| 页面导入样式时，使用link和@import有什么区别？ | (1) link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;（2） 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;（3） import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;(4) link支持使用js控制DOM去改变样式，而@import不支持; |
| html渲染过程 | 浏览器接收到HTML代码，可能是一份完整的文档，也可能是一个chunk,即开始解析，先创建dom树，再构建渲染树，最后浏览器将渲染树绘制到页面上。 构建dom树的过程遇到script文件加载/执行会阻塞后面dom树的构建（javascript可能会改变dom树）,遇到css文件则会阻塞渲染树的构造，dom树依然继续构造（除非遇到script标签并且css文件依旧未加载完成），但不会渲染绘制到页面上，而无论那个阻塞，该加载的文件还是会加载，例如html文档中的其他css/js/图片文件 |
| |
| |
| |
| 重学前端系列之 HTML面试题 | |
| HTML 5 教程 | |
| HTML/HTML5 基础知识 | |
| 网道HTML教程 | |
