2025年前端面试准备html篇

　　时光飞逝，一晃已经工作了10年了,2014年一个人背着书包拉着箱子，下火车去做637路公交车的场景历历在目，637路公交车从起点坐到终点，开启了工作的第一站，这趟已经在路上行驶了10年的列车，经历多了多次上车与下车，这10年互联网高速的发展，有幸赶上这个时代，个人也得到了很大的成长。感谢，感恩，这10年遇见的人和事。明年将是下一个10年的第一年加油。

　　

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 图形属性发生变化会进行重新绘制。

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

 

 　　　　后续还在更新中·············