常见面试题之HTML

news/2024/2/25 19:55:25/文章来源:https://blog.csdn.net/xxq_0217/article/details/135549329

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

HTML 中的行内元素(inline elements)通常用于在一行内显示,不会独占一行的空间。常见的行内元素有:

  • <span>:用于对文本或其他内联元素进行分组或添加样式。

  • <strong>:表示强调的文本。

  • <em>:表示斜体强调的文本。

  • <a>:用于创建超链接。

  • <img>:用于插入图像。

  • <input>:用于创建用户输入字段。

块级元素(block-level elements)通常会独占一行的空间,并且会在前后创建换行。常见的块级元素有:

  • <div>:用于将内容分组。

  • <p>:用于段落。

  • <h1>-<h6>:用于标题。

  • <ul><ol>:用于无序和有序列表。

  • <li>:用于列表项。

  • <table>:用于创建表格。

空元素(void elements)是指没有闭合标签的元素。它们在 HTML 中没有内容,只有一个开启标签。常见的空元素有:

  • <br>:用于插入换行符。

  • <img>:用于插入图像。

  • <input>:用于创建用户输入字段。

  • <meta>:用于指定页面元数据。

  • <link>:用于引入外部资源。

  • <hr>:用于创建水平分隔线。

如何理解HTML5结构语义化?

  • 简单说就是,用正确的标签做正确的事情

  • 段落用p标签,标题用h系列标签,图片用img,主要内容用main标签等

  • 对开发者:

    • 便于团队的开发和维护

    • 在没有加载CSS的情况下也能呈现较好的内容与代码结构,易于阅读

  • 对浏览器:

    • 有利于SEO,搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重

    • 方便其他设备的解析 (如屏幕阅读器、盲人阅读器等),有利于无障碍阅读,提高可访问性。

HTML5的新特性?

  • 新增:

    • 语义化标签:nav、header、footer、aside、article、section

    • 媒体的audio 音频、video 视频

    • 数据存储的:localstorage、sessionStorage

    • 表单控件:date、time、email、url、search、color、range等

    • 新的技术:canvas画布、Geolocation地理位置、websocket通信协议、webworker

    • history API:go、forward、back、pushstate

  • 移除的元素:

    • 纯表现的元素:basefont、big、center、font、s、strike、tt、u

    • 对可用性产生负面影响的元素:frame、frameset、noframes

  • 支持HTML5新标签的浏览器:

    • 在IE8/IE7/IE6浏览器中可以通过document.createElement方法创建标签,让这些浏览器支持HTML5的新标签

    • 也可以使用成熟的框架,如html5shim

  • 通过DOCTYPE声明、新增的结构元素、功能元素可以区分HTML5

标签上title和alt属性的区别是什么?

  • 这两个属性都可以用在img标签中的

  • title是元素的注释信息,给用户看的,当鼠标放到图片或者文字上时会显示。在IE浏览器中alt起到了title的作用,变成文字提示

  • alt是当图片不显示时的替代文字,给搜索引擎识别的

src和href的区别

  • src是用于替换当前元素

    • src是source的缩写

    • 指向外部资源的位置,在请求src资源时会将其指向的资源下载并应用到文档内,如js、img、frame等元素

    • 当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执行完毕,图片和框架等元素也是如此,类似于将所指向资源嵌入当前标签内。

  • href是用于在当前文档和引用资源之间确立联系

    • href是Hypertext Reference的缩写

    • 指向网络资源所在位置,建立和当前元素或当前文档之间的链接,如link元素

    • 浏览器会识别文档并下载资源且不会停止对当前文档的处理

label标签

label的for属性和input的id配合使用,当我们点击label时,浏览器会自动将焦点这个input框中

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
​
​
<label>Date:<input type="text"/></label>

锚点

对于锚点,可以在 HTML 中使用 a 标签的 name 属性来设置锚点,然后在页面中通过a 标签的 href 属性使用#进行跳转。

浏览器的渲染机制一般分为几个步骤?网页渲染到浏览器发生了什么?一个网页怎么渲染到浏览器端的?

  • 处理HTML 并构建 DOM 树

  • 处理 css 构建 CSSOM 树

  • 将 DOM 与 CSSOM 合并成一个渲染树

  • 根据渲染树来布局,计算每个节点的位置

  • 调用 GPU 绘制,合成图层,显示在屏幕上

  • 注意:

    • 在构建 CSSOM 树时,会阻塞渲染,直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程,所以应该尽量保证层级扁平,减少过度层叠,越是具体的 CSS 选择器,执行速度越慢

    • 当HTML 解析到 script 标签时,会暂停构建 DOM,完成后才会从暂停的地方重新开始。也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载JS 文件。

iframe的理解?

  • iframe是一个框架标签,在网页中嵌入其他文件,可以嵌入广告,与超链接或表单的target配合,展示不同的内容。

  • 优点:

    • 解决加载缓慢的第三方内容,如图标和广告等加载问题

    • 并行加载脚本

  • 缺点:

    • iframe会阻塞主页面的OnLoad事件

    • 即使内容为空,加载也需要事件

    • 没有语义

如果有两个iframe怎么进行数据传递?

  1. 使用postMessage API

  2. 可以使用本地缓存,localStorage、sessionStorage和cookie

cookies、sessionStorage、localStorage的区别

  • cookie是网站为了标识用户身份而储存在用户本地终端上的数据。cookie数据始终在同源的http请求中携带,即会在浏览器和服务器间来回传递

  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存

  • 存储大小:

    • cookie数据大小不能超过4k

    • sessionStorage和localStorage比cookie大,可以达到5M或更大

  • 储存时间:

    • cookie可以设置过期时间,在用户关闭浏览器后仍保留;

    • sessionStorage在当前会话期间有效,关闭浏览器后数据被清除;临时缓存页面中的分页,保存当前页码和每页显示的条数

    • localStorage可以长期保留数据,除非手动删除或清除缓存;历史记录、收藏夹或者离线存储

  • 常用API:

    1. Cookies

      • document.cookie:获取或设置当前页面的 cookie。

      • encodeURIComponent():编码字符串以便放到cookie中。

      • decodeURIComponent():解码cookie中的字符串。

      • max-age:设置Cookie的过期时间。

    2. sessionStorage

      • sessionStorage.setItem(key, value):存储一个键值对。

      • sessionStorage.getItem(key):根据键名获取存储的值。

      • sessionStorage.removeItem(key):删除某个键值对。

      • sessionStorage.clear():清空所有键值对。

    3. localStorage

      • localStorage.setItem(key, value):存储一个键值对。

      • localStorage.getItem(key):根据键名获取存储的值。

      • localStorage.removeItem(key):删除某个键值对。

      • localStorage.clear():清空所有键值对

渐进式增强和优雅降级

  • 这两个都和前端开发中的跨浏览器的兼容性有关

  • 简单地说,就是描述了一种处理不同浏览器对网站或应用程序支持程度不同的方法

  • 渐进式增强:从简单到复杂的设计策略。指在设计和开发的过程中,在保证基本功能可用的情况下,逐步添加高级的功能。确保网站在就得浏览器或设备可以正常工作,并且在新的浏览器或设备上可以得到更好的用户体验。

    注重于提供核心经验,并逐步添加额外功能

  • 优雅降级:从复杂到简单的设计策略。假设网站或应用程序具有完整高质量并且复杂的特点,在尽可能多的平台上运行良好,当某些客户端设备无法处理所有的特性时,会优雅地回退到一个更为简单,但仍满足基本需求的版本

    立足于完整和复杂的设计,并在必要的时候简化他们确保网站或者应用程序的使用

!DOCTYPE

  • DOCTYPE是HTML5中的一种文档类型声明,告诉浏览器应该用哪个HTML版本解析网页

  • 浏览器渲染页面有两种模式:

    • 标准模式:默认模式,浏览器使用W3C的标准解析渲染页面,以最高的标准呈现页面

    • 混杂模式:就是页面以一种比较宽松的向后兼容的方式显示

html5的离线存储资源

  • 在线情况下,通过请求mainfest文件,如果是第一次访问,浏览器就根据mainfest文件的内容进行下载并进行离线存储,那如果是之前访问,mainfest文件没有改变的情况,过就会使用离线缓存的内容,如果mainfest文件进行更新了,就会重新下载并进行缓存

  • 离线情况下,浏览器直接使用离线存储

自定义属性 / 全局属性

  • 自定义属性:指在HTML标签中自己定义的属性。命名要以data-前缀开头,然后用js获取或者css设置这个属性的值,使用dataset来获取或者设置

  • 全局属性:比id、class、style、title、lang等,适用于任何HTML元素

script 标签为什么建议放在 body 标签的底部(defer、async)

  • 因为浏览器在渲染html的时候是从上到下执行的,当遇到js文件的时候就会停止当前页面的渲染,转而去下载js文件。

  • 如果将script标签放在头部,在文件很大的情况下将导致首屏加载时间延长,影响用户体验。

style写在body前和写在body后有什么区别?

  • 因为我们的代码是从上往下执行的,style写在前面会逐步渲染

  • 当把style写后面的时候,浏览器解析完html文档,解析到尾部的css时会导致浏览器停止之前的渲染,等待加载解析完css后重新渲染,会导致页面出现FOUC现象,即页面闪烁的问题

什么是HTML5,以及和HTML的区别是什么?

  • HTML5是HTML的新标准,其主要目标是无需任何额外的插件如Flash、Silverlight等,就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

    HTML5是由万维网联盟(W3C)和 Web Hypertext Application Technology Working Group 合作创建的HTML新版本。

  • 区别:

    • 从文档声明类型上看:

      • HTML是很长的一段代码,很难记住。

      • HTML5却只有简简单单的声明,方便记忆

    • 从语义结构上看:

      • HTML4.0:没有体现结构语义化的标签,通常都是这样来命名的 <div id="header"></div>,这样表示网站的头部。

      • HTML5:在语义上却有很大的优势。提供了一些新的标签,比如:<header><article><footer>

HTML5 有哪些 drag 相关的 API ?

  • dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。

  • darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。

  • dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。

  • dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。

  • dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。

  • drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。

  • dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

canvas和svg

  • 通过Javascript来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制

  • svg是缩放矢量图,不依赖分辨率,支持事件处理器,不适合游戏应用

如何实现浏览器内多个标签页之间的通信?

  1. localStorage

    localStorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信(ps:session是会话级的存储空间,每个标签页都是单独的)

  2. WebSocket通讯

    全双工(full-duplex)通信自然可以实现多个标签之间的通信

  3. postMessage

    两个需要交互的tab页面具有依赖关系。比如iframe标签可以使用

  4. 定时器setInterval + cookie

    • 在页面A设置一个使用setInterval定时器不断刷新,检查Cookies的值是否发生变化,如果变化就进行刷新的操作。

    • 由于Cookies是在同域可读的,所以在页面B审核的时候改变Cookies的值,页面A自然是可以拿到的。

  5. Broadcast Channel

    顾名思义,“广播频道”,官方文档里的解释为“用于同源不同页面之间完成通信的功能”(该方法无法完成跨域的数据传输),在其中某个页面发送的消息会被其他页面监听到。

  6. SharedWorker

    SharedWorker可以被多个window共同使用,但必须保证这些标签页都是同源的(相同的协议,主机和端口号)

input上传文件怎么实现的,可以多选吗?

type属性值设置为file,当我们选择文件的时候触发change事件,将选择的文件上传到服务器。通过multiple属性实现同时选择多个

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

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

相关文章

RIP【新华三与华为区别】

【介绍】 rip分为rip 1 与 rip 2 &#xff0c;rip 2 是对 rip 1 的一种升级&#xff0c;rip 2 可以进行认证等功能 【命令】 新华三&#xff1a; [HC3-R1] rip #启用rip [HC3-R1-rip] version 2 #告知rip 版本号 [HC3-R1-rip] network 192.168.1.0 #宣告其网段 [HC3-R1-rip] …

【NI-DAQmx入门】LabVIEW中DAQmx同步

1.同步解释 1.1 同步基础概念 触发器&#xff1a;触发器是控制采集的命令。您可以使用触发器来启动、停止或暂停采集。触发信号可以源自软件或硬件源。 时钟&#xff1a;时钟是用于对数据采集计时的周期性数字信号。根据具体情况&#xff0c;您可以使用时钟信号直接控制数据采…

深度学习记录--正则化(regularization)

什么是正则化&#xff1f; 正则化(regularization)是一种实用的减少方差(variance)的方法&#xff0c;也即避免过度拟合 几种正则化的方法 L2正则化 又被称为权重衰减(weight dacay) 在成本函数中加上正则项&#xff1a; 其中 由于在w的更新过程中会递减&#xff0c;即权…

鸿蒙HarmonyOS实战-工具安装和Helloworld案例

&#x1f680;前言 HarmonyOS是华为自主开发的操作系统&#xff0c;它在2020年9月正式发布。它最初被称为鸿蒙OS&#xff0c;后来更名为HarmonyOS。HarmonyOS旨在提供一种可在各种设备上无缝运行的统一操作系统&#xff0c;包括智能手机、平板电脑、智能穿戴设备、智能音箱、车…

代码随想录 Leetcode541. 反转字符串 II

题目&#xff1a; 代码(首刷自解 2024年1月16日&#xff09;&#xff1a; class Solution { public:void reverse(string& s,int left,int right) {char temp;while (left < right) {temp s[left];s[left] s[right];s[right] temp;left;--right;}return;}string rev…

分类预测 | Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测

分类预测 | Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测 目录 分类预测 | Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现CS-SVM布谷鸟算法优化支持向量机的数据分类预测。 2.自带数据…

Qt QRubberBand 如何实现鼠标框选控件

QRubberBand类提供了一个矩形或直线&#xff0c;可以指示选择或边界。常见的模式是结合鼠标事件来执行此操作。本文将使用框选QCheckBox控件&#xff0c;来演示QRubberBand是如何配合鼠标进行工作的。 一、RubberBand 框选效果图 二、RubberBand 代码 rubberband.h #ifndef …

用LED数码显示器伪静态显示数字1234

#include<reg51.h> // 包含51单片机寄存器定义的头文件 void delay(void) //延时函数&#xff0c;延时约0.6毫秒 { unsigned char i; for(i0;i<200;i) ; } void main(void) { while(1) //无限循环 { P20xfe; …

TS学习笔记四:函数及泛型枚举

本节介绍ts的函数及泛型的相关内容&#xff0c;包括函数的声明格式及泛型的相关知识。 视频讲解 TS学习笔记四&#xff1a;函数的定义使用 B站视频 TS学习笔记四&#xff1a;函数的定义使用 西瓜视频 https://www.ixigua.com/7321535978286514727 一、函数 函数是js程序的…

[oeasy]python005_退出游乐场_重启游乐场_系统态shell_应用态_quit

0005_ 退出游乐场_重启游乐场_系统态shell 退出终端_重启游乐场_shell_quit &#x1f94a; Python 回忆 上次 了解了 python进入了 python 游乐场 在游乐场 可以做 简单的计算还可以做 乘方运算 数字特别大之后 游乐场 会迟疑一下不过 最终 还是能算出来 可以让数字 更大一…

Vue学习笔记3--全局事件总线

Vue学习笔记3—全局事件总线 1.全局事件总线可以实现任意组件间通信 X需具备的条件&#xff1a; 所有的组件都要能看见X可以调用$on $off $emitVue.prototype.x {a:1, b:2} 可以被所有组件看见VueComponent.protoype.proto Vue.prototype组件实例对象(vc)可以访问到Vue原型上…

Java多线程并发篇----第十八篇

系列文章目录 文章目录 系列文章目录前言一、寄存器二、程序计数器三、PCB-“切换桢”四、上下文切换的活动五、引起线程上下文切换的原因前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了…

QT软件在线安装与维护

一.安装 安装QT开发环境分离线安装和在线安装两种方式&#xff0c;具体步骤如下&#xff1a; QT官网注册账号----下载安装包-----安装-----选择要安装的版本与开发包----版本维护 注意&#xff1a;Qt5.14.2是最后提供二进制安装包的版本&#xff0c;后面的版本都需要在线安装…

小程序系列--7.页面配置以及网络数据请求

一. 页面配置 1.页面配置文件的作用 小程序中&#xff0c;每个页面都有自己的 .json 配置文件&#xff0c;用来对当前页面的窗口外观、页面效果等进行配置。 2. 页面配置和全局配置的关系 3. 页面配置中常用的配置项 二、网络数据请求 1. 小程序中网络数据请求的限制 2. 配…

数据分析中常用的指标或方法

一、方差与标准差二、协方差三、皮尔逊系数四、斯皮尔曼系数 一、方差与标准差 总体方差 V a r ( x ) σ 2 ∑ i 1 n ( x i − x ˉ ) 2 n ∑ i 1 n x i 2 − n x ˉ 2 n E ( x 2 ) − [ E ( x ) ] 2 Var(x)\sigma^2\frac {\sum\limits_{i1}^{n} (x_i - \bar{x})^2} {n…

SQL性能分析手段

SQL执行频率 MySQL 客户端连接成功后&#xff0c;通过 show [session|global] status 命令可以提供整个服务器执行sql的状态信息。通过如下指令&#xff0c;可以查看当前数据库的INSERT、UPDATE、DELETE、SELECT的访问频次&#xff1a; -- session 是查看当前会话 ; -- globa…

数据结构排序二叉树(下)

哎,调了几天深度学习模型,今天来更新排序二叉树 文章目录 前言 一、排序二叉树的结构定义 二、在排序二叉树添加数据 三、定义创建排序二叉树函数 四、查找一棵二叉排序树中的结点x的所在层数 五、删除二叉排序树中T关键字x的节点 六、查找二叉排序树中的所有小于key的关…

【小笔记】算法训练基础超参数调优思路

【学而不思则罔&#xff0c;思维不学则怠】 本文总结一下常见的一些算法训练超参数调优思路&#xff08;陆续总结更新&#xff09;&#xff0c;包括&#xff1a; batchsize学习率epochsdropout&#xff08;待添加&#xff09; Batch_size 2023.9.29 简单来说&#xff0c;较…

Kotlin程序设计(二)面向对象

Kotlin程序设计中级篇 我们在前面已经学习了Kotlin程序设计的基础篇&#xff0c;本章我们将继续介绍更多Kotlin特性&#xff0c;以及面向对象编程。 函数 其实函数我们在一开始就在使用了&#xff1a; fun main() {println("Hello World") }我们程序的入口点就是…

day3:基于UDP模型的简单文件下载

思维导图 tftp文件下载客户端实现 #include <head.h> #define SER_PORT 69 #define SER_IP "192.168.125.223" int link_file() {int sfdsocket(AF_INET,SOCK_DGRAM,0);if(sfd-1){perror("socket error");return -1;}return sfd; } int filedownloa…