前端面试题

前端面试题汇总

css系列

1、什么是盒子模型？
在网页中，一个元素占有空间的大小由几部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四部分，这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只能用来分隔相邻的区域，4部分一起构成了css中的元素的盒模型。
盒子真正的宽度是：内容宽度+左右填充+左右边距+左右边框
盒子真正的高度是：内容高度+上下填充+上下边距+上下边框

2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
行内元素：a、b、span、em
行内块元素：img
块级元素：div 、ul 、li、dl
3、简述一下src和href的区别
href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
4、网络中使用最多的图片格式有哪些？
JPEG、GIF、PNG、最流行的是jpeg格式，可以把文件压缩到最小，在ps以JPEG格式存储时，提供11级压缩级别，最近又有webp格式的图片。
5、视频、音频标签的使用
视频：<video src = ‘’ ‘’>
视频标签属性：
src：需要播放的地址；
width/height：设置播放视频的宽高和img标签的宽高属性一样。
autoplay：是否自动播放
controls：是否显示控制条
poster：没有播放之前显示的展位图片
loop：是否循环播放
perload：预加载视频（缓存）与autoplay相冲突，设置了autoplay属性，perload属性会失效。
muted：静音模式
音频：音频属性和视频差不多，不过宽高和poster属性不能用

<source src=’’ ‘’ type =’’ ‘’>

6、HTML5新增的内容有哪些？
新增语义化标签
新增表单类型
表单元素
表单事件
多媒体标签
7、HTML5新增的语义化标签有哪些？
语义化标签有点：1、提升可访问性，2、利于SEO优化，3、结构清晰，利于维护，4、利于无障碍阅读
Header页面头部 main页面主要内容 footer页面底部
Nav导航栏 aside侧边栏 article加载页面一开独立内容
Section相当于div figure加载独立内容（上图下字） figcaption figure的标题
Hgroup标题组合标签 mark高亮显示 dialog加载对话框标签（必须配合open属性）
Embed加载插件的标签 video加载视频 audio加载音频（支持格式 ogg， mp3，wav）
8、Css3新增的特性
边框：
border-radius ：添加圆角边框
border-shadow ：给边框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（加了是里面阴影，不加是外面阴影））
border-image：设置边框图像
border-image-source：边框图片的路径
border-image-slice：图片边框向内偏移
border-image-width：图片边框的宽度
border-image-outset：边框图片像区域超出边框的量
border-image-repeat：图片边框是否平铺（repeat 平铺，round 铺满，stretch拉伸）
背景：