面试题总结之HTML篇

发表于 | 分类于 | 阅读

如何理解HTML的语义化？

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页

  • 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由

严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术webworker, websocket, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

1
2
3
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

用一个div模拟textarea的实现

localStorage，sessionStorage，Cookie的区别和用途

cookie是网站为了标识用户身份而储存在用户本地终端（Client Side）上的数据（通常已经过加密）。cookie数据始终在同源的http请求中携带（即使不需要），也会在浏览器和服务器间来回传递。

sessionStorage和localStorage仅在客户端（即浏览器）中保存，不参与和服务器的通信。

存储大小：
cookie数据大小不能超过4K。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间：
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
sessionStorage 数据在当前浏览器窗口关闭后自动删除
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

你做的页面在哪些浏览器测试过？这些浏览器的内核分别是什么?

IE: trident内核
Firefox：gecko内核
Safari:webkit内核
Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome:Blink(基于webkit，Google与Opera Software共同开发)

Doctype，知道这是干什么的吗？

<!DOCTYPE> 告知 浏览器 当前的 HTML (或 XML) 文档是哪一个版本. Doctype 是一条 声明, 而不是一个 标签; 也可以把它叫做 “文档类型声明”, 或 简称为 “DTD”.（重点：告诉浏览器按照何种规范解析页面）

  • <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  • 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • <!DOCTYPE>不存在或格式不正确会导致文档以混杂模式呈现。

如何做好SEO？

如下标签有什么区别？

1
2
3
<script>
<script async>
<script defer>
0%