HTML面试题汇总

炸小肉丸
103 阅读9分钟

持续更新中...

一、块级元素、行内元素、行内块元素

1、块级元素block

  • 独占一行；可以设置宽高、内外边距
  • 宽度默认为父元素宽度，高度由内容填充
  • div、p、ul、ol、dl、h1 ~ h6、form、table

2、行内元素inline

  • 不独占一行，多个行内元素可以在一行内依次排列；不可设置宽高、上下内外边距，可以设置左右内外边距
  • 宽高都由内部元素自动填充
  • 子元素不可为块级元素
  • span、a、label、i

3、行内块元素inline-block

  • 兼具行内元素和块级元素的特点：不独占一行，可以设置宽高、内外边距
  • input、img

4、元素转换

  • 使用css的属性display定义元素类型：block、inline、inline-block

二、@import和link引入样式的区别

1、从属关系

  • link属于HTML的标签，用于将外部样式表引入HTML文档中，除CSS文件之外，还可以定义网站图标（rel="icon"）或控制资源加载优先级（rel="preload"）。
  • @import属于CSS语法，仅支持导入CSS样式

2、加载顺序

  • link标签引入的内容会与页面并行加载
  • @import需要在页面加载完成之后，再下载CSS文件（待研究...）

3、兼容性

  • link标签没有兼容性要求
  • @import是CSS2.1的语法，只有在IE5以上才能识别

4、动态导入

  • link标签可以通过js动态创建
  • @import不能通过直接操作DOM进行创建，但是可以通过js创建一个Style标签，将import引入规则写在Style标签内容中

5、样式权重

  • CSS解析引擎在对一个 CSS 文件进行解析时，如在文件顶部遇到@import，将被替换为该@import导入的 CSS 文件中的全部样式。
  • 因此在link标签引入的 CSS 文件中使用@import时，相同样式将被该 CSS 文件本身的样式层叠
  • 由link和@import的区别引发的CSS渲染杂谈

三、title与h1，b与strong，i与em

1、title和h1

  • title用于定义HTML文档的标题，是文档的元数据之一，不会显示在页面内容中，会出现在浏览器的标题栏或标签页上
  • h1用于定义页面中的主标题，是页面内容的一部分
  • title标签是head中唯一必须的元素

2、b与strong的区别

  • b标签用于表示粗体文本，没有任何语义
  • strong标签在加粗的同时，表示文本的重要性，起强调作用
  • 为了符合CSS3规范，建议少用b，改用strong

3、i与em

  • i标签用于表示斜体，没有任何语义
  • em标签在设置文本斜体的同时，表示文本的重要性，起强调作用
  • i更多用在字体图标上，em用在一些专业术语上

四、img标签的title和alt有什么区别

1、title

  • 为图像提供一个额外的说明或描述，将鼠标悬停在图像上时，会显示title的内容
  • 通常用于对图像的补充说明
  • title属性内容有助于提高图像的可访问性和用户体验。但并不是必须的

2、alt

  • alt为图像提供替代文本，在图像无法访问或用户使用辅助技术时（屏幕阅读器），会显示替代文本
  • 提供了图像的文本描述
  • 有助于SEO（搜索引擎优化），alt的值应尽量简洁明了

两者作用不同，但都有助于提高用户体验

五、 DOCTYPE 是什么

  • HTML 中，DOCTYPE声明是文档类型声明（Document Type Declaration）的缩写，用于指示浏览器使用什么模式来解析渲染页面（标准、怪异、混杂渲染模式）
  • <!DOCTYPE html>用于告诉浏览器当前页面使用的规范是HTML5，浏览器使用 HTML5 标准来解析和渲染页面
  • 使用缺少或不完整的DOCTYPE声明会启用浏览器的怪异/混杂渲染模式

六、对语义化HTML的理解

HTML语义化：在编写HTML文档时，使用具有明确含义的标签来描述网页的内容和结构，使用正确的标签做正确的事

  • 提高页面的可访问性：有助于屏幕阅读器更准确的解析和呈现网页内容（无障碍适配）
  • 增强SEO：搜索引擎使用网页的结构来确定内容的相关性和重要性，语义化HTML有助于搜索引擎更好的索引和排名网页
  • 增强代码的可读性，易于维护

常见的语义化标签：<header><nav><main><section><article><aside><footer><address>...

七、src和href的区别

1、src

  • 将指定的资源嵌入到页面中
  • 浏览器在解析到 src 属性时会立即发送请求以获取资源，会阻塞HTML的解析，进而影响页面的性能
// 用于指定图像文件的路径
<img src="image.jpg" alt="Description of the image">
// 用于指定 JavaScript 文件的路径
<script src="script.js"></script>
// 用于指定嵌入页面的路径
<iframe src="page.html"></iframe>

2、href

  • 不嵌入内容到当前页面，而是指向外部资源
  • 创建一个指向外部资源的超链接，用户可以点击导航
// 用于创建超链接
<a href="https://www.example.com">Visit Example</a>
// 用于链接外部资源，比如样式表
<link href="styles.css" rel="stylesheet">

八、HTML5有哪些新特性

1、语义化标签

header、nav、aside、section、footer、acticle、address

2、多媒体支持

HTML5提供了对音频和视频的原生支持，<audio>、<video>直接在网页中嵌入音视频，无需依赖第三方插件

3、canvas和WebGL

HTML5引入了canvas标签，允许通过js动态绘制图形和图像。此外，HTML5支持WebGL，一种基于OpenGL的3D绘图技术，可以实现更复杂的图形和动画效果

4、表单控件的增强

HTML5提供了一系列新的表单控件，以及新的属性和API

<input type="date"> <input type="email"> <input type="url"> <input type="range">

5、本地存储

HTML5引入了WebStorage和indexedDB，提供了客户端存储数据的能力，可以用来存储用户的偏好设置、离线数据等

image.png 6、地理定位

HTML5提供了Geolocation API，允许网页获取用户设备的地理位置信息

7、Web Workers

通过web workers实现并行计算处理，提升网页性能

8、跨文档消息传递

允许不同的文档、iframe、浏览器窗口之间进行安全通信

9、一些新的API

引入了许多新的JS API：拖放API、历史管理API、WebSocket API等

九、iframe的优缺点

1、优点

  • iframe中的页面和父页面内容独立，可以加载不同域的网页，载入第三方内容（如地图、视频、广告）
  • iframe可以和父页面并行加载，减少主页面的加载时间（Chrome不会阻塞主页面，其他浏览器没有实现这个功能）

2、缺点

  • iframe 会阻塞主页面的 onload 事件
  • 必须使用postmessage与iframe进行通信
  • 搜索引擎爬虫无法正确索引iframe中的内容

十、对web标准以及W3C的理解与认识

  • web标准的核心是HTML、CSS、JavaScript，也就是结构、表现、行为
  • 遵循web标准可以让网页或应用在不同的设备或浏览器上具有一致性的表现
  • W3C 是一个国际性组织，致力于制定和推动 Web 标准的发展，提升用户体验、降低开发成本

十一、HTML、XML、XHTML区别

HTML：超文本标记语言、XML：可扩展标记语言、XHTML：可扩展超文本标记语言。 XML和HTML最大的区别是XML的标签是可扩展的，XHTML是使用XML语法重新编写的HTML（严格模式的HTML） image.png

十二、超链接有哪些常见的表现形式

1、文本链接：文本被设置成链接，点击文本跳转指定链接
<a href="https://example.com">点击这里访问示例网站</a>

2、图像/图标链接：图像被设置成链接，点击图像跳转
<a href="https://example.com"><img src="image.jpg" alt="示例图像"></a>
<a href="https://example.com"><i class="fab"></i></a>

3、按钮链接：按钮被设置成链接，点击按钮跳转
<a href="https://example.com"><button>点击这里</button></a>

4、导航链接：以列表形式显示链接，常用在导航栏中
<ul>
  <li><a href="https://example.com/page1">页面1</a></li>
  <li><a href="https://example.com/page2">页面2</a></li>
  <li><a href="https://example.com/page3">页面3</a></li>
</ul>

5、锚点链接：同一页面内部创建跳转链接，点击链接跳转文档特定位置
// 创建锚点，HTML5不再推荐使用name创建锚点
<div id="section1">使用id创建</div>
// 创建超链接用来跳转锚点
<a href="#section1">跳转到section1锚点</a>

十三、空元素（单标签）有哪些？

单标签：只有起始标签，没有结束标签。

这是常见的空元素:<br>、<hr>、<meta>、<img>、<input>、<link>

十四、常用的meta标签属性

1、字符编码：指定文档的字符编码
<meta charset="UTF-8">

2、视口设置：用于响应式设计，控制页面在移动设备上的显示方式
<meta name="viewport" content="width=device-width, initial-scale=1.0">

3、描述：提供页面的简短描述，通常在搜索引擎结果中显示
<meta name="description" content="这是页面的描述">

4、关键词：提供页面的关键词，有助于搜索引擎识别页面内容
<meta name="keywords" content="关键词1, 关键词2, 关键词3">

5、作者：指定页面的作者
<meta name="author" content="作者姓名">

6、指定搜索引擎索引行为
// index 允许索引 noindex 禁止索引 follow 运毒爬取页面中的链接 反之是nofollow
<meta name="robots" content="index, follow">

7、刷新和重定向
<meta http-equiv="refresh" content="5;url=https://example.com">

在SEO中，TDK其实就是title、description、keywords这三个标签

十五、img的srcset属性

用于指定一组备选图像源，根据浏览器的像素密度（DPR）或显示屏尺寸来选择合适的图像进行显示。

通常用于实现响应式图片，确保在不同的设备上显示合适的尺寸和质量的图片，从而提高用户体验和性能。

// 如果浏览器的像素密度是1x，那么会加载 `image1.jpg`
// 如果是2x，就加载 `image2.jpg`
// 如果是3x，就加载 `image3.jpg`
// 如果没有匹配的像素密度描述符，就会加载默认图像 `default.jpg`
<img src="default.jpg" srcset="image1.jpg 1x, image2.jpg 2x, image3.jpg 3x" alt="Description">

img的size属性指定了一组媒体查询和相应的视口尺寸，用于描述图像在不同视口大小下的显示尺寸。只适用于webp图片

<img src="image.webp" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 1200px" alt="Description">

十六、HTML5的应用程序缓存

  • 在离线时访问页面
  • 更快的访问已缓存的资源
  • 减少服务器的负载，代码更新部署之后，只需要下载更新过的资源
// 在html中引入Manifest文件
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

文件内容：

CACHE MANIFEST
# v1.0.0

CACHE:
# 缓存的文件列表
index.html
style.css
main.js
images/logo.png

NETWORK:
# 总是通过网络请求的资源
api/data.json

FALLBACK:
# 备用资源
/ /offline.html
avatar
文章
阅读
粉丝