文化体育局网站建设,计算机网站建设与开发,深圳微商城网站建设,市场营销策划书模板1, HTML5中新增了哪些内容#xff1f;广义上的html5指的是最新一代前端开发技术的总称#xff0c;包括html5#xff0c;CSS3#xff0c;新增的webAPI。Html中新增了header,footer,main,nav等语义化标签#xff0c;新增了video,audio媒体标签#xff0c;新增了canvas画布。…1, HTML5中新增了哪些内容广义上的html5指的是最新一代前端开发技术的总称包括html5CSS3新增的webAPI。Html中新增了header,footer,main,nav等语义化标签新增了video,audio媒体标签新增了canvas画布。新增了一些标签属性例如input的placeholder。Css3中新增了圆角阴影滤镜vwvh单位flex布局媒体查询过度和动画伪类。H5webAPI,新增了localStorage和sessionStoragequerySelectorwebSocketrequestAnimationFrameWorker(类似分线程)地理位置。2, 什么是HTML语义化HTML语义化的好处是什么html语义化让页面的内容结构化结构更清晰便于对浏览器、搜索引擎解析;即使在没有样式CSS情况下也以一种文档格式显示并且是容易阅读的;搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重利于SEO;使阅读源代码的人对网站更容易将网站分块便于阅读维护理解。3, Css中Position定位都有哪些方式分别是什么效果。Static(默认) 静态定位流式布局Relative相对定位参与流式布局可以使用left等在原有位置上进行位置调整。Absolute绝对定位脱离文档流相对于另一个元素进行定位。Fixed固定定位脱离文档流相对于浏览器窗口定位不随页面滚动而改变位置。Sticky粘性定位可实现动态fixed。4, Absolute定位的元素相对于哪个元素进行定位相对于离自己最近的、position为非static的祖先元素进行定位。5, 前端页面中动画都有哪些实现方式各自分别适用于哪些场景Transition简单的动画只需要在两个状态之间变化的动画。keyframeAnimation适合需要在多个状态连续进行的动画。 js动画功能最强的动画但是效率最低6, 怎么隐藏页面中的某个元素Display:none; 隐藏且不占用位置。Visibility:hidden; 隐藏但保留位置。Opacity:0; 隐藏但保留位置。7, 行元素和块元素的区别是什么行元素会在水平方向排列设置宽高无效上下边距无效块元素各占据一行垂直方向排列。可设置宽高,内外边距行内块元素: 会在水平方向排列,可设置宽高,内外边距同时,可通过display属性修改标签元素类型8, 如何解决行内块间距问题给父元素设置font-size:0使用弹性布局或浮动布局使用固定定位或者绝对定位9标准盒模型和IE怪异盒模型的区别在标准模式下块的总宽度 width margin(左右) padding(左右) border(左右)怪异模式下块的总宽度 width margin(左右)即width已经包含了padding和border值10Css3中transition和animation的区别- transition只有开始和结束两个状态并且需要通过事件触发- animation可以通过定义关键帧指定多个动画状态可以自动播放11、单行文本溢出显示为省略号text-overflow: ellipsis;overflow: hidden;white-space: nowrap;12、页面中常用哪些单位, 有什么区别px 以物理像素为基准 em以当前元素font-size为基准- rem以html font-size为基准- vw/vh以浏览器窗口宽高为基准 100vw浏览器窗口宽度rpx 适用于小程序或uniapp中可以实现自适应 750rpx屏幕宽度13、什么是响应式页面是依赖什么技术实现的能够根据不同的浏览器尺寸显示不同的布局方式。依赖媒体查询实现14、怎么在页面上显示一条斜线一条折线一线曲线方法一: 使用canvas绘图画出来 (比较麻烦)方法二: 使用div边框线 视图转换(旋转/倾斜)或边框圆角实现(简单方便)方法三: 使用背景的线性渐变或经向渐变实现(较耗性能)15、在页面头部显示导航条不随页面滚动在页面左侧显示垂直菜单栏不随页面滚动你会怎么实现如何避免导航条、菜单栏盖住页面上的内容使用position:fixed 固定定位实现, 头部设置top属性, 左侧的设置left属性并使用z-index属性设置显示层级, 值越大越不容易被覆盖16、怎样实现元素上下左右都居中(1实现元素本身内容居中text-align:center行高。(2实现子元素在父元素中居中绝对定位上下左右设置0margin:auto。(3, 使用flex弹性布局(4, 绝对定位left,top:50%transform:translate:-50%。17、flex弹性布局很强大可以实现几乎所有的布局效果包括以往很难实现的弹性效果但什么情况不能用flex弹性布局实现Flex布局是css3的新特性, 在一些低版本的浏览器上(如IE8)不支持flex布局18, 怎样在不使用新元素的情况下清除浮动在浮动元素的父元素上添加一个class,为这个class添加后缀.after样式其中写content:””;display:block;clear:both19, Css文件中importfont-facekeyframes,media这4个关键字的作用是什么 import导入另一个css文件font-face导入一个字体文件keyframes声明一个关键帧动画media声明一个媒体查询条件20, Less/Sass比css高级到哪了支持嵌套支持变量定义支持“模板函数21,常见兼容性问题有哪些兼容问题大多出现老版本浏览器不支持新样式或渲染不统一的情况下png24位的图片在iE6浏览器上出现背景解决方案是做成PNG8.也可以引用一段脚本处理.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。对于老IE浏览器使用css hack解决兼容问题。IE6双边距bug:块属性标签float后又有横行的margin情况下在ie6显示margin比设置的大。浮动ie产生的双倍距离IE6双边距问题在IE6下如果对元素设置了浮动同时又设置了margin-left或margin-rightmargin值会加倍。 Retina屏幕手机浏览器的1px边框问题通过前后缀伪元素或者缩放解决22, 什么是元素盒模型包含哪几部分计算元素尺寸时从哪部分开始计算元素从结构上分为4层内容内间距边框外间距。通过box-sizing设置计算方式默认为content-box,及计算内容盒可以设置为border-box,计算到边框盒。23, ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。单冒号(:)用于CSS3伪类双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在定义在元素主体内容之前的一个伪元素。并不存在于dom之中只存在在页面之中。:before 和 :after 这两个伪元素是在CSS2.1里新出现的。起初伪元素的前缀使用的是单冒号语法但随着Web的进化在CSS3的规范里伪元素的语法被修改成使用双冒号成为::before ::after24, 常用的浏览器有哪些他们分别是什么内核chrome、safari属于webkit内核。老IE(10和10以下) 属于Trident内核。firefox属于Gecko内核。新IE属于Edge内核。 360等特殊浏览器多内核浏览器。25, 什么叫优雅降级和渐进增强都是解决网站对于老旧版本浏览器的兼容问题。优雅降级Web站点在所有新式浏览器中都能正常工作如果用户使用的是老式浏览器则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强从被所有浏览器支持的基本功能开始逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时它们会自动地呈现出来并发挥作用。
