面试题- html篇

文章目录

[1. src和href的区别](#1. src和href的区别)
[2. 对HTML语义化的理解](#2. 对HTML语义化的理解)
[3. DOCTYPE(⽂档类型) 的作⽤](#3. DOCTYPE(⽂档类型) 的作⽤)
- 3.1、浏览器解析文档有哪几种解析模式呢？
- 3.2、如何快速检查页面的解析模式？
[4. script标签中defer和async的区别](#4. script标签中defer和async的区别)
[5. 常⽤的meta标签有哪些](#5. 常⽤的meta标签有哪些)
[6. HTML5有哪些更新](#6. HTML5有哪些更新)
[7. img的srcset属性的作⽤？](#7. img的srcset属性的作⽤？)
[8. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？](#8. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？)
[9. 说一下 web worker](#9. 说一下 web worker)
[10. title与h1的区别、b与strong的区别、i与em的区别？](#10. title与h1的区别、b与strong的区别、i与em的区别？)
[11. iframe 有那些优点和缺点？](#11. iframe 有那些优点和缺点？)
[12. label 的作用是什么？如何使用？](#12. label 的作用是什么？如何使用？)
[13. Canvas和SVG的区别](#13. Canvas和SVG的区别)
[14. head 标签有什么作用，其中什么标签必不可少？](#14. head 标签有什么作用，其中什么标签必不可少？)
15.表单（类型、属性及方法）

1. src和href的区别

相同点 ：src和href都是用于引用外部资源的属性 ，但它们的应用场景和目的 有所不同。
src属性

src属性主要用于嵌入外部资源到当前文档中。
它通常用于<img>, <iframe>, <script>, 和 <video>等标签，用于指定这些元素要加载的外部资源。

html 复制代码

<img src="image.jpg" alt="示例图片">
<iframe src="https://www.example.com" title="示例iframe"></iframe>
<script src="script.js"></script>
<video src="movie.mp4" controls></video>

href属性

href属性用于定义超文本引用 ，它主要用于<a>（链接）、<link>（定义文档关联的外部资源）和<base>标签。
它指向一个URL ，当用户点击或激活这些元素 时，浏览器会加载或跳转到指定的URL。

html 复制代码

<a href="https://www.example.com">访问示例网站</a>
<link href="styles.css" rel="stylesheet">
<base href="https://www.example.com/">

2. 对HTML语义化的理解

HTML语义化 是指使用合适的HTML标签 来清晰地描述页面内容的结构、功能和目的

分为两方面

一方面对与人来说，语义化使得我们更容易理解代码 ，使得项目页面更结构化
另一方面对于浏览器 来说，SEO依赖于html标记 ，html语义化有利于浏览器的SEO

如，使用<h1>到<h6>标签来表示标题，使用<p>标签来表示段落，使用<ul>和<ol>来表示列表,使用<article>、<section>、<nav>、<header>、<footer>表示文章结构

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

作用：DOCTYPE标签是一种标准通用标记语言 的文档类型声明 ，且必须声明在文档的第一行 ，来告知浏览器用何种文档标准来解析这个网页 ，不同的渲染模式 会影响浏览器对CSS和js的解析标准。

3.1、浏览器解析文档有哪几种解析模式呢？

怪异模式（quirks mode） ：此种模式会模拟更旧的浏览器的行为 。如果没有声明DOCTYPE，浏览器默认会以这种模式解析文档。
标准模式（standards mode） ：浏览器使用W3C的标准解析渲染页面。

3.2、如何快速检查页面的解析模式？

HTML文档对象有个 compatMode 属性，用于记录页面的解析模式：

如果文档处于"混杂模式 "，则该属性值为 BackCompat
如果文档处于"标准模式 "或者"准标准模式(almost standards mode)"，则该属性为 CSS1Compat

js 复制代码

const mode = document.compatMode; // 页面的解析模式
if (mode === "BackCompat") {
  // 渲染模式为混杂模式
}

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

defer 和 async属性 都是去异步加载外部的JS脚本文件 ，它们都不会阻塞页面的解析，其区别如下：

执行顺序 ：多个带async属性 的标签，不能保证加载的顺序 ；多个带defer 属性的标签，按照加载顺序执行；
脚本是否并行执行 ：async属性 ，脚本则不应依赖于其他脚本 的执行顺序，因为它们可能并行执行 ；defer属性 ，浏览器指示脚本在文档被解析后执行，

5. 常⽤的meta标签有哪些

meta标签 由name和content两个属性 来定义，来描述一个HTML网页文档的元信息 ，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name

常用的meta标签：

charset：用来描述HTML文档的编码类型
keywords：页面关键词
description：页面描述
refresh：页面重定向和刷新
viewport：适配移动端，可以控制视口的大小和比例，其中content参数有
- width viewport ：宽度(数值/device-width)
- height viewport ：高度(数值/device-height)
- initial-scale ：初始缩放比例
- maximum-scale ：最大缩放比例
- minimum-scale ：最小缩放比例
- user-scalable ：是否允许用户缩放(yes/no）

html 复制代码

<meta charset="UTF-8" >
<meta name="keywords" content="关键词" />
<meta name="description" content="页面描述内容" />
<meta http-equiv="refresh" content="0;url=" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

6. HTML5有哪些更新

全面支持CSS3：
加了一些语义化元素 ：<header>、<mainer>、<footer>、<section>、<nav>等
表单能力加强 ：<input>的新类型（date、email、url等）、新属性（autocomplete、autofocus、required等）
新的属性：ping（用于a与area）、charset（用于meta）、async（用于script）等
定位能力：navigator.geolocation
多媒体支持 ：
- <video>（视频）：poster：默认显示当前视频文件的第一针画面； controls 控制面板；width；height
- <audio>（音频）controls 控制面板； autoplay 自动播放； loop='true' 循环播放
2D/3D 制图支持：支持svg、canvas绘图和动画等
新的缓存策略：Localstorage（长期存储，浏览器关闭数据不丢失）、SessionStorage（浏览器关闭后自动删除）、IndexedDB等
新的网络协议 ：WebSocket
...

7. img的srcset属性的作⽤？

**作用：**根据屏幕密度设置不同的图片

srcset：可以接受多个图片资源，每个资源后面可以跟一个描述符，描述符通常包括图片的宽度（w）和像素密度（x）(设置不同屏幕密度下，img 会自动加载不同的图片)
sizes：定义不同屏幕尺寸下图片的最佳显示宽度

html 复制代码

<!--图片的宽度（w）-->
<img src="image-1000w.jpg"
     srcset="image-400w.jpg 400w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     alt="示例图片">
<!--像素密度（x）-->
<img src="image-1x.jpg"
    srcset="image-1x.jpg 1x,
            image-2x.jpg 2x,
            image-3x.jpg 3x"
    sizes="(max-width: 600px) 300px,
            (max-width: 900px) 600px,
            1200px"
    alt="示例图片">

8. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素 有：a b span img input select strong设置宽高无效，不会自动换行
块级元素 有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p可设宽高，自动换行
空(void)元素 有：<br>、<hr>、<img>、<input>、<link>、<meta>没有闭合标签

9. 说一下 web worker

Web Worker 是一种允许在后台线程中运行 js 脚本 的技术，从而避免长时间运行的任务阻塞主线程。它的主要作用是提升网页性能和用户体验 ，特别是在处理计算密集型任务 时。
创建及使用

检查浏览器是否支持 Web Worker；
使用new Worker()构造函数创建一个 Worker 实例，传入脚本文件路径；
使用 postMessage() 向 Worker 发送数据；
使用 onmessage 监听来自 Worker 的返回结果；
使用 terminate() 方法终止 Worker 线程。

注意事项：

Worker 不能直接访问 DOM ，也不能使用 alert、confirm 等方法；
Worker 线程不能读取本地文件 ，只能加载网络脚本；
不应过度使用 Worker，因为其创建和通信也有资源开销

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

title与h1的区别：

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

b与strong的区别：

b：b标签只是一个简单加粗标签
strong：strong标签有语义，是起到加重语气的效果，strong标签加强字符的语气都是通过粗体来实现的

i与em的区别：

i：内容展示为斜体
em：强调的文本

11. iframe 有那些优点和缺点？

作用： iframe（内联框架）是一种HTML标签 ，用于在当前网页中嵌入另一个网页或文档。它在网页开发中常用于嵌入第三方内容、广告、视频、地图等。

优点：

用来加载速度较慢的内容（如广告）
可以使脚本可以并行下载
可以实现跨子域通信

缺点：

iframe 会阻塞主页面的 onload 事件
无法被一些搜索引擎索识别
会产生很多页面，不容易管理

html 复制代码

<iframe src="url" width="宽度" height="高度"></iframe>

12. label 的作用是什么？如何使用？

label 标签主要作用 是为表单控件提供标签或说明文本，从而增强表单的可访问性和用户体验。

html 复制代码

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

<label>用户名:<input type="text" name="username"></label>

13. Canvas和SVG的区别

核心区别

图形类型‌ ：Canvas绘制位图，缩放易失真；SVG描述矢量图，无限缩放不失真。‌
渲染方式 ‌：Canvas通过js脚本动态绘制（过程式）；SVG通过XML标记静态描述（声明式），可通过CSS或脚本修改。‌
DOM关联 ‌：Canvas是单个HTML元素，绘制的图形不生成独立DOM节点；SVG每个图形元素都是DOM的一部分，可直接操作。

使用场景：

‌Canvas ‌："画像素的画布"------ 适合动态、高频刷新的场景，操作繁琐但像素级控制灵活。如图像密集型游戏、数据可视化、实时动画、像素级操作。‌‌
SVG‌ ："写规则的图纸"------ 适合静态、可交互 的场景，操作直观且缩放不失真。如图标、地图、响应式设计、可交互图表、高质量矢量图形。‌‌
3

特性	Canvas	SVG
图形性质	位图（像素）	矢量图（几何描述）
缩放效果	放大后失真	无限缩放不失真
DOM 关联性	无独立 DOM 元素	每个图形是独立 DOM 元素
可操作性	需重绘整个场景	可直接修改单个图形
事件支持	需手动实现点击检测	原生支持事件绑定
性能	高频绘制更优	静态图形或少量动画更优
内存占用	较低	较高
适用场景	游戏、图像处理、动画	图标、图表、响应式设计

画一个红色圆形

html 复制代码

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
 // 获取 Canvas 上下文（绘制工具）
 const ctx = document.getElementById('myCanvas').getContext('2d');
 // 开始绘制：设置填充色为红色
 ctx.fillStyle = 'red';
 // 画圆（x坐标、y坐标、半径、起始角度、结束角度）
 ctx.beginPath();
 ctx.arc(100, 100, 80, 0, Math.PI * 2);
 ctx.fill(); // 填充圆形，完成绘制
</script>

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
 <!-- 直接用 <circle> 标签描述圆形，无需 JavaScript -->
 <circle cx="100" cy="100" r="80" fill="red" />
</svg>

14. head 标签有什么作用，其中什么标签必不可少？

<head> 标签的作用：‌ 是作为 HTML 文档的头部容器，用于定义文档的元数据 （即关于数据的数据），这些内容‌不会直接显示在网页正文中‌，但对浏览器解析、搜索引擎优化（SEO）、字符编码、页面标题、外部资源引用等至关重要

15.表单（类型、属性及方法）

表单类型：
- email ：能够验证当前输入的邮箱地址是否合法
- url ：验证URL
- number ：只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
- search ：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
- range ：可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
- color ：提供了一个颜色拾取器
- time ：时分秒
- data ：日期选择年月日
- datatime ：时间和日期(目前只有Safari支持)
- datatime-local ：日期时间控件
- week ：周控件
- month：月控件
表单属性 ：
- placeholder ：提示信息
- autofocus ：自动获取焦点
- autocomplete="on" 或者 autocomplete="off" 使用这个属性需要有两个前提：
  - 表单必须提交过
  - 必须有name属性。
- required：要求输入框不能为空，必须有值才能够提交。
- pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\d{10}$"
- multiple：可以选择多个文件或者多个邮箱
- form=" form表单的ID"
表单事件：
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件。

面试题- html篇

文章目录

1. src和href的区别

2. 对HTML语义化的理解

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

3.1、浏览器解析文档有哪几种解析模式呢？

3.2、如何快速检查页面的解析模式？

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

5. 常⽤的meta标签有哪些

6. HTML5有哪些更新

7. img的srcset属性的作⽤？

8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

9. 说一下 web worker

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

11. iframe 有那些优点和缺点？

12. label 的作用是什么？如何使用？

13. Canvas和SVG的区别

14. head 标签有什么作用，其中什么标签必不可少？

15.表单（类型、属性及方法）

8. 行内元素有哪些？块级元素有哪些？空(void)元素有那些？