HTML面试题(2)

HTML5相比HTML有哪些更新?

  1. 语义化更强的HTML元素:引入artitcle、section、nav、header、footer等元素,帮助创建结构更清晰、语义更明确的网页,有利于SEO和内容的可访问性
  2. 表单控件增强:新增多种表单输入类型(如email、data),直接支持数据验证,提高了表单的易用性和功能性
  3. 音视频支持:原生支持音频(audio)和视频(video),无需依赖外部插件,提高了访问多媒体内容的速度和兼容性
  4. 新的API支持:如Canvas Geolocation Drap and Drop,让网页能支持更复杂的用户交互
  5. Web存储和WebSockets:提供了更先进的数据存储方案(localStorage和sessionStorage)和实时通信能力(WebSockets),让网页应用像传统的桌面应用
  6. 更好的连接性和离线支持:通过应用程序缓存(Application Cache)支持离线应用,使得Web应用能够更灵活地在没有网络的环境下使用

img标签的srcset属性的作用?

提供多个文件源和各自的分辨率,浏览器会根据设备的屏幕尺度和像素密度(DPI)选择最适合的图像。

行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

行内元素(Inline Elements)

行内元素通常位于文本内部,它们不会导致文本换行,而是在内容流中连续展示。这些元素主要用于改变一小块内容的样式或行为,不影响周围的布局。

  • <span>
  • <a>
  • <img>
  • <b>和<i>
  • <input>
  • <select>:在表达中创建下拉选择菜单
  • <strong>

块级元素(Block-level-Elements)

块级元素在页面中通常表现为“块”,会在其前后自动换行,默认占据父元素的完整宽度。

  • <div>
  • <p>
  • <h1>到<h6>
  • <ul> <ol>:分别定义有序列表和无序列表
  • <li>:列表项

空元素(Empty Elements)

空元素是那些只有开始标签,没有结束标签的元素,因为它们不包含任何内容

  • <img>
  • <br>
  • <hr>:水平分割线
  • <input>:用于创建输入字段,如文本框、复选框、单选框等
  • <meta>:提供关于HTML文档的元数据,如定义字符集,页面描述等
  • <link>:用于链接外部资源,如CSS文件

HTML5的离线储存如何使用?

离线存储(Application Cache):允许开发者指定哪些文件(如 HTML 页面、图像、JS 脚本和 CSS 样式表)应该被浏览器缓存,并能够在没有网络连接时访问它们。

1.创建清单文件

        创建一个以.appcache结尾的清单文件,在文件中列出需要缓存的资源。这个文件必须声明MIME类型,即text/cache-manifest

2.引用清单文件

        在HTML页面的<html>中使用manifest属性引用这个清单文件

<html manifest="example.appcache">

3.结构清单文件

# 2024-01-01 v1.0.0
CACHE:
/css/style.css
/js/app.js
/images/logo.png

NETWORK:
*

FALLBACK:
/ /offline.html
  • CACHE:首次下载后会被缓存,支持离线访问。
  • NETWORK:不会缓存,从浏览器请求。*表示默认情况下,所有其他资源都需要网络连接才可以访问。
  • FALLBACK:备用页面的路径。如果用户请求的资源无法访问,将跳转到备用路径。

浏览器如何对离线缓存的资源进行管理和加载?

管理

  1. 创建并引用清单文件
  2. 下载资源到缓存:用户首次访问时,浏览器解析清单文件并下载指定资源到应用程序缓存中
  3. 更新缓存:每次访问页面时,浏览器都会检查清单文件是否更新。如果更新,重新下载清单文件中指定的所有资源并替换掉旧缓存。
  4. 离线访问:资源被缓存,即可离线访问

加载

  1. 缓存中存在资源,从缓存加载
  2. 缓存中不存在资源且设备离线,使用备用资源

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

没钱买KEGG怎么办?REACTOME开源通路更强大

之前搜集免费生物AI插图时简单提到了通路数据库Reactome&#xff08;https://reactome.org/&#xff09;&#xff0c; 那些精美的生物插图只能算是该数据库附赠的小礼品&#xff0c;他的主要功能还是作为一个开源的通路数据库&#xff0c;为相关领域的研究者提供直观的可视化生…

spi 回环

///tx 极性0 &#xff08;sclk信号线空闲时为低电平&#xff09; /// 相位0 (在sclk信号线第一个跳变沿进行采样) timescale 1ns / 1ps//两个从机 8d01 8d02 module top(input clk ,input rst_n,input [7:0] addr ,input …

Lc70--319.两个数组的交集(二分查找)---Java版

1.题目描述 2.思路 用集合求交集&#xff0c;因为集合里面的元素要满足不重复、无序、唯一。使得集合在去重、查找和集合操作&#xff08;如交集、并集、差集等&#xff09;中非常高效和方便。 3.代码实现 class Solution {public int[] intersection(int[] nums1, int[] nu…

项目2:简易随机数生成器 --- 《跟着小王学Python·新手》

项目2&#xff1a;简易随机数生成器 — 《跟着小王学Python新手》 《跟着小王学Python》 是一套精心设计的Python学习教程&#xff0c;适合各个层次的学习者。本教程从基础语法入手&#xff0c;逐步深入到高级应用&#xff0c;以实例驱动的方式&#xff0c;帮助学习者逐步掌握P…

qml绘制折线图

参考链接 qml绘制折线图 在QML&#xff08;Qt Modeling Language&#xff09;中绘制折线图可以通过使用Canvas元素或ChartView元素来实现。以下是两种方法的示例&#xff1a; 方法一&#xff1a;使用Canvas元素 Canvas元素允许你在QML中绘制自定义图形。你可以通过JavaScrip…

MODBUS TCP转CANOpen网关

Modbus TCP转CANopen网关 型号&#xff1a;SG-TCP-COE-210 产品用途 本网关可以实现将CANOpen接口设备连接到MODBUS TCP网络中&#xff1b;并且用户不需要了解具体的CANOpen和Modbus TCP 协议即可实现将CANOpen设备挂载到MODBUS TCP接口的 PLC上&#xff0c;并和CANOpen设备…

Spring Cloud Alibaba [Gateway]网关。

1 简介 网关作为流量的入口&#xff0c;常用功能包括路由转发、权限校验、限流控制等。而springcloudgateway 作为SpringCloud 官方推出的第二代网关框架&#xff0c;取代了Zuul网关。 1.1 SpringCloudGateway特点: &#xff08;1&#xff09;基于Spring5&#xff0c;支持响应…

delphi fmx android 离线人脸识别

搜遍全网都没有找到delphi android 能用的 离线人脸识别,无需注册什么开发者 有这方面需求的可以用fsdk 这边用的luxand.FSDK8.0 android下的注册号要自己找下 1,用老猫的工具将android 下的sdk,FSDK.java 编译成FSDK.jar 老猫的工具 2,用上面的工具将FSDK.jar 生成de…

小试银河麒麟系统OCR软件

0 前言 今天在国产电脑上办公&#xff0c;需要从一些PDF文件中复制文字内容&#xff0c;但是这些PDF文件是图片转换生成的&#xff0c;不支持文字选择和复制&#xff0c;除了手工输入&#xff0c;我们还可以使用OCR。 1 什么是OCR OCR &#xff08;Optical Character Recogni…

小程序租赁系统打造便捷租赁体验助力共享经济发展

内容概要 小程序租赁系统是一个极具创新性的解决方案&#xff0c;它通过简化租赁过程&#xff0c;让物品的共享变得便捷流畅。对于那些有闲置物品的用户来说&#xff0c;他们可以轻松发布自己的物品&#xff0c;让其他需要的人快速找到并租借。而对于找东西的人来说&#xff0…

Spring Boot汽车资讯:科技与汽车的新篇章

摘要 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了汽车资讯网站的开发全过程。通过分析汽车资讯网站管理的不足&#xff0c;创建了一个计算机管理汽车资讯网站的方案。文章介绍了汽车资讯网站的系统分析部分&…

【Python绘图】两种绘制混淆矩阵的方式 (ConfusionMatrixDisplay(), imshow()) 以及两种好看的colorbar

在机器学习领域&#xff0c;混淆矩阵是一个评估分类模型性能的重要工具。它不仅展示了模型预测的准确性&#xff0c;还揭示了模型在不同类别上的表现。本文介绍两种在Python中绘制混淆矩阵的方法&#xff1a;ConfusionMatrixDisplay() 和 imshow()&#xff0c;以及两种好看的co…

【Nginx从入门到精通】03 、安装部署-让虚拟机可以联网

文章目录 总结一、配置联网【Minimal 精简版】1.1、查看网络配置1.2、配置ip地址 : 修改配置文件 <font colororange>ifcfg-ens33Stage 1&#xff1a;输入指令Stage 2&#xff1a;修改参数Stage 3&#xff1a;重启网络Stage 4&#xff1a;测试上网 二、配置联网【Everyth…

android studio无法下载,Could not GET xxx, Received status code 400

-- 1. 使用下面的地址代替 原地址: distributionUrlhttps\://services.gradle.org/distributions/gradle-6.5-all.zip 镜像地址: distributionUrlhttps\://downloads.gradle-dn.com/distributions/gradle-6.5-all.zips 上面的已经不好用了 https\://mirrors.cloud.tencent.c…

Cursor安装Windows / Ubuntu

一、安装 1、下载软件 2、安装依赖 #安装fuse sudo apt-get install fuse3、将cursor添加到应用程序列表 sudo mv cursor-0.42.5x86_64.AppImage /opt/cursor.appimage #使用自己版本号替换 sudo chmod x /opt/cursor.appimage #给予可执行权限 sudo nano /usr/share/applic…

2、计算机网络七层封包和解包的过程

计算机网络osi七层模型 1、网络模型总体预览2、数据链路层4、传输层5.应用层 1、网络模型总体预览 图片均来源B站&#xff1a;网络安全收藏家&#xff0c;没有本人作图 2、数据链路层 案例描述&#xff1a;主机A发出一条信息&#xff0c;到路由器A&#xff0c;这里封装目标MAC…

Elastic 和 Red Hat:加速公共部门 AI 和机器学习计划

作者&#xff1a;来自 Elastic Michael Smith 随着公共部门组织适应数据的指数级增长&#xff0c;迫切需要强大、适应性强的解决方案来管理和处理大型复杂数据集。人工智能 (Artificial intelligence - AI) 和机器学习 (machine learning - ML) 已成为政府机构将数据转化为可操…

【蓝桥杯备赛】深秋的苹果

# 4.1.1. 题目解析 要求某个区间内的数字两两相乘的总和想到前缀和&#xff0c;但是这题重点在于两两相乘先硬算&#xff0c;找找规律&#xff1a; 比如要算这串数字的两两相乘的积之和&#xff1a; 1, 2, 3 1*2 1*3 2*3 1*(23) 2*3 前缀和数组&#xff1a; 1 3 6 发现…

迷你游戏作为电子学习中的趋势工具

多年来&#xff0c;电子学习的格局发生了显著变化&#xff0c;引入了新技术和方法&#xff0c;以更有效地吸引学习者。在这些创新中&#xff0c;迷你游戏的使用已成为一种动态趋势。迷你游戏是紧凑而专注的互动活动&#xff0c;越来越多地被整合到电子学习平台中&#xff0c;以…

6.C操作符详解,深入探索操作符与字符串处理

C操作符详解&#xff0c;深入探索操作符与字符串处理 C语言往期系列文章目录 往期回顾&#xff1a; C语言是什么&#xff1f;编程界的‘常青树’&#xff0c;它的辉煌你不可不知VS 2022 社区版C语言的安装教程&#xff0c;不要再卡在下载0B/s啦C语言入门&#xff1a;解锁基础…