八股文-html

欢迎阅读 html 八股文

📌 html

1.1 <script> 标签中 defer 和 async 的区别

  • 普通 script
    会阻碍 HTML 的解析，只有在下载并执行完脚本后，HTML 才会继续解析。

  • async script

    • 在解析 HTML 的同时异步下载脚本。
    • 一旦下载完成会立即执行，可能会打断 HTML 的解析。
    • 脚本执行顺序不一定按照书写顺序。

  • defer script

    • 脚本异步下载，但不会阻塞 HTML 的解析。
    • 等 HTML 解析完成后再执行脚本。
    • 脚本会按照书写顺序依次执行。

1.2 从浏览器地址栏输入 URL 到请求返回发生了什么

当我们在浏览器地址栏输入一个 URL 并回车时，大致会经历以下几个阶段：

1. 解析 URL

  • 浏览器解析出 协议、主机、端口、路径 等信息。
  • 构造一个 HTTP 请求。

2. 缓存策略

3. DNS 域名解析

  • 将域名解析为对应的 IP 地址。

4. 建立 TCP 连接

  • 通过三次握手建立可靠的传输通道。
  • 为什么需要三次握手，两次不行吗？
    • 第一次握手：客户端确认自己的 发送能力。
    • 第二次握手：服务端确认自己的 接收能力和发送能力。
    • 第三次握手：客户端确认自己的 接收能力。

5. 发送 HTTP 请求

  • 浏览器向服务器发送 HTTP 报文（包括请求行、请求头、请求体等）。

6. 服务器处理请求并返回响应

  • 服务器处理请求逻辑，生成响应报文并返回给客户端。
  • 响应包含：状态码、响应头、响应体等。

7. 浏览器渲染页面

  1. 解析 HTML，构建 DOM 树。
  2. 解析 CSS，生成 CSSOM。
  3. 合并 DOM 与 CSSOM，生成渲染树。
  4. 布局（Layout）：计算元素位置和大小。
  5. 绘制（Paint）：将像素绘制到屏幕上。
  6. 执行 JS 脚本，处理事件循环，可能引发 重绘/回流。

👉 总结：
输入 URL → 解析 URL → 检查缓存 → DNS 解析 → TCP 三次握手 → HTTP 请求 → 服务器响应 → 浏览器渲染。

1.3 什么是 DOCTYPE， 有何作用？

  • Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

1.4 说说对 html 语义化的理解

  • HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。
    语义化的优点如下：
    1. 在没有CSS样式情况下也能够让页面呈现出清晰的结构
    2. 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
    3. 方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

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

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

  1. 结构层（structural layer）
    结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
  2. 表示层（presentation layer）
    表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，看你要什么风格的，田园的、中式的、地中海的，总之CSS都能办妥
  3. 行为层（behaviorlayer）
    行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM主宰的领域 。

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

  • 严格模式：是以浏览器支持的最高标准运行
  • 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

1.7 对于Web标准以及W3C的理解

  • Web标准简单来说可以分为结构、表现、行为。其中结构是由HTML各种标签组成，简单来说就是body里面写入标签是为了页面的结构。表现指的是CSS层叠样式表，通过CSS可以让我们的页面结构标签更具美感。行为指的是页面和用户具有一定的交互，这部分主要由JS组成
  • W3C，全称：world wide web consortium是一个制定各种标准的非盈利性组织，也叫万维网联盟，标准包括HTML、CSS、ECMAScript等等，web标准的制定有很多好处，比如说：
  1. 可以统一开发流程，统一使用标准化开发工具（VSCode、WebStorm、Sublime），方便多人协作
  2. 学习成本降低，只需要学习标准就行，否则就要学习各个浏览器厂商标准
  3. 跨平台，方便迁移都不同设备
  4. 降低代码维护成本

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

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd
常见的行级元素：span、a、img、button、input、select

  • 块级元素：
  1. 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
  2. 宽度缺少时是它的容器的100%，除非设置一个宽度
  3. 高度、行高以及外边距和内边距都是可以设置的
  4. 块级元素可以容纳其它行级元素和块级元素
  • 行内元素：
  1. 和其它元素都会在一行显示
  2. 高、行高以及外边距和内边距可以设置
  3. 宽度就是文字或者图片的宽度，不能改变
  4. 行级元素只能容纳文本或者其它行内元素
  • 使用行内元素需要注意的是：
  1. 行内元素设置宽度width无效
  2. 行内元素设置height无效，但是可以通过line-height来设置
  3. 设置margin只有左右有效，上下无效
  4. 设置padding只有左右有效，上下无效
  • 可以通过display属性对行内元素和块级元素进行切换：将行内元素转换为块级元素（display:block;），将块级元素转换为行内元素（display:inline;），以及将元素转换为行内块级元素（display:inline-block;）

1.9 H5有哪些新元素和新特性

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

  1. 语义化标签，如：article、footer、header、nav等
  2. 视频video、音频audio
  3. 画布canvas
  4. 表单控件，calemdar、date、time、email
  5. 地理
  6. 本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
  7. 拖拽释放

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

1
2
3
4
5
6
7
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
</script>

在这个示例中，使用 document.getElementById() 方法获取 Canvas 元素，并通过 getContext(“2d”) 获取2D绘图上下文。 然后，使用 fillStyle 属性设置填充颜色，fillRect() 方法绘制一个矩形。

1.11 iframe的作用以及优缺点

优点

  1. 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
  2. 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余。
  3. 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
  4. 方便地实现跨域访问

缺点

  1. 搜索引擎可能无法正确解析 iframe 中的内容
  2. 会阻塞主页面的 onload 事件
  3. 和主页面共享连接池,影响页面并行加载

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

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

1
<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）

1.12 src、href 、url 之间的区别

1、含义

  • src 引用资源替代当前元素，在img、script、iframe中使用
  • href 是超文本引用，指向网络资源所在位置，建立和当前元素或者锚点或者当前文档之间的链接
  • url 是统一资源
    2、区别
  • a、link标签使用 href， href用于在涉及的文档和外部资源之间建立一个关系 ，href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系
  • img、script、iframe标签使用src， 在可替换的元素上使用src ，在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片
  • url 是统一资源定位符，一般来说，对于同一服务器上的文件，应该总是使用相对url用于资源定位