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

前端面试题之HTML篇

news 2026/4/7 20:27:01

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

大量频繁发起连接导致瀚高数据库进程被信号6杀死

文章目录环境症状问题原因解决方案环境 系统平台&#xff1a;银河麒麟 &#xff08;龙芯&#xff09; 版本&#xff1a;4.5.1 症状 数据库版本&#xff1a;瀚高安全版V4.5.1.2 介质 hgdb-see-4.5.1.2-ee53424.loongarch64.rpm 信号6的报错信息&#xff1a; 2025-04-18 08…...

编程新知 2026/4/7 19:38:58

UE5 碰撞体组件与导航网格结果存在偏移的问题

问题是在大量使用球形collision发现的&#xff0c;最初以为是偏离但是方形的collision是正确的胶囊体的Collision也是有偏移的然后经过一系列的尝试&#xff0c;最终发觉如下现象。在对胶囊体做测试时&#xff0c;我并不需要一个坐标000的躺着的胶囊体&#xff0c;我为它设置了…...

编程新知 2026/4/7 19:04:26

Windows 11 LTSC系统快速安装微软商店：3分钟完成完整解决方案

Windows 11 LTSC系统快速安装微软商店&#xff1a;3分钟完成完整解决方案 【免费下载链接】LTSC-Add-MicrosoftStore Add Windows Store to Windows 11 24H2 LTSC 项目地址: https://gitcode.com/gh_mirrors/ltscad/LTSC-Add-MicrosoftStore Windows 11 LTSC版本以其卓越…...

编程新知 2026/4/7 18:46:10

Hive 3.1.2安装与MySQL元数据库配置实战指南

1. Hive 3.1.2安装前的准备工作 在开始安装Hive之前&#xff0c;我们需要确保环境已经准备就绪。Hive作为Hadoop生态系统中的数据仓库工具&#xff0c;依赖Java和Hadoop环境。我建议先检查Java版本&#xff0c;最好使用JDK 8或JDK 11&#xff0c;这两个版本在生产环境中最为稳定…...

编程新知 2026/4/7 17:59:17

Neomake Makers深度解析：如何为50+编程语言配置lint规则

Neomake Makers深度解析&#xff1a;如何为50编程语言配置lint规则 【免费下载链接】neomake Asynchronous linting and make framework for Neovim/Vim 项目地址: https://gitcode.com/gh_mirrors/ne/neomake Neomake是Vim/Neovim的异步代码检查框架&#xff0c;它通过…...

编程新知 2026/4/7 16:38:35

3分钟掌握RePKG：Wallpaper Engine资源提取与转换全攻略

3分钟掌握RePKG&#xff1a;Wallpaper Engine资源提取与转换全攻略 【免费下载链接】repkg Wallpaper engine PKG extractor/TEX to image converter 项目地址: https://gitcode.com/gh_mirrors/re/repkg RePKG是一款专为Wallpaper Engine设计的强大资源提取工具&#x…...

编程新知 2026/4/7 16:22:30

深入解析gbplanner_ros：基于图的自主探索路径规划算法在复杂地下环境中的应用

1. 什么是gbplanner_ros&#xff1f; 如果你正在研究机器人自主探索技术&#xff0c;特别是针对地下矿洞这类复杂环境&#xff0c;那么gbplanner_ros这个基于图的路径规划算法可能会引起你的兴趣。我第一次接触这个算法是在一个地下管道巡检机器人项目中&#xff0c;当时我们尝…...

编程新知 2026/4/7 16:08:18

基于SAC强化学习算法的ROS2机器人运动控制实战解析

1. SAC强化学习算法与ROS2的完美结合 第一次接触SAC算法是在三年前的一个机器人项目中&#xff0c;当时我们团队正在为移动机器人寻找一种既稳定又高效的决策算法。试过DQN、PPO等主流方法后&#xff0c;最终SAC以其出色的样本效率和稳定性胜出。现在结合ROS2的强大通信能力&am…...

编程新知 2026/4/7 15:04:57

BiliTools终极指南：3分钟掌握跨平台B站资源管理工具

BiliTools终极指南&#xff1a;3分钟掌握跨平台B站资源管理工具 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持下载视频、番剧等等各类资源 项目地址: https://gitcode.com/GitHub_Trending/bilit/BiliTools 还在…...

编程新知 2026/4/7 14:58:54

性能引擎：G-Helper让创意工作流告别卡顿与过热

性能引擎&#xff1a;G-Helper让创意工作流告别卡顿与过热 【免费下载链接】g-helper Lightweight, open-source control tool for ASUS laptops and ROG Ally. Manage performance modes, fans, GPU, battery, and RGB lighting across Zephyrus, Flow, TUF, Strix, Scar, and…...

编程新知 2026/4/7 14:48:48