前端面试之Html篇
1 . doctype(文档类型) 的做用是什么？ ☆javascript
-
对文档进行有效性验证:css
它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动做是被动的， 每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
-
决定浏览器的呈现模式: 对于实际操做，通知浏览器读取文档时用哪一种解析算法。html
若是没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响HTML 排版布局。
-
浏览器有三种方式解析HTML文档。前端
非怪异（标准）模式java
怪异模式web
部分怪异（近乎标准）模式面试
2 . HTML 和 XHTML 有什么区别？？ 若是页面使用 'application/xhtml+xml' 会有什么问题吗？算法
答：xhtml 语法要求严格，一旦遇到错误，马上中止解析，并显示错误信息。数据库
若是页面使用'application/xhtml+xml',一些老的浏览器会不兼容。
XHTML 元素必须被正确地嵌套。segmentfault
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
全部属性都必须使用双引号
3 . 若是网页内容须要支持多语言，你会怎么作？在设计和开发多语言网站时，有哪些问题你必需要考虑？
答：编码使用UTF-8，空间域名须要支持多浏览地址,准备多套模板。
在设计和开发多语言网站时，须要考虑:
应用字符集的选择
语言书写习惯&导航结构
数据库驱动型网站
css 盒子会由于内容尺寸不同出现不对齐偏移
4 . 使用 data- 属性的好处是什么？
答：data-为前端开发者提供自定义属性，这些属性集能够经过对象的dataset属性获取，
不支持该属性的浏览器能够经过getAttribute方法获取:
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>
div.dataset.commentNum; // 10
须要注意的是，data-以后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
并非全部的浏览器都支持.dataset属性，测试的浏览器中只有Chrome 和Opera 支持。
5 . 请描述 cookies、sessionStorage 和 localStorage 的区别。 ☆ ☆ ☆
答 sessionStorage、localStorage、cookie都是在浏览器端存储的数据 有了本地数据，
就能够避免数据在浏览器和服务器间没必要要地来回传递。 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可用于web请求之间保存数据。
cookies会发送到服务器端。其他两个不会。Cookie每一个域名存储量比较小（各浏览器不一样，大体4K）全部域名的存储量有限制（各浏览器不一样，大体4K）有个数限制（各浏览器不一样）
会随请求发送到服务器LocalStorage 永久存储 单个域名存储量比较大（推荐5MB，各浏览器不一样）整体数量无限制
-
SessionStorage 只在 Session 内有效 存储量更大（推荐没有限制，可是实际上各浏览器也不一样）
sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同学口（或tab）中，始终存在的数据。 也就是说只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一页面，数据仍然存在。 关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不一样窗口，即便是同一页面，sessionStorage 对象也是不一样的
6 . 请解释 <script>、<script async> 和 <script defer> 的区别。
答：
script
当解析器遇到 script 标签时，文档的解析将中止，并当即下载并执行脚本，脚本执行完毕后将继续解析文档。defer script
当解析器遇到 script 标签时，文档的解析不会中止，其余线程将下载脚本，待到文档解析完成，脚本才会执行。async script
当解析器遇到 script 标签时，文档的解析不会中止，其余线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程当中文档将中止解析，直到脚本执行完毕。
若是脚本不依赖于任何脚本，并不被任何脚本依赖，那么则使用 defer。 若是脚本是模块化的，不依赖于任何脚本，那么则使用 async。 defer 的脚本是按照声明顺序执行的。而 async 的脚本不一样，只要脚本下载完成，将会当即执行，未必会按照声明顺序执行。
7 . 为何一般推荐将 CSS <link> 放置在 <head></head> 之间，而将 JS <script> 放置在 </body> 以前？你知道有哪些例外吗？
答： 浏览器从上到下依次解析html文档。将 css 文件放到头部， css 文件能够先加载。 避免先加载 body 内容，致使页面一开始样式错乱，而后闪烁。将 javascript 文件放到底部是由于： 若将 javascript 文件放到 head 里面，就意味着必须等到全部的 javascript 代码都被 下载、解析和执行完成 以后才开始呈现页面内容。这样就会形成呈现页面时出现明显的延迟，窗口一片空白。 为避免这样的问题通常将所有 javascript 文件放到 body 元素中页面内容的后面。 页面加载的问题，先把页面加载出来，而后再去加载效果，提升用户体验度
8 . 什么是渐进式渲染 (progressive rendering)？
答：对渲染进行分割 从具体的使用的场景, 不一样的 Level 实际上对应不一样的页面内容,论坛是一个比较清晰的例子, 想象一个论坛:
网页的静态部分, HTML 固定的内容, 好比导航栏和底部
页面首屏的内容, 好比一个论坛的话题
页面首屏看不到的内容, 好比话题下面多少回复
切换路由才会显示的页面, 好比导航的另外一个页面
对于这样的状况, 显然有若干种可行的渲染分割的方案
全在客户端渲染
1, 2, 3 在服务端渲染, 4 等到用户点击从浏览器抓
1, 2 在服务器渲染, 评论由客户端加载
只有 1 在服务端渲染, 动态的数据所有由客户端抓取.
而这些方案对于服务端来讲, 性能的开销各不相同, 造成一个梯度,
而最后一种状况, 服务端预编译页面就行了, 几乎没有渲染负担.
根据实际的场景, 能够有更多 Level 能够设计.. 只是没这么简单罢了.
9 . 是否了解其余基于HTML的模板引擎？
答： 如今市场比较火的是jade吧 有兴趣能够移步
10 . H5有哪些新特性？
答：drag & drop 、 pattern 、 datalist 、 download 、 prefetch 和 dns-perfetch
及布局属性 section 、 article、 nav等
记住：不少面试者仅仅只列举新标签
- 1. 前端面试之HTML篇
- 2. 前端面试题 ---- html篇
- 3. 前端面试那些坑之HTML篇
- 4. BAT前端面试题之html篇
- 5. 前端面试之HTML篇整理
- 6. 前端面试之Vue篇
- 7. 前端面试之Css篇
- 8. 前端面试之webpack篇
- 9. 前端面试之websocket篇
- 10. 前端面试之Js篇
- 更多相关文章...
- • SVG 在 HTML 页面 - SVG 教程
- • ASP.NET Web Forms - HTML 页面 - ASP.NET 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端面试之HTML篇
- 2. 前端面试题 ---- html篇
- 3. 前端面试那些坑之HTML篇
- 4. BAT前端面试题之html篇
- 5. 前端面试之HTML篇整理
- 6. 前端面试之Vue篇
- 7. 前端面试之Css篇
- 8. 前端面试之webpack篇
- 9. 前端面试之websocket篇
- 10. 前端面试之Js篇