2025年前端面试准备html篇
时光飞逝，一晃已经工作了10年了,2014年一个人背着书包拉着箱子，下火车去做637路公交车的场景历历在目，637路公交车从起点坐到终点，开启了工作的第一站，这趟已经在路上行驶了10年的列车，经历多了多次上车与下车，这10年互联网高速的发展，有幸赶上这个时代，个人也得到了很大的成长。感谢，感恩，这10年遇见的人和事。明年将是下一个10年的第一年加油。1.对html 语义化标签的理解 html语义化标签简单来说页面有良好的结构，使元素有含义便于理解。 优点可以使页面呈现出清晰的机构，有利于seo和搜索引擎抓取信息，便于团队的开发和管理。 常见的语义化标签有： <header> - 定义页面或区段的头部
<nav> - 定义导航链接
<main> - 定义页面的主要内容，一个页面只能使用一次
- 定义独立的文章内容
<section> - 定义文档中的一个区段
- 定义与页面主内容 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> img的 srcset 属性：允许你为不同的屏幕分辨率和设备特性提供多个图像源<img src="https://www.cnblogs.com/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 是用来适配移动端，可以用来控制长窗口的大小和比例 width viewport ：宽度(数值/device-width) height viewport ：高度(数值/device-height) initial-scale ：初始缩放比例 为一个数字，可以带小数 maximum-scale ：最大缩放比例 为一个数字，可以带小数 minimum-scale ：最小缩放比例 为一个数字，可以带小数 user-scalable ：是否允许用户缩放(yes/no） 6.cookie,sessionStorage和localStorage 的区别 cookielocalStoragesessionStorage初始化设置客户端或者服务器，服务器可以通过Set-Cookie 设置请求头客户端客户端是否永久存储手动设置永久设置当前页面关闭时在浏览器绘画中是否保持不变是否设置了过期时间是否是否跟随请求返回给服务器Cookie 会通过请求头自动发送给服务器否否容量4kb5MB5MB访问权限当前浏览器任意窗口当前浏览器任意窗口当前窗口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 图形属性发生变化会进行重新绘制。 不依赖分辨率，支持事件处理，复杂度高会减慢渲染速度。 后续还在更新中·············
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]