一、HTML相关面试题讲解

郁子大约 32 分钟约 9563 字笔记渡一教育笔面试题甄选谢杰

（一）文档声明

1.经典真题

  • 什么是 <!DOCTYPE> ？是否需要在 HTML5 中使用？
  • 什么是严格模式与混杂模式？
  • 列举几条怪异模式中的怪癖行为

2.文档声明概念

  • HTML 文档通常以文档声明开始
  • 作用是帮助浏览器确定其尝试解析和显示的 HTML 文档类型
<!DOCTYPE html>
  • 必须是 HTML 文档的 第一行，且 顶格显示， 对大小写不敏感
    • 因为任何放在 DOCTYPE 前面的东西，比如批注或 XML 声明，会令 IE9 或更早期的浏览器触发怪异模式
  • 文档声明并非一个 HTML 标签，是一条“信息”，告知浏览器期望的文档类型

3.文档声明的版本

  • HTML 版本从最开始诞生到最新的 HTML5，中间经历了很多版本
  • 最显著的区别就是支持的 HTML 元素不同

更多各版本所支持的不同 HTML 元素可以参阅：https://www.w3school.com.cn/tags/html_ref_dtd.aspopen in new window

  • 必须要书写文档声明
  • 因为不同版本所支持的 HTML 元素类型是不同的
  • 需要告诉浏览器以哪一种文档类型方式来解析当前的这个 HTML 文件

4.旧版本的文档声明

1）HTML 4.01 Strict

  • 该 DTD 包含所有 HTML 元素和属性
  • 但不包括展示性的和弃用的元素（比如 font）
  • 不允许框架集 Framesets
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2）HTML 4.01 Transitional

  • 该 DTD 包含所有 HTML 元素和属性
  • 包括展示性的和弃用的元素（比如 font）
  • 不允许框架集 Framesets
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

更多不同文档类型的声明写法可以参阅：https://www.w3school.com.cn/tags/tag_doctype.aspopen in new window

为什么格式这么长

  • HTML5 不需要引入 DTD 文件
  • 其他类型的文档声明需要引入 DTD 文件

5.HTML 的发展历史

  • 早期的 HTML 版本，如：HTML 4.01 是基于 SGML
  • DTD 规定的是标记语言的规则，这样浏览器才能正确地呈现内容
  • 但是最新的 HTML5 不基于 SGML，所以不需要引用 DTD

1）ML

  • ML，Markup Language，置标语言
  • 用标准的标记来解释纯文本文档的内容，从而提供关于文档结构或文档该如何渲染的信息

2）GML

  • 第一代置标语言，使文档能明确将标示和内容分开
  • 所有文件使用同样的标示方法

3）SGML

  • 在 GML 的基础上进行整理，形成一套非常严谨的文件描述方法
  • 包括语法定义、DTD、文件实例

由于 SGML 太严谨，规范达 500 多页，并且不易学、不易用、难以实现，所以在它的基础上又发展出了其他的更易用的置标语言

4）HTML

  • 抛弃了 SGML 复杂庞大的缺点，继承了 SGML 的很多优点
  • 最大的特点是简单性和跨平台性
  • 只使用了 SGML 中很少的一部分标记
    • 如：HTML 4.0 中只定义了 70 余种标记
  • 为了便于在计算机上实现，HTML 规定的标记是固定的
    • 即 HTML 语法是不可扩展的

5）XHTML

随着 Web 应用的不断发展，HTML 的局限性也越来越明显地显现了出来，如：无法描述数据、可读性差、搜索时间长等


人们又把目光转向 SGML，再次改造使之适应现在的网络需求


1998 年 2 月 10 日，W3C（World Wide Web Consortium，万维网联盟）公布 XML 1.0 标准，很长一段时间 XML 都作为网络传输的标准数据格式


当时的 HTML 语法要求比较松散，对网页编写者来说比较方便，但是对机器来说，语言的语法越松散，处理起来就越困难

  • 传统的计算机还有能力兼容松散语法，但对于许多其他设备，比如手机，难度就比较大
  • 因此产生了由 DTD 定义规则，语法要求更加严格的 XHTML

DTD 教程可以参阅：https://www.w3school.com.cn/dtd/index.aspopen in new window

6）HTML

  • HTML5 是 HTML 的第五个修订版
    • 该版本不再基于 SGML，也就不用再引入 DTD 声明
  • 主要的目标是将互联网语义化，以便更好地被人类和机器阅读，同时更好地支持各种媒体的嵌入

现在国内通常所说的 H5 开发，实际上是 HTML5 与 CSS3 及 ES6 的一个组合

6.渲染模式

  • 浏览器渲染模式分为 3 种
    • 怪癖模式/混杂模式，Quirks mode
    • 严格模式/标准模式，Standards mode
    • 几乎标准模式，Almost standards mode

1）成因

之所以出现不同的渲染模式，是由于历史原因


当年 Netscape4（网景公司早期的浏览器）和 IE4（微软公司早期的浏览器）在实现 CSS 机制时，没有遵循 W3C 提出的标准。Netscape4 提供了糟糕的支持，而 IE4 虽然接近标准，但依旧未能完全正确的支持标准。


所以，在 W3C 标准推出以前，浏览器在对页面的渲染上没有统一规范，产生了差异（Quirks mode 或者称为 Compatibility Mode）


为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用 CSS，因此大部分网站的 CSS 实现并不符合 W3C 规范的标准


W3C 标准推出后，浏览器渲染页面有了统一的标准（Strict mode 也叫做 Standards mode）浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常


为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的 IE）。这样浏览器渲染上就产生了 Quirks mode 和 Standards mode，两种渲染方法共存在一个浏览器上


混杂模式服务于旧式规则，而严格模式服务于标准规则

  • 浏览器使用文档开头的 DOCTYPE 来 决定用怪异模式还是标准模式处理
  • 如果文档中没有 DOCTYPE 将触发文档的怪异模式
    • 怪异模式最明显的影响是会 触发怪异盒模型
  • 在 DOCTYPE 声明中，没有使用 DTD 声明或者使用 HTML4 以下的 DTD 声明时
    • 基本所有的浏览器都是使用 Quirks mode 呈现
    • 其他的则使用 Standards mode 解析

2）严格模式和怪异模式的部分渲染区别

  • 盒模型的宽高包含内边距 padding 和边框 border
    • 在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度
    • 而在 IE5.5 及以下的浏览器及其他版本的 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border

  • 可以设置行内元素的高宽
    • 在 Standards 模式下，给 span 等行内元素设置 width 和 height 都不会生效
    • 而在 Quirks 模式下，则会生效
  • 可以设置百分比的高度
    • 在 Standards 模式下，一个元素的高度是由其包含的内容来决定的
    • 如果父元素没有设置高度，子元素设置一个百分比的高度是无效的
  • 用 margin: 0 auto 设置水平居中在 IE 下会失效
    • 在 Standards 模式下可以使元素水平居中，但在 Quirks 模式下却会失效
    • Quirks 模式下可以用 text-align 属性解决
  • Quirks 模式下设置图片的 padding 会失效
  • Quirks 模式下 Table 中的字体属性不能继承上层的设置
  • Quirks 模式下 white-space: pre 会失效

更多可以参阅 MDN 上对怪异模式和标准模式的解释：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Modeopen in new window


MDN 上还给出了不同模式在不同浏览器下的渲染区别（英文）：https://hsivonen.fi/doctype/open in new window

7.真题解答

1）什么是 <!DOCTYPE> ？是否需要在 HTML5 中使用？

是 HTML 的文档声明，通过它告诉浏览器使用哪一个 HTML 版本标准解析文档


在浏览器发展的历史中，HTML 出现过很多个版本，不同版本在元素、属性等书写格式上略有差异，如果不预先告诉浏览器，浏览器就不知道我们的文档标准是什么，在这种情况下，大部分浏览器将开启最大兼容模式来解析网页，我们称之为怪异模式。这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的 bug，所以文档声明是必须的


而文档声明有多种书写格式，对应不同的 HTML 版本，<!DOCTYPE> 这种书写格式是告诉浏览器，整个文档使用 HTML5 的标准进行解析

2）什么是严格模式与混杂模式？

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码


混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码


如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关

  1. 如果文档包含严格的 DOCTYPE ，那么一般以严格模式呈现，严格 DTD —— 严格模式
  2. 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，有 URI 的过渡 DTD —— 严格模式
  3. 有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现，没有 URI 的过渡 DTD —— 混杂模式
  4. DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现，DTD 不存在或者格式不正确 —— 混杂模式
  5. HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容，HTML5 没有严格和混杂之分

意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式

3）列举几条怪异模式中的怪癖行为

  1. 宽高的算法与 W3C 盒模型不同
  2. 在表格中的字体样式不会继承
  3. 怪异模式下可以设置行内元素宽高
  4. 怪异模式下 white-space: pre 会失效

（二）语义化

1.经典真题

  • 说说对 html 语义化的理解

2.语义元素

  • 语义是指对一个词或者句子含义的正确解释
  • 很多 HTML 标签具有语义的意义，即元素本身传达了关于标签所包含内容类型的一些信息
  • 如：当浏览器解析到 <h1></h1> 标签时
    • 将该标签解释为包含这一块内容的最重要的标题
    • h1 标签的语义就是用它来标识特定网页或部分最重要的标题

3.语义化

1）展示良好的代码结构

  • 使页面没有 css 的情况下，也能够呈现出很好的内容结构

2）有利于 SEO

  • 爬虫依赖标签来确定关键字的权重
  • 可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息

3）提升用户体验

  • title、alt 可以用于解释名称或者解释图片信息
  • 灵活运用 label 标签

4）便于团队开发和维护

  • 语义化使得代码更具有可读性
  • 让其他开发人员更加理解你的 html 结构，减少差异化

5）方便其他设备解析

  • 屏幕阅读器、盲人阅读器、移动设备等
  • 以有意义的方式来渲染网页【无障碍】

4.HTML5 常用的语义元素

  • HTML5 提供了新的语义元素来定义网页的不同部分，被称为“切片元素”

标签语义
header用于定义页面的头部区域
通常包括网站 logo、主导航、全站链接以及搜索框
nav定义页面的导航链接部分区域
main定义文档的主要内容
该内容在文档中应当是独一无二的
article定义页面独立的内容
可以有自己的 header、footer、sections 等
专注于单个主题的博客文章，报纸文章或网页文章
section表示文档中的一个区域（或节）
如：内容中的一个专题组
aside表示一个和其余页面内容几乎无关的部分
被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体
通常表现为侧边栏或嵌入内容
footer定义最近一个章节内容或者根节点元素的页脚
一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息
  • 大约有 100 多个 HTML 语义元素可供选择

更多的语义化标签可以参阅：https://developer.mozilla.org/en-US/docs/Web/HTML/Elementopen in new window

5.无障碍网页

  • HTML5 在无障碍方面进行了加强，加入了无障碍属性

1）无障碍

W3C 在 1997 年发起了一项 WAI（Web Accessibility Initiative）的计划


该计划的目标是提升网站的易用性（accessibility），而其中有一个很重要的指标，那就是能够被残障人士使用的网站才能称得上一个易用的（易访问的）网站


无障碍属性主要针对的是视觉缺陷、失聪、行动不便的残疾人以及假装残疾的测试人员


尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如：屏幕阅读器，屏幕阅读机可以大声朗读或者输出盲文

  • HTML5 无障碍属性可以让屏幕阅读器准确识别网页中的内容、变化、状态的技术规范
  • 让盲人这类用户也能无障碍阅读

关于无障碍的更多说明，可以参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/Accessibilityopen in new window

2）常见的无障碍属性

  • WAI-ARIA 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性
  • 用于提供额外的语义化以及改善缺乏的可访问性
特性含义
角色定义了元素是干什么的
许多标志性的角色其实重复了 HTML5 的结构元素的语义价值
如：role="navigation" (nav) 或者 role="complementary" (aside)
属性通过定义一些属性给元素，让他们具备更多的语义
如：aria-required="true" 意味着元素在表单上是必填的，aria-labelledby="label" 允许在元素上设置一个 ID，用于 labelledby 引用作为屏幕阅读器指定的 label 内容，多个也可以
状态用于表达元素当前的条件的特殊属性
如：aria-disabled="true"，屏幕阅读器就会禁止输入这个表单
  • 属性在应用的生命周期中不会改变，而状态可以
    • 通常我们用编程的方法改变它，如：JavaScript
  • 关于 WAI-ARIA 属性重要的一点是它不会对 Web 页面有任何影响
    • 除了让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)
      • 这也是屏幕阅读器这一类软件的信息源
  • WAI-ARIA 不会影响网页的结构，以及 DOM 等等
  • 这些属性可用于作为 CSS 选择器

更多无障碍属性可以参阅：https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/WAI-ARIA_basicsopen in new window

6.真题解答

1）说说对 html 语义化的理解

语义化的目的主要有以下几点

  1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  2. 有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，爬虫依赖于标签来确定上下文和各个关键字的权重
  3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页
  4. 便于团队开发和维护，语义化更具可读性，是下一步网页的重要动向，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。HTML5 中新增加的很多标签，例如：article、nav、header 和 footer 等，就是基于语义化设计原则

（三）W3C 标准组织

1.经典真题

  • 对于 WEB 标准以及 W3C 的理解与认识问题

2.什么是 W3C

  • W3C，World Wide Web Consortium，万维网联盟
    • 由 Tim Berners-Lee 创建于 1994 年 10 月
    • 是一个会员组织
  • W3C 的工作是对 web 进行标准化
  • W3C 创建并维护 WWW 标准
    • 被称为 W3C 推荐（W3C 规范）

3.W3C 的创建

  • 万维网是作为欧洲核子研究组织的一个项目发展起来的，Tim Berners-Lee 在那里开发出万维网的雏形
  • Tim Berners-Lee 是万维网的发明人，目前是万维网联盟的主任
  • W3C 在 1994 年被创建，其创立目的是为了完成麻省理工学院（MIT）与欧洲粒子物理研究所（CERN）之间的协同工作
  • 得到了美国国防部高级研究计划局（DARPA）和欧洲委员会（European Commission）的支持

4.标准化 Web

  • W3C 致力于实现所有的用户都能够对 Web 加以利用
    • 不论其文化教育背景、能力、财力以及其身体残疾
  • W3C 同时与其他标准化组织协同工作
    • 如：Internet 工程工作小组（Internet Engineering Task Force）、无线应用协议（WAP）以及 Unicode 联盟（Unicode Consortium）
  • W3C 由美国麻省理工学院计算机科学和人工智能实验室 (MIT CSAIL)、总部位于法国的欧洲信息数学研究联盟(ERCIM) 和日本的庆应大学（Keio University）联合运作，并且在世界范围内拥有分支办事处

5.W3C 成员

  • 正因为 Web 是如此的重要（不论在其影响范围还是在投资方面），以至于不应由任何一家单独的组织来对它的未来进行控制，因此 W3C 扮演着一个会员组织的角色
  • 一些知名的会员包括
    • IBM
    • Microsoft
    • America Online
    • Apple
    • Adobe
    • Macromedia
    • Sun Microsystems
  • W3C 的会员包括了：软件开发商、内容提供商、企业用户、通信公司、研究机构、研究实验室、标准化团体以及政府

6.W3C 规范的批准步骤

  • 在 W3C 发布某个新标准的过程中，规范是通过下面的严格程序由一个简单的理念逐步确立为推荐标准的
    • W3C 收到一份提交
    • 由 W3C 发布一份记录
    • 由 W3C 创建一个工作组
    • 由 W3C 发布一份工作草案
    • 由 W3C 发布一份候选的推荐
    • 由 W3C 发布一份被提议的推荐
    • 由 W3C 发布推荐

具体步骤可以参阅：https://www.runoob.com/w3c/w3c-process.htmlopen in new window

7.真题解答

  • 对于 WEB 标准以及 W3C 的理解与认识问题

任何东西都需要一个标准，有了标准才能够更好的进行交流和推广。不同的标准，得出的便是不同的结果。因此，制定什么样的标准，如何确立标准，至关重要


正因为有了网页的标准，才能降低开发难度及开发成本，减少各种 BUG、安全问题，提高网站易用性


就好比 HTML 在 W3C 组织推出标准之前，不同的浏览器厂商有一套自己的标准，这对于开发人员来讲是痛苦的，所以才会遗留下浏览器的标准模式和怪异模式这个历史问题


W3C 就是一个推出标准的组织，被称之为万维网联盟，W3C 最重要的工作是发展 Web 规范

（四）SEO

1.经典真题

  • 请描述下 SEO 中的 TDK？

2.概念

  • SEO，Search Engine Optimization，搜索引擎优化，或叫做针对搜索引擎优化
  • 指从自然搜索结果获得网站流量的技术和过程
  • 是在了解搜索引擎自然排名机制的基础上，对网站进行内部及外部的调整优化，改进网站在搜索引擎中的关键词自然排名，获得更多流量，从而达成网站销售及品牌建设的目标

3.内部优化 SEO

1）合理的 TDK

属性说明
title搜索引擎在抓取网页时，最先读取的就是网页标题
一般不超过 80 个字符，而且词语间要用英文 “-” 隔开
因为计算机只对英语的敏感性较高，对汉语的敏感性不高
description网页的内容摘要，是对于一个网页的简要内容概况
一般不超过 150 个字符，描述内容要和页面内容相关
keywords告诉搜索引擎本页内容是围绕哪些词展开的
每个词都要能在内容中找到相应匹配，才有利于排名
一般不超过 3 个，每个关键词不宜过长，而且词语间要用英文 “,” 隔开
尽量将重要的关键字靠前放

2）语义化的 HTML 代码，符合 W3C 规范

  • 语义化代码能够让搜索引擎容易理解网页
  • 即使没有加载 CSS 整个网页的结构也是清清楚楚的
  • 无论是搜索引擎还是阅读者，都能够很容易的分辨网页的结构

3）非装饰性图片必须加 alt

  • img 标签的 alt 属性指定了替代文本
  • 用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容
<img src="/xxx.jpg" alt="海尔官网-双门冰箱" />
  • 增强内容相关性
    • 可以利用汉字介绍文章内容，对于一些特定的企业产品，由于视觉的体验，往往是少文字的
  • 提高关键词密度
    • 在操作企业站的时候，经常遇到站点首屏一个大的横幅 banner，几乎占用了首页的大部分页面
    • 为了有效的提高首页核心关键词密度，只能利用一切办法增添关键词
    • 如：在图片的 alt 标签中添加

4）对于不显示的对象谨慎使用 display: none

  • 对于不想显示的文字内容，应当设置 z-index 或设置到浏览器显示器之外
  • 因为搜索引擎会过滤掉 display: none 其中的内容

5）重要内容 HTML 代码放在最前

  • 索引擎抓取 HTML 顺序是从上到下的
  • 尽量将重要的内容放在前面，保证重要内容一定会被抓取到

6）少用 iframe

  • 少用或者尽量不用 iframe
  • 搜索引擎不会抓取 iframe 中的内容

更多优化的细节可以参阅这篇博文：https://blog.csdn.net/yanyihan16/article/details/89209436?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.controlopen in new window

4.外部优化 SEO

  • 主要是指放友情链接和外链
    • 好的友情链接可以快速的提高网站的权重
    • 高质量的外链，会给你的网站提高源源不断的权重提升
  • 要向各大搜索引擎登陆入口提交尚未收录的站点

5.真题解答

1）请描述下 SEO 中的 TDK？

在 SEO 中，所谓的 TDK 其实就是 title、description、keywords


title：浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到，搜索引擎在抓取网页时，最先读取的就是网页标题，所以 title 是否正确设置极其重要。title 一般不超过 80 个字符，而且词语间要用英文 “-” 隔开，因为计算机只对英语的敏感性较高，对汉语的敏感性不高


description：也就是网页的内容摘要，这是对于一个网页的简要内容概况。description 一般不超过 150 个字符，描述内容要和页面内容相关


keywords：主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此 keywords 的每个词都要能在内容中找到相应匹配，才有利于排名。keywords 一般不超过 3 个，每个关键词不宜过长，而且词语间要用英文 “,” 隔开，尽量将重要的关键字靠前放

（五）iframe

1.经典真题

  • iframe 框架有哪些优缺点？
  • iframe 用来干什么的

2.iframe 介绍

  • iframe 嵌入式框架
  • 可以把一个完整的网页内容嵌入到现有的网页中
<body>
  <p>iframe 示例</p>
  <iframe src="https://juejin.cn/"></iframe>
</body>

1）历史

  • 在早期的时候，iframe 在开发中用得很多
  • 使用 iframe 可以很方便的制作一个页面的公共部分，如：导航栏
  • 现在仍然能够找到使用 iframe 的网站
    • 大多是旧的项目
    • 如：W3C school、QQ 邮箱
  • 随着 Ajax 的出现，iframe 用得越来越少了
  • 现在在某些特定的场景还能见到
    • 如：模拟窗口、邮箱或 HTML 在线编辑器等

2）缺点

  • iframe 的自适应高度
  • 搜索引擎的“爬虫”程序无法解读这种页面
    • 当“爬虫”遇到多个页面嵌套的网页时只看到框架却找不到链接，然后认定此网站是死站点并离开
    • 这对于 SEO 来讲无疑是毁灭性的打击
    • 并且使用大量的 iframe 标签也会稀释该页面的关键词密度并对 SEO 产生影响

3.真题解答

1）iframe 用来干什么的？有哪些优缺点？

iframe 也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中


优点

  1. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
  2. 方便制作导航栏

缺点

  1. 会产生很多页面，不容易管理
  2. 调用外部页面，需要额外调用 CSS，给页面带来额外的请求次数
  3. 会阻塞页面的加载，window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发
  4. 浏览器的后退按钮无效
  5. 无法被一些搜索引擎索引到
  6. 多数小型的移动设备（PDA 手机）无法完全显示框架

由于上面诸多缺点，因此不符合标准网页设计的理念，已经被标准网页设计抛弃，目前框架的所有优点完全可以使用 Ajax 实现，因此已经没有必要使用 iframe 框架了

（六）微格式

1.经典真题

  • 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

1.微格式介绍

  • 所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
  • 具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来 兼顾 HTML 文档的人机可读性 ，相当于对 Web 网页进行了 语义注解
<!-- 以前写一个链接到首页 -->
<a href=”http://www.bbon.cn”>Web Design Blog</a>

<!-- 现在为这个代码元素 a 加上 rel 属性 -->
<a href=”http://www.bbon.cn“ rel=”homepage”>Web Design Blog</a>
  • rel="home" 属性显示链接的目标页面是该网站的首页
  • 通过为已有的链接元素添加语义化属性，为这个链接添加了具体的结构和意义

2.官网介绍

Microformats are based on simple markup conventions that enable you to add meaningful structure to your web content.

微格式基于简单的标记约定，使您能够向 web 内容添加有意义的结构


One of the key principles of microformats, is to privilege human readable content. This means that you should think first and foremost of your content design being readable and accessible to web viewers.

微格式的一个关键原则是赋予人类可读内容特权，这意味着您应该首先考虑内容设计的可读性和可访问性


Using the most appropriate HTML elements and applying structured class names to your markup enables you to produce content that can be clearly understood by a human audience and also used in a structured way by automated programs and other online tools.

通过使用最合适的 HTML 元素并将结构化类名应用到标记中，您可以生成人类观众可以清楚理解的内容，并通过自动化程序和其他在线工具以结构化方式使用这些内容


But the point is that you shouldn't have to go out of your way to produce such machine friendly markup - microformats make it easy to integrate this greater degree of structure into your websites, without the overhead of having to learn complicated new languages or formats.

但关键是，你不应该不遗余力地制作这样的机器友好型标记 —— 微格式可以轻松地将这种更高程度的结构集成到你的网站中，而无需学习复杂的新语言或格式

3.用途

  • 微格式一般用于标记人员、组织、事件、地点、博客帖子、产品、评论、简历、食谱等的 HTML

Mark-up your contact info with h-card, link to other profiles with rel="me"

使用 h-card 标记您的联系信息，使用 rel="me" 链接到其他个人资料


Mark-up your blog with h-entry.

用 h-entry 标记你的博客

  • h-card 是一种微格式，用来发布个人，公司，组织，地点等详细的联系信息
  • 可以使分析器（比如其他网站，Firefox 的 Operator 插件）获得详细的信息，并通过别的网站或者地图工具进行显示，或者载入到地址簿等其他程序
<!-- 没有加入微格式时 -->
<div>
  <div>Joe Doe</div>
  <div>The Example Company</div>
  <div>604-555-1234</div>
  <a href="http://example.com/">http://example.com/</a>
</div>

<!-- 加入微格式后 -->
<div class="vcard">
  <div class="fn">Joe Doe</div>
  <div class="org">The Example Company</div>
  <div class="tel">604-555-1234</div>
  <a class="url" href="http://example.com/">http://example.com/</a>
</div>

正式名称（class="fn"），组织（class="org"），电话号码（class="tel"）和 url（class="url"）分别用相应的 class 标示


同时所有内容都包含在 class="vcard" 里

<!-- 用一个维基媒体基金会的联系方式，作为 h-card 微格式实例 -->
Wikimedia Foundation Inc. 200 2nd Ave. South #358 St. Petersburg, FL 33701-4313 USA Phone: +1-727-231-0101 Email: info@wikimedia.org Fax:
+1-727-258-0207

<!-- 加入微格式后 -->
<div class="vcard">
  <div class="fn org">Wikimedia Foundation Inc.</div>
  <div class="adr">
    <div class="street-address">200 2nd Ave. South #358</div>
    <div>
      <span class="locality">St. Petersburg</span>
      ,
      <span class="region">FL</span>
      <span class="postal-code">33701-4313</span>
    </div>
    <div class="country-name">USA</div>
  </div>
  <div>
    Phone:
    <span class="tel">+1-727-231-0101</span>
  </div>
  <div>
    Email:
    <span class="email">info@wikimedia.org</span>
  </div>
  <div>
    <span class="tel">
      <span class="type">Fax</span>
      :
      <span class="value">+1-727-258-0207</span>
    </span>
  </div>
</div>

正式名称（class="fn"）和组织（class="org"）写在了一个属性中，表示这是一个组织，而不是个人

4.常用的 h-card 属性

  • bday 生日
  • email 邮箱
  • tel 电话
  • nickname 昵称

目前已具备完整规范的微格式还包括：hCard、hCalendar、XOXO、XFN、VoteLinks 和 3 个 "rel-" 的微格式：rel-license、rel-nofollow 和 rel-tag


h-card 的规范可以参阅：https://microformats.org/wiki/h-cardopen in new window

5.真题解答

  • 知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

所谓微格式，是建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式


具体表现是把语义嵌入到 HTML 中，以便有助于分离式开发，并通过制定一些简单的约定，来兼顾 HTML 文档的人机可读性，相当于对 Web 网页进行了语义注解


采用微格式的 Web 页面，在 HTML 文档中给一些标签增加一些属性，这些属性对信息的语义结构进行注解，有助于处理 HTML 文档的软件，更好的理解该 HTML 文档


在前端构建中微格式的意义

微格式按照某种已有的被广泛应用的标准，通过对内容块的语义标记，可以让外部应用程序、聚合程序和搜索引擎能够做以下事情

  1. 在爬取 Web 内容时，能够更为准确地识别内容块的语义
  2. 对内容进行操作，包括提供访问、校对，还可以将其转化成其他的相关格式，提供给外部程序和 Web 服务使用

总结：微格式可以对网站进行 SEO 优化，如果需要可以考虑

（七）替换元素

1.经典真题

  • 什么是可替换元素，什么是非可替换元素，它们各自有什么特点？

2.可替换元素

  • replaced element
  • 指一些展现效果不由 CSS 来控制的元素
  • 这些元素是一种外部对象，它们外观的渲染是独立于 CSS 的
    • 即：内容不受当前文档的样式的影响
    • CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容
  • 某些可替换元素可能具有自己的样式表，但不会继承父文档的样式
    • 如 iframe 元素

3.非替换元素

  • 样式完全由 CSS 来控制的元素
  • 如：p、h1 ～ h6 等

更多可替换元素内容可以参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_elementopen in new window

4.常见的替换元素

  • 图片标签 img
  • 内联框架 iframe
  • 音频视频标签 video、audio

5.真题解答

  • 什么是可替换元素，什么是非可替换元素，它们各自有什么特点？

可替换元素是指在页面中的大部分展现效果不由 CSS 决定的元素


比如 img 元素就是一个可替换元素，它在页面中显示出的效果主要取决于你连接的是什么图片，图片是什么它就展示什么，CSS 虽然可以控制图片的尺寸位置，但永远无法控制图片本身


再比如，select 元素也是一个典型的可替换元素，它在页面上呈现的是用户操作系统上的下拉列表样式，因此，它的展现效果是由操作系统决定的。所以，同一个 select 元素，放到不同操作系统的电脑上会呈现不同的外观


img、video、audio、大部分表单元素都属于可替换元素


非可替换元素就是指的普通元素，它具体在页面上呈现什么，完全由 CSS 来决定

（八）页面可见性

1.经典真题

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

2.页面可见性介绍

  • 长期以来一直缺少一个判断用户是否正在浏览某个指定标签页的方法
  • HTML5 提供了页面可见性接口
常见 API说明
document.hidden 属性显示页面是否为用户当前观看的页面，值为 true 或 false
document.visibilityState 属性值为 visible ，表明页面为浏览器当前激活 tab，而且窗口不是最小化状态
值为 hidden ，表示页面不是当前激活 tab 页面，或者窗口最小化了
值为 prerender ，表示页面在重新生成，对用户不可见
visibilitychange 事件监听页面可见性变化事件
判断当前页面可见性的状态，并针对性的执行某些任务
<p>页面可见性示例</p>
<script>
  document.addEventListener("visibilitychange", function () {
    if (document.visibilityState === "hidden") {
      document.title = "小样去哪儿了？快回来";
    }
    if (document.visibilityState === "visible") {
      document.title = "页面可见性示例";
    }
  });
</script>

更多有关页面可见性的内容可以参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_APIopen in new window

3.真题解答

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

所谓页面可见性，就是获取当前页面的可见状态。因为对于用户来讲可以打开好多标签页面来回切换，然而始终只有一个页面处于显示状态。所以我们可以通过页面可见性 API 来判断当前页面是显示状态还是隐藏状态


常用的 API 有三个，document.hidden 返回一个布尔值，如果是 true，表示当前页面隐藏，false 则表示页面可见。不同页面之间来回切换，会触发 visibilitychange 事件，还有一个 document.visibilityState，表示页面所处的状态


常见的用途

  1. 网站有图片轮播效果，只有在用户观看轮播的时候，才会自动展示下一张幻灯片
  2. 显示信息仪表盘的应用程序不希望在页面不可见时轮询服务器进行更新
  3. 页面想要检测是否正在渲染，以便可以准确的计算网页浏览量
  4. 当设备进入待机模式时，网站想要关闭设备声音（用户按下电源键关闭屏幕）
上次编辑于: