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

前端面试题之HTML篇

news 2025/11/9 2:07:04

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

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

编程新知 2025/11/6 5:46:16

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/11/7 9:55:36

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/11/7 20:34:59

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/10/21 18:20:07

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/11/8 6:45:43

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...

编程新知 2025/11/7 19:30:06

标注工具核心架构分析——主窗口的图像显示

&#x1f3d7;️ 标注工具核心架构分析 &#x1f4cb; 系统概述 主要有两个核心类&#xff0c;采用经典的 Scene-View 架构模式&#xff1a; &#x1f3af; 核心类结构 1. AnnotationScene (QGraphicsScene子类) 主要负责标注场景的管理和交互 &#x1f527; 关键函数&…...

编程新知 2025/9/11 18:09:26