607283666
0618-12919046
导航

34道常见的HTML+CSS面试题(附谜底)

发布日期:2022-09-08 01:14

本文摘要:民众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!一、HTML1、image标签上title属性与alt属性的区别是什么?alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

yabo亚搏手机最新版app

民众号【传智播客博学谷】回复关键词:前端 PS Java(100G) Python(80G) 大数据 区块链 测试 PPT JS(40g+300教程) HTML 简历 领取相关学习资料!一、HTML1、<image>标签上title属性与alt属性的区别是什么?alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。这包罗那些使用原来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的分外信息。

参考《alt和title属性的区别及应用》2、划分写出以下几个HTML标签:文字加粗、下标、居中、字体加粗:<b>、<strong>下标:<sub>居中:<center>字体:<font>、<basefont>、参考《HTML标签列表》3、请写出至少5个html5新增的标签,并说明其语义和应用场景section:界说文档中的一个章节nav:界说只包罗导航链接的章节header:界说页面或章节的头部。它经常包罗 logo、页面标题和导航性的目录。footer:界说页面或章节的尾部。

它经常包罗版权信息、执法信息链接和反馈建议用的地址。aside:界说和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。参考《HTML5 标签列表》4、请说说你对标签语义化的明白?a. 去掉或者丢失样式的时候能够让页面出现出清晰的结构b. 有利于SEO:和搜索引擎建设良好相同,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;c. 利便其他设备剖析(如屏幕阅读器、瞽者阅读器、移动设备)以意义的方式来渲染网页;d. 便于团队开发和维护,语义化更具可读性,遵循W3C尺度的团队都遵循这个尺度,可以淘汰差异化。

5、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?声明位于文档中的最前面,处于 标签之前。见告浏览器以何种模式来渲染文档。严格模式的排版和 JS 运作模式是,以该浏览器支持的最高尺度运行。

在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法事情。DOCTYPE不存在或花样不正确会导致文档以混杂模式出现。

6、你知道几多种Doctype文档类型?标签可声明三种 DTD 类型,划分表现严格版本、过渡版本以及基于框架的 HTML 文档。HTML 4.01 划定了三种文档类型:Strict、Transitional 以及 Frameset。

XHTML 1.0 划定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。Standards (尺度)模式(也就是严格出现模式)用于出现遵循最新尺度的网页,Quirks(包容)模式(也就是松散出现模式或者兼容模式)用于出现为传统浏览器而设计的网页。7、HTML与XHTML——二者有什么区别a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。c. 标签名必须用小写字母。d. XHTML 文档必须拥有根元素。参考《XHTML 与 HTML 之间的差异》8、html5有哪些新特性、移除了那些元素?a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功效的增加。

b. 拖拽释放(Drag and drop) APIc. 语义化更好的内容标签(header,nav,footer,aside,article,section)d. 音频、视频API(audio,video)e. 画布(Canvas) APIf. 地理(Geolocation) APIg. 当地离线存储 localStorage 恒久存储数据,浏览器关闭后数据不丢失h. sessionStorage 的数据在页面会话竣事时会被清除i. 表单控件,calendar、date、time、email、url、searchj. 新的技术webworker, websocket等移除的元素:a. 纯体现的元素:basefont,big,center, s,strike,tt,u;b. 对可用性发生负面影响的元素:frame,frameset,noframes;9、iframe的优缺点?优点:a. 解决加载缓慢的第三方内容如图标和广告等的加载问题b. iframe无刷新文件上传c. iframe跨域通信缺点:a. iframe会阻塞主页面的Onload事件b. 无法被一些搜索引擎索引到c. 页面会增加服务器的http请求d. 会发生许多页面,不容易治理。参考《iframe的一些记载》10、Quirks模式是什么?它和Standards模式有什么区别?在写法式时我们也会经常遇到这样的问题,如何保证原来的接口稳定,又提供更强大的功效,尤其是新功效不兼容旧功效时。

IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将接纳对CSS支持更好的结构,而如果没有,则接纳兼容之前的结构方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。区别:总体会有结构、样式剖析和剧本执行三个方面的区别。a. 盒模型:在W3C尺度中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包罗了padding和border。

b. 设置行内元素的高宽:在Standards模式下,给等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包罗的内容来决议的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

11、请论述table的缺点a. 太深的嵌套,好比table>tr>td>h3,会导致搜索引擎读取难题,而且,最直接的损失就是大大增加了冗余代码量。b. 灵活性差,好比要将tr设置border等属性,是不行的,得通过tdc. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常杂乱d. 杂乱的colspan与rowspan,用来结构时,频繁使用他们会造成整个文档顺序杂乱。

e. 不够语义参考《为什么说table表格结构欠好?》12、简述一下src与href的区别src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置href是Hypertext Reference的缩写,指向网络资源所在位置,建设和当前元素(锚点)或当前文档(链接)之间的链接民众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!二、CSS1、谈谈你对CSS结构的明白2、请枚举几种可以清除浮动的方法(至少两种)浮动会漂浮于普通流之上,像浮云一样,可是只能左右浮动。正是这种特性,导致框内部由于不存在其他普通流元素了,体现出高度为0(高度塌陷)。

yabo亚搏手机最新版app

a. 添加分外标签,例如<div style="clear:both"></div>b. 使用br标签和其自身的html属性,例如<br clear="all" />c. 父元素设置 overflow:hidden;在IE6中还需要触发hasLayout,例如zoom:1;d. 父元素设置 overflow:auto 属性;同样IE6需要触发hasLayoute. 父元素也设置浮动f. 父元素设置display:tableg. 使用:after 伪元素;由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。在CSS2.1内里有一个很重要的观点,那就是 Block formatting contexts (块级花样化上下文),简称 BFC。建立了BFC的元素就是一个独立的盒子,内里的子元素不会在结构上影响外面的元素,同时BFC仍然属于文档中的普通流。

IE6-7的显示引擎使用的是一个称为结构(layout)的内部观点。参考《那些年我们一起清除过的浮动》3、请枚举几种隐藏元素的方法a. visibility: hidden;这个属性只是简朴的隐藏某个元素,可是元素占用的空间任然存在。b. opacity: 0;一个CSS3属性,设置0可以使一个元素完全透明,制作出和visibility一样的效果。

与visibility相比,它可以被transition和animatec. position: absolute;使元素脱离文档流,处于普通文档之上,给它设置一个很大的left负值定位,使元素定位在可见区域之外。d. display: none;元素会变得不行见,而且不会再占用文档的空间。e. transform: scale(0);将一个元素设置为无限小,这个元素将不行见。

这个元素原来所在的位置将被保留。f. HTML5 hidden attribute;hidden属性的效果和display:none;相同,这个属性用于记载一个元素的状态g. height: 0; overflow: hidden;将元素在垂直偏向上收缩为0,使元素消失。只要元素没有可见的边框,该技术就可以正常事情。

h. filter: blur(0);将一个元素的模糊度设置为0,从而使这个元素“消失”在页面中。参考《使用CSS隐藏HTML元素的4种常用方法》《通过HTML和CSS隐藏和显示元素的4种方法》4、如何让一段文本中的所有英文单词的首字母大写text-transform:none| capitalize(将每个单词的第一个字母转换成大写) | uppercase(将每个单词转换成大写 ) | lowercase(将每个单词转换成小写 )5、请简述CSS样式表继续CSS样式表继续指的是,特定的CSS属性向下通报到子孙元素。会被继续下去的属性如下:参考《CSS样式表继续详解》文底细关:font-family,font-size, font-style,font-variant,font-weight, font,letter-spacing,line-height,color列表相关:list-style-image,list-style-position,list-style-type, list-style6、请简述CSS的选择器元素选择器:* 、E、 E#id、 E.class关系选择器:E、F、E>F、E+F、E~F属性选择器:E[att]、E[att="val"]、E[att~="val"]、E[att^="val"]、E[att$="val"]、E[att*="val"]、E[att|="val"]伪类选择器:E:link、E:visited、E:hover、E:active、E:focus、E:lang(fr)、E:not(s)、E:root、E:first-child、E:last-chil等伪工具选择器:E:first-letter/E::first-letter、E:first-line/E::first-line、E:before/E::before、E:after/E::after、E::selection参考《选择符列表》7、CSS伪类与CSS伪工具的区别CSS 引入伪类和伪元素的观点是为了形貌一些现有CSS无法形貌的工具基础区别在于:它们是否缔造了新的元素(抽象)伪类:一开始用来表现一些元素的动态状态,随后CSS2尺度扩展了其观点规模,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类伪工具:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中参考《CSS伪类与CSS伪元素的区别及由来》8、请简述CSS的权重规则一个行内样式+1000,一个id+100,一个属性选择器/class类/伪类选择器+10,一个元素名/伪工具选择器+1。

关系选择器将拆分为两个选择器再盘算。参考《CSS权重》9、请写出多种等高结构a. 假等高列:使用配景图片,在列的父元素上使用这个配景图举行Y轴的铺放,从而实现一种等高列的假像b. 给容器div使用单独的配景色(牢固结构)(流体结构):用元素中的最大高度撑大其他的容器高度c. 建立带边框的两列等高结构:用border-left来做,只能使用两列。d. 使用正padding和负margin对冲实现多列结构方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出配景切掉e. 使用边框和定位模拟列等高:但不能使用在多列f. 模拟表格结构等高列效果:兼容性欠好,在ie6-7无法正常运行10、在CSS样式中常使用px、em,各有什么优劣,在体现上有什么区别?px是相对长度单元,相对于显示器屏幕分辨率而言的。

em是相对长度单元,相对于当前工具内文本的字体尺寸。px界说的字体,无法用浏览器字体放大功效。

em的值并不是牢固的,会继续父级元素的字体巨细,1 ÷ 父元素的font-size × 需要转换的像素值 = em值。11、CSS中 link 和@import 的区别是什么?a. link属于HTML标签,而@import是CSS提供的,且只能加载 CSSb. 页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载c. import只在IE5以上才气识别,而link是HTML标签,无兼容问题d. link方式的样式的权重 高于@import的权重e. 当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制12、position的absolute与fixed配合点与差别点相同:a. 改变行内元素的出现方式,display被置为blockb. 让元素脱离普通流,不占据空间c. 默认会笼罩到非定位元素上区别:absolute的”根元素“是可以设置的,而fixed的”根元素“牢固为浏览器窗口。当你转动网页,fixed元素与浏览器窗口之间的距离是稳定的。

13、position的值, relative和absolute划分是相对于谁举行定位的?absolute:生成绝对定位的元素,相对于 static 定位以外的第一个祖先元素举行定位fixed:生成绝对定位的元素,相对于浏览器窗口举行定位。(IE6不支持)relative:生成相对定位的元素,相对于其在普通流中的位置举行定位static:默认值。没有定位,元素泛起在正常的流中14、CSS3有哪些新特性?CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)增加了更多的CSS选择器 多配景 rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏结构参考《CSS3中的动画效果记载》、《CSS3中border-radius、box-shadow与gradient那点事儿》15、为什么要初始化CSS样式?因为浏览器的兼容问题,差别浏览器对有些标签的默认值是差别的,如果没对CSS初始化往往会泛起浏览器之间的页面显示差异。

固然,初始化样式会对SEO有一定的影响,但鱼和熊掌不行兼得,但力图影响最小的情况下初始化。16、解释下 CSS sprites原理,优缺点CSS Sprites其实就是把网页中一些配景图片整合到一张图片文件中,再使用CSS的“background-image”,“background- repeat”,“background-position”的组合举行配景定位,background-position可以用数字准确的定位出配景图片的位置。优点:a. 淘汰网页的http请求b. 淘汰图片的字节c. 解决了网页设计师在图片命名上的困扰,只需对一张荟萃的图片上命名就可以了,不需要对每一个小元素举行命名d. 更换气势派头利便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的气势派头就可以改变。

缺点:a. 在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易泛起配景断裂b. CSS Sprites在开发的时候,要通过photoshop或其他工具丈量盘算每一个配景单元的准确位置c. 在维护的时候比力贫苦,如果页面配景有少许改动,一般就要改这张合并的图片17、解释下浮动和它的事情原理?a. 浮动元素脱离文档流,不占据空间(引起“高度塌陷”现象)b. 浮动元素遇到包罗它的边框或者浮动元素的边框停留。18、浮动元素引起的问题a. 父元素的高度无法被撑开,影响与父元素同级的元素b. 与浮动元素同级的非浮动元素会追随其后c. 若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显示的结构19、什么是 FOUC(无样式内容闪烁)?你如何来制止 FOUC?如果使用import方法对CSS举行导入,会导致某些页面在Windows下的IE泛起一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。

此样式表被下载息争析后,将重新渲染页面,也就泛起了短暂的花屏现象。解决方法:使用LINK标签将样式表放在文档HEAD中。20、line-height三种赋值方式有何区别?(带单元、纯数字、百分比)带单元:px不用盘算,em则会使元素以其父元素font-size值为参考来盘算自己的行高纯数字:把比例通报给子女,例如父级行高为1.5,子元素字体为18px,则子元素行高为1.5*18=27px百分比:将盘算后的值通报给子女参考《line-height的明白》、《浅析line-height和vertical》,检察在线源码。21、:link、:visited、:hover、:active的执行顺序是怎么样的?L-V-H-A,l(link)ov(visited)e h(hover)a(active)te,即用喜欢和讨厌两个词来归纳综合22、经常遇到的浏览器兼容性有哪些?如何解决?a. 浏览器默认的margin和padding差别b. IE6双边距bugc. 在ie6,ie7中元素高度超出自己设置高度。

原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的d. min-height在IE6下不起作用e. 透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用 opacity:0.6f. input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在剖析input样式时的BUG(优先级问题),在IE6下无效23、有哪项方式可以对一个DOM设置它的CSS样式?a. 外部样式表:通过<link>标签引入一个外部css文件b. 内部样式表:将css代码放在 <style> 标签内部c. 内联样式:将css样式直接界说在 HTML 元素内部24、什么是外边距重叠?重叠的效果是什么?外边距重叠就是margin-collapse。在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以联合成一个单独的外边距。这种合并外边距的方式被称为折叠,而且因而所联合成的外边距称为折叠外边距。折叠效果遵循下列盘算规则:a. 两个相邻的外边距都是正数时,折叠效果是它们两者之间较大的值。

b. 两个相邻的外边距都是负数时,折叠效果是两者绝对值的较大值。c. 两个外边距一正一负时,折叠效果是两者的相加的和。25、rgba()和opacity的透明效果有什么差别?a. opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其配景色。b. 设置rgba透明的元素的子元素不会继续透明效果!26、css属性content有什么作用?有什么应用?css的content属性专门应用在 before/after 伪元素上,用于来插入生成内容。

可以配合自界说字体显示特殊符号。民众号【传智播客博学谷】回复关键词:前端 PS Java Python 大数据 区块链 测试 PPT JS HTML 简历 领取相关学习资料!。


本文关键词:yabo亚搏手机最新版app,道,常见,的,HTML+CSS,面,试题,附,谜底,民众,号

本文来源:yabo亚搏手机最新版app-www.yunzhoupx.com