前端 HTML 面试题积累

语义化的 HTML

说明一：

  • 直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情
  • HTML 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析
  • 在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO
  • 使阅读源代码的人更容易将网站分块，便于阅读维护理解

说明二：

  • 用正确的标签做正确的事情
  • HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
  • 即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的
  • 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO
  • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

<!DOCTYPE html> 标签

H5 不基于 SGML，因此不需要对 DTD（document type definition）进行引用，但是需要 doctype 来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。而 HTML4.0 基于 SGML，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型

Doctype 作用？标准模式与兼容模式各有什么区别?

  • <!DOCTYPE> 声明位于 HTML 文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现

  • 标准模式的排版 和 JS 运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作

行内元素有哪些？块级元素有哪些？ 空（void）元素有那些？

首先：CSS 规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为 “block”，则为“块级”元素；span 默认 display 属性值为 “inline”，是“行内”元素

  • 行内元素有：a b span img input select strong（强调的语气）
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 ...... p
  • 常见的空元素：<br> <hr> <img> <input> <link> <meta>，鲜为人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

不同浏览器（版本）、HTML4（5）、CSS2 等实际略有差异 参考文章 传送门

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

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

  • 绘画 canvas;
  • 用于媒介回放的 video 和 audio 元素;
  • 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
  • sessionStorage 的数据在浏览器关闭后自动删除;
  • 语意化更好的内容元素，比如 article、footer、header、nav、section;
  • 表单控件，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

如何区分 HTML5： DOCTYPE 声明 / 新增的结构元素 / 功能元素

HTML5 的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件

原理：HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

如何使用：

1、页面头部像下面一样加入一个 manifest 的属性
2、在 cache.manifest 文件的编写离线存储的资源
  CACHE MANIFEST
  #v0.11
  CACHE:
  js/app.js
  css/style.css
  NETWORK:
  resourse/logo.png
  FALLBACK:
  / /offline.html
3、在离线状态时，操作 window.applicationCache 进行需求实现

详细的内容可以参考 传送门 1 传送门 2

浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储

离线的情况下，浏览器就直接使用离线存储的资源

详细请参考 传送门

iframe 有那些缺点？

iframe 会阻塞主页面的 onload 事件

搜索引擎的检索程序无法解读这种页面，不利于 SEO

iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

HTML5 的 form 如何关闭自动完成功能？

表单的自动完成功能

HTML5 中表单新增属性 autocomplete

在编写表单结构的时候，多次在 input 输入提交。在下次输入时，浏览器就会预测对字段的输入并给出提示

自动完成功能功能是默认开启的

语法

<input autocomplete="value">
值 描述
on 默认，规定启用自动完成功能
off 规定禁用自动完成功能

更多可以查看 传送门

给不想要提示的 form 或某个 input 设置为 autocomplete=off

页面可见性（Page Visibility API） 可以有哪些用途？

通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等

在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

实现不使用 border 画出 1px 高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

 <div style="height: 1px; overflow: hidden; background: red"></div>

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title 属性没有明确意义只表示是个标题，h1 则表示层次明确的标题，对页面信息的抓取也有很大的影响

strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读时：<strong> 会重读，而 <b> 是展示强调内容

i 内容展示为斜体，em 表示强调的文本

  • Physical Style Elements – 自然样式标签，b, i, u, s, pre
  • Semantic Style Elements – 语义样式标签，strong, em, ins, del, code

应该准确使用语义样式标签，但不能滥用，如果不能确定时首选使用自然样式标签