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 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 图形属性发生变化会进行重新绘制。
不依赖分辨率，支持事件处理，复杂度高会减慢渲染速度。
后续还在更新中·············
