HTML基础篇

12232字约41分钟

2025-02-11

什么是 DOCTYPE，有何作用？

查看答案

DOCTYPE 即文档类型声明（Document Type Declaration），是一段告知浏览器当前 HTML 文档使用的是哪种 HTML 版本标准的代码。不同的 HTML 版本有不同的语法规则和特性，通过 DOCTYPE 声明，浏览器就能明确按照何种标准来解析和渲染页面。

`DOCTYPE` 声明的作用有：

指定解析标准：浏览器依据 DOCTYPE 声明来确定使用哪种 HTML 版本的规则解析文档。例如，声明为 HTML 5 标准，浏览器就会按照 HTML 5 的规范来解析页面元素和属性。
避免怪异模式：若 HTML 文档中没有声明 DOCTYPE，浏览器会进入 “怪异模式”（Quirks Mode）。在怪异模式下，浏览器会尝试以最大的兼容性来解析和渲染页面，这可能导致不同浏览器之间的显示差异，并且解析效率较低，还可能产生一些难以预知的问题。而正确的 DOCTYPE 声明能让浏览器进入标准模式（Standards Mode），保证页面在不同浏览器中的一致性和可预测性。
提高代码质量：明确的 DOCTYPE 声明有助于开发者遵循 HTML 标准编写代码，提高代码的规范性和可维护性。

HTML5 为什么只需要写 `<!DOCTYPE HTML>`?

查看答案

HTML5 不基于 SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（文档类型定义）进行引用，但是需要 DOCTYPE 来规范浏览器行为。

HTML4.01 是基于 SGML，所以需要引用 DTD，才能告知浏览器文档所使用的文档类型，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

说说对 html 语义化的理解

查看答案

HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。

语义化的优点如下：

提高代码可读性：开发者能快速理解页面结构和内容组织，便于团队协作和代码维护。
利于无障碍访问：屏幕阅读器等辅助设备可根据语义化标签更好地理解页面内容，为残障人士提供更好的访问体验。
搜索引擎优化（SEO）：搜索引擎能通过语义化标签更准确地理解页面内容，提高页面在搜索结果中的排名。
无 CSS 样式时的页面结构：即使没有 CSS 样式，页面也能呈现出清晰的结构，方便用户阅读。

前端页面有哪三层构成，分别是什么？

查看答案

构成：结构层、表示层、行为层

结构层（structural layer）

结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等

表示层（presentation layer）

表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥

行为层（behaviorlayer）

行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域

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

查看答案

严格模式（Strict Mode）和混杂模式（Quirks Mode）是浏览器在解析和渲染 HTML 页面时所采用的两种不同模式，下面为你详细介绍：

严格模式（Strict Mode）

定义：严格模式是指浏览器以符合最新 HTML 和 CSS 标准的方式来解析和渲染页面。在严格模式下，浏览器会遵循 W3C 等标准组织制定的规范，对代码进行严格检查，确保页面的显示效果在不同浏览器中具有较高的一致性。
触发条件：当 HTML 文档中包含有效的 <!DOCTYPE> 声明时，浏览器通常会进入严格模式。例如，HTML 5 的声明会让浏览器以严格模式解析页面。
特点：
- 遵循标准：严格按照 HTML 和 CSS 标准解析代码，不支持一些过时或非标准的特性。
- 一致性高：不同浏览器在严格模式下的显示效果更加一致，有利于开发者进行跨浏览器兼容开发。
- 代码要求高：要求开发者编写符合标准的代码，有助于提高代码质量和可维护性。

混杂模式（Quirks Mode）

定义：混杂模式也称为怪异模式，是为了兼容旧版本的 HTML 页面而设计的。在混杂模式下，浏览器会采用一些宽松的规则来解析和渲染页面，以模拟老式浏览器的行为。
触发条件：当 HTML 文档中没有 <!DOCTYPE> 声明，或者 <!DOCTYPE> 声明无效时，浏览器会进入混杂模式。
特点：
- 兼容性强：支持一些过时或非标准的 HTML 和 CSS 特性，以确保旧页面能够正常显示。
- 显示差异大：不同浏览器在混杂模式下的显示效果可能存在较大差异，给开发者带来跨浏览器兼容的挑战。
- 代码质量低：由于支持非标准特性，可能导致开发者编写的代码质量不高，不利于代码的维护和升级。

对于Web标准以及W3C的理解

查看答案

Web标准是一系列规范和准则的集合，目的是让网页在不同的浏览器、设备上都能正确显示和使用，同时提高开发效率、降低维护成本。它主要涵盖以下三个方面：

结构标准

由HTML（超文本标记语言）来实现，负责搭建网页的基本框架和内容结构，定义页面中有哪些元素以及这些元素的组织方式。例如使用 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等语义化标签来清晰表达页面结构。

表现标准

由CSS（层叠样式表）来实现，用于控制页面元素的外观和样式，包括颜色、字体、大小、布局等。通过CSS可以将页面的内容和样式分离，提高代码的可维护性和可复用性。

行为标准

由JavaScript实现，负责实现页面的交互效果和动态功能，例如点击按钮触发事件、表单验证、动画效果等。

W3C即万维网联盟（World Wide Web Consortium），它是一个致力于推动Web标准发展的国际组织，由蒂姆·伯纳斯 - 李（Tim Berners - Lee）于1994年创立。W3C的主要职责和作用如下：

制定标准

W3C制定了众多Web相关的标准和规范，如HTML、CSS、XML等。这些标准为Web开发者提供了统一的指导，确保不同的浏览器和设备能够正确解析和显示网页内容。

促进兼容性

通过制定标准，W3C促进了不同浏览器和设备之间的兼容性，减少了开发者在跨平台开发时遇到的问题。

推动技术发展

W3C关注Web技术的发展趋势，不断推出新的标准和规范，推动Web技术的创新和发展。

Web标准是W3C制定的一系列规范的统称，W3C是Web标准的主要制定者和推动者。遵循W3C制定的Web标准，能够让网页具有更好的兼容性、可访问性和可维护性，同时也有利于搜索引擎优化和提升用户体验。

行级元素和块级元素分别有哪些及怎么转换？

查看答案

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

常见的行级元素：span、a、img、button、input、select

空(void)元素: <br>、<hr>、<img>、<input>、<link>、<meta>

块级元素：

总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
宽度缺少时是它的容器的100%，除非设置一个宽度
高度、行高以及外边距和内边距都是可以设置的
块级元素可以容纳其它行级元素和块级元素

行内元素：

和其它元素都会在一行显示
高、行高以及外边距和内边距可以设置
宽度就是文字或者图片的宽度，不能改变
行级元素只能容纳文本或者其它行内元素

使用行内元素需要注意的是：

行内元素设置宽度width无效
行内元素设置height无效，但是可以通过line-height来设置
设置margin只有左右有效，上下无效
设置padding只有左右有效，上下无效

如何将行内元素转换为块级元素，块级元素转换为行内元素？

行内元素转块级元素：设置 display: block 或者 display: inline-block。display: block 会让元素独占一行，display: inline-block 会让元素既具有块级元素的特性（可设置宽高、内外边距等），又能和其他元素在一行显示。

简述 HTML5 的新特性

查看答案

新特性

HTML5主要是关于图像、位置、存储、多任务等功能的增加：

语义化标签：引入了 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等语义化标签，使代码结构更清晰，利于搜索引擎优化和代码维护。
表单增强：新增了多种表单输入类型，如 email、url、number、date 等，还提供了 placeholder、required、pattern 等属性，增强了表单的交互性和验证功能。
多媒体元素：支持 <audio> 和 <video> 标签，可直接在页面中嵌入音频和视频，无需依赖第三方插件。
Canvas 和 SVG：<canvas> 用于动态绘制图形和动画，<svg> 用于创建可缩放的矢量图形，适合制作图标、图表等。
本地存储：提供了 localStorage 和 sessionStorage，可以在浏览器端存储数据，且存储容量比 cookie 大。
地理定位：通过 Geolocation API 可以获取用户的地理位置信息。
Web Worker：允许在浏览器中创建后台线程，执行复杂的计算任务，而不影响主线程的运行，提高页面的性能。

移除了那些元素?

1. 纯表现类元素

这些元素主要用于控制页面的外观和布局，而 HTML5 强调结构与表现分离，推荐使用 CSS 来实现样式控制，因此移除了这些元素。

<basefont>：用于设置文档中所有文本的默认字体、大小和颜色。在 HTML5 中，字体样式应通过 CSS 的 font-family、font-size 和 color 属性来设置。
<big>：用于将文本显示为比正常文本大一号的字体。在 HTML5 中，可以使用 CSS 的 font-size 属性来调整字体大小。
<center>：用于将元素内容水平居中显示。在 HTML5 中，使用 CSS 的 text-align: center（对于行内元素）或 margin: 0 auto（对于块级元素）来实现水平居中。
<font>：用于设置文本的字体、大小和颜色。同样，这些样式应使用 CSS 来控制。
<s> 和 <strike>：用于在文本中间添加删除线。在 HTML5 中，使用 CSS 的 text-decoration: line-through 来实现相同效果。
<tt>：用于将文本显示为等宽字体。可以使用 CSS 的 font-family: monospace 来替代。
<u>：用于为文本添加下划线。在 HTML5 中，使用 CSS 的 text-decoration: underline 来实现。

2. 框架相关元素

随着 Web 技术的发展，框架的使用逐渐减少，HTML5 移除了一些与框架相关的元素。

<frameset>、<frame> 和 <noframes>：这些元素用于创建框架集和框架，允许在一个页面中显示多个独立的 HTML 文档。但框架在响应式设计、搜索引擎优化和可访问性方面存在问题，因此 HTML5 推荐使用 <iframe> 或其他现代布局技术。

3. 其他元素

<applet>：用于在网页中嵌入 Java applet。由于 Java applet 的安全性和兼容性问题，以及现代 Web 技术（如 HTML5 的 <canvas> 和 <video> 元素）的发展，HTML5 移除了该元素。
<isindex>：用于创建一个单行文本输入框，用于搜索页面内容。在 HTML5 中，可以使用 <input> 元素结合表单来实现搜索功能。
<dir>：用于创建目录列表。在 HTML5 中，推荐使用 <ul> 或 <ol> 元素来创建列表。

如何使用HTML5中的Canvas元素绘制图形？

查看答案

cookie、sessionStorage 和 localStorage 都是在浏览器端存储数据的方式，但它们在很多方面存在区别，以下为你详细介绍：

1. 数据生命周期

cookie：可以设置过期时间。如果不设置，默认在浏览器关闭时失效；若设置了过期时间，数据会保存到指定时间才过期。
sessionStorage：数据仅在当前会话期间有效。当页面关闭或者浏览器窗口关闭时，存储的数据会被清除。
localStorage：数据会一直存储在浏览器中，除非手动清除（例如通过 JavaScript 代码或者用户在浏览器设置中清除缓存），否则不会过期。

2. 数据存储大小

cookie：一般单个 cookie 存储的数据大小限制在 4KB 左右。由于每次 HTTP 请求都会携带 cookie 数据，过多或过大的 cookie 会增加请求的开销。
sessionStorage：通常可以存储大约 5MB 的数据，不同浏览器可能会有差异。
localStorage：和 sessionStorage 类似，一般也能存储大约 5MB 的数据。

3. 数据传输

cookie：会随 HTTP 请求一起发送到服务器端。服务器可以读取、修改和设置 cookie。这使得 cookie 适合用于在客户端和服务器之间传递信息，例如用户身份验证信息。
sessionStorage 和 localStorage：数据仅存储在浏览器端，不会随 HTTP 请求发送到服务器，因此不会增加请求的负担。

4. 作用域

cookie：可以通过设置 path 和 domain 属性来控制 cookie 的作用域，即哪些页面可以访问该 cookie。
sessionStorage：数据的作用域局限于当前窗口（或标签页）。不同的窗口（或标签页）之间无法共享 sessionStorage 数据，即使它们访问的是同一个页面。
localStorage：数据的作用域是同源的所有页面。只要是同源的页面，都可以访问和修改 localStorage 中的数据。

script、script async 和 script defer 的区别

查看答案

<script> - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
<script async> - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用 async，比如用作页面统计分析。
<script defer> - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含 defer 的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。

注意：没有 src 属性的脚本，async 和 defer 属性会被忽略。

iframe的作用以及优缺点

查看答案

作用

嵌入第三方内容：可以将其他网站的内容嵌入到当前页面中，例如嵌入地图（如百度地图、谷歌地图）、视频（如 YouTube、B站视频）、广告等。这样无需在自己的网站上重新实现这些功能，直接利用第三方提供的服务。
实现页面模块化：把一个大的页面拆分成多个独立的小页面，每个小页面用 iframe 嵌入。这样可以提高代码的可维护性和复用性，不同的开发人员可以独立开发不同的模块。
跨域通信：在某些情况下，当主页面和嵌入页面来自不同的域名时，可以利用 iframe 结合一些技术（如 postMessage API）实现跨域数据传递和通信。

优点

隔离性好：iframe 中的内容与主页面相互隔离，它们有各自独立的 DOM 结构、CSS 样式和 JavaScript 环境。这意味着 iframe 中的内容不会影响主页面，反之亦然，减少了代码之间的冲突。
方便复用：可以将一些常用的功能或页面封装成 iframe，在多个页面中重复使用，提高开发效率。
加载灵活：可以根据需要动态加载 iframe 中的内容，例如在用户点击某个按钮时再加载特定的 iframe，减少页面的初始加载时间。

缺点

性能问题：每个 iframe 都需要独立的资源加载，包括 HTML、CSS、JavaScript 等，这会增加页面的整体加载时间和服务器的负载。如果页面中使用了多个 iframe，性能问题会更加明显。
搜索引擎优化（SEO）困难：搜索引擎爬虫在解析页面时，可能无法很好地处理 iframe 中的内容，导致 iframe 中的内容难以被搜索引擎收录，影响网站的 SEO 效果。
跨域限制：虽然可以利用 iframe 实现跨域通信，但跨域操作存在一定的限制和复杂性，需要使用特定的技术和方法来解决，增加了开发的难度。
样式和布局问题：iframe 的样式和布局可能与主页面不协调，需要花费额外的精力来进行调整和适配。而且在不同的浏览器和设备上，iframe 的显示效果可能会有所差异。

Quirks（怪癖）模式是什么？它和Standards（标准）有什么区别？

查看答案

页面如果写了DTD，就意味着这个页面采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式，这就是Quirks模式，有时候也叫怪癖模式、诡异模式、怪异模式。区别：总体会有布局、样式解析、脚本执行三个方面区别，这里列举一些比较常见的区别：

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，然而在Quirks模式下，IE的宽度和高度还包含了padding和border
设置行内元素的高宽：在Standards模式下，给行内元素设置width和height都不会生效，而在Quriks模式下会生效
用margin：0 auto设置水平居中:在Standards模式下，设置margin：0 auto；可以使元素水平居中，但是在Quriks模式下失效
设置百分比高度:在Standards模式下，元素的高度是由包含的内容决定的，如果父元素没有设置百分比的高度，子元素设置百分比的高度是无效的

meta viewport 是做什么用的，怎么写？

查看答案

Viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

前端需要注意哪些SEO

查看答案

在前端开发中，为了让网页在搜索引擎中获得更好的排名和曝光，需要注意以下几个方面的 SEO（搜索引擎优化）：

1. 合理使用 HTML 标签

使用语义化的 HTML 标签，如 <header>、<nav>、<main>、<footer> 等，提高页面的结构和可读性。
标题标签：合理使用 <h1> - <h6> 标签，<h1> 通常用于页面的主标题，搜索引擎会给予较高的权重。每个页面应该只有一个 <h1> 标签。
图片标签：为 <img> 标签添加 alt 属性，描述图片的内容，这样即使图片无法加载，搜索引擎也能理解图片的含义。

2. 优化页面内容

关键词优化：在页面的标题、描述、正文等位置合理分布关键词，但要避免关键词堆砌，保持内容的自然和可读性。
内容质量：提供有价值、原创、丰富的内容，满足用户的需求，搜索引擎会更倾向于收录和推荐高质量的内容。
更新频率：定期更新页面内容，让搜索引擎知道页面是活跃的，有助于提高排名。

3. 优化页面性能

加载速度：优化页面的加载速度，减少用户等待时间。可以通过压缩代码、优化图片、使用 CDN 等方式来提高加载速度。
响应式设计：采用响应式设计，使页面在不同设备上都能良好显示，提高用户体验，搜索引擎也会更青睐响应式页面。

4. 优化元标签

标题标签（<title>）：每个页面都应该有一个独特、简洁且包含关键词的标题，标题长度建议控制在 60 个字符以内。
描述标签（<meta name="description">）：提供页面内容的简要描述，吸引用户点击搜索结果。描述长度建议控制在 150 - 160 个字符以内。
关键词标签（<meta name="keywords">）：虽然现在搜索引擎对关键词标签的权重较低，但仍可以适当填写一些相关关键词。

5. 避免使用不利于 SEO 的技术

Flash 和 JavaScript 过度使用：Flash 和 JavaScript 可能会导致搜索引擎无法正常抓取页面内容，尽量减少使用，或者提供替代的 HTML 内容。
隐藏文本和链接：不要使用隐藏文本和链接来堆砌关键词，这被视为作弊行为，会受到搜索引擎的惩罚。

6. 建立良好的网站结构和链接关系

网站结构：设计清晰、简洁的网站结构，让搜索引擎能够轻松抓取和索引页面。
内部链接：合理使用内部链接，将相关页面连接起来，有助于搜索引擎发现和理解页面之间的关系。
外部链接：与其他高质量的网站建立外部链接，提高网站的权威性和可信度。

title 和 alt 有什么区别？

查看答案

title 和 alt 都是 HTML 中用于描述图像的属性，但它们的作用和用途略有不同：

title 属性：
- 作用：用于提供关于图像的附加信息，通常在鼠标悬停在图像上时显示。
- 用途：用于提供图像的描述，帮助用户理解图像的内容。
- 示例：<img src="image.jpg" title="这是一张示例图片">
alt 属性：
- 作用：用于提供图像的替代文本，当图像无法加载或无法显示时，替代文本会显示在图像的位置。
- 用途：用于提供图像的替代描述，帮助用户理解图像的内容，特别是对于无法加载或无法显示的图像。
- 示例：<img src="image.jpg" alt="这是一张示例图片"> 总结：
title 属性用于提供图像的详细信息，帮助用户理解图像的内容。
alt 属性用于提供图像的替代描述，帮助用户理解图像的内容，特别是对于无法加载或无法显示的图像。

如何优化 HTML 代码

查看答案

使用语义化标签：提高代码可读性和 SEO 效果。
压缩代码：去除不必要的空格、换行符和注释，减小文件大小，提高加载速度。
优化图片：使用合适的图片格式（如 JPEG、PNG、WebP），并压缩图片大小。
合理使用缓存：设置合适的缓存策略，减少不必要的请求。
避免内联样式和脚本：将样式和脚本分离到外部文件中，提高代码的可维护性和缓存利用率。
优化表单：使用 HTML5 表单特性，减少 JavaScript 验证代码。

HTML 中 `meta` 标签的作用及常见用法

查看答案

meta 标签提供关于 HTML 文档的元数据，不会显示在页面上，但对于搜索引擎和浏览器有重要作用。常见用法如下：

字符编码：指定文档的字符编码。
页面描述：提供页面内容的简要描述，有助于搜索引擎理解页面内容。
关键词：列出与页面相关的关键词。
页面重定向：设置页面在一定时间后自动跳转到指定 URL。

说说 HTML 中的表单元素及作用

查看答案

<form>：用于创建 HTML 表单，是表单元素的容器，通过 action 属性指定表单数据提交的 URL，method 属性指定提交方式（GET 或 POST）。
<input>：最常用的表单元素，通过 type 属性指定输入类型，如 text（文本输入框）、password（密码输入框）、radio（单选框）、checkbox（复选框）、submit（提交按钮）、reset（重置按钮）等。
<textarea>：用于创建多行文本输入框。
<select> 和 <option>：用于创建下拉列表框，<select> 是容器，<option> 定义下拉列表中的选项。
<button>：用于创建按钮，可通过 type 属性指定按钮类型，如 submit（提交按钮）、reset（重置按钮）、button（普通按钮）。

HTML 中 `a` 标签的 `target` 属性有哪些取值及作用

查看答案

a 标签的 target 属性用于指定链接的打开方式，常见取值及作用如下：

_self：在当前窗口打开链接。
_blank：在新窗口或新标签页打开链接。
_parent：在父窗口打开链接。
_top：在最顶层窗口打开链接。
framename：在指定的 iframe 中打开链接。

HTML 中 `data-*` 属性的作用

查看答案

data-* 属性是 HTML5 引入的一种自定义属性，用于存储与元素相关的数据，不影响元素的显示和行为。它的命名约定为 data- 加上自定义名称，例如 data-user-id。通过 data-* 属性，可以在 JavaScript 中方便地获取和操作元素的相关数据。

`xhtml` 和 `html` 有什么区别?

查看答案

XHTML（可扩展超文本标记语言）和 HTML（超文本标记语言）是网页开发中常用的两种标记语言，它们之间存在以下区别：

语法要求：XHTML 要求所有标签必须正确闭合，并且所有属性必须有值。HTML 则没有这些要求。
命名空间：XHTML 使用命名空间来区分不同的元素和属性，而 HTML 则没有命名空间。
大小写敏感：XHTML 对大小写敏感，标签名和属性名必须严格按照规范书写。HTML 则对大小写不敏感。
实体引用：XHTML 要求使用实体引用来表示特殊字符，而 HTML 则允许直接使用特殊字符。

简单点说，XHTML 是一种严格的 HTML 子集，它要求所有标签都正确闭合，属性必须有值，并且对大小写敏感。而 HTML 则是一种宽松的标记语言，没有这些严格的要求。

XHTML 主要用于 Web 应用程序的开发，而 HTML 则广泛用于网页的设计和开发。

XHTML 是基于 XML 标准的，XML 具有良好的数据结构化和可扩展性，易于被各种数据处理工具和程序解析。这使得 XHTML 编写的网页内容可以方便地与其他系统进行数据交换和共享，例如与数据库、服务器端脚本等进行交互。

页面导入样式时，使用 `link` 和 `@import` 有什么区别？

查看答案

相同点：都是外部引用CSS方式；

不同点：

link 是 xhtml 标签，除了加载 css 外，还可以定义 RSS 等其他事务；
@import 属于 CSS 范畴，只能加载 CSS。
link 引用 CSS 时候，页面载入时同时加载；
@import 需要在页面完全加载以后加载，而且@import 被引用的 CSS 会等到引用它的CSS 文件被加载完才加载。
link 是 xhtml 标签，无兼容问题；
@import 是在 css2.1 提出来的，低版本的浏览器不支持。
link 支持使用 javascript 控制去改变样式，而@import 不支持。
link 方式的样式的权重高于 @import 的权重。
@import 在 html 使用时候需要 <style type="text/css"> 标签。

很多网站不常用 table iframe这两个元素，知道原因吗？

查看答案

因为浏览器页面渲染的时候是从上至下的，而 table 和 iframe 这两种元素会改变这样渲染规则，他们是要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。还有 iframe 可以嵌入第三方网站的内容，如果嵌入的内容存在安全漏洞，可能会对主页面造成安全威胁，如 XSS（跨站脚本攻击）等。

请说出SGML 、HTML 、XML 和 XHTML 的区别？

查看答案

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
HTML 是超文本标记语言，主要是用于规定怎么显示网页。
XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，而 HTML 的标签都是固定的而且数量有限。
XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。

常用的图片格式有那些？区别？

查看答案

常见的图片格式有JPEG(JPG)，PNG，GIF，WebP…

JPEG(JPG)： JPEG(JPG)格式的图片支持的颜色比较多，图片可以压缩，不支持透明；一般使用JPEG(JPG)格式来保存颜色比较丰富的照片
GIF： GIF格式的图片支持的颜色比较少，只支持简单的透明（直线型区域的透明），支持动态图；图片颜色单一，或者是动态图时用GIF格式的图片
PNG： PNG支持的颜色比较多，且支持复杂的透明；可以用来显示颜色复杂的透明图片（实际中使用频率最高）
WebP： WebP优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。但是兼容性比较差。

图片的使用原则：效果不一致，使用效果好的。效果一致使用图片体积小的。

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

查看答案

HTML5 引入了许多新的语义化标签，如 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等。不过，一些旧版本的浏览器可能不支持这些新标签，下面为你介绍处理这些标签浏览器兼容问题的方法：

1. 使用 HTML5 Shiv

HTML5 Shiv 是一个 JavaScript 脚本，它能让旧版本的 Internet Explorer（IE）浏览器支持 HTML5 新标签。使用步骤如下：

引入脚本：在 HTML 文件的 <head> 标签内引入 HTML5 Shiv 脚本。

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

上述代码借助条件注释，仅在 IE 9 以下版本的浏览器中引入 HTML5 Shiv 脚本。

载入后，初始化新标签的css：

部分旧浏览器虽然能识别 HTML5 新标签，但可能不会将它们当作块级元素处理，所以需要在 CSS 里设置这些标签为块级元素。

header, nav, main, article, section, aside, footer {
    display: block;
}

2. IE6/IE7/IE8 支持通过 `document.createElement()` 方法动态创建自定义标签，利用这一特性让这些浏览器支持HTML5新标签；

常用浏览器有哪些，内核都是什么？

查看答案

常用浏览器有：

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Internet Explorer
360
搜狗内核：
Google Chrome 和 Safari 使用 WebKit 内核
Mozilla Firefox 使用 Gecko 内核
Microsoft Edge 使用 Chromium 内核
Internet Explorer 使用 Trident 内核
360和搜狗这些分极速模式和兼容模式，极速模式用的Webkit的内核，兼容模式用的Trident内核。

介绍一下你对浏览器内核的理解？

查看答案

浏览器内核主要分成两部分：渲染引擎(Layout Engine或Rendering Engine) 和 JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行 javascript 来实现网页的动态效果。

最开始渲染引擎和 JS引擎并没有区分的很明确，后来 JS引擎越来越独立，内核就倾向于只指渲染引擎。

渐进增强 (progressive enhancement) 和优雅降级 (graceful degradation) 的区别?

查看答案

渐进增强: 先保证低版本浏览器的基本功能，再去兼容高版本浏览器效果和交互。方式有：shim 打补丁为了兼容新的es6标准的功能。
优雅降级: 先保证高版本浏览器的效果和交互等，再去兼容低版本的浏览器。方式有：babel 将es6的语法转化成es5语法。

无样式内容闪烁（FOUC）?

查看答案

FOUC（Flash of Unstyled Content）是指在页面加载时，由于浏览器无法正确解析 CSS 样式，导致页面内容先以无样式的形式显示，然后再加载 CSS 样式，从而导致页面内容闪烁的现象。

原因：

使用 @import 方法导入样式表
将样式表放在页面底部
有几个样式表，放在html结构的不同位置。

原理：

当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。

解决方法：

使用 link 标签加载CSS样式文件。因为 link 是顺序加载的，这样页面会等到CSS下载完之后再下载 HTML 文件，这样先布局好，就不会出现 FOUC 问题。

为什么通常将 css 的 `<link>` 放置在 `<head></head>` 之间，而将 js 的 `<script>` 放置在 `</body>` 之前? 有哪些例外吗?

查看答案

为什么通常将 css 的 `<link>` 放置在 `<head></head>` 之间?

当浏览器解析 HTML 文档时，会按照从上到下的顺序进行渲染。如果 <link> 标签放在 <body> 中或者文档底部，浏览器在解析到 <link> 标签之前，会先渲染没有应用 CSS 样式的页面内容，之后再加载 CSS 文件并重新渲染页面，这就会导致页面出现短暂的无样式闪烁现象（FOUC，Flash of Unstyled Content）。而将 <link> 标签放在 <head> 中，浏览器会在渲染页面内容之前先加载并应用 CSS 样式，从而避免了这种闪烁问题，为用户提供更流畅的视觉体验。

为什么将 js 的 `<script>` 放置在 `</body>` 之前?

1. 避免阻塞页面渲染浏览器解析 HTML 文档是从上到下依次进行的。当遇到 <script> 标签时，默认情况下会暂停 HTML 解析，先下载并执行脚本，这会阻塞页面的渲染。如果将 <script> 标签放在 <head> 中，在脚本下载和执行完成之前，页面内容无法显示，用户会看到一个空白页面，影响用户体验。而将 <script> 标签放在 </body> 之前，意味着在页面的 HTML 结构已经解析完成并渲染之后再执行脚本，这样可以让用户更快地看到页面内容，减少等待时间。
1. 确保 DOM 元素已加载 JavaScript 代码通常需要操作页面上的 DOM 元素。如果在 DOM 元素还未完全加载时就执行脚本，可能会导致脚本无法找到需要操作的元素，从而引发错误。将 <script> 标签放在 </body> 之前，可以保证在脚本执行时，页面上的所有 DOM 元素都已经加载完成，这样脚本就可以正常地访问和操作这些元素。
1. 提高页面性能将 <script> 标签放在 </body> 之前可以并行下载 HTML 和脚本文件。因为在 HTML 解析过程中，浏览器可以同时开始下载脚本文件，而不需要等待脚本下载和执行完成后再继续解析 HTML。这样可以充分利用浏览器的并行下载机制，提高页面的整体加载速度。

例外情况

虽然将 <script> 标签放在 </body> 之前是一种常见的做法，但也有一些例外情况：

使用 defer 或 async 属性：如果 <script> 标签使用了 defer 或 async 属性，脚本的下载和执行会与 HTML 解析并行进行，不会阻塞页面渲染。在这种情况下，<script> 标签可以放在 <head> 中。
需要在页面加载前执行的脚本：有些脚本需要在页面加载前执行，例如初始化一些全局变量、检测浏览器特性等。这些脚本可以放在 <head> 中。

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

查看答案

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

label 中有两个属性是非常有用的，for 和 accesskey。

for 属性功能：表示 label 标签要绑定的 HTML 元素，你点击这个标签的时候，所绑定的元素将获取焦点。

<Label for="name">姓名</Label><input ID="name" type="text">

accesskey 属性功能：表示访问 label 标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。

<Label for="name" accesskey＝"N">姓名</Label><input ID="name" type="text">

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

查看答案

在 HTML5 的 <form> 中，可以通过设置 autocomplete 属性来关闭自动完成功能。将 autocomplete 属性的值设置为 off 即可关闭自动完成功能。

<form autocomplete="off">
  <!-- 表单内容 -->
</form>

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

查看答案

WebSocket、SharedWorker、postMessage
可以调用 localstorge、cookie 等本地存储方式。localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常。

`webSocket` 如何兼容低浏览器？

查看答案

Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR
引用 WebSocket.js 这个文件来兼容低版本浏览器。

如何在页面上实现一个圆形的可点击区域？

查看答案

可以使用 SVG 来实现圆形区域。
可以使用 CSS 的 border-radius 属性来实现圆形区域。
可以使用 JavaScript 的 getBoundingClientRect() 方法获取元素的位置和大小，然后判断鼠标点击的位置是否在圆形区域内。

实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果?

查看答案

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

网页验证码是干嘛的，是为了解决什么安全问题？

查看答案

区分用户是计算机还是人的程序；
可以防止恶意破解密码、刷票、论坛灌水；

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

查看答案

title 属性没有明确意义，只表示标题；h1 表示层次明确的标题，对页面信息的抓取也有很大的影响； strong 标明重点内容，语气加强含义；b 是无意义的视觉表示； em 表示强调文本；i 是斜体，是无意义的视觉表示；视觉样式标签：<b/> <i/> <u/> <s/> 语义样式标签：<article>、<section>、<nav>、<aside>、<header>、<footer>、<time>

什么是渐进式渲染？

查看答案

渐进式渲染是指在用户浏览网页时，逐步加载页面内容，而不是一次性将整个页面加载完毕。这种方式可以提高网页的加载速度和用户体验。比如：

图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的CSS、脚本和内容，然后可以使用延迟加载脚本或监听 DOMContentLoaded/load 事件加载其他资源和内容。
异步加载HTML片段——当页面通过后台渲染时，把HTML拆分，通过异步请求，分块发送给浏览器。

H5 的浏览器存储有哪些？

查看答案

在 HTML5 中，主要有以下几种浏览器存储方式：

数据生命周期：可以设置过期时间。如果不设置，默认在浏览器关闭时失效；若设置了过期时间，数据会保存到指定时间才过期。
数据存储大小：一般单个 cookie 存储的数据大小限制在 4KB 左右。由于每次 HTTP 请求都会携带 cookie 数据，过多或过大的 cookie 会增加请求的开销。
数据传输：会随 HTTP 请求一起发送到服务器端。服务器可以读取、修改和设置 cookie。这使得 cookie 适合用于在客户端和服务器之间传递信息，例如用户身份验证信息。
作用域：可以通过设置 path 和 domain 属性来控制 cookie 的作用域，即哪些页面可以访问该 cookie。

12. localStorage

数据生命周期：数据会一直存储在浏览器中，除非手动清除（例如通过 JavaScript 代码或者用户在浏览器设置中清除缓存），否则不会过期。
数据存储大小：一般能存储大约 5MB 的数据。
数据传输：数据仅存储在浏览器端，不会随 HTTP 请求发送到服务器，因此不会增加请求的负担。
作用域：数据的作用域是同源的所有页面。只要是同源的页面，都可以访问和修改 localStorage 中的数据。

13. sessionStorage

数据生命周期：数据仅在当前会话期间有效。当页面关闭或者浏览器窗口关闭时，存储的数据会被清除。
数据存储大小：通常可以存储大约 5MB 的数据，不同浏览器可能会有差异。
数据传输：数据仅存储在浏览器端，不会随 HTTP 请求发送到服务器，因此不会增加请求的负担。
作用域：数据的作用域局限于当前窗口（或标签页）。不同的窗口（或标签页）之间无法共享 sessionStorage 数据，即使它们访问的是同一个页面。

14. IndexedDB

数据类型：一种基于数据库的存储方式，支持存储多种类型的数据，包括文件和二进制大对象（Blob）。
数据生命周期：数据会一直存储在浏览器中，除非手动删除数据库。
数据存储大小：存储容量较大，通常只受限于设备的可用存储空间。
数据传输：数据仅存储在浏览器端，不会随 HTTP 请求发送到服务器。
作用域：数据的作用域是同源的所有页面。支持事务操作，能够保证数据的一致性和完整性。

H5 跨域的几种方式？

查看答案

JSONP：利用 <script> 标签的跨域特性，通过动态创建 <script> 标签，向服务器请求数据，服务器返回的数据是一个函数调用，将数据作为参数传递给这个函数。
CORS：服务器端设置 Access-Control-Allow-Origin 响应头，允许指定的域名进行跨域请求。
代理：在服务器端设置代理，将请求转发到目标域名。
WebSocket：利用 WebSocket 协议，可以在客户端和服务器之间建立持久连接，实现跨域通信。

H5 事件?

查看答案

鼠标事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout
键盘事件：keydown、keyup、keypress
表单事件：submit、change、focus、blur
文档事件：load、unload、scroll、resize
触摸事件：touchstart、touchmove、touchend
其他事件：error、hashchange、pageshow、pagehide

什么是字体图标？如何避免图片在网页上失真？

查看答案

字体图标是一种使用字体来表示图标的技术，通过在网页中使用字体文件，可以将图标以文本的形式显示出来。
可以使用 CSS 的 @font-face 规则来定义自己的字体，然后使用 ::before 或 ::after 伪元素来插入图标。
可以使用 CSS 的 background-image 属性来设置图片的背景，然后使用 background-size 属性来控制图片的大小，避免图片在网页上失真。

什么是 canvas，基本用法是什么？你使用它做个什么需求？

查看答案

Canvas 是 HTML5 新增的元素，它可以通过 JavaScript 来绘制图形、图像和动画。

基本用法：

创建 Canvas 元素：

<canvas id="myCanvas" width="200" height="100"></canvas>

获取 Canvas 元素：

var canvas = document.getElementById("myCanvas");

获取 Canvas 的绘图上下文：

var ctx = canvas.getContext("2d");

使用绘图上下文绘制图形：

ctx.fillStyle = "red";  
ctx.fillRect(0, 0, 100, 50);

需求：可以使用 Canvas 来绘制图形、图像和动画，例如绘制图形验证码、绘制图表、绘制游戏等。