博罗企业网站建设,公司网站建设框架,品牌型网站建设理论,做公众号封面网站html篇章 什么是 HTML5#xff1f; html是一种超文本标记语言#xff0c;html5它更侧重于语义化#xff0c;对于seo、搜索引擎优化更好#xff0c;可以大量应用在移动设备上。 HTML5有哪些的新特性#xff1f; 新增布局标签#xff1a;head、footer、nav、article、sect…html篇章 什么是 HTML5 html是一种超文本标记语言html5它更侧重于语义化对于seo、搜索引擎优化更好可以大量应用在移动设备上。 HTML5有哪些的新特性 新增布局标签head、footer、nav、article、section、aside其中article中可以包含多个sectionarticle主要强调独立性而section主要强调分段。 新增状态标签meter可模拟电量progress可模拟当前任务完成进度。 新增列表标签datalist用于搜索提示details用于对专有名词的解释summary用于指定问题。 新增文章标签ruby用于包裹要注意的文字mark用于标记文本呈现搜索结果。 新增视频标签video视频标签audio音频标签其中的属性controls控制视频音频是否播放。 新增全局属性content editable元素是否可编辑draggable元素是否可拖动hidden是否隐藏元素… HTML5中input新增的type属性值 type属性邮箱、数值、url、搜索、电话、范围、颜色、日期、月份、时间 png、jpg、gif这些图片格式解释一下分别什么时候用呢 png格式为无损压缩可以更高质量的保存图片不支持动图可做小图标。 jpg格式为有损压缩有一点失真不支持动图可以做中大图标。 gif格式支持简单的透明度背景支持动图但是色彩呈现不完善。 webp格式由谷歌公司推出同时支持无所压缩和有损压缩但兼容性不是特别好。 bmp格式不进行压缩对图片要求极高一般用于中大型游戏中的图片。 浏览器如何实现不同标签页的通信 浏览器不同标签通常是通过浏览器搜索引擎进行通信的不同标签页之间的通信需要浏览器提供的跨端口机制实现如window对象每个标签页都有一个独立的window对象可以通过window对象来访问和操作该标签页的窗口和文档对象window.postMessage()发送信息window.addListener()监听事件等 HTML5应用程序缓存和HTML浏览器缓存有什么区别 HTML5应用程序缓存主要针对Web应用程序而HTML浏览器缓存则针对整个Web页面。 HTML5应用程序缓存使用AppCache机制将缓存文件列表存储在浏览器中浏览器会根据列表中的文件进行缓存HTML浏览器缓存则使用HTTP缓存机制根据HTTP响应头中的信息进行缓存。 HTML5应用程序缓存只针对当前Web应用程序而HTML浏览器缓存则针对整个浏览器。 link和import的区别 属性关系不同link是一个标签而import是css提供的一种引入方式。 加载顺序不同link引入css页面和样式同时加载而import是在页面完全加载之后再加载css样式。 link是html元素不存在兼容性问题而import是ie5以上才可以识别。 link可以控制js来操作dom进而改变样式而import是一种css语法不可以操作dom。 ur地址输入之后发生了什么 首先浏览器将URL转化为IP地址也就是DNS解析DNS解析是一个互联网协议用于将人类可读的域名转化为计算机可读的IP地址 其次浏览器与目标网站之间建立TCP连接TCP是一种网络协议用于在计算机之间建立可靠的通信 然后浏览器会向目标网站发送http请求http是一种通信协议用于浏览器和服务器之间的信息交换 然后目标网站在收到HTTP请求后会发送HTTP响应给浏览器包括网页的HTML、CSS、JavaScript代码等 然后浏览器对接收到的html代码进行解析解析为dom并且将css样式应用到dom树上浏览器会计算出页面的布局和大小然后将渲染树输出到屏幕上显示出可视化图像 那么如果页面包含动态内容浏览器可能需要与服务器进行额外的交互来获取这些内容 最后浏览器会加载页面所需要的其他资源如图像、视频等。 三次握手客户端向服务器发起连接请求服务器确认收到客户端发送的连接请求并且向客户端再次发送连接请求客户端确认收到服务器发送的连接请求。 四次挥手客户端发出断开连接的请求服务端确认收到请求服务端发出断开连接的请求客户端确认收到请求。 浏览器的内核分别是什么 ie浏览器的内核为Trident内核也称IE内核。 chrome浏览器的内核统称chrome内核以前是webkit内核现在是blink内核。 firefox浏览器的内核为Gecko内核俗称firefox内核。 苹果Safari浏览器的内核为webkit内核特点不受IE、Firefox等内核的约束比较安全。 Opera浏览器最初是自己的presto内核后来加入谷歌大军从webkit又到blink内核。 HTML5兼容性问题处理 引入 html5shiv.js 文件可识别h5新标签但是不可以识别多媒体标签。 使用meta中的属性让浏览器处于最优渲染方式。 针对于双核浏览器优先使用webkit内核。 如何解决页面内容加载缓慢的问题可以具体说说吗 通过压缩HTML、CSS、JavaScript等文件大小减少加载时间。 使用合适的图片格式如JPEG、PNG格式等控制图片大小来避免图片过大导致加载时间过长。 通过webpack打包合并CSS和JavaScript文件减少HTTP请求次数提升加载速度。 如何解决首页内容加载缓慢的问题 减少减少页面中的资源数量。 通过压缩HTML、CSS、JavaScript等文件大小减少加载时间。 按需加载只加载用户需要的内容减少不必要的资源加载提高首屏加载速度。 使用路由懒加载技术在需要时才加载对应的资源减少首屏加载时间。 localStorage、sessionStorage、cookie的区别 localStorage、sessionStorage、cookie三者都是用来存储客户端临时信息的对象但localStorage、sessionStorage只能存储字符串类型遇到其他类型需要转换成字符串类型进行存储两者的大小都是不超过5M那localStorage是持久化存储在浏览器中除非手动删除存 localStorage.setItem(‘键’‘值’) 取 localStorage.getItem(‘键’‘值’) 删除localStorage.removeItem(‘键’) 而sessionStorage 是会话存储浏览器关闭数据就会被销毁仅在当前浏览器窗口关闭之前有效。需要注意不同浏览器没办法共享localStorage或sessionStorage的数据信息。那 cookie 是浏览器本地化存储用于客户端与服务器进行会话的使并且可以设置过期时间在过期前有效。它需要在服务器环境才可以存储上存储大小4kb左右的数据目前的使用场景辨别用户身份记录用户访问次数等。
css篇章 说一下css的盒模型盒模型之间的转化 盒模型分为标准盒模型和IE盒模型标准盒模型由margin、border、padding、content组成IE盒模型由margin和内容区域组成而内容区域包含border、padding、content组成标准盒模型转化为IE盒模型box-sizingborder-boxIE盒模型转化为标准盒模型box-sizingcontent-box实际项目中通常使用IE盒模型这样修改padding不会影响整体布局但在ie盒模型中会有一种特殊情况例如宽固定100pxpadding为50pxborder为5px那么整体宽度为110px因为padding的左右大小加起来已经为100px所以呢需要加上左右两边边框的大小值整体大小为110px。 css优先级权重算法如何计算 !import 内联样式 id class 标签 通配 继承的样式 css优先级的计算方式类似于8进制的写法000但它的第一位为id选择器的个数第二位为类、伪类、属性选择器的个数第三位为元素、伪元素选择器的个数然后从左向右依次比较然后计算出优先级如果两个选择符的计算权重值相同则采取“就近原则。 隐藏元素的方法有哪些以及它们的区别 display: none会隐藏元素将元素从页面布局中删除不占据任何空间不会被子元素继承因为该元素已经被删除因此无法触发绑定事件过渡动画transition对于display 是无效的display: none会产生重排和重绘。 visibility: hidden会隐藏元素元素仍然占据页面空间只是不可见会被子元素继承但是可通过设置子元素visibility:visible来显示子元素visibility:hidden只会引起页面重绘。 opacity: 0会隐藏元素元素仍然占据页面空间会被子元素继承但是不能将子元素设置为opacity:1 来重新显示。只是样式完全透明元素上面绑定的事件是可以触发的opacity:0只会引起页面重绘。 width: 0只适用于块级元素通过将元素的宽度设置为0来隐藏元素。 height: 0只适用于块级元素通过将元素的高度设置为0来隐藏元素。 overflow: hidden; 该方法将元素的溢出内容隐藏起来包括内容超出尺寸的部分和滚动条等。 重绘和重排有什么区别以及如何避免重排和重绘 重排也叫回流当渲染树中的一部分或因为全部大小边距等问题发生改变而需要dom树重新计算的过程为重排。 重绘是当元素的一部分属性发生变化如外观、背景、颜色发生变化并不会引起布局变化只需要浏览器根据元素的新属性重新绘制使得元素呈现新的外观的过程为重绘。 如何避免重排和重绘避免频繁操作样式例如修改元素的尺寸、颜色、位置等会导致浏览器不断地重排和重绘影响性能。避免使用table布局因为一旦表格的某个部分发生变化整个表格都需要重新计算导致性能下降。尽可能减少DOM操作例如通过一次性修改样式或属性而不是频繁地修改。避免使用内联样式会导致元素具有独特的样式无法与其他元素共享从而导致性能下降。优化图片大小避免加载不必要的图片以及使用适当的图片格式。使用CSS3的特性例如动画、过渡、变换等可以减少重排和重绘的次数。 一个元素水平垂直居中的方式有哪些 margin居中方法父元素设置宽高为400px并且需要设置overflow: hidden是为了解决margin高度塌陷的问题子元素设置宽高200pxmargin: 0 auto 来控制水平居中margin-top: 父元素内容的高度 – 子元素总体的高度/ 2 的值来控制垂直居中。 内联元素居中子元素为行内元素时父元素设置宽高400pxtext-align: center, line-height: 400px子元素由内容自动撑开即可。 弹性布局父元素添加display: flex; justify-content: center; align-items: center控制子元素水平垂直位置居中。 transformposition绝对定位居中父元素添加position: relative 相对于自己定位子元素添加position:absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) 使得子元素上下垂直居中。 定位元素在包含块中居中父元素设置宽高400pxposition:relative子元素设置宽高为100pxleft:0 right:0 top:0 bottom:0 margin: auto。 css哪些属性可以继承哪些不可继承 可继承属性文字相关属性color、font-size、font-style… letter-spacing、text-align、line-height、word-spacing背景相关属性background-color、background-image、background-repeat… 不可继承属性宽高、外内边距、float、position、display、过渡、动画等 css3新增了哪些新特性 新增动态伪类、目标伪类 新增边框属性 border-radius 新增阴影属性 box-shadow 新增渐变 线性渐变background-imageliner- gradient()径向渐变background-imageradial- gradient() 新增opacity属性控制透明度 新增背景相关属性设置背景图的原点background - origin对背景图进行修剪background-clip调整背景图大小background-size 新增文本属性text-shadow与盒子阴影box-shadow 用法相同text-shadow:none没有阴影文本换行white-space 新增文本修饰text-decorationnone去掉下划线 新增2d和3d变换旋转扭曲缩放 新增动画与过度效果 新增长度单位 对伸缩盒模型的了解有哪些 display:flex主轴方向上从左到右flex-direction:row右到左flex-direction:row-reverse从上到下flex-direction:column下到上flex-direction:column-reverse主轴方向上换行flex-wrap:wrap主轴对齐方式居中justify-contentcenter子元素与子元素的距离是子元素与边框间距的二倍justify-contentspace-around子元素与子元素的距离相等并且子元素与边框之间没有距离justify-contentspace-between子元素与子元素的距离相等并且子元素与边框之间均匀分布justify-contentspace-evenly。侧轴方向一行对齐align-items:center垂直居中侧轴多行对齐align-content:center居中对齐默认对齐方式align-contentstretch。 flex:auto、flex:1、flex:none、flex:0 auto 分别代表什么意思 flex-basis 设置主轴上的基准长度。 flex-grow 定义子元素的放大比例默认为0若所有子元素的flex-grow都为1则等分剩余空间若三个子元素flex-grow值分别为123则分到的分别为1/62/63/6的空间 flex-shrink 定义子元素的宽度计算分母若盒子200200300flex-shrink都为1则分母为200 x 1200 x 1300 x 1700父元素收缩了300计算每一个盒子收缩比 200 x 1 / 700为盒子是200的收缩比那就是收缩了(200 x 1/700) x 300(父元素收缩的像素) flex:auto可以拉伸可以伸缩不设置基准长度 flex:1可以拉伸可以伸缩基准长度为0 flexnone不能拉伸不能压缩不设置基准长度 flex0 auto不能拉伸 可以压缩 不设置基准长度 line-height和height的区别 line-heigth是指定的每一行文字的高度如果文字换行则整个文字高度增大height 行数*行高normal 浏览器根据文字大小决定的一个默认值数字font-size的倍数百分比与font-size百分比类似行高过小文字会重叠且最小值为0不可以为负行高可以继承单行文本垂直居中多行文字间距 height是指定盒子的总体高度不会改变如果文字过多会造成文字溢出 如何解决边界塌陷 margin塌陷父元素包裹子元素给子元素设置margin-top只想让子元素距离父元素边框有一段距离父元素和子元素一起移动出现了塌陷。 解决边界塌陷1.父元素加边框2.父元素添加padding-top3.父元素设置overflow:hidden触发bfc机制4.给父元素增加浮动让其脱离标准流但是会使得margin0 auto 失效需要给父元素使用相对定位以及transformtranslate(-50%,0)来解决5.将父元素转化为行内块元素。 内容溢出如何处理 overflow:visible显示内容默认值overflowhidden 隐藏滚动条无论内容是否溢出滚动条不显示overflowscroll 显示滚动条不论内容是否溢出都会显示滚动条overflowauto自动显示滚动条内容不溢出滚动条不显示其中overflow-xoverflow-y不能一个显示hidden一个显示visibleoverflow常用的值是hidden和auto该属性还可以解决其他问题 如何解决行内元素之间的空白问题 行内块元素之间换行会被浏览器解析为一个空白字可以符去掉换行空格不推荐来解决元素空白问题或者给父元素设置font-size0然后给需要的显示文字元素单独设置文字大小。 什么是浮动浮动产生的问题以及如何清除浮动 一开始浮动是为了设置文字环绕图片或文字环绕文字这种布局而浮动后的元素会脱离文档流默认宽高是被内容撑开的且可以设置宽高不会独占一行并且不会有外边距合并的问题等。浮动产生的影响对兄弟元素而言后面的兄弟元素会占据浮动之前元素的位置而对父元素而言撑不开父元素的高度会导致父元素高度塌陷。如果想解决父元素塌陷问题可以给父元素设置高度、给父元素也设置float:left让其父元素也一起浮动、给父元素添加overflow:hidden可以解决父元素塌陷的问题但是以上的办法都不能解决最后一个盒子不浮动被隐藏的影响。因此可以通过伪元素:after添加display: block;clear: both;来解决浮动带来的影响。 常见的几种定位 默认值static固定定位fixed相对定位relative绝对定位absolute粘性定位sticky五种定位方式默认值没有进行定位固定定位相对于浏览器视口定位相对定位不脱离文档流且元素位置的变化不会对其他元素产生任何影响绝对定位会脱离文档流且对后面的兄弟元素有影响绝对定位和浮动不可以一起设置如果同时设置会以定位为主粘性定位不会脱离文档流专门用于窗口滚动的新的定位方式粘性定位和相对定位的特点一致但粘性定位可以在元素达到某个位置时将其固定。 对cssom是如何理解的 css对象模型是对css样式表的对象化同时还提供了相关api用来操作css样式。构建cssom树是依赖于dom树那在构建cssom树时对于任何一个元素的最终样式浏览器会从该节点的最上层通过递归方式不断向下合并更加具体的规则最终得出完整结果。 什么是BFCBFC触发的条件以及触发BFC解决了什么问题 块级格式化上下文是指浏览器中创建了一个独立的渲染区域它决定了其子元素如何定位以及与其他元素的相互关系和作用。简单来说就是页面上的一个隔离容器容器里面的子元素不会影响到外面元素。BFC产生条件有浮动元素、行内块元素、表格单元格display:table、flex布局、position属性为absolute或fixed、display:flow-root等其中display:flow-root不支持ie浏览器BFC所解决的问题可以防止外边距发生重叠、清除浮动、防止高度塌陷。 说说对渐进增强和优雅降级的理解 渐进增强是先对低版本浏览器进行构建页面完成基本功能开发然后针对高版本浏览器进行效果交互、追加功能达到更好的体验。 优雅降级先构建高版本的完整功能然后在针对浏览器进行兼容比如用css3构建一个应用做完后逐步针对各大浏览器进行兼容使其可以在低版本浏览器正常浏览。 如何让chrome浏览器支持小于12px的字体 chrome浏览器默认字体大小16px每个浏览器默认字体大小都可能不一样假设设置字体10px设置css缩放使用transform进行缩放设置display: inline-block; -webkit-transform: scale(0.8)。 说说em/px/rem/vh/vw区别? px为绝对像素em是相对于当前元素font-size的倍数如果自身元素上没有font-size就会去font-size去找一层层找没有则使用默认字体rem是相对于html根元素大小进行设置百分比是相对于父元素进行计算vw为视口宽度的百分比vh为视口高度的百分比。 如何实现左右两栏布局(左边固定右边自适应) 两个盒子 利用浮动左边盒子浮动这时右边盒子会覆盖在左边盒子上假设左边盒子给宽度200px则右边盒子需要给左外边距200px。 利用BFC机制左侧盒子进行浮动右侧盒子设置overflow:hidden。 利用display:flex布局左侧盒子设置固定的宽度假设200px右侧设置flex:1。 利用栅格布局父元素设置display:grid; grid-template-columns: 100px auto。 如何实现上下两栏布局上边固定下边自适应两个盒子 利用浮动将左右两个盒子分别添加左浮动和右浮动并且三个盒子高都为100vh宽都为200px则中间盒子外边距左右都为200px右侧盒子margin-top为负的100vh 则可以实现左右两侧固定中间自适应。 利用flex布局父元素displayflex左右两边元素固定宽度中间元素flex1可实现左右固定中间自适应的布局。 利用栅格布局三列布局 grid-template-columns制定三列中间自适应为auto。 如何实现左中右三栏布局(左边右边固定中间自适应) 三个盒子 利用vh计算 上边盒子固定高度下边盒子自适应。 利用display:grid; grid-template-rows 行布局进行实现 上边固定高度100px 下边auto自适应。 利用flex-direction换轴为列column下边盒子设置 flex:1上边盒子固定高度 如何实现上中下三栏布局(上边和下边固定中间自适应) 三个盒子 利用100vh减去上下盒子的高度为中间的盒子的高度。 利用flex-direction换轴为列column中间盒子设置 flex:1 撑开上下盒子固定高度。 利用网格 grid 布局 grid-template-rows 行轨道设置上100px 中间自适应auto下100px。 左右布局沾满全屏左右两块固定中间自适应要求先加载中间块写出结构以及样式 双飞翼布局程序从上往下执行将中间子元素写在第一个然后左边元素右边元素给所有子元素添加浮动然后左边元素margin-left: -100%中间盒子宽度百分百右边元素需要给外边距负200px即可。 对响应式布局的和自适应布局的理解 响应式布局可用于移动端根据不同屏幕大小通过css3中的媒体查询技术动态的调整整个网页的布局和样式给用户提供更高的体验那响应式布局包含媒体查询、弹性布局、响应式图片、流式布局等。 自适应布局可以让网页自动适应不同屏幕尺寸和形状的布局技术实现自适应布局如高度自适应、宽度自适应、利用float实现、利用margin、媒体查询修改样式等。 常见的适配方案有哪些 百分比布局但不同属性的百分比值相对参照物可能不同因此很难统一。 rem动态font-size适配rem是相对于html根元素的font-size来设置的通过媒体查询来设置不同尺寸的屏幕根元素的font-size尺寸让js监听页面可视区宽度clientWidth的变化重新设置font-size到html上。 flex的弹性布局方式可以进行适配一些布局。 css3动画有了解吗 定义动画keyframes move { from {} // 第一帧 to {} // 最后一帧 }动画属性中设置动画方式animation-timing-functionlinear设置动画播放次数animation-iteration-count3设置动画方向animation-directionalternate为往复运动、 reverse为从结束到开始、alternate-reverse为反方向交替运动设置动画以外的状态animation-fill-modefowards是最后一帧停止在最右侧 、 backwards是归位设置播放状态animation-play-staterunning为运动、paused为暂停该属性一般写在hover中动画复合属性animationmoves 3s 0.5s linear 2 reverse forwards 动画和过渡的区别动画不需要触发条件过渡需要触发条件动画可以使用关键精细设置过渡不可以过渡关注点只是始末状态。 如果要做优化CSS提高性能的方法有哪些 允许浏览器在需要时动态地加载资源。 压缩CSS文件的大小从而减少HTTP请求的数量。 缓存已经下载的CSS文件减少再次下载和解析的时间。 注意复用样式减少渲染上花的时间。 使用CSS媒体查询根据设备的屏幕尺寸、分辨率等条件来动态地改变样式。 如何实现单行、多行文本溢出的省略样式 单行文本省略设置固定宽度然后使用white-space禁止自动换行并且使用属性text-overflow: ellipsis;可显示省略号来表示省略的文本。 多行文本省略设置了元素的宽度并使用了 -webkit-box 属性来限制显示的行数当文本超出了元素的宽度时overflow:hidden 属性就会发挥作用隐藏被省略的文本。同时使用 -webkit-line-clamp 属性来限制在一个块元素显示的文本的行数。 如何画一条0.5px的线 使用border-width:0.5px可以进行绘制 使用CSS Grid的网格线来模拟0.5像素的线条 使用SVG的元素来绘制一条宽度为0.5像素的线SVG标签的属性宽高分别设置100pxline标签的属性stroke-width设置为0.5可以达到效果。 CSS如何画一个三角形原理是什么 设置一个盒子并将盒子四周设置为不同颜色的边框然后将盒子宽高设置为0仅保留边框宽度从而得到四个三角形选择其中一个后其他三角形边框设置颜色为透明。那原理就是不同颜色的边框组成了一个三角形形状。 说说对css预编语言的理解有哪些区别? CSS预处理器是一种编程语言可以用来编写CSS的自定义代码然后通过解析器编译生成对应的CSS文件。在CSS预处理器中可以声明变量然后在代码中使用该变量可以定义作用域限制某些特定样式的作用范围可以嵌套选择器减少重复的代码。以上操作在css并不支持。
