admin管理员组文章数量:1547452
1. 网络中使用最多的图片格式有哪些
• gif 支持动画，只有全透明和不透明两种模式，只有 256 种颜色,适用于简单动画、徽标和简单图形等应用场景。
• jpeg 常见格式,采用有损压缩算法，保持图像质量的同时减小文件大小 ,体积较小，不支持透明，不支持动画
• png 采用无损压缩算法，体积也相对较小，支持透明背景，不支持动画
• svg 一般会保存颜色及形状相对简单的图片，可任意放大图形显示，边缘异常清晰
• BMP画质最好，文件太大，不利于网络传输
•WebP:谷歌开发的一种图片格式,较小的文件大小,较高图像质量,格式新,要考虑兼容性.
2. 请简述 css 盒子模型
CSS盒子模型 它将每个HTML元素视为一个矩形的盒子，由四个部分构成：内容区域(content)、内边距(padding)、边框(border)和外边距(marging)。有两种不同的模式:
1.标准盒模型(W3C盒子):
box-sizing: content-box;
自己设置的宽高是内容的宽高
总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度；
总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框宽度 + 下边框宽度。
2.怪异盒子模型(IE盒模型):
box-sizing: border-box;
自己设置的总宽度和总高度仅包括内容区域和边框
总宽度 = 内容宽度 + 左边框宽度 + 右边框宽度；
总高度 = 内容高度 + 上边框宽度 + 下边框宽度。
3. 视频/音频标签的使用
• 视频
<video src=" " controls autoplay loop poster></video>属性： controls 控件、autoplay: 自动播放谷歌和火狐静音下支持 ie 支持、 muted 静音播放、loop 循环、poster 未播放前显示的内容
• 音频
<audio src="" controls autoplay loop muted></video>属性： controls 控件、autoplay 自动播放谷歌不支持，火狐静音下支持 ie 支 持、loop 循环播放、muted 静音播放
4.HTML5 新增的内容有哪些
-
结构元素：HTML5引入了一些新的语义化结构元素，如
<header>、<nav>、<section>、<article>、<footer>等，用于更清晰地定义页面的结构和内容区块。 -
多媒体支持：HTML5提供了
<audio>、<video>标签来原生支持音频和视频的播放，而不再需要依赖插件（比如Flash）。同时，通过<source>标签可以指定多种格式的媒体文件，以实现跨浏览器和设备的兼容性。 -
Canvas绘图：HTML5的
<canvas>元素允许开发者使用JavaScript在网页上进行动态的2D绘图，并能够处理图形、动画、游戏等复杂的可视化效果。 -
SVG支持：HTML5对可缩放矢量图形（SVG）提供了原生支持，开发者可以使用标记语言来创建基于矢量的图像，而无需依赖图像文件。
-
表单增强：HTML5为表单提供了一系列新属性和输入类型，如邮箱验证、日期选择、数字滑块等，还引入了
placeholder属性和表单验证等功能来简化表单设计和用户体验。 -
本地存储：HTML5提供了本地存储技术，包括
localStorage和sessionStorage，可以在浏览器端本地存储和获取数据，使得网页应用具备更好的离线访问和缓存能力。 -
Web Workers：HTML5引入了Web Workers机制，允许在后台运行多个JavaScript线程，以提高性能和响应度，并使网页应用能够进行复杂的计算和任务处理。
-
地理定位：HTML5通过
navigator.geolocationAPI，提供了获取用户地理位置信息的能力，使得开发者可以基于用户位置创建位置服务的应用。
5.Css3新增的特性
CSS3是（层叠样式表）的第三个版本，引入了许多新的特性和功能，以增强网页样式的表现力和交互性。以下是CSS3新增的一些主要特性：
-
边框和圆角：CSS3引入了
border-radius属性，可以实现元素边框的圆角效果，而无需使用额外的背景图片或复杂的Hack方法。 -
过渡和动画：CSS3提供了
transition和animation属性，允许开发者为元素添加过渡效果和动画效果，使页面更具交互性和活力。 -
盒子模型：CSS3引入了
box-sizing属性，可以更精确地控制元素盒子模型的大小计算方式，包括content-box（默认）、border-box和padding-box。 -
阴影和渐变：CSS3新增了
box-shadow和linear-gradient/radial-gradient等属性，使得开发者可以通过CSS直接添加阴影效果和渐变色效果，而无需依赖图像编辑工具。 -
文字排版：CSS3引入了一系列用于文字排版的属性，如
text-shadow（文字阴影）、text-overflow（文本溢出处理）、word-wrap（断行处理）和text-justify（文本对齐和间距调整）等。 -
媒体查询：CSS3的媒体查询功能允许开发者根据不同设备或屏幕尺寸应用不同的样式，从而实现响应式布局和设计，提供更好的移动端适配性。
-
伸缩布局（Flexbox）：CSS3的Flexbox布局模块提供了一种灵活的布局方式，可以方便地实现弹性盒子布局，使得网页布局更加简洁、灵活和响应式。
-
字体和多列布局：CSS3新增了
@font-face规则，可以通过CSS引入自定义字体文件，丰富了网页字体选择的可能性。同时，CSS3还引入了column-count和column-gap等属性，实现了多列布局效果。
6.清除浮动的方式有哪些？请说出各自的优点和弊端
首先为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动的方法
1.空标签法（额外标签法）：在所有浮动元素的最后面创造了一个空标签,身上写一个样式:clear:both;
优点：操作简单，兼容性好，适用于绝大多数情况。
缺点：会造成HTML代码冗余。
2.万能清除法:就是把空标签变成了CSS的语法形式
.clear_fix::after{
content: '';
display: block;
clear: both;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}优点：无需添加额外的DOM元素，结
版权声明：本文标题：2024最新前端面试题(八股文)一阶段总结（html，css）!!!!新手必看必背!通俗易通!全面!全是干货！ 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/xitong/1727190680a1101397.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论