前端面试之HTML篇

尼克圆
82 阅读7分钟

(仅作自己学习整理，大佬勿扰，未完待续)

1. src和href的区别

解析方式权重请求资源作用结果
href加载到对应位置的时，不会暂停其他资源的下载或行为(使用 link 方式来加载 css的原因)href链接的的是当前页面的一部分附属资源任何有效文档的相对或绝对URL，包括片段标识符和JavaScript代码段。超文本引用，用于建立文档与资源的联系
src暂停其他资源的下载，直到当前资源加载，编译，执行完成了，并且把当前资源替换到src引用处了。(将js 脚本放在底部而不是头部的原因)src加载的是当前页面的一部分主要指向需下载的资源。常用标签script,img,ifame等将其所指向的资源下载并应用到当前页面

2. 对HTML语义化的理解

HTML语义化是指使用HTML标签和属性时，考虑到它们在网页内容中的含义和上下文，从而使代码更加清晰、易于理解和维护。

  • 网页：适合搜索引擎的爬虫爬取有效信息，有利于SEO。
  • 开发者：使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。
<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

3. DOCTYPE(⽂档类型) 的作⽤

DOCTYPE（文档类型）是HTML文档中的一个声明，用于指定浏览器应该使用哪种HTML规范来解析和渲染页面。

具体来说，DOCTYPE的主要作用包括：

  1. 指定HTML版本：通过声明DOCTYPE，可以指定使用哪个版本的HTML规范。例如，<!DOCTYPE html>声明使用的是HTML5规范。
  2. 确保浏览器正确渲染：如果HTML文档中缺少DOCTYPE声明，浏览器可能会使用不同的兼容模式来渲染页面，这可能导致页面在不同浏览器中的显示效果不一致。
  3. 影响 CSS 和 JavaScript 的解析：不同的渲染模式会影响浏览器对CSS代码甚至JavaScript脚本的解析。
  • CSS1Compat模式（标准模式或默认模式）使用W3C的标准解析渲染页面。
  • BackCompat模式（怪异模式）则使用浏览器自己的怪异模式解析渲染页面。

4. script标签中defer和async的区别

defer 和 async 是用于控制 JavaScrip 脚本加载和执行的两个特性。它们的共同点是都允许 JavaScript 脚本异步加载，但它们在执行脚本时的行为有所不同：

  • Defer：

    • 延迟加载脚本，直到文档完成解析和开始执行（即 DOMContentLoaded 事件之前）。
    • 如果页面中有多个带有 defer 属性的脚本，它们将按照在 HTML 文件中出现的顺序依次执行。
    • 对于较大的脚本文件，由于下载时间较长，较小的脚本文件可能会优先下载完成，但这不会影响较大脚本文件的执行顺序。

  • Async：

    • 异步加载脚本，并在 window 的 load 事件之前完成执行。
    • 多个带有 async 属性的脚本的执行顺序是无法保证的，取决于网络传输的结果，哪个脚本先下载完成就先执行。

在使用 defer 时，建议只在外部脚本中使用，因为内联的 defer 在一些旧版本的浏览器中可能不支持。而 async 通常适用于独立的第三方插件，因为它允许脚本在下载完成后立即执行，而不是等待整个页面内容加载完毕。

总结来说，defer 更适合于确保脚本在页面结构解析完成后按需执行，而 async 则更适合于那些不需要依赖其他资源且希望尽快运行的脚本。

5. 常用的meta标签有哪些

meta：html语言head区的一个辅助性标签，标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

（1）charset: 用来描述HTML文档的编码类型：

<meta charset="utf-8">

（2）name属性: name属性主要用于描述网页，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

语法：<meta name="参数" content="具体的参数值">

name属性主要有以下几种参数：

参数说明用法
Keywords关键字meta name ="keywords" content="百度一下你就知道">
description网站内容描述<meta name="description" content="全球最大的中文搜索引擎、致力于让网民更便捷地获取信息 "
robots搜索引擎索引方式<meta name="robots" content="none">"
author标注网页的作者<meta name="author" content="不时髦的耳朵>
viewport适配移动端，可以控制视口的大小和比例<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
refresh页面重定向和刷新<meta http-equiv="refresh" content="0;url=" />

（3）http-equiv: 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

语法：<meta http-equiv="参数" content="参数变量值"> ；

http-equiv属性主要有以下几种参数：

参数说明用法
content-type规定文档的字符编码<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
Cache-Control指定请求和响应遵循的缓存机制<meta http-equiv="Cache-Control" content="no-cache"/>
expires可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
Pragma禁止浏览器从本地计算机的缓存中访问页面内容。(这样设定，访问者将无法脱机浏览。)<meta http-equiv="Pragma" content="no-cache">
Refresh自动刷新并指向新页面。(其中的2是指停留2秒钟后自动刷新到URL网址)<meta http-equiv="Refresh" content="2;URL=http://www.jb51.net">
content-Language显示语言的设定<meta http-equiv="Content-Language" content="zh-cn"/>

6. HTML5有哪些更新

  1. 语义化标签：nav、header、footer、aside、section、article
  2. 音频、视频标签：audio、video
  3. 表单
  4. 进度条、度量器
  5. DOM查询操作：document.querySelector()、 document.querySelectorAll()
  6. Web存储：localStorage、sessionStorage

7. iframe 有哪些优点和缺点？

iframe通常用来加载外部链接，不会影响网页内容的加载。

优点

  • 可以将网页原封不动的加载进来
  • 增加代码的可用性
  • 用来加载显示较慢的内容，如广告、视频等

缺点

  • 加载的内容无法被浏览器引擎识别，对SEO不友好
  • 会阻塞onload事件加载
  • 会产生很多页面，不利于管理

8. 行内元素、块级元素、空（void）

  • 行内： a、b、span、input、img、select、 strong
  • 块：p、div、h1、ul、ol、li、dl、dt、dd
  • 空：<hr>、<br>、<img>、<input>、<link>、<meta>

1）行内元素：也称行内标签或内联元素或内嵌元素，一个行内标签通常会和其他行内标签显示在同一行中，它们不占有独立的区域，仅仅靠自身的文本内容大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

2）块级元素：也称为块标签，在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

3）空元素：指在html中没有内容的html元素。

9. b与strong的区别、i与em的区别？

  • strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
  • i内容展示为斜体，em表示强调的文本

10. b与strong的区别、i与em的区别？

  • strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
  • i内容展示为斜体，em表示强调的文本

12. BFC？

avatar
文章
阅读
粉丝