当前位置： 首页 > news >正文

前端面试题之HTML篇

news 2026/2/11 6:09:26

1、src 和 href 的区别

具有src的标签有：script、img、iframe
具有href的标签有：link、a

区别
src 是source的缩写。表示源的意思，指向资源的地址并下载应用到文档中。会阻塞文档的渲染，也就是为什么js脚本放在底部而不是头部的原因。

<script src="./index.js"></script>
<img src="./cat.jpeg" alt="">
<iframe src="./iframe-page.html"></iframe>

href 是hypertext reference 的缩写。表示超文本引用。用来引用外部的资源。不会阻塞文档的渲染。

<link rel="stylesheet" href="./index.css">
<a href="https://baidu.com">跳转</a>

@import 和 link 的区别

  1. link 在文档加载的时候一并加载，@import在页面完全加载之后加载。
  2. @import 只能加载css，link还可以定义RSS等其他事务；
  3. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  4. link 支持使用js控制dom改变样式，而@import不支持。

2、DOCTYPE（文档类型）的作用

必须写在HTML文件的第一行，例如：<!DOCTYPE html>，用来告诉浏览器应该以什么方式（html或者xhtml）解析页面，不同的渲染方式会影响css甚至Javascript的解析。

浏览器渲染页面有两种模式（可用通过document.compatMode获取）：

  • CSS1Compat（HTML strick mode 标准模式）：大多数网页都是这个模式，浏览器使用W3C的标准来渲染页面，在标准模式中，浏览器使用其支持的最高标准来渲染页面。
  • BackCompat（XHTML Quirk mode 怪异模式）：浏览器使用自己的怪异模式来渲染页面，在怪异模式中，浏览器使用比较宽松的向后兼容的方式显示。

3、script 中defer 和 async的区别

    <script src="./index.js"></script><script async src="./index-async.js"></script><script defer src="./index-defer.js"></script>

如果没有defer或者async，浏览器会立即加载并执行js脚本，会阻塞页面的渲染，如果文件比较大或者脚本比较耗时的话，页面就会出现卡顿的情况。

下面这张图可以直观看出它们的区别：
在这里插入图片描述

绿色：表示页面渲染。蓝色：表示资源加载。红色：表示js脚本执行。

从图中不难看出，<script>会立即加载并执行脚本，阻塞了页面的渲染。<script defer>和<script async>加载资源的时候不会阻塞页面渲染，但是<script async>资源加载完成之后会立即执行js脚本。<script defer>是页面渲染完成之后（DOMContentLoaded事件出发之前）执行脚本。

<script async>和<script defer>的区别

  • <script async>多个带async标签是异步加载，也就是并行下载。脚本也是并行执行。
  • <script defer>多个带defer标签是异步下载，按加载顺序执行。

4、iframe 有哪些优点和缺点

优点：

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

缺点：

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

5、label 标签的使用

label标签用来定义表单控件的关系，当用户点击label标签时，浏览器会自动将焦点转到和label标签关联的表单控件。

用法一：

    <label for="username">点我聚焦：</label><input type="text" id="username">

用法二：

    <label for="password">密码:<input type="password" id="password"></label>

6、Canvas 和 SVG的区别

SVG
SVG 是可缩放矢量图形，是基于可扩展标记语言XML描述的2D图形，基于XML意味着每个DOM都是可用的，可以为每个元素附加Javascript事件处理器，在SVG中，每个绘制的图形叫做对象，对象的属性发生变化时，浏览器会自动重现图形。

特点：

  • 不依赖分辨率（可做一些logo之类）
  • 支持Javascript事件处理器
  • 最适合做大型渲染区域的页面（比如google地图）
  • 过于复杂会减缓渲染速度（任何基于 DOM的应用都不快）
  • 不适合做游戏应用

Canvas
通过Javascript来绘制图形，是逐像素进行渲染的，其位置发生改变，就会重新进行绘制。

特点

  • 依赖分辨率
  • 弱文本渲染能力
  • 不支持事件处理能力
  • 能够以.png或者.jpg 保存图像
  • 最适合做大型密集型游戏，其中很多对象会频繁重绘

7、浏览器乱码的原因是什么？如何解决

网页源代码使用GBK编码，而内容中的中文使用的是UTF-8编码，就会出现乱码，反之亦然。

解决办法就是将编码格式转化成一致的编码。

8、title和h1、strong和b、i和em的区别？

  • title和h1 ：title表示文档的标题，h1 有明确的层级意义，对页面的抓取有很大的影响。
  • strong和b ：strong 有具体的语义，具有加重语气的效果。而b只是简单的字体加粗，搜索引擎更侧重于strong标签。
  • i和em：i 是斜体，em表示强调文本。

相关文章：

前端面试题之HTML篇

1、src 和 href 的区别 具有src的标签有&#xff1a;script、img、iframe 具有href的标签有&#xff1a;link、a 区别 src 是source的缩写。表示源的意思&#xff0c;指向资源的地址并下载应用到文档中。会阻塞文档的渲染&#xff0c;也就是为什么js脚本放在底部而不是头部的…...

编程日记 2023/11/5 22:30:00

Django ORM：数据库操作的Python化艺术

Django的对象关系映射器&#xff08;ORM&#xff09;是其核心功能之一&#xff0c;允许开发者使用Python代码来定义、操作和查询数据库。这篇文章将带你深入了解Django ORM的强大之处&#xff0c;从基本概念到高级查询技巧&#xff0c;提供丰富的示例帮助你掌握使用Django ORM进…...

编程日记 2023/11/5 22:28:59

react受控组件与非受控组件

React中的组件可以分为受控组件和非受控组件&#xff1a; 受控组件&#xff1a;受控组件是指组件的值受到React组件状态的控制。通常在组件中&#xff0c;我们会通过state来存储组件的值&#xff0c;然后再将state的值传递给组件的props&#xff0c;从而实现组件的双向数据绑定…...

编程日记 2023/11/5 22:27:58

小米产品面试题：淘宝为何需要确认收货？京东为何不需要？

亲爱的小米粉丝们&#xff0c;大家好&#xff01;我是小米&#xff0c;一个热爱技术、热衷于分享的小编。今天&#xff0c;我要和大家聊聊一个有趣的话题&#xff1a;为什么淘宝购物需要确认收货&#xff0c;而京东不需要&#xff1f;这可是一个让很多人纳闷的问题&#xff0c;…...

编程日记 2023/11/5 22:26:57

（1）上位机底部栏 UI如何设置

上位机如果像设置个多页面切换&#xff1a; 位置&#xff1a; 代码如下&#xff1a; "tabBar": {"color": "black","selectedColor": "#d43c33","borderStyle":"black","backgroundColor": …...

编程日记 2023/11/5 22:24:54

中国多主数据库：压强投入，期待破茧

拿破仑曾说&#xff1a;“战争的艺术就是在某一点上集中最大优势兵力”&#xff0c;强调了力量集中的重要性。 如今&#xff0c;国际形势风云变幻&#xff0c;西方世界对中国的围剿不再仅仅体现在军事和地缘政治上&#xff0c;而更多表现在经济与科技上。在科技领域&#xff0…...

编程日记 2023/11/5 22:21:50

JavaScript在ES6及后续新增的常用新特性

JavaScript经历了不同标本的迭代&#xff0c;在不断完善中会添加不同的新特性来解决前一个阶段的瑕疵&#xff0c;让我们开发更加便捷与写法更加简洁&#xff01; 1、箭头函数&#xff1a; 箭头函数相比传统的函数语法&#xff0c;具有更简洁的语法、没有自己的this值、不会绑…...

编程日记 2023/11/5 22:20:49

试试流量回放，不用人工写自动化测试case了

大家好&#xff0c;我是洋子&#xff0c;接触过接口自动化测试的同学都知道&#xff0c;我们一般要基于某种自动化测试框架&#xff0c;编写自动化case&#xff0c;编写自动化case的依据来源于接口文档&#xff0c;对照接口文档里面的请求参数进行人工添加接口自动化case 其实…...

编程日记 2023/11/5 22:19:48

密钥管理系统功能及作用简介 安当加密

密钥管理系统的功能主要包括密钥生成、密钥注入、密钥备份、密钥恢复、密钥更新、密钥导出和服务&#xff0c;以及密钥的销毁等。 密钥生成&#xff1a;通过输入一到多组的密钥种子&#xff0c;按照可再现或不可再现的模式生成所需要的密钥。一般采用不可再现模式作为密钥生成…...

编程日记 2023/11/5 22:18:47

vue中watch属性的用法

在Vue中&#xff0c;watch属性用于监听一个数据的变化&#xff0c;并且在数据变化时执行一些操作。它可以观察一个具体的数据对象&#xff0c;从而在该数据对象发生变化时触发对应的回调函数。 使用watch属性的步骤如下&#xff1a; 在Vue实例中添加一个watch对象 new Vue({…...

编程日记 2023/11/5 22:17:46

Redis-使用java代码操作Redis

&#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Linux》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有一定基础的程序员&#xff0c;这…...

编程日记 2023/11/5 22:14:43

0基础学习PyFlink——事件时间和运行时间的窗口

大纲 定制策略运行策略Reduce完整代码滑动窗口案例参考资料 在 《0基础学习PyFlink——时间滚动窗口(Tumbling Time Windows)》一文中&#xff0c;我们使用的是运行时间(Tumbling ProcessingTimeWindows)作为窗口的参考时间&#xff1a; reducedkeyed.window(TumblingProcess…...

编程日记 2023/11/5 22:13:41

Git Rebase 优化项目历史

在软件开发过程中&#xff0c;版本控制是必不可少的一环。Git作为当前最流行的版本控制系统&#xff0c;为开发者提供了强大的工具来管理和维护代码历史。git rebase是其中一个高级特性&#xff0c;它可以用来重新整理提交历史&#xff0c;使之更加清晰和线性。本文将详细介绍g…...

编程日记 2023/11/5 22:12:39

两种MySQL OCP认证应该如何选？

很多同学都找姚远老师说要参加MySQL OCP认证培训&#xff0c;但绝大部分同学并不知道MySQL OCP认证有两种&#xff0c;以MySQL 8.0为例。 一种是管理方向&#xff0c;叫&#xff1a;Oracle Certified Professional, MySQL 8.0 Database Administrator&#xff08;我考试的比较…...

编程日记 2023/11/5 22:11:38

Java用log4j写日志

日志可以方便追踪和调试问题&#xff0c;以前用log4net写日志&#xff0c;换Java了改用log4j写日志&#xff0c;用法和log4net差不多。 到apache包下载下载log4j的包&#xff0c;解压后把下图两个jar包引入工程 先到网站根下加一个log4j2.xml的配置文件来配置日志的格式和参…...

编程日记 2023/11/5 22:10:37

PCTA认证考试-01_TiDB数据库架构概述

TiDB 数据库架构概述 一、学习目标 理解 TiDB 数据库整体结构。了解 TiDB Server&#xff0c;TiKV&#xff0c;TiFlash 和 PD 的主要功能。 二、TiDB 体系架构 1. TiDB Server 2. TiKV OLTP 3. Placement Driver 4. TiFlash OLAP OLTPOLAPHTAP...

编程日记 2023/11/5 22:09:36

路由过滤路由引入

目录 一、实验拓扑 二、实验需求 三、实验步骤 1、配置IP地址 2、配置RIP和OSPF 3、配置路由引入 4、使用路由过滤&#xff0c;使 R4 无法学到 R1 的业务网段路由&#xff0c;要求使用 prefix-list 进行匹配 5、OSPF 区域中不能出现 RIP 协议报文 一、实验拓扑 二、实…...

编程日记 2023/11/5 22:08:35

视频剪辑技巧：批量合并视频，高效省时，添加背景音乐提升品质

随着社交媒体的兴起&#xff0c;视频制作越来越受到人们的关注。掌握一些视频剪辑技巧&#xff0c;可以让我们轻松地制作出令人惊艳的视频。本文将介绍一种高效、省时的视频剪辑技巧&#xff0c;帮助您批量合并视频、添加背景音乐&#xff0c;并提升视频品质。现在一起来看看云…...

编程日记 2023/11/5 22:07:34

数据可视化篇——pyecharts模块

在之前的文章中我们已经介绍过爬虫采集到的数据用途之一就是用作可视化报表&#xff0c;而pyecharts作为Python中可视化工具的一大神器必然就受到广大程序员的喜爱。 一、什么是Echarts&#xff1f; ECharts 官方网站 : https://echarts.apache.org/zh/index.html ECharts 是…...

编程日记 2023/11/5 22:06:33

Python--快速入门二

Python--快速入门二 1.Python数据类型 1.可以通过索引获取字符串中特定位置的字符&#xff1a; a "Hello" print(a[3]) 2.len函数获取字符串的长度&#xff1a; a "Hello" print(a) print(len(a)) 3.空值类型表示完全没有值&#xff1a; 若不确定当…...

编程日记 2023/11/5 22:04:30

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/11/14 3:06:30

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/10/22 11:16:20

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2026/2/8 16:24:38

边缘计算医疗风险自查APP开发方案

核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

编程新知 2026/2/10 13:18:55

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

编程新知 2026/2/9 15:41:39

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/6 11:05:22

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/11/20 7:13:43

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/12/10 20:45:02