制作网页的网站叫什么,深圳找人做网站,网站侧边栏导航,网络定制营销JS和ES6 篇#xff1a; 2024高频前端面试题 JavaScript 和 ES6 篇-CSDN博客
一 . HTML 篇
1. H5有什么新特性
1) 语义化标签 用正确的标签做正确的事情。 html 语义化让页面的内容结构化#xff0c;结构更清晰#xff0c;便于对浏览器、搜索引擎解析…JS和ES6 篇 2024高频前端面试题 JavaScript 和 ES6 篇-CSDN博客
一 . HTML 篇
1. H5有什么新特性
1) 语义化标签 用正确的标签做正确的事情。 html 语义化让页面的内容结构化结构更清晰便于对浏览器、搜索引擎解析即使在没有样式 CSS 情况下也以一种文档格式显示并且是容易阅读的; 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重利于 SEO; 使阅读源代码的人对网站更容易将网站分块便于阅读维护理解。 常见的语义化标签 header/header 头部可作为介绍内容或者导航链接栏的容器nav/nav 导航栏代表一个含有多个超链接的区域可做导航条区域section/section 区块有语义化的divmain/main 主要区域定义文档主要内容 article/article 主要内容可以表示文章、博客等内容 aside/aside 侧边栏footer/footer 底部定义网页结构的页脚。通常包含该章节作者、版权数据或者与文档相关的链接等 2) 增强型表单 新增表单控件 type为 email 邮箱地址类型 当格式不符合email格式时提交是不会成功的会出现提示只有当格式相符时提交才会通过 在移动端获焦的时候会切换到英文键盘 type为 search 搜索类型 有清空文本的按钮 type为 range : 特定范围内的数值选择器 type为number和range时可以设置属性:min、max、step步数input typerange min10 max20 step1/input 新增表单属性 placeholder : 输入框提示信息required : 此项必填不能为空autofocus : 指定表单获取输入焦点 新增表单事件 oninput 每当input里的输入框的内容发生变化时都会触发此事件oninvalid 当验证不通过时触发此事件 3) 增加video和audio标签 !-- 视频标签 -- //src 视频URL controls 展示控件如播放按钮video srcurl controlscontrolsvideo !-- 音频标签 -- //src:音频URL loop:音频结束时重新播放 muted:静音播放audio srcurl looploop mutedmutedaudio 4) canvas绘图 是HTML5新增的元素可用于通过使用 JavaScript 中的脚本来绘制图形。例如它可以用于绘制图形、制作照片、创建动画甚至可以进行实时视频处理或渲染 5) SVG绘图 SVG是一种基于XML的矢量图形格式用于在Web和其他环境中显示各种图形它允许我们编写可缩放的二维图形并可通过CSS或JavaScript进行操作 6) 地理定位
7) 拖放API dragstart事件主体是被拖放元素在开始拖放被拖放元素时触发。 drag事件主体是被拖放元素在正在拖放被拖放元素时触发。 dragend事件主体是被拖放元素在整个拖放操作结束时触发。 drop事件主体是目标元素在目标元素完全接受被拖放元素时触发。 dragenter事件主体是目标元素在被拖放元素进入某元素时触发。 dragover事件主体是目标元素在被拖放在某元素内移动时触发。 dragleave事件主体是目标元素在被拖放元素移出目标元素是触发。 8) webSocket WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术属于应用层协议。它基于TCP传输协议并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手两者之间就直接可以创建持久性的连接 并进行双向数据传输。 WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是服务器可以向客户端主动推动消息客户端也可以主动向服务器推送消息。 9) webWork
10) webStorage sessionStorage与localStorage、cookie 共同点都是保存在浏览器端、且同源的 区别 1、存储空间cookie存储空间最小、只有4kb、但是http请求中可以携带cookieloacalstorage、sessionstorage存储空间5M或更大 2、有效期cookie不设置时间、关闭浏览器销毁sessionstorage关闭浏览器窗口或者标签页销毁loacalstorage不手动清除一直保留 3、作用域sessionStorage不在不同浏览器窗口标签页共享、即使同源cookie、localstorage在所有同源窗口之间共享 应用场景不同 cookie一般用于存储登录验证信息sessionId或者token localStorage常用于存储不易变动的数据减轻服务器压力 sessionStorage可以用来检测用户是否刷新进入页面 2. 标签上 title 与 alt 属性的区别是什么 alt 是给搜索引擎识别在图像无法显示时的替代文本 title 是关于元素的注释信息主要是给用户解读。 当鼠标放到文字或是图片上时有 title 文字显示。因为 IE 不标准在 IE 浏览器中 alt 起到了 title 的作用变成文字提示。 在定义 img 对象时将 alt 和 title 属性写全可以保证在各种浏览器中都能正常使用。 3. 页面导入样式时,使用 link 和import 有什么区别? 1.从属关系区别 import是 CSS 提供的语法规则只有导入样式表的作用link是HTML提供的标签不仅可以加载 CSS 文件还可以定义 RSS、rel 连接属性等。 2.加载顺序区别 加载页面时link标签引入的 CSS 被同时加载import引入的 CSS 将在页面加载完毕后被加载。 3.兼容性区别 import是 CSS2.1 才有的语法故只可在 IE5 才能识别link标签作为 HTML 元素不存在兼容性问题。 4.DOM可控性区别 link 支持 js 控制 DOM 来改变样式 import 不可以 4. src 与 href src 用于替换当前元素 href 用于在当前文档和引用资源之间确立联系。 src: src 是 source 的缩写指向外部资源的位置指向的内容将会嵌入到文档中当前标签所在位置在请求 src 资源时会将其指向的资源下载并应用到文档内例如 js 脚本img 图片和 frame 等元素。 当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执行完毕图片和框架等元素也如此类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。 href: href 是 Hypertext Reference 的缩写指向网络资源所在位置建立和当前元素锚点或当前文档链接之间的链接如果在文档中添加。那么浏览器会识别该文档为 css 文件就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css而不是使用import 方式。 5. iframe的优缺点
优点 1.iframe能够原封不动的把嵌入的网页展现出来。 2.如果有多个网页引用iframe那么你只需要修改iframe的内容就可以实现调用的每一个页面内容的更改方便快捷。 3.网页如果为了统一风格头部和版本都是一样的就可以写成一个页面用iframe来嵌套可以增加代码的可重用。 4.如果遇到加载缓慢的第三方内容如图标和广告这些问题可以由iframe来解决。 缺点 1.会产生很多页面不容易管理。 2.iframe框架结构有时会让人感到迷惑如果框架个数多的话可能会出现上下、左右滚动条会分散访问者的注意力用户体验度差。 3.代码复杂无法被一些搜索引擎索引到这一点很关键现在的搜索引擎爬虫还不能很好的处理iframe中的内容所以使用iframe会不利于搜索引擎优化。 4.很多的移动设备(PDA 手机)无法完全显示框架设备兼容性差。 5.iframe框架页面会增加服务器的http请求对于大型网站是不可取的。 6. title与h1的区别、b与strong的区别、i与em的区别 1title属性没有明确意义只表示是个标题H1则表示层次明确的标题对页面信息的抓取也有很大的影响 2b标签只是一个简单加粗标签strong标签有语义是起到加重语气的效果。 b标签之间的字符都设为粗体strong标签加强字符的语气都是通过粗体来实现的而搜索引擎更侧重strong标签 3i 内容展示为斜体em表示强调的文本 二 . CSS 篇
1. CSS 的盒子模型 盒模型都是由四个部分组成的分别是margin、border、padding 和 content。 标准盒模型 标准盒模型的width和height属性的范围只包含了content即添加padding或border不会改变content的大小只会相应地增加盒子的大小。 怪异盒模型 IE盒模型的width和height属性的范围包含了border、padding和content。添加padding或者border会从中减少content内容的占据区域来为padding和border制造空间宽高不会相对应的进行增长。 box-sizing: content-box; 转换为 标准盒模型。 box-sizing: border-box; 转换为 怪异盒模型。 2. 选择器优先级 1) 就近原则,后加样式优于前面的样式 2) 内嵌样式 内联样式 外联样式 3) !Important 大于一切样式 4) important 行内1000 id选择器100 类选择器 伪类选择器10 属性选择器 标签选择器1与伪元素选择器 继承 或者*通配符 3. 简明说一下 CSS link 与 import 的区别和用法 link 是 XHTML 标签除了加载CSS外还可以定义 RSS 等其他事务import 属于 CSS 范畴只能加载 CSS。 link 引用 CSS 时在页面载入时同时加载import 需要页面网页完全载入以后加载。 link 是 XHTML 标签无兼容问题import 是在 CSS2.1 提出的低版本的浏览器不支持。 link 支持使用 Javascript 控制 DOM 去改变样式而import不支持。 4. 行内元素有哪些块级元素有哪些区别 行内元素a、b、span、img、input、select、strong 块级元素div、ul、li、dl、dt、h1h5、p 行内块元素: img、input 、td、 button 空元素br、hr、img、link、meta 块级 每个块级元素都是独自占一行 高度宽度行高外边距margin以及内边距padding都可以控制 元素的宽度如果不设置的话默认为父元素的宽度父元素宽度100% 多个块状元素标签写在一起默认排列方式为从上至下 行内 不会独占一行相邻的行内元素会排列在同一行里直到一行排不下才会自动换行其宽度随元素的内容而变化 高宽、行高无效对外边距margin和内边距padding仅设置左右方向有效上下无效 设置行高有效等同于给父级元素设置行高 元素的宽度就是它包含的文字或图片的宽度不可改变 行内元素中不能放块级元素a 链接里面不能再放链接 行内块 行内块级元素它既具有块级元素的特点也有行内元素的特点它可以自由设置元素宽度和高度也可以在一行中放置多个行内块级元素。比如input、img就是行内块级元素它可设置高宽以及一行多个 总结 块级元素会独占一行而行内元素和行内块元素则会在一行内显示 块级元素和行内块元素可设置 width、height 属性而行内元素设置无效 块级元素的 width 默认为 100%而行内元素则是根据其自身的内容或子元素来决定其宽度 5. 怎么理解回流跟重绘什么场景下会触发 回流布局引擎会根据各种样式计算每个盒子在页面上的大小与位置重绘当计算好盒模型的位置、大小及其他属性后浏览器根据每个盒子特性进行绘制触发条件 1) 回流 添加或删除可见的DOM元素 元素的位置发生变化 元素的尺寸发生变化包括外边距、内边框、边框大小、高度和宽度等 内容发生变化比如文本变化或图片被另一个不同尺寸的图片所替代 页面一开始渲染的时候这避免不了 浏览器的窗口尺寸变化因为回流是根据视口的大小来计算元素的位置和大小的2) 重绘: 颜色的修改 文本方向的修改 阴影的修改 触发回流一定会触发重绘 6. px、em、rem有什么区别 px: 绝对长度单位。相对于显示器屏幕分辨率而言存在浏览器不兼容问题。 em: 相对长度单位。em值并不是固定的如果自身设置了font-size则计算自身的否则em会继承设置了font-size的父级元素的字体大小存在容易造成字体设置混乱问题。 rem: 相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px浏览器兼容性比较好 7. 1rem、1em、1vh、1pxvminvmax各自代表的含义 rem rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小然后其他元素的长度单位就为rem。em 子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-sizevw/vh 全称是 Viewport Width 和 Viewport Height视窗的宽度和高度相当于屏幕宽度和高度的 1%不过处理宽度的时候%单位更合适处理高度的 话 vh 单位更好。px px像素Pixel。绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。 一般电脑的分辨率有{19201024}等不同的分辨率 19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。 如果窗口高度1080宽度1920那么。 1vmin1080px/10010.8px 1vmax1920px/10019.2px 8. 实现响应式布局的方法 什么是响应式 一种网络页面设计布局页面的设计与开发应当根据用户行为以及设备环境系统平台屏幕尺寸屏幕定向等进行相应的响应和调整 基本原理 通过媒体查询检测不同的设备屏幕尺寸做处理为了处理移动端页面头部必须有meta声明viewport. 1) 媒体查询 rem flex布局 缺点 在响应式布局中必须通过js来动态控制根元素font-size的大小也就是说css样式和js代码有一定的耦合性且必须将改变font-size的代码放在css样式之前。 解决 默认情况下我们html标签的font-size为16px,我们利用媒体查询设置在不同设备下的字体大小。 2媒体查询 百分比布局 缺点 不易计算布局问题变得复杂 3媒体查询 vw rem布局 给根元素大小设置随着视口变化而变化的vw单位这样就可以实现动态改变其大小 限制根元素字体大小的最大最小值配合body加上最大宽度和最小宽度 4Bootstrap栅格系统
9. 什么是媒体查询 媒体查询是可以针对不同的媒体类型定义不同的样式从而实现响应式布局 也可以针对不同的分辨率设置不同的样式。当你重置浏览器大小的过程中页面也会根据浏览器的宽度和高度重新渲染页面 10. Flex弹性布局有哪些属性 flex-direction 决定元素是横排还是竖着排 flex-wrap 设置了弹性容器超出时是否换行 flex-flow flex-direction 和 flex-wrap 的简写 align-items 设置弹性容器的子元素在纵轴方向的对齐方式 align-content 多行对齐方式 justify-content 设置弹性容器子元素在横轴方向上的对齐方式 11. 隐藏元素的方法 displaynone不会在页面中占据位置也不会响应绑定的监听事件。 visibilityhidden元素在页面中仍占据空间但是不会响应绑定的监听事件。 opacity0将元素的透明度设置为 0以此来实现元素的隐藏。元素在页面中仍然占据空间并且能够响应元素绑定的监听事件。 12. display:none和visibility:hidden的区别 display:none 隐藏对应的元素在文档布局中不再给它分配空间它各边的元素会合拢就当他从来不存在。 visibility:hidden 隐藏对应的元素但是在文档布局中仍保留原来的空间。 13. rgba和opacity的透明效果有什么不同 Rgba即可以指定元素颜色也可以指定透明度opacity只能控制元素透明度不能设置颜色 Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置在使用rgba是可以实现元素不同部位透明度不同而opacity使元素透明度一致 支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity 14. display的属性值及作用 15. display的blockinline和inline-block区别 block: 会独占一行多个元素会另起一行可以设置width、height、margin和padding属性; inline: 元素不会独占一行设置width、height属性无效。但可以设置水平方向的margin和padding属性不能设置垂直方向的padding和margin; inline-block: 将对象设置为inline对象但对象的内容作为block对象呈现之后的内联对象会被排列在同一行内。 16. position的值 relative和absolute分别是相对于谁进行定位的 relative: 相对定位相对于自己本身在正常文档流中的位置进行定位。absolute: 生成绝对定位相对于最近一级定位不为static的父元素进行定位。最终找到bodyfixed: 老版本IE不支持生成绝对定位相对于浏览器窗口或者frame进行定位。static: 默认值没有定位元素出现在正常的文档流中。sticky: 生成粘性定位的元素容器的位置根据正常文档流计算得出。 17. 清除浮动
清除浮动主要是为了解决父元素没有设置高度时因为子级元素浮动引起的内部高度为0的问题 方法 给需要清除浮动的元素设置样式clearboth父元素结束标签之前插入清除浮动的块级元素利用伪元素clearfix.clearfix :: after{ clearboth }给父元素构建一个BFC比如overflow为hiddendisplay为flex 额外标签法 给谁清除浮动就在其后额外添加一个空白标签 优点 通俗易懂书写方便。不推荐使用 缺点 添加许多无意义的标签结构化比较差。父级添加overflow方法 可以通过触发BFC的方式实现清楚浮动效果。 优点 简单、代码少、浏览器支持好 缺点 内容增多时候容易造成不会自动换行导致内容被隐藏掉无法显示需要溢出的元素。不能和position配合使用因为超出的尺寸的会被隐藏。 使用after伪元素清除浮动 :after方式为空元素的升级版好处是不用单独加标签了。 优点 符合闭合浮动思想结构语义化正确不容易出现怪问题目前大型网站都有使用如腾迅网易新浪等等 缺点 由于IE6-7不支持 18. 什么是 BFC BFC 也就是常说的块格式化上下文这是一个独立的渲染区域规定了内部如何布局 让处于 BFC 内部的元素和外部的元素相互隔离并且这个区域的子元素不会影响到外面的元素其中比较重要的布局规则有内部 box 垂直放置计算 BFC 的高度的时候浮动元素也参与计算。 触发条件 根元素即HTML元素 浮动元素float值为left、right overflow值不为 visible为 auto、scroll、hidden display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid position的值为absolute或fixed 应用场景 防止margin重叠 清除内部浮动 自适应多栏布局 19. 可继承属性和不可继承属性
1 可继承 font-family字体系列 font-weight字体的粗细 font-size字体的大小 text-indent文本缩进 text-align文本水平对齐 line-height行高 color文本颜色 visibility控制元素显示隐藏 cursor光标显示为何种形态 2 不可继承 盒子模型属性width、height、border、margin、padding display规定元素应该生成的框的类型 vertical-align垂直文本对齐 background背景属性 定位属性float、position 20. 如何实现盒子的水平垂直居中
1) felx布局 div classboxdiv classbox-content/div
/div方式一
.box {display: flex;justify-content: center;align-items: center;
}方式二
.box {display: flex;.box-content {margin: auto; //垂直水平居中margin auto 10px; //垂直居中margin 10px auto; //水平居中}
} 2) 定位 偏移 div classboxdiv classbox-content/div
/div.box {position: relative;.box-content {width: 200px;height: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) //不知道盒子宽高偏移自身的宽度和高度的 -50%transform: translate(-100px, -100px) //知道盒子宽高偏移自身的宽度和高度的一半}
} 21. 如果要做优化CSS提高性能的方法有哪些 内联首屏关键CSS 避免使用css表达式 异步加载CSS 资源压缩 合理使用选择器 减少使用昂贵的属性 如 box-shadow/border-radius/filter/透明度/:nth-child 等 不要使用import 22. pageXclientXscreenXoffsetX区别 pageX/Y 对于整个页面来说包括了被卷去的body部分的长度 clientX/Y 点击位置距离当前body可视区域的xy坐标 screenX/Y 点击位置距离当前电脑屏幕的xy坐标 offsetX/Y 相对于带有定位的父盒子的xy坐标 23. base64的原理及优缺点 优点可以加密减少了HTTTP请求 缺点是需要消耗CPU进行编解码 24. li 与 li 之间有看不见的空白间隙是什么原因引起来的怎么解决
原因 浏览器的默认行为是把 inline 元素间的空白字符空格换行 tab渲染成一个空格也就是我们上面的代码li换行后会产生换行字符而它会变成一个空格当然空格就占用一个字符的宽度 解决方案 消除间隔 ul {letter-spacing: -5px;
}ul li {letter-spacing: normal;
} 25. 画一个三角形
.box {width: 0;height: 0;border-width: 100px;border-style: solid;border-color: transparent #0099CC transparent transparent;transform: rotate(90deg); /*顺时针旋转90°*/
}
div classbox/div26. 画一条0.5px的直线
考查的是css3的transform height: 1px;
transform: scale(0.5); 27. CSS3动画有哪些 transition 实现渐变动画 transition动画详解 transform 转变动画 transform属性详解 animation 实现自定义动画 animation详解 28. CSS3渐变 CSS3 定义了两种类型的渐变gradients 线性渐变 - 向下/向上/向左/向右/对角方向 径向渐变 -Radial Gradients- 由它们的中心定义 线性渐变 语法background-image:linear-gradientdirection,color-stop1,color-stop2,……); direction渐变方向/角度可选45degto bottomto top,to right,to left,to left top… color-stop选择颜色rgba可以设置透明度也可以设置色标点区域 例rgba(255,255,255,0.3) 20%径向渐变 语法background-image: radial-gradient(shape size at position, start-color, …, last-color); shape 参数定义了形状。它可以是值 circle 或 ellipse。其中circle 表示圆形ellipse 表示椭圆形。默认值是 ellipse。 size主要用来确定径向渐变的结束形状大小。如果省略了其默认值为“farthest-corner” at position起点中心点的位置可以是关键字水平方向–left,center,right, 垂直方向–top,center,bottom具体数值或百分比。
