HTML面试题

let_code
1,781 阅读42分钟

HTML

1.谈谈你对Web标准以及W3C的理解和认识

web标准简单来说可以分为结构、表现和行为。其中结构主要是由HTML标签组成，通俗的来说结构指的是我们写在body里面的一些标签，都是为了页面的结构。表现即css样式表，通过css使页面更具有美感。行为指的是页面和用户之间有一定的交互，使页面结构或表现发生变化，主要由JS组成。

web标准是将该三部分独立分开，使其更具模块化。但是，当行为产生的时候，结构和表现难免的会发生变化，这也使得这三个的界面并不是那么清晰。

W3C对Web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：

(1)对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO搜索引擎优化很有帮助）

  • 标签字母要小写
  • 标签要闭合
  • 标签不允许随意嵌套

（2）对于CSS和JS要求：

  • 尽量使用外链CSS样式表和JS脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
  • 样式尽量少用行间样式表，使结构和表现分离，标签的id和class等属性名要做到见文起义，标签越少加载越快，用户体验提高，代码维护简单，便于改版。
  • 提高网站易用性。

2.HTML、XML和XHTML有什么区别

三者的定义：

  • HTML：超文本标记语言
  • XML：可扩展标准语言
  • XHTML：可扩展超文本标记语言

HTML是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。

所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片、链接、音频、视频等。

它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个<p>标签，那就是告诉浏览器这是一个段落，不要弄错。浏览器看到后，就会正确解析，产生相应的行为。

XML它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的。这样做的目的是方便存储、传输、分享数据，人和机器都可以方便的读。XML和HTML有一个明显的区别：HTML标签都是预定义的，你不可以自己随便添加，但是XML可以自己随意“发明”标签-这就是“可扩展”的 一个含义。

XHTML就是以XML语法形式来写HTML（XHTML是作为XML被重新设计的HTML）

XHTML出现的原因：HTML是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小写可以混用，单引号或双引号随便引用。HTML标准的制定者W3C就将XML的语法形式与HTML结合，形成XHTML，所以也可以把XHTML理解为HTML的严格语法形式，除此之外，其他方面基本相同。

比如XHTML有一些强制的要求：

  • 必须包含一个文件头声明 <!DOCTYPE>
  • 所有元素名必须小写
  • 所有空元素必须关闭
  • 所有属性名必须小写
  • 所有属性名必须加引号
  • 所有布尔值属性必须加上属性值

与HTML相比最重要的区别：

文档结构

  • XHTML DOCTYPE是强制性的
  • <html>中的XML namespace属性是强制性的
  • <html> 、 <head> <title> 以及 <body>也是强制性的

元素语法

  • XHTML元素必须正确嵌套
  • XHTML元素必须始终关闭
  • XHTML元素必须小写
  • XHTML文档必须有一个根元素

属性语法

  • XHML属性必须使用小写
  • XHTML属性必须用引号包围
  • XHTML属性最小化也是禁止的

如何从HTML转换到XHTML

  1. 向每张页面的第一行添加XHTML <!DOCTYPE>
  2. 向每张页面的html元素添加xmlns属性
  3. 把所有元素名改为小写
  4. 为所有属性值加引号

HTML和XHTML的共同点

  1. 所有标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须是小写
  3. 所有的XML标记都必须合理嵌套
  4. 所有的属性必须用引号括起来
  5. 所有的 “<”和“&”特殊符号都用编码表示
  6. 给所有属性赋一个值
  7. 不要再注释内容中使“--”
  8. 图片必须要有说明文字

3.严格模式和混杂模式如何区分，如何触发这两种模式

DOCTYPE的定义：是一组机器可读的规则，它们指示（X）HTML文档允许有什么，不允许有什么，DOCTYPE正是告诉浏览器使用哪种DTD，一般放在（X）HTML文档开头声明，用以告诉其他人这个文档的类型风格。

DOCTYPE的作用：告知浏览器的解析器，用什么文档类型规范来解析这个文档。

DOCTYPE的种类：该标签可声明3中种文档类型，分别表示严格版本（strict），过渡版本（Transitional）和基于框架（Frameset）的HTML文档。

严格模式：就是浏览器根据Web标准去解析页面的方法，是一种要求严格的DTD，不允许使用任何表现层的语法。（就是以W3C标准解析文档）--标准模式

混杂模式：是一种向后兼容的解析方法（浏览器用自己的方式解析文档）--兼容模式

如何区分？

与网页中的DTD直接相关

如何触发？

严格模式：就是在HTML标签前声明正确的DTD

混杂模式：可以在HTML文档开始时不声明DTD，或者在DOCTYPE前加入XML声明

两种模式的差异

（1）盒模型不同

  • 严格模式：其宽高代表一个元素内容的宽高
  • 混杂模式：其宽高代表 content+padding+border

（2）设置行内元素的宽高

  • 严格模式：不能给 span 等行内元素设置 width 和 height
  • 混杂模式：可以设置

（3）设置百分比

  • 严格模式：一个元素的高度由其内容来决定。如果父元素没有设置高度，子元素设置百分比是无效的。

（4）水平居中

  • 严格模式：使用 margin: 0 auto
  • 混杂模式：用 text-aligin

（5）混杂模式下不能设置图片 padding ， table字体不能继承上层设置；混杂模式下， white-space：pre 会失效

区分严格模式和混杂模式的意义？

严格模式的排版和JavaScript运行模式以该浏览器支持的最高标准运行。

混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

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

4.什么是静态网页？什么是动态网页

静态网页：指没有数据交互的网页，即没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有 HTML+CSS+JavaScript做成的网站

动态网页：指有后台数据参与的网页，网页中的数据是从数据库中提取的，需要由后台逻辑的支持。比如动态网页就是JSP页面等。

5.语义化的是什么意思，主要目的是什么

在HTML中，语义化标签就是指这个标签本身直观表达出了它所包含的内容是什么，使浏览器和搜索引擎直观的认识标签和属性的用途和作用。

其主要目的在于：

  • 利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）
  • 在样式丢失的时候，还是可以比较好的呈现结构
  • 更好地支持各种终端，例如无障碍阅读和有声小说等
  • 利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在卡法和维护的时候就可以提高效率。

`语义化的主要目的是可以概括为用正确的标签做正确的事。

HTML语义化可以让页面的内容结构化，便于浏览器解析和搜索引擎解析，并提高代码的可维护度和可重用性。比如，少使用 <div> 这种无语义的标签，多使用语义化的标签 <header> <footer> 等。

5.搜索引擎需要知道这个标签的语义做什么

使用语义化标签可以帮助搜索引擎更准确地解释页面的内容，从而提高页面在搜索结果中的排名。

以下是搜索引擎对一些常见语义化标签的理解：

  1. <header>： 通常包含网页的标题、标志、导航等主要内容。搜索引擎可能将这部分内容视为页面的头部信息，其中可能包含关键字和描述信息。
  2. <main>： 包含页面的主要内容。搜索引擎可能会重点关注这个区域，认为其中的内容更为重要。
  3. <section> 和 <article>： <section> 通常用于划分页面的不同部分，而 <article> 用于表示一个独立的文章或内容块。搜索引擎可以更好地理解和组织页面的结构。
  4. <nav>： 包含页面的导航链接。搜索引擎可能把其中的链接视为页面的重要部分，尤其是对站点导航的理解。
  5. <footer>： 包含网页的页脚信息，可能包括版权、联系信息等。搜索引擎可能将其中的信息用于确定网页的完整性和来源。

通过使用这些语义化标签，开发者可以更清晰地传达页面结构和内容的意图，从而帮助搜索引擎更好地索引和理解页面。

5.搜索引擎的基本步骤

搜索引擎的工作可以分为以下几个主要步骤：

  1. 爬取（Crawling）： 搜索引擎使用一组称为爬虫（或蜘蛛）的程序来浏览互联网上的网页。这些爬虫从一个页面的链接跳转到另一个页面，逐个索引网页上的内容。爬虫按照一定的算法和优先级规则选择哪些页面应该被爬取，以及何时爬取这些页面。

  2. 索引（Indexing）： 爬虫爬取网页后，搜索引擎会将页面的内容和相关信息存储在数据库中，这个数据库被称为索引。索引包含了数以亿计的网页信息，其中每个网页都被分配一个唯一的标识符，并且与关键词、页面结构、链接等信息关联。

  3. 处理（Processing）： 当用户输入搜索查询时，搜索引擎会通过处理查询语句，使用算法和模型来匹配用户的查询与索引中的内容。这个处理阶段的目标是找到与查询最相关的页面。

  4. 排序（Ranking）： 搜索引擎通过一系列算法来对匹配的页面进行排序，以确定哪些页面在搜索结果中显示在前面。排序算法考虑多个因素，如关键词的匹配度、页面的权威性、页面结构等。

  5. 展示结果（Retrieval）： 最终，搜索引擎将排名最高的结果返回给用户。搜索结果页面通常包括页面标题、摘要、链接等信息，用户可以点击链接查看完整的页面内容。

5.爬虫是怎么运行的

爬虫（爬虫程序、网络爬虫或网络蜘蛛）是一种自动化程序，用于浏览互联网上的网页提取信息，并构建搜索引擎的索引。爬虫的运作过程主要包括以下几个步骤：

  1. 种子URL的选择： 爬虫从一个或多个起始点开始，这些起始点是事先设定的种子URL。这些URL通常是搜索引擎的主页或一组初始网址。

  2. 爬取网页内容： 爬虫通过HTTP协议向服务器发出请求，获取网页的HTML内容。这通常涉及到解析网页上的链接，以便找到新的URL，将其添加到待爬取队列中。

  3. 解析网页： 爬虫对获取的HTML内容进行解析，提取其中的文本内容、链接、图像等信息。解析通常使用HTML解析器，如Beautiful Soup（Python中的库）或类似的工具。

  4. URL去重： 为了避免重复爬取相同的内容，爬虫通常会维护一个已爬取过的URL列表，并在爬取新的URL之前检查该列表，以确保不重复爬取相同的页面。

  5. 存储数据： 爬虫将从网页中提取的数据存储在本地或远程数据库中，以供后续分析或检索使用。存储的数据可能包括文本内容、链接、页面结构等。

  6. 深度优先或广度优先遍历： 爬虫通常会采用深度优先或广度优先的方式遍历待爬取的URL队列。深度优先遍历会首先爬取某个页面的所有链接，然后再递归深入到这些链接中；而广度优先遍历会逐层地爬取每个页面的链接，然后再进入下一层的页面。

  7. 定期更新： 爬虫是一个持续运行的过程，搜索引擎通常会定期更新其索引。为了保持索引的实时性，爬虫会定期重新爬取已有的页面，同时发现和爬取新的页面。

  8. 遵循robots.txt协议： 爬虫在爬取网页时通常会遵循robots.txt协议，该协议定义了哪些页面可以被爬取，哪些页面应该被忽略。这有助于尊重网站所有者的隐私和使用规定。

需要注意的是，爬虫的运作可能受到一些限制，包括网站的robots.txt文件、网站的服务器响应速度、反爬虫机制等。合法、道德的爬虫通常会尊重这些限制，以确保其活动对被爬取的网站没有过大的影响。

6.锚点的作用是什么？如何创建锚点？

锚点是文档中某一行的一个标记，类似于书签，用于链接到文档中的某个位置。

当定义锚点后，可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无须不停地滚动页面来寻找他们需要的信息了。

在使用 <a>元素创建锚点时，可以使用 name 属性为其命名（W3C规范）

对其他元素，还可以使用 id属性为其命名，代码如下：

<h1 id="check">选择内容</h1>
<a name="school"> 选择内容</a>

然后就可以创建链接、单击链接，直接跳转到锚点，代码如下：

<a href="#check"> 选择内容</a>
<a name="#school"> 选择内容</a>

7.列举常用的结构标签，并描述其作用

结构标签专门用于标识页面的不同结构，相对于使用 <div> 元素而言，结构标签可以实现语义化的标签。

常用的结构标签有以下几种：

  • <header>元素：用于定义文档的页眉
  • <nav>元素：用于定义页面的导航链接部分
  • <section>元素：用于定义文档中的节，表示文档中一个具体的组成部分
  • <article>元素：常用于定义独立于文档其他部分的内容
  • <footer>元素：常用与定义某区域的脚注信息
  • <aside>元素：常用与定义页面的一些额外组成部分，如广告栏、侧边栏和相关引用信息

8.超链接有哪些常见的表现形式？

<a>元素用于创建超级链接，常见的表现形式有以下几种

  • 普通超级链接，语法为： <a href="http://www.baidu.com">百度</a>
  • 下载链接，即目标文档为下载资源，语法为： <a href="day.zip">下载</a>
  • 电子邮件链接，用于链接到 E-mail，语法为： <a href="mailto:2284098244@qq.com"></a>
  • 空链接，用于返回页面顶部，语法为： <a href="">...</a>
  • 锚点跳转，用于跳转到页面某一个位置，目前常用语前端路由，语法为： <a href="#school"></a>
  • 用于实现特定的代码功能，语法为： <a href="javascript:void(0);"></a>

9.div是什么？在它出现之前用什么做网站布局？

div是网站布局的盒子标签。它出现之前使用 table布局。因为 table布局嵌套很多，网站加载慢（table无法局部渲染），布局层级不清晰。

div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

但是table布局的缺陷确实非常明显：table虽然修改方便，但是它会影响网站的加载速、展现。当网速很慢的话，必须加载完毕才能显示，不然没办法展现，影响网站的展示效果。

10.img标签上的 title和 alt属性的区别是什么？

title的功能是为元素提供标题信息，即当光标悬浮在标签上后显示的信息；

alt 的功能是图片的替换文字，即当图片不能正常显示的时候，用文字代替。

11.空元素（单标签）有哪些？

知名的空元素（单标签）:<br>,<hr>,<img>,<input>,<link>,<meta>

12.简述一下 src和 href的区别

href ：指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接关系。

src ：指向外部资源的位置，指向的内容会嵌入到文档当前标签所在位置，在请求 src 资源时会将其指向的资源下载并应用到文档中。

13.简述一下 <strong><em>和 <b><i>标签的区别

<strong>和 <em>用于强调文本，但是 <strong>强调的程度更强一些。

<em>是斜体强调标签， <strong>是粗体表示；

<em>是局部强调， <strong>是全局强调；从视觉上考虑， <em>的强调是有顺序的，阅读到某处时，才会注意到。 <strong>的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。

<em>表示内容的重点， <strong>表示强烈的重要性、严重性或内容的紧迫性， <strong>不会改变所在句子的语义， <em>则会改变所在句子的语义。

HTML5工作草案中：

<em>和 <strong>仍然是表达要素，但这时的 <strong>表示html页面上的强调， <em>表示句子上的强调。

<b>和 <i>是视觉要素，分别表示无意义的加粗和无意义的斜体。

14.HTML、CSS、JavaScript的关系是什么？

  1. HTML是网页内容的载体，是内容显示的框架。内容就是网页制作者放在页面上让用户浏览的信息，包括文字、图片、视频等。
  2. CSS是网页内容的表现，就像对网页进行包装。比如字体、颜色、边框等，这些都是用来改变内容外观的东西。
  3. JavaScript用来实现网页上的特效和交互。比如，当光标放在某个链接上时背景颜色改变等。

15.在一个特定的框架中如何使用HTML中的超链接定位？

可以使用 target 属性在指定的框架中打开被链接的文档。

有 4 个保留的目标名称用作特殊的文档重定向操作：

  • _self：当前页面加载。（默认）
  • _blank：通常在新标签页打开，但用户可以通过配置选择在新窗口打开。
  • _parent：当前浏览环境的父级浏览上下文。如果没有父级框架，行为与 _self 相同。
  • _top：最顶级的浏览上下文（当前浏览上下文中最“高”的祖先）。如果没有祖先，行为与 _self 相同。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

16.常见浏览器内核有哪些？

  • IE：trident内核
  • Firefox：gecko内核
  • safari：webkit内核
  • opera：以前是presto内核，现在改用google chrome的Blink内核
  • Chrome：Blink（基于webkit，google与opera software共同开发）

浏览器内核是浏览器的核心部分，负责解析HTML、CSS和JavaScript代码，并将网页渲染成用户可见的界面。浏览器内核的主要作用包括：

  1. 页面渲染：解析HTML、CSS和JavaScript代码，将网页内容渲染成用户可以看到的界面。
  2. 布局排版：确定页面元素的大小、位置和样式，以正确显示网页。
  3. 网络请求：处理从服务器获取的数据，包括HTML、CSS、JavaScript文件等。
  4. JavaScript引擎：执行JavaScript代码，实现网页的交互和动态效果。
  5. 安全性：处理和防范恶意网站的攻击，保护用户的隐私和安全。

不同的浏览器选择不同的内核，这也是为什么不同浏览器在渲染网页时可能存在细微差异的原因。例如，Chrome和Opera使用Blink内核，而Firefox使用Gecko内核。

17. 常用的meta标签

meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者、网页描述、关键词等。

常用的meta标签：

  1. <meta charset="UTF-8" > 描述文档的编码类型

  2. <meta name="keywords" content="关键词" > 描述页面的关键词

  3. <meta name="description" content="页面描述内容" >页面描述

  4. <meta http-equiv="refresh" content="0;url=" > 页面重定向和刷新

  5. <meta name="viewport" content="width=device-width, initial-scale=1" /> 适配移动端，可以控制窗口的大小和比例。content的参数有以下几种

    • width控制视口的大小。这可以设置为特定像素数（如'width=600'），也可以设置为特殊值device-width，即 100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。

    • height控制视口的大小。这可以设置为特定像素数（如 width=600），也可以设置为特殊值 device-height，即 100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。

    • initial-scale 控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

    • minimum-scale控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

    • maximum-scale控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

    • user-scalable控制是否允许页面上的放大和缩小操作。有效值为 0、1、yes 或 no。默认值为 1，与 yes 相同。将值设置为 0（即与 no 相同）将违反 Web 内容无障碍指南（WCAG）。

    • interactive-widget 指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：resizes-visual、resizes-content 或 overlays-content。默认值：resizes-visual。

  6. <meta name="robots" content="index,follow" > 搜索引擎的方式。content参数有以下几种：

    • index,follow：允许抓取本页，允许跟踪链接。可以写成all
    • index,nofollow：允许抓取本页，但禁止跟踪链接。
    • noindex,follow：禁止抓取本页，但允许跟踪链接。
    • noindex,nofllow：禁止抓取本页，同时禁止跟踪本页中的链接。可以写成none

    需要注意的是，robots Meta标签很多搜索引擎是不支持的，只有少数搜索引擎能够识别并按给定的值抓取。所以，尽可能的使用robots.txt文件来限制抓取。

18. img的srcset属性

img标签的srcset属性是HTML5中引入的一项功能，用于提供一组可能的图像资源，并根据设备的特性，例如屏幕大小和分辨率，选择合适的图像进行显示。这有助于优化网页在不同设备上的加载性能和用户体验。

具体来说，srcset属性的作用包括：

  1. 响应式图片： 通过提供多个图像资源，可以根据设备的屏幕大小和分辨率选择合适的图像。这有助于确保在不同设备上图像的显示效果良好，同时避免在大屏幕设备上加载过大的图像文件，减少不必要的网络流量和加载时间。
  2. 节省带宽： 针对不同屏幕大小和分辨率提供不同尺寸的图像，可以有效地节省用户的带宽和减少页面加载时间。设备可以选择下载适合其显示需求的图像，而不是始终下载最大尺寸的图像。
  3. 高分辨率屏幕支持： 对于高DPI（dots per inch）或Retina屏幕等高分辨率设备，srcset使得网页可以提供高分辨率的图像，以确保图像在这些设备上显示清晰。

每一个字符串由以下组成：

  1. 指向图像的 URL。

  2. 可选地，再加一个空格之后，附加以下的其一：

    • 一个宽度描述符（一个正整数，后面紧跟 w 符号）。该整数宽度除以 sizes 属性给出的资源（source）大小来计算得到有效的像素密度，即换算成和 x 描述符等价的值。
    • 一个像素密度描述符（一个正浮点数，后面紧跟 x 符号）。

如果没有指定源描述符，那它会被指定为默认的 1x。

在相同的 srcset 属性中混合使用宽度描述符和像素密度描述符时，会导致该值无效。重复的描述符（比如，两个源在相同的 srcset 两个源都是 2x）也是无效的。

比如：<img srcset="images/team-photo.jpg 1x, images/team-photo-retina.jpg 2x, images/team-photo-full 2048w" /> 指定了在标准像素密度 (1x) 以及两倍像素密度 (2x) 下使用的图像版本。还可以使用宽度为 2048px (2048w) 的图像版本。

sizes属性

img标签的sizes属性用于指定图像在不同视口大小（viewport size）下应该显示的尺寸。它与srcset属性一起使用，以便在响应式设计中更好地适应不同屏幕尺寸和分辨率。

具体来说，sizes属性的值是一个包含媒体查询和对应图像尺寸的字符串。这个字符串告诉浏览器在不同条件下应该选择哪个图像。媒体查询的条件通常基于视口的宽度。

媒体条件描述视口的属性，而不是图像的属性。例如，如果视口不高于 500px，则建议使用 1000px 宽的资源：(max-height: 500px) 1000px。

资源尺寸的值被用来指定图像的预期尺寸。当 srcset 中的资源使用了宽度描述符 w 时，用户代理会使用当前图像大小来选择 srcset 中合适的一个图像 URL。被选中的尺寸影响图像的显示大小（如果没有影响大小的 CSS 样式被应用的话）。如果没有设置 srcset 属性，或者没有属性值，那么 sizes 属性也将不起作用。

19. title和h1的区别

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

20. iframe 的优点和缺点

iframe 内联框架元素，它能够将另一个 HTML 页面嵌入到当前页面中。

优点：

  1. iframe能够把嵌入的网页原样展现出来；

  2. 模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；

  3. 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；----微前端

  4. 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；

  5. 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；

缺点：

  1. 样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；

  2. 代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；

  3. iframe会阻塞主页面的 Onload 事件及

  4. iframe 和主页面共享连接池，会影响页面的并行加载。

  5. 产生多个页面，不易管理；

  6. 多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。

  7. 和父页面完全隔离，数据沟通和DOM访问都存在成本。

21. label 的作用以及如何使用

将一个 <label> 和一个 <input> 元素相关联主要有这些优点：

  • 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
  • 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

将一个 <label> 和一个 <input> 元素匹配在一起，你需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

另外，你也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在。

22. head标签的作用，其中什么标签必不可少

<head>  元素包含机器可读的文档相关信息（元数据），如文档的标题、脚本和样式表。

其中<title>定义文档的标题，是head中唯一必须的元素。

23. 浏览器乱码的原因是什么，如何解决

产生乱码的原因：

  • 网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
  • html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
  • 浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

  • 使用软件编辑HTML网页内容；
  • 如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
  • 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

HTML5

1.如何处理HTML5新标签的浏览器兼容问题？

IE8,7,6支持用 document.createElement产生标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式（最好的方式是直接使用成熟的框架，使用最多的设计 html5shim框架），可以用IE hack引用该框架。

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

2.如何区分HTML和HTML5？

HTML5约等于HTML4.0+css3+JS+API

HTML5和html的实质区别：

  • 在文档类型声明上
//html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

//html5
 <!DOCTYPE html>
  • 在结构语义上

html4.0：没有体现结构语义化标签，通常都是这样命名的

<div id="header"></div>

html5：在语义上却有很大的优势。提供了一些新的html5标签，例如：

<header> 、<nav>、<article>、<aside>、<footer>..
  • 强大的HTML5的新的功能
  1. 强大的绘图功能：Canvas标签，它是通过 JavaScript来绘制2D图形， Canvas是逐像素进行渲染的。在 Canvas中国，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果位置发生变化，那么整个场景也需要重新绘制，包括任何或许被图形覆盖的对象。该元素的强大之处在于可以直接在HTML上进行图像操作。 SVG是一种使用XML描述2D图形的语言， SVG基于XML，这意味着 SVG DOM中的每个元素都是可用的。可以为某个元素附加 JavaScript事件处理器。在 SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
  2. 新增的视频标签

Canvas和SVG两者都是用户绘图，区别看这里

3.什么是HTML5？

HTML5 是目前最新的HTML标准，它的主要目的是提供所有内容，而不需要任何如 Flash、

SilverLight等的额外插件，这些内容来自动画、视频、富GUI等。

HTML5 是万维网联盟（W3C）和网络超文本应用技术组（WHATWG）合作输出的。

4.新的HTML5文档类型和字符集是什么？

文档类型是 <!doctype html>

字符集 <meta charset="UTF-8">

5.HTML5新增了哪些功能？

结构元素

  1. article元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
  2. aside元素，表示article内容之外的内容，辅助信息。
  3. header元素，表示页面中一个内容区块或整个页面的页眉。
  4. hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。
  5. footer元素，表示页面中一个内容区块或整个页面的页脚。
  6. figure元素，表示媒介内容的分组，以及它们的标题。
  7. section元素，表示页面中一个内容区块，比如章节。
  8. nav元素，表示页面中的导航链接。

其他元素

  1. video元素，用来定义视频。
  2. audio元素，用来定义音频。
  3. source元素，为媒介元素定义媒介资源。
  4. canvas元素，用来展示图形，该元素本身没有行为，仅提供一块画布。
  5. progress元素，用来展示任何类型的任务的进度。
  6. embed元素，用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。
  7. mark元素，用来展示高亮的文字。
  8. meter元素，表示度量衡，定义预定义范围内的度量。
  9. time元素，用来展示日期或者时间。
  10. command元素，表示命令按钮。
  11. details元素，用来展示用户要求得到并且可以得到的细节信息。
  12. summary元素，用来为details元素定义可见的标题。
  13. datalist元素，用来展示可选的数据列表，与input元素配合使用，可以制作出输入值的下拉列表。
  14. datagrid元素，也用来展示可选的数据列表，以树形列表的形式来显示。
  15. keygen元素，表示生成密匙。
  16. output元素，表示不同类型的输出。
  17. menu元素，表示菜单列表。
  18. ruby元素，表示ruby注释， rt元素表示字符的解释或发音。 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。
  19. wbr元素，表示软换行。与br元素的区别是：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。
  20. bdi元素，定义文本的文本方向，使其脱离其周围文本的方向设置。
  21. dialog元素，表示对话框或窗口。

废除的元素

  1. 纯表现元素：纯表现的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5提倡把页面展示性功能放在css样式表中统一处理，所以将这些元素废除，用css样式进行替代。
  2. 对可用性产生负面影响的元素：对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在html5中已不支持frame框架，只支持iframe框架，html5中同时将frameset、frame和noframes这三个元素废除。
  3. 只有部分浏览器支持的元素：对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持，特别是bgsound元素以及marquee元素，只被IE支持，所以在html5中被废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript编程的方式替代。

新增的API

  1. Canvas API：canvas元素可以为页面提供一块画布展示图形。结合 Canvas API，就可以在这块画布上动态生成和展示各种图形、图表、图像以及动画了。Canvas本质上是位图画布，不可伸缩，绘制出来的对象不属于页面DOM结果或者任何命名空间。不需要将每个图元当做对象存储，执行性能非常好。

  2. 音频和视频： audio和 video元素的出现让HTML5的媒体应用多了新选择，对于这两个元素，HTML5规范提供了通用、完整、可脚本化控制的API，使用HTML5的媒体标签的两个好处：

    1. 作为浏览器原生支持的功能，新的 audio和 video元素无需安装
    2. 媒体元素向 Web页面提供了通用、集成和脚本化控制的API

  3. Geolocation API：可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持html5地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由经纬度坐标和一些其他元数据组成。

  4. Communication API：

    1. 跨文档消息传递：处于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信一直都受到严格的限制。然而，现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。这种情况下，如果浏览器内部能提供直接的通信机制，就能更好的组织这些应用。

  5. 拖放

    image.png

DOM查询操作

  1. document.querySelector()
  2. document.querySelectorAll()

Web存储

  1. localStorage没有时间限制的数据存储
  2. sessionStorage提出窗口概念的数据存储

6.HTML5的form如何关闭自动补全功能？

三种方式：

  • 在IE的Internet选项菜单里的内容--自动完成里面设置
  • 设置Form的autocomplete为 “on”或者“off”来开启或者关闭自动完成的功能
  • 设置输入框的autocomplete为 “on”或者“off”来开启或者关闭自动完成的功能

6.HTML5应用缓存和常规的HTML浏览器缓存有什么区别？

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML，CSS，图像和JavaScript脚本并存在本地。改性能提升了网站的性能，可通过如下方式实现。

<!doctype html>
<html manifest="example.appcache">
</html>

与传统的浏览器缓存相比，该特性并不强制要求用户访问网站。

HTML应用程序缓存

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  • 离线浏览-用户可在应用离线时使用它们
  • 速度-已缓存资源加载更快
  • 减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer

Cache Manifest 基础

如果需要启用应用程序缓存，在文档的 <html >标签中包含 manifest属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest文件中直接指定了该页面 ）。

manifest文件建议的文件扩展名是 .appcache

请注意， manifest文件需要排至正确的 MIME-type，即 “text/cache-manifest”。必须在web服务器上进行配置。

Manifest文件

该文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

manifest文件可分为三部分：

  • CACHE MANIFEST-在此标题下列出的文件将在首页下载后进行缓存
  • NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必须的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的manifest文件列出了三个资源：一个CSS文件，一个GIF图像，以及一个JavaScript文件。当manifest文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的NETWORK规定的文件永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp//可以使用*来指示所有其他资源/文件都需要因特网连接

FALLBACK

下面的FALLBACK规定如果无法建立因特网连接，则用 offline.html 替代 /html5/目录中的所有文件：

FALLBACK:
/html5/ /offline.html

注释：第一个 URI 是资源，第二个是替补。

如果一个资源在CACHE和NETWORK中同时存在，那么这个资源还是会被离线缓存，也就是说CACHE的优先级更高。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存

  • manifest文件被修改：更改注释达到更改文件的目的

  • 由程序来更新应用缓存：使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存

注意：

  1. 如果manifest文件或者内部例举的某个文件不能正常下载，整个更新过程都将会失败，浏览器继续使用全部老的缓存。

  2. 引用manifest文件的html必须和manifest文件同源

  3. FALLBACK中的资源必须和manifest文件同源

完整的 Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保 浏览器更新缓存，您需要更新 manifest 文件。

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

6. 浏览器如何对HTML5的离线缓存资源进行管理和加载

  • 在线的情况下，浏览器发现 html 头部有 manifest 属性，他会请求 manifest 文件，

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

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

这些缓存的文件实际上会被存储在用户的设备上，而具体存储的位置取决于浏览器和设备。

一般来说，应用程序缓存会将缓存的文件存储在用户的浏览器缓存目录中。

7.为什么HTML5里面不需要DTD？如果不放入<! doctype html>标签，HTML5还会工作吗？

HTML5没有使用SGML或者XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅需放置<! doctype html>标签代码，让浏览器识别HTML5文档。

如果不放入 <! doctype html>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。

8.本地存储和会话（事务）存储之间的区别是什么？

会话（事务）存储引入了窗口的概念，只在同源同窗口中共享数据，窗口关闭后数据会被清除。

9.如果把HTML5看成一个平台，它的构建模块有哪些？

  • <nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确。
  • <header>标签用来定义文档的页眉。
  • <section>标签用来描述文档的结构。
  • <footer>标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息

10.请你说一下Web Worker和 WebSocket 的作用

web Worker的作用如下:

  1. 通过 worker = new Worker(url)加载一个 JavaScript 文件，创建一个 Worker，同时返回一个 Worker 实例。
  2. 用 worker.postMessage(data) 向 Worker发送数据。
  3. 绑定 worker.onmessage接受 Worker发送过来的数据。
  4. 可以使用 worker.terminate() 终止一个 Worker的执行。

WebSocket的作用如下： 它是 Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5 新增的协议，WebScoket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。

11.如何实现浏览器内多个标签页之间的通信？

postMessage API 提供了一种在不同窗口或文档之间进行跨域通信的方式。通过 postMessage，一个窗口（或iframe）可以向另一个窗口发送信息，无论这两个窗口是否在同一域。这对于实现跨文档、跨窗口通信以及在不同域之间嵌入内容的情况非常有用。

    // 在发送消息的窗口（iframe或窗口）中
const targetWindow = document.getElementById('target').contentWindow;
targetWindow.postMessage('Hello, world!', 'https://target-domain.com');

// 在接收消息的窗口中
window.addEventListener('message', (event) => {
    if (event.origin === 'https://source-domain.com') {
        console.log('Received message: ', event.data);
    }
});

12.HTML5为浏览器提供了哪些数据存储方案？

在较高版本的浏览器中，提供了 sessionStorage和 globalStorage。在HTML5规范中，用 localStorage取代了 globalStorage。

13.什么是SVG？

SVG即可缩放适量图像。它是基于文本的图形语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。

14.Canvas和SVG的区别是什么？

click here

15.HTML5如何实现跨域？

HTML5本身并没有提供直接的跨域解决方案。HTML5之后的一些新特性和API，以及一些传统的解决方案，可以帮助在Web应用程序中实现跨域通信

从HTML5开始，可以通过在响应头里增加 Access-Control-Allow-Origin，实现跨域请求。这个特性的出现使得跨域通信只需通过配置http协议头即可。

eg：

header(``'Access-Control-Allow-Origin:http: //a.com'``);

header(``'Access-Control-Allow-Methods:POST,GET'``);

header(``'Access-Control-Allow-Credentials:true'``);

echo 'Cross-domain Ajax'``;

JavaScript

var xhr = new XMLHttpRequest(); ; 
xhr.open('GET', 'http: //b.com/cros/ajax.php', true);
xhr.withCredentials = true;
xhr.onload = function () {          
  alert(xhr.response);//reposHTML;
};  
xhr.onerror = function () {
 alert('error making the request.');
};
xhr.send();

16.解释拖拽api

image.png

avatar
文章
阅读
粉丝