优秀的程序员web前端分享HTML5常见面试题合集五 1.导入页面样式时，使用link和@import有什么区别？ 答：区别一：本质区别：link是一个XHTML标签，而@import完全是CSS提供的一种方式。 区别二：加载顺序的区别：页面加载时（即浏览者浏览时），链接引用的CSS会同时加载，而@引用的CSS导入将等到页面完全下载后再加载。所以有时候在浏览@import加载了CSS的页面时，会出现没有样式（也就是闪烁）的情况，在网速慢的时候还是比较明显的。 差异3：兼容性差异：@import是CSS2.1提出的，旧浏览器不支持。@import只能被IE5及以上识别，但是link标签没有这个问题。 区别四：使用dom(documentobjectmodeldocumentobjectmodel)控制样式时的区别：使用javascript控制dom改变样式时，只能使用link标签，因为@import不行由dom控制。 2.![]()
标签上的title属性和alt属性有什么区别？ 答：title属性是鼠标上拉时显示的内容。 alt属性是为那些看不到文档中的图像的观众提供文本描述。 3。请至少写出5个html5新标签，并解释它们的语义和应用场景。header：定义页面或部分的标题。它通常包括徽标、页面标题和导航目录。 footer：定义页面或章节的页脚。它通常包含版权信息、法律信息的链接以及反馈建议的地址。 aside：定义与页面内容不太相关的内容——如果删除，剩余的内容仍然有意义。 4、HTML和XHTML——两者有什么区别？ 答案： 1。HTML元素必须正确嵌套。 2。XHTML元素必须是封闭的。 3。标签名称必须使用小写字母。 4。XHTML文档必须有一个根元素。 5.iframe的优缺点？ 答：优点： a。解决图标、广告等第三方内容加载缓慢的问题 b.iframe不刷新文件上传c．iframe跨域通信 缺点： a.iframe会阻塞主页面的Onload事件b．无法被某些搜索引擎收录 c.http请求D.会产生很多页面，不好管理。 6。全屏滚动的原理是什么？使用了CSS的哪些属性？ 答：原理：有点类似轮播，整体元素一直排列，假设有5个全屏页面显示，那么高度为500%，只显示100%，并且其余可以在y轴上变换定位也可以通过margin-top实现 overflow:hidden;过渡：所有1000ms缓和； 7。什么是响应式设计？响应式设计的基本原则是什么？如何兼容低版本IE？ 答：响应式网页设计（ResponsiveWebdesign）是一个可以兼容多种终端的网站，而不是针对每个终端做一个特定的版本。 的基本原理是通过媒体查询检测不同的设备屏幕尺寸进行处理。 页面标题必须有元声明的视口。 8、::before和:after中的双冒号和单冒号有什么区别？解释一下这2个伪元素的作用 答：单冒号（:）表示CSS3伪类，双冒号（::）表示CSS3伪元素。 ::before是在元素主要内容之前定义的伪元素，存在子元素。它不存在于dom中，只存在于页面中。这两个伪元素 :before和:after是CSS2.1中新增的。起初，伪元素的前缀使用单冒号语法，但随着Web的演进，在CSS3规范中，伪元素的语法被修改为使用双冒号，变成::before::after 9、如何让Chrome支持小于12px的文字？ 答案：p{font-size:10px;-webkit-transform:scale(0.8);}//0.8是缩放比例 10。请简要描述您对HTML语义的理解？ 答案：1.贴对标签做对的事。 2。语义html使页面内容结构化，更加清晰，便于浏览器和搜索引擎分析； 3。以文档格式显示，无需样式CSS，且易于阅读； 4。搜索引擎爬虫还依靠HTML标签来确定上下文和每个关键字的权重，使用SEO； 5.让阅读源代码的人更容易将网站分块，便于阅读和维护理解。
