2023年6月21日发(作者：)

前端常见的HTML+CSS⾯试题（附答案）HTML1. 标签上title属性与alt属性的区别是什么？alt属性是为了给那些不能看到你⽂档中图像的浏览者提供⽂字说明的。且长度必须少于100个英⽂字符或者⽤户必须保证替换⽂字尽可能的短。这包括那些使⽤本来就不⽀持图像显⽰或者图像显⽰被关闭的浏览器的⽤户，视觉障碍的⽤户和使⽤屏幕阅读器的⽤户等。title属性为设置该属性的元素提供建议性的信息。使⽤title属性提供⾮本质的额外信息。参考《alt和title属性的区别及应⽤》2. 分别写出以下⼏个HTML标签：⽂字加粗、下标、居中、字体加粗：、下标：居中：

字体：、3. 请写出⾄少5个html5新增的标签，并说明其语义和应⽤场景section：定义⽂档中的⼀个章节nav：定义只包含导航链接的章节header：定义页⾯或章节的头部。它经常包含 logo、页⾯标题和导航性的⽬录。footer：定义页⾯或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议⽤的地址。aside：定义和页⾯内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。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 ⽂档必须拥有根元素。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. 会产⽣很多页⾯，不容易管理。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. 不够语义12. 简述⼀下src与href的区别src⽤于替换当前元素；href⽤于在当前⽂档和引⽤资源之间确⽴联系。src是source的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置href是Hypertext Reference的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接CSS1. 谈谈你对CSS布局的理解常见的布局⽅式：固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding2. 请列举⼏种可以清除浮动的⽅法（⾄少两种）浮动会漂浮于普通流之上，像浮云⼀样，但是只能左右浮动。正是这种特性，导致框内部由于不存在其他普通流元素了，表现出⾼度为0（⾼度塌陷）。a. 添加额外标签，例如
b. 使⽤br标签和其⾃⾝的html属性，例如
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，从⽽使这个元素“消失”在页⾯中。4. 如何让⼀段⽂本中的所有英⽂单词的⾸字母⼤写text-transform：none| capitalize(将每个单词的第⼀个字母转换成⼤写) | uppercase(将每个单词转换成⼤写 ) | lowercase(将每个单词转换成⼩写 )5. 请简述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、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::selection7. CSS伪类与CSS伪对象的区别CSS 引⼊伪类和伪元素的概念是为了描述⼀些现有CSS⽆法描述的东西根本区别在于：它们是否创造了新的元素（抽象）伪类：⼀开始⽤来表⽰⼀些元素的动态状态，随后CSS2标准扩展了其概念范围，使其成为了所有逻辑上存在但在⽂档树中却⽆须标识的“幽灵”分类伪对象：代表了某个元素的⼦元素，这个⼦元素虽然在逻辑上存在，但却并不实际存在于⽂档树中8. 请简述CSS的权重规则⼀个⾏内样式+1000，⼀个id+100，⼀个属性选择器/class类/伪类选择器+10，⼀个元素名/伪对象选择器+1。关系选择器将拆分为两个选择器再计算.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，媒体查询，多栏布局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百分⽐：将计算后的值传递给后代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. 外部样式表：通过标签引⼊⼀个外部css⽂件b. 内部样式表：将css代码放在