前端面试题之HTML篇

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表示强调文本。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/133010.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

skynet学习笔记01— skynet开发环境搭建(超详细)与第一个skynet程序

00、参考资料 https://blog.csdn.net/qq769651718/category_7480207.html 01、前置准备 开发所在目录 mhzzjmhzzj-virtual-machine:~/work/skynetStudy$ pwd /home/mhzzj/work/skynetStudy前置准备 mhzzjmhzzj-virtual-machine:~/work/skynetStudy$ sudo apt install lua5…

CSS示例001:鼠标放div上,实现旋转、放大、移动等效果

GPT能够很好的应用到我们的代码开发中&#xff0c;能够提高开发速度。你可以利用其代码&#xff0c;做出一定的更改&#xff0c;然后实现效能。 css实战中&#xff0c;经常会看到这样的场景&#xff0c;鼠标放到一个图片或者一个div块状时候&#xff0c;会出现旋转、放大、移动…

QtC++与QToolButton详解

介绍 QToolButton 是 Qt 中的一个控件类&#xff0c;用于创建工具按钮&#xff0c;它有以下主要作用和特点&#xff1a; 工具按钮&#xff1a; QToolButton 用于创建工具按钮&#xff0c;允许用户执行各种操作&#xff0c;如启动功能、弹出菜单、打开文件等。工具按钮通常用于…

地址的层次性

地址的层次性 当地址总数并不是很多的情况下&#xff0c;有了唯一地址就可以定位相互通信的主体。然而当地址的总数越来越多时&#xff0c;如何高效地从中找出通信的目标地址将成为一个重要的问题。为此人们发现地址除了具有唯一性还需要具有层次性。其实&#xff0c;在使用电…

基于跳蛛算法的无人机航迹规划-附代码

基于跳蛛算法的无人机航迹规划 文章目录 基于跳蛛算法的无人机航迹规划1.跳蛛搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用跳蛛算法来优化无人机航迹规划。 1.跳蛛搜索算法 …

react配置二级路由

1.在createBrowserRouter上添加basename属性&#xff0c;比如 const RouterRender createBrowserRouter([{path: /,element: <App><Login></Login></App>},...SystemRouter,...InventoryRouter,...FlowManageRouter,{path: "*",element: &…

Verilog 基础知识(一) Verilog 基础语法与注意事项

基础知识 0.1 模块(Module) Verilog中的module可以看成一个具有输入输出端口的黑盒子&#xff0c;该黑盒子有输入和输出接口(信号)&#xff0c;通过把输入在盒子中执行某些操作来实现某项功能。(类似于C语言中的函数) 图1 模块示意图 0.1.1 模块描述 图1 所示的顶层模块(top…

UNI-APP_获取手机品牌

在uni-app中&#xff0c;使用uni.getSystemInfoSync().brand可以获取设备的品牌信息。根据不同设备的品牌&#xff0c;uni.getSystemInfoSync().brand可能返回以下一些常见值 “Apple” - 苹果 “Samsung” - 三星 “Huawei” - 华为 “Xiaomi” - 小米 “OPPO” - OPPO “Vivo…

PaddleX数据集规范

目录 1、图像分类任务 2、目标检测任务 3、主体检测任务 4、图像分割任务 5、特征检索任务 6、文本检测任务 7、文本识别任务 8、版面分析任务 9、表格识别任务 10、关键信息抽取任务 11、点云3D目标检测任务 12、多目3D目标检测任务 13、单目3D目标检测任务 14、长…

CSS鼠标悬浮变小手

当我们在网页设计中需要用户点击或者选择某个元素时&#xff0c;很多时候会使用鼠标悬浮变小手的效果&#xff0c;这种效果可以让用户更快速的完成操作&#xff0c;提高用户体验。 在CSS中设置鼠标悬浮变小手效果非常简单&#xff0c;只需要使用cursor属性即可。以下是具体步骤…

理德外汇: 美元暴跌创近一个半月新低

10月30日-11月3日市场综述&#xff1a;央行超级周果然名不虚传&#xff01;上周美联储鸽派暂停升息令全球股债疯狂暴拉&#xff0c;加上非农就业数据疲弱&#xff0c;市场对美联储再加息的预期降温&#xff0c;美股创下今年最大单周增幅&#xff0c;美元持续下滑&#xff0c;与…

【Redis】Redis整合SSMRedis中的缓存穿透、雪崩、击穿的原因以及解决方案(详解)

目录&#xff1a; 目录 一&#xff0c;SSM整合redis 二&#xff0c;redis注解式缓存 三&#xff0c;Redis中的缓存穿透、雪崩、击穿的原因以及解决方案&#xff08;附图&#xff09; 一&#xff0c;SSM整合redis 1.原因&#xff1a; 整合SSM和Redis可以提升系统的性能、可…

2023 年如何学习编程

在当今的数字时代&#xff0c;程序员的角色比以往任何时候都更加重要。编程技能几乎在每个行业都受到高度重视和追捧。从科技初创公司到成熟企业&#xff0c;对具有适当技术能力的开发人员的需求巨大。 无论是考虑转行还是开始&#xff0c;现在都是成为一名程序员的激动人心的…

2023世界传感器大会开幕,汉威科技多领域创新产品引瞩目

11月5日&#xff0c;2023世界传感器大会在郑州国际会展中心正式拉开帷幕。据悉&#xff0c;本次大会由河南省人民政府、中国科学技术协会主办&#xff0c;郑州市人民政府、河南省工业和信息化厅、河南省科学技术协会、中国仪器仪表学会承办。 大会由“一会一赛一展”组成&#…

【Liunx系统编程】命令模式3

目录 一&#xff0c;zip/unzip压缩指令 二&#xff0c;tar打包/压缩/解包指令 三&#xff0c;uname获取系统信息指令 四&#xff0c;Liunx下常用且重要的按键和关机指令 五&#xff0c;文件之间的互传 1&#xff0c;Windows与Linux之间的互传 2&#xff0c;Linux系统之间…

3.22每日一题(二重积分求平面区域面积)

先复习求平面积分的公式 注&#xff1a;面对平面积分直接使用二重积分对1求积分即可&#xff1b;所以只需要背二重积分的两个公式&#xff1a; 1、直角坐标下对1积分 2、极坐标下对1积分 xy-1是等轴双曲线&#xff01;&#xff01; 1、先画图定区域 2、选择先对x积分还是先对…

深入了解Typescript中type和interface具体区别?

前言 新手刚开始学习 TypeScript 时&#xff0c;往往会对 type 和 interface 的使用场景和方式感到困惑。因此&#xff0c;本文旨在总结 type 和 interface 的概念和用法。 一、概念 type&#xff1a;类型别名 概念&#xff1a;允许为一个或多个数据类型&#xff08;例如 str…

android studio app红叉无法编译

1.起源 今天前台小姐姐穿了一个白色的超短裙,和小姐姐聊了聊人生梦想,聊生活趣事,回到工位你马....报了一个这错误,无法运行了,明天就要打包测试了,顿时菊花一紧,急了一头汗,这你马咋回事,看了旁边的产品肥仔,迷着小眼露出了银建的笑容.开始排雷.... 意思就是说gradle初始化失…

WARNING: tokenization mismatch: 403 vs. 406. (ignored) LLaVa

LLaVa换BaiChuan底座报错 WARNING: tokenization mismatch: 403 vs. 406. (ignored) 解决 cd ~/.cache/huggingface/hub/models--baichuan-inc--Baichuan2-7B-Base/snapshots/0cc6a61c06cd0734270151109d07cf86ef0ace53 vim tokenizer_config.json把bos_token改成true&#…

(四) Python 使用Pandas生成日报

一、介绍 Pandas是Python中一个强大的数据处理库&#xff0c;它提供了许多功能强大的数据结构和数据分析工具。在本文中&#xff0c;我们将介绍Pandas的基本概念和如何使用它生成一个包含今天到未来20个工作日的日期列表的Excel文件。 Pandas提供了大量的数据结构和数据分析工…