2025年前端面试准备html篇

1.对html 语义化标签的理解

  html语义化标签简单来说页面有良好的结构,使元素有含义便于理解。

  优点可以使页面呈现出清晰的机构,有利于seo和搜索引擎抓取信息,便于团队的开发和管理。

  常见的语义化标签有:

复制代码

    <header> - 定义页面或区段的头部<nav> - 定义导航链接 <main> - 定义页面的主要内容,一个页面只能使用一次<article> - 定义独立的文章内容<section> - 定义文档中的一个区段<aside> - 定义与页面主内容 minor 相关的内容<footer>- 定义页面或区段的底部。

复制代码

2.常见的块级级元素

  p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

    块级元素会单独站一行,默认顺序是从上到下的

    在没有设置宽度的时候宽度是100%

    块级元素里面可以写行内元素和块级元素

3. 常见的行内元素

  span、a、img、button、input、select、 i、strong、em、lable、b、

    行内元素和其他元素会在一行且设置宽度高度无效,可以通过line-heigth 设置高度,不会破坏文本流

    设置margin 和 padding 只有左右生效 其他无效

    宽度不是不能改的 只能是文字宽度或者图片宽度,行内元素只能容纳 行内元素。

4.html5 新增了哪些属性常用的

  html5 主要关于图像,位置,存储,多任务等。

  视频video 音频audio 画布canvas

    img的 srcset 属性:允许你为不同的屏幕分辨率和设备特性提供多个图像源

<img src="image.jpg" srcset="image2x.jpg 2x, image3x.jpg 3x" alt="description">

  input 标签新增type email url number range date month week time datetime

  本地存储 localStorage 长期存储数据 需要手动清除

  sessionStorage 浏览器关闭后自动删除

5.meta viewport 的用法

  viewport 是用来适配移动端,可以用来控制长窗口的大小和比例

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  width viewport :宽度(数值/device-width)

  height viewport :高度(数值/device-height)

  initial-scale :初始缩放比例 为一个数字,可以带小数

  maximum-scale :最大缩放比例 为一个数字,可以带小数

  minimum-scale :最小缩放比例 为一个数字,可以带小数

  user-scalable :是否允许用户缩放(yes/no)

6.cookie,sessionStorage和localStorage 的区别

cookie

localStorage

sessionStorage

初始化设置

客户端或者服务器,服务器可以通过Set-Cookie 设置请求头

客户端

客户端

是否永久存储

手动设置

永久设置

当前页面关闭时

在浏览器绘画中是否保持不变

是否设置了过期时间

是否跟随请求返回给服务器

Cookie 会通过请求头自动发送给服务器

容量

4kb

5MB

5MB

访问权限

当前浏览器任意窗口

当前浏览器任意窗口

当前窗口

7.src和href 的区别

  src 通常用img,video,audio,script 元素,通过src 属性,可以指定外部资源的来源地址。

  href 通常用户 a,link 元素 通过 href 属性,可以标识文档中引用的其他超文本。

8.iframe 框架有那些优缺点

  优点:在页面是独立的沙箱模型,独立的显示一个页面或者内容,不会与页面其他元素产生冲突。可以在多个页面引用同一个页面或者内容,或者在一个系统中引用其他系统,可以减少代码的冗余。加载是异步的,页面可以在不等iframe 加载完成的情况下进行展示。可以方便的实现跨域访问。

  缺点: iframe 可能会导致页面加载速度变慢,阻塞主页面的onload事件。iframe 中的内容交互可能比较复杂,因此要处理两个不同的文档上下文。浏览器的后退按钮无效。

9.严格模式和混杂模式

  严格模式指的是以浏览器支持的最高标准运行(W3C标准)。

  混杂模式指的是浏览器以向下兼容的方式显示内容,模拟老式浏览器的行为。

  严格模式,直接书写正确的DOCTYPE,不声明或者声明不完整的DOCTYPE 页面会转换成为怪异模式。

10.HTML5中的drag  

  dragAPI 用来实现对元素的拖拽功能,在标签中添加了draggable=true 属性后,元素将会成为一个可拖放元素,该元素通常与另一个拖放的目标区域元素配合使用。

    dragstart 事件名称,事件的主题是被拖放元素,开始拖放的时候触发。

    dragend 事件名称,事件的主体是被拖放元素,结束拖放时触发。

    drag 事件的主体是被拖放元素,拖放中触发。

    dragenter 事件的主体是目标元素,进入目标元素的时候触发。

    dragleave 事件的主体是目标元素,离开目标元素时触发。

    dragover 是件的主体是目标元素,在目标元素中拖放的时候触发。

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

11.canvas与svg 的区别

  canvas:画布是通过js绘制的的2D图像,逐像素进行渲染位置改变的时候会进行重新渲染

      依赖分辨率,不支持事件处理,能够以.png,.jpg格式保存图像。

  svg:可伸缩矢量图形,基于XML描述的2D图形语言 SVG 图形属性发生变化会进行重新绘制。

    不依赖分辨率,支持事件处理,复杂度高会减慢渲染速度。

    

   关注灵活就业新业态,关注公账号:贤才宝(贤才宝https://www.51xcbw.com)

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

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

相关文章

【字节青训营-9】:初探字节微服务框架 Hertz 基础使用及进阶(下)

本文目录 一、Hertz中间件Recovery二、Hertz中间件跨资源共享三、Hertz 响应四、Hertz请求五、Hertz中间件Session 一、Hertz中间件Recovery Recovery中间件是Hertz框架预置的中间件&#xff0c;使用server.Default()可以默认注册该中间件&#xff0c;为Hertz框架提供panic回复…

因果推断与机器学习—用机器学习解决因果推断问题

Judea Pearl 将当前备受瞩目的机器学习研究戏谑地称为“仅限于曲线拟合”,然而,曲线拟合的实现绝非易事。机器学习模型在图像识别、语音识别、自然语言处理、蛋白质分子结构预测以及搜索推荐等多个领域均展现出显著的应用效果。 在因果推断任务中,在完成因果效应识别之后,需…

软件设计模式

目录 一.创建型模式 抽象工厂 Abstract Factory 构建器 Builder 工厂方法 Factory Method 原型 Prototype 单例模式 Singleton 二.结构型模式 适配器模式 Adapter 桥接模式 Bridge 组合模式 Composite 装饰者模式 Decorator 外观模式 Facade 享元模式 Flyw…

Linux 零拷贝技术

一、传统做法&#xff0c;经历“四次拷贝” 数据 1.读取到内核缓冲区 2.拷贝到用户缓冲区 3.写入到内核缓冲区 4.拷贝到网卡 使用 DMA&#xff0c;减少2次拷贝&#xff0c;还剩2次拷贝 DMA 负责硬盘到内核缓冲区和内核到网卡的传输。 CPU 仍需处理内核和用户缓冲区之间的数据…

【通俗易懂说模型】线性回归(附深度学习、机器学习发展史)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;深度学习_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2. …

利用Vue和javascript分别编写一个“Hello World”的定时更新

目录 一、利用Vue编写一个“Hello World”的定时更新&#xff08;1&#xff09;vue编码在Html文件中&#xff08;2&#xff09;vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 &#xff08;1&#xff…

蓝桥杯python基础算法(2-1)——排序

目录 一、排序 二、例题 P3225——宝藏排序Ⅰ 三、各种排序比较 四、例题 P3226——宝藏排序Ⅱ 一、排序 &#xff08;一&#xff09;冒泡排序 基本思想&#xff1a;比较相邻的元素&#xff0c;如果顺序错误就把它们交换过来。 &#xff08;二&#xff09;选择排序 基本思想…

洛谷 P4552 [Poetize6] IncDec Sequence C语言

P4552 [Poetize6] IncDec Sequence - 洛谷 | 计算机科学教育新生态 题目描述 给定一个长度为 n 的数列 a1​,a2​,…,an​&#xff0c;每次可以选择一个区间 [l,r]&#xff0c;使这个区间内的数都加 1 或者都减 1。 请问至少需要多少次操作才能使数列中的所有数都一样&#…

Vue Dom截图插件,截图转Base64 html2canvas

安装插件 npm install html2canvas --save插件使用 <template><div style"padding: 10px;"><div ref"imageTofile" class"box">发生什么事了</div><button click"toImage" style"margin: 10px;&quo…

88.[4]攻防世界 web php_rce

之前做过&#xff0c;回顾&#xff08;看了眼之前的wp,跟没做过一样&#xff09; 属于远程命令执行漏洞 在 PHP 里&#xff0c;system()、exec()、shell_exec()、反引号&#xff08;&#xff09;等都可用于执行系统命令。 直接访问index.php没效果 index.php?sindex/think\a…

数据结构-堆和PriorityQueue

1.堆&#xff08;Heap&#xff09; 1.1堆的概念 堆是一种非常重要的数据结构&#xff0c;通常被实现为一种特殊的完全二叉树 如果有一个关键码的集合K{k0,k1,k2,...,kn-1}&#xff0c;把它所有的元素按照完全二叉树的顺序存储在一个一维数组中&#xff0c;如果满足ki<k2i…

oracle 基础语法复习记录

Oracle SQL基础 因工作需要sql能力&#xff0c;需要重新把sql这块知识重新盘活&#xff0c;特此记录学习过程。 希望有新的发现。加油&#xff01;20250205 学习范围 学习SQL基础语法 掌握SELECT、INSERT、UPDATE、DELETE等基本操作。 熟悉WHERE、GROUP BY、ORDER BY、HAVIN…

【Rust自学】20.2. 最后的项目:多线程Web服务器

说句题外话&#xff0c;这篇文章非常要求Rust的各方面知识&#xff0c;最好看一下我的【Rust自学】专栏的所有内容。这篇文章也是整个专栏最长&#xff08;4762字&#xff09;的文章&#xff0c;需要多次阅读消化&#xff0c;最好点个收藏&#xff0c;免得刷不到了。 喜欢的话…

国产编辑器EverEdit - 工具栏说明

1 工具栏 1.1 应用场景 当用户想显示/隐藏界面的标签栏、工具栏、状态栏、主菜单等界面元素时&#xff0c;可以通过EverEdit的菜单选项进行设置。 1.2 使用方法 选择菜单查看 -> 工具栏&#xff0c;在工具栏的子菜单中选择勾选或去掉勾选对应的选项。 标签栏&#xff1…

虚幻UE5手机安卓Android Studio开发设置2025

一、下载Android Studio历史版本 步骤1&#xff1a;虚幻4.27、5.0、5.1、5.2官方要求Andrd Studio 4.0版本&#xff1b; 5.3、5.4、5.5官方要求的版本为Android Studio Flamingo | 2022.2.1 Patch 2 May 24, 2023 虚幻官网查看对应Andrd Studiob下载版本&#xff1a; https:/…

VLAN 基础 | 不同 VLAN 间通信实验

注&#xff1a;本文为 “ Vlan 间通信” 相关文章合辑。 英文引文&#xff0c;机翻未校。 图片清晰度限于原文图源状态。 未整理去重。 How to Establish Communications between VLANs? 如何在 VLAN 之间建立通信&#xff1f; Posted on November 20, 2015 by RouterSwi…

bat脚本实现自动化漏洞挖掘

bat脚本 BAT脚本是一种批处理文件&#xff0c;可以在Windows操作系统中自动执行一系列命令。它们可以简化许多日常任务&#xff0c;如文件操作、系统配置等。 bat脚本执行命令 echo off#下面写要执行的命令 httpx 自动存活探测 echo off httpx.exe -l url.txt -o 0.txt nuc…

堆的实现——堆的应用(堆排序)

文章目录 1.堆的实现2.堆的应用--堆排序 大家在学堆的时候&#xff0c;需要有二叉树的基础知识&#xff0c;大家可以看我的二叉树文章&#xff1a;二叉树 1.堆的实现 如果有⼀个关键码的集合 K {k0 , k1 , k2 , …&#xff0c;kn−1 } &#xff0c;把它的所有元素按完全⼆叉树…

edu小程序挖掘严重支付逻辑漏洞

edu小程序挖掘严重支付逻辑漏洞 一、敏感信息泄露 打开购电小程序 这里需要输入姓名和学号&#xff0c;直接搜索引擎搜索即可得到&#xff0c;这就不用多说了&#xff0c;但是这里的手机号可以任意输入&#xff0c;只要用户没有绑定手机号这里我们输入自己的手机号抓包直接进…

FRP通过公网IP实现内网穿透

FRP通过公网IP实现内网穿透 一、简介二、安装服务端1、下载2、安装FRP3、使用 systemd 命令管理 frps 服务4、设置 frps 开机自启动 三、安装客户端1、下载2、安装FRP3、使用 systemd 命令管理 frpc 服务4、设置 frpc 开机自启动 四、访问仪表盘 一、简介 frp 是一款高性能的反…