HTML面试题---专题四
文章目录
- 一、前言
- 二、如何在 `HTML` 中嵌入音频文件?
- 三、解释 `<script>` 标签中 `defer` 属性的用途。
- 四、如何在 `HTML` 中创建粘性/固定导航栏?
- 五、`HTML` 中的 `span` 元素的用途是什么?
- 六、如何使 `HTML` 元素可拖动?
- 七、解释 `<input>` 标签中模式属性的用途。
- 八、如何在 `HTML` 中创建进度条?
- 九、`HTML` 中 `<blockquote>` 元素的用途是什么?
- 十、如何在 `HTML` 中创建包含大写罗马数字的有序列表?
- 十一、解释 `HTML` 中 `contenteditable` 属性的用途。
- 十二、最后

一、前言
HTML
(超文本标记语言)是 Web
开发的基石,掌握 HTML
的基本概念与内容对于在技术面试中脱颖而出至关重要。
本文是 HTML
面试题的专题四。通过掌握这些问题,你将更好地准备应对具有挑战性的面试场景并展示您的专业知识。
万维网联盟 (
W3C
) 提供的官方文档:HTML
— 万维网联盟 (W3C
)(https://html.spec.whatwg.org/multipage/)
HTML
的Mozilla
开发人员网络 (MDN
) 网络文档(https://developer.mozilla.org/en-US/docs/Web/HTML)
二、如何在 HTML
中嵌入音频文件?
要嵌入音频文件,请使用 <audio>
元素并使用 src
属性指定源文件。您可以包含其他属性(例如控件)来添加播放控件。
<audio src="audio.mp3" controls />
三、解释 <script>
标签中 defer
属性的用途。
defer
属性用于指示应在解析 HTML
内容后执行脚本。它允许并行加载其他资源,有助于提高页面加载性能。
<script src="script.js" defer />
四、如何在 HTML
中创建粘性/固定导航栏?
要创建粘性/固定导航栏,请使用 CSS
将导航栏的位置设置为固定并指定顶部或底部值。
<style>.navbar {position: fixed;top: 0;width: 100%;}
</style><div class="navbar"><!-- Navigation links -->
</div>
五、HTML
中的 span
元素的用途是什么?
<span>
元素是一个内联容器,用于对较大内容块中的元素进行分组和设置样式。它本身没有语义意义,但对于样式化或定位内容的特定部分很有用。
<p>My name is <span class="highlight">John Doe</span>.</p>
六、如何使 HTML
元素可拖动?
要使 HTML
元素可拖动,请使用draggable
属性并将其设置为 true
。然后,您可以定义事件处理程序来控制拖放行为。
<div draggable="true">Drag me!</div>
七、解释 <input>
标签中模式属性的用途。
pattern
属性用于指定输入值必须匹配的正则表达式模式。它通常用于表单字段验证。
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="XXX-XXX-XXXX" />
八、如何在 HTML
中创建进度条?
使用 <progress>
元素创建进度条,并使用 value
属性指定当前值,使用 max
属性指定最大值。
<progress value="50" max="100" />
九、HTML
中 <blockquote>
元素的用途是什么?
<blockquote>
元素用于指示引用内容的一部分,例如来自其他来源的引用。它有助于区分引用的内容和周围的文本。
<blockquote><p>This is a quoted text.</p>
</blockquote>
十、如何在 HTML
中创建包含大写罗马数字的有序列表?
使用 <ol>
元素的 type
属性并将其设置为I
以显示大写罗马数字。
<ol type="I"><li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ol>
十一、解释 HTML
中 contenteditable
属性的用途。
contenteditable
属性允许用户编辑元素的内容。它可以应用于任何 HTML
元素,从而在浏览器中实现富文本编辑。
<div contenteditable="true">Editable content</div>
十二、最后
本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕
相关文章:

HTML面试题---专题四
文章目录 一、前言二、如何在 HTML 中嵌入音频文件?三、解释 <script> 标签中 defer 属性的用途。四、如何在 HTML 中创建粘性/固定导航栏?五、HTML 中的 span 元素的用途是什么?六、如何使 HTML 元素可拖动?七、解释 <i…...

stm32项目(11)——基于stm32的俄罗斯方块游戏机
1.功能设计 使用stm32f103zet6平台,以及一块LCD屏幕,实现了一个俄罗斯方块游戏机。可以用按键调整方块的位置、还可以控制方块下降的速度! 2.视频演示 俄罗斯方块 3.俄罗斯方块发展史 俄罗斯方块是一种经典的拼图游戏,由苏联俄罗…...
【计算机网络基础2】IP地址和子网掩码
1、IP地址 网络地址 IP地址由网络号(包括子网号)和主机号组成,网络地址的主机号为全0,网络地址代表着整个网络。 广播地址 广播地址通常称为直接广播地址,是为了区分受限广播地址。 广播地址与网络地址的主机号正…...
ES6-import后是否有{}的区别
在ES6中,import语句用于导入其他模块中的变量、函数、类等。在使用import语句时,可以选择是否使用花括号{}来包裹导入的内容,这会影响导入的内容的使用方式。 1.使用花括号{}: 当使用花括号{}时,表示只导入指定的变量…...

rv1126-rv1109-以太网功能-eth-(原理篇)
这里只是浅浅分析一下 1.主控里面会内置mac 2.mac有组接口接到phy(网络芯片:8201) 3.phy(网络芯片:8201)接到网口 //这里就到达硬件的接口了,大致就是这个原理; 4.然后涉及到软件部分 就是mdio总线;这个总线是注册phy用的; 如果注册失败会导致网口无法使用 [ 1.002751] m…...

【IDEA】反向撤销操作快捷键 ctrl+shift+z 和搜狗热键冲突的解决办法
当我们执行某些操作时与搜狗热键冲突,直接取消搜狗的快捷键即可!!!以下以 ctrlshiftz 为例。 在输入悬浮框右键找到更多设置 按键里面找到系统功能快捷键设置 取消掉冲突的热键即可...

数据结构之----逻辑结构、物理结构
数据结构之----逻辑结构、物理结构 目前我们常见的数据结构分别有: 数组、链表、栈、队列、哈希表、树、堆、图 而它们可以从 逻辑结构和物理结构两个维度进行分类。 什么是逻辑结构? 逻辑结构是指数据元素之间的逻辑关系,而逻辑结构又分为…...
pip 通过git安装库
举例:安装peft库 git clone https://github.com/huggingface/peft.git cd peft python -m pip install . 解释: 使用git clone克隆PEFT库的代码。进入克隆的目录。使用python -m pip install .来安装PEFT库。 补充:使用pip安装到指定编译器…...
C语言——从终端输入 3 个数 a、b、c,按从大到小的顺序输出。
方式一 #include <stdio.h> int main() {int a, b, c, temp;printf("请输入三个数:\n");scanf("%d %d %d", &a, &b, &c);if (a < b) {temp a;a b;b temp;}if (a < c) {temp a;a c;c temp;}if (b < c) {temp…...

【JVM从入门到实战】(二)字节码文件的组成
一、Java虚拟机的组成 二、字节码文件的组成 字节码文件的组成 – 应用场景 字节码文件的组成部分-Magic魔数 什么是魔数? Java字节码文件中的魔数 文件是无法通过文件扩展名来确定文件类型的,文件扩展名可以随意修改,不影响文件的内容。…...
OPC UA常见故障信息代码
错误信息解释0x00000000操作成功。0x40000000值不确定,但原因不明。0x80000000值为坏,但原因不明。Bad_UnexpectedError 0x80010000发生非预期错误。Bad_InternalError 0x80020000编程或配置错误时发生内部错误。Bad_OutOfMemory 0x80030000完成操作所需…...
第20关 快速掌握K8S下的有状态服务StatefulSet
------> 课程视频同步分享在今日头条和B站 大家好,我是博哥爱运维,K8s是如何来管理有状态服务的呢?跟着博哥来会会它们吧! 前面我们讲到了Deployment、DaemonSet都只适合用来跑无状态的服务pod,那么这里的Statefu…...

如何使用https://www.krea.ai/来实现文生图,图生图,
网址:https://www.krea.ai/apps/image/realtime Krea.ai 是一个强大的人工智能艺术生成器,可用于创建各种创意内容。它可以用来生成文本描述的图像、将图像转换为其他图像,甚至写博客文章。 文本描述生成图像 要使用 Krea.ai 生成文本描述…...

点滴生活记录2
我从小跟着我爷爷奶奶,小学六年级转到县城上小学,就没跟我奶奶他们住一起了。十一回家,把奶奶接到我这住,细想,自六年级之后,就很少跟奶奶住一起了。 奶奶(间歇性)耳聋,为…...

【带头学C++】----- 九、类和对象 ---- 9.12 C++之友元函数(9.12.1---12.4)
❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️创做不易,麻烦点个关注❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ ❤️❤️❤️❤️❤️❤️❤️❤️❤️文末有惊喜!献舞一支!❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ 目录 9.12…...
设计模式的定义
1 组合模式: 整体-部分模式,它是一种将对象组合成树状层次结构的模式,用来表示整体和部分的关系,使用户对单个对象和组合对象具有一致的访问性,属于结构型设计模式 1.1 特点: 组合模式使得客户端代码可以一致的处理单个对象和组合对象更容易在组合体内加入新的对象,客户端不…...

【Kubernetes】存储类StorageClass
存储类StorageClass 一、StorageClass介绍二、安装nfs provisioner,用于配合存储类动态生成pv2.1、创建运行nfs-provisioner需要的sa账号2.2、对sa授权2.3、安装nfs-provisioner程序 三、创建storageclass,动态供给pv四、创建pvc,通过storage…...

【LLM】大模型之RLHF和替代方法(DPO、RAILF、ReST等)
note SFT使用交叉熵损失函数,目标是调整参数使模型输出与标准答案一致,不能从整体把控output质量,RLHF(分为奖励模型训练、近端策略优化两个步骤)则是将output作为一个整体考虑,优化目标是使模型生成高质量…...

Spring Boot监听redis过期的key
Redis支持过期监听,可以实现监听过期数据,实现过程如下 1、pom依赖 <!-- Redis--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></depend…...

day01、什么是数据库系统?
数据库系统介绍 1.实例化与抽象化数据库系统2.从用户角度看数据库管理系统的功能2.1 数据库定义功能2.2 数据库操纵2.3 数据库控制2.4 数据库维护功能2.5 数据库语言与高级语言 3.从系统:数据库管理系统应具有什么功能 来源于战德臣的B站网课 1.实例化与抽象化数据库…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

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

dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

高危文件识别的常用算法:原理、应用与企业场景
高危文件识别的常用算法:原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件,如包含恶意代码、敏感数据或欺诈内容的文档,在企业协同办公环境中(如Teams、Google Workspace)尤为重要。结合大模型技术&…...
Java 二维码
Java 二维码 **技术:**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

基于IDIG-GAN的小样本电机轴承故障诊断
目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) 梯度归一化(Gradient Normalization) (2) 判别器梯度间隙正则化(Discriminator Gradient Gap Regularization) (3) 自注意力机制(Self-Attention) 3. 完整损失函数 二…...

Selenium常用函数介绍
目录 一,元素定位 1.1 cssSeector 1.2 xpath 二,操作测试对象 三,窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四,弹窗 五,等待 六,导航 七,文件上传 …...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...

LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
node.js的初步学习
那什么是node.js呢? 和JavaScript又是什么关系呢? node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说, 需要在node.js的环境上进行当JavaScript作为前端开发语言来说,需要在浏览器的环境上进行 Node.js 可…...