HTML CSS 基础 面试题

HTML、CSS基础

1. 浏览器及内核：
   
   • IE - trident
   • chrome - blink
   • opera - blink
   • Safari - webkit
   • Firefox - gecko
2. HTML中Doctype的作用
   
   • 文档声明头
   • 告知浏览器的解析器按照何种规范解析页面
   • DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现
   • 严格模式，以浏览器支持的最高标准运行
3. div+css的布局较table布局有什么优点？
   
   • 符合W3C标准，结构清晰，结构、样式和行为分离；
   • 更有语义化的标签，SEO优化
   • 布局修改简单、带来足够好的可维护性
   • 代码体积小，页面加载速度快、（整个table加载完了才显示内容）
4. 渐进增强、优雅降级
   
   • 渐进增强：针对低版本浏览器来构建页面，保证基本的功能，针对高级浏览器追加功能；
   • 优雅降级：一开始构建网站的完整功能，再向下兼容；
5. 图片的格式有哪些？
   
   • jpg、JPEG、png、GIF、SVG；webp : 2010 Google I/O大会推出,无损压缩体积更小；
6. 微格式？
   
   • 结构化数据的开放标准
   • 适合人类阅读、易被机器读取，容易和外部进行数据通信
7. 大量图片的网站，如何优化？提升用户体验？
   
   • JQuery插件，lazy-load，判断页面向上卷曲的距离，根据scrollTop来加载图片；
   • 如果为相册，优先加载第一张；
   • 使用CSS精灵图、iconfont字体图标；
8. HTML结构语义化？
   
   • 根据内容的语义化，选择合适的标签
   • 结构清晰
   • 用户体验好（label标签）
   • 搜索引擎优化
   • 方便其他设备解析（盲人阅读器）
   • 便于团队的开发和维护
9. 有哪项方式可以设置DOM的CSS样式？
   
   • 行内
   • 内嵌
   • 外联
10. CSS选择器？
    
    • p、.box、#box、*；
    • 后代选择器(空格)、直接子代选择器(>)、兄弟选择器(+)
    • 交集选择器(p.box)，并集选择器(,)，属性选择器([])，伪类选择器(:)
11. 哪些CSS属性定义，可以使DOM元素不再页面可视区？
    
    • display：none
    • 宽高为0，visibility：hidden
    • 宽高为0，opacity：0
12. CSS的hack？IE6、7、8的CSS hack？
    
    • 条件注释语句 [if IE] ![endif]
    • IE6、7中*p{}、_p{}
    • IE6不认识!important
13. 行内元素、块级元素特点？
    
    • 块级元素：div、p、h1-h6、ul 、ol、li、dl、dd、dt
    • 行内元素：span、a、img、input…
    • 空元素(单标签)：br、hr、img、input、link、meta
    • 块级元素独占一行、可设宽高；
    • 行内元素 一行显示、不可设置竖直方向的padding和margin
    • line-block行内块，一行、可设宽高：img、input、button、texterea、label
14. margin塌陷？
    
    • 垂直兄弟关系：标准文档流中、垂直方向margin以较大值为准；
    • 嵌套关系：子盒子设置margin-top时，父盒子一起下移，over-flow：hidden、透明边框、给父盒子设padding；
15. css中让文字：垂直、水平方向重叠的属性？
    
    • 水平：letter-spaceing设为负值（用于清除图片3px空白）
    • 垂直：width太小，line-height为0时，垂直重叠；
    • 扩展：消除img3px空白1、给父元素设置高度；2、display：block；3、vertical-align；4、font-size：0；
16. CSS优先级：
    
    • !important > 行内 > 内嵌 > 外联
    • id > 类 > 标签
    • 就近原则（后来样式覆盖之前的）
17. CSS属性哪些可以继承？不可以继承？
    
    • 继承：以font-开头、以text-开头、color、列表元素list-style
    • 不可以继承：宽、高、padding、margin
18. display和position的值？
    
    • display：none、block、inline、inline-block；
    • position：static、relative(不脱标，相对自己原位置左上角定位)、absolute(脱标，相对已经定位的离自己最近的父元素定位)、fixed(脱标，相对浏览器窗口进行定位)、inherit
19. 行内元素不能设置垂直方向的padding和margin
20. 盒模型
    
    • content + padding + border + margin
    • W3C盒模型：width=content
    • IE盒模型：width = content + padding + border
21. b标签和strong标签，i标签和em标签区别？
    
    • 前者无语义、后者有语义
22. CSS样式初始化？
    
    • 一些元素在不同的浏览器下默认样式不同；
    • ​浏览器之间会出现页面的差异；
23. Quirks模式？它和Standards模式有什么区别？
    
    • IE6之后，引入标准模式，但IE6之前的页面按照标准模式解析，页面不能正常显示；
    • 因此，增加了怪异模式的分支，例如当页面没有DTD时，将会议怪异模式解析；
    • 区别：
      
      • IE盒模型width = content + padding + border
      • 怪异模式给行内元素设置width、height会生效
      • 怪异模式使用margin：0 auto使盒子居中无效
24. CSS样式语句构成：
    
    • 选择器 { 属性 : 值; }
25. 如何居中一个div？
    
    • 标准文档流中：margin：0 auto
    • 脱标：已知宽高：position：absolute；top：50%；left：50%；margin-top、margin-left自身的一半
    • 脱标：宽高未知：position：absolute；top：0；left：0；bottom：0；right：0；
    • 如何居中img？display：table-cell；vertical-align：middle；text-align：center；
26. 前端页面又哪三层构成？作用？
    
    • html、CSS、JS
    • 结构、样式、交互
27. IE6的双倍margin：
    
    • IE6并且float与margin方向相同时，会出现双倍margin，解决方案：float与margin方向相反；
28. HTML结构语义化？
    
    • 根据内容的语义化，选择合适的标签
    • 结构清晰
    • 用户体验好（label标签）
    • 搜索引擎优化
    • 方便其他设备解析（盲人阅读器）
    • 便于团队的开发和维护
29. px和em的区别？
    
    • px是固定单位
    • em是继承父元素的font-size
    • rem是继承根元素的font-size
30. display:none与visibility:hidden的区别?
    
    • display:none;在页面彻底消失
    • visibility：hidden；不脱离标准文档流，只是可视为隐藏
31. img的alt与title有何异同？strong和em的异同？
    
    • alt属性是在图片无法加载时显示的文字，SEO优化
    • title是鼠标悬停时的提示信息
    • 同：有语义、强调标签
    • 异：strong加粗、em斜体
32. 为什么利用多个域名来存储网站资源会更有效？
    
    • 突破浏览器并发限制
    • 节约cookie带宽
    • CDN缓存更方便
    • 节约主域名的连接数，优化页面响应速度
    • 防止不必要的安全问题
33. BFC块级格式化上下文？
    
    • Block formatting context 块级格式化上下文
    • 创建独立的渲染区域，该区域内元素布局与区域外元素布局互不影响
    • 哪些元素会生成BFC？
    • 1根元素、2float、3position为absolute或fixed、4overflow：hidden
34. 从前端角度分析，如何做好SEO？
    
    • meta标签优化：title、description、keywords
    • 有语义的标签
    • 点击付费的搜索引擎
    • 增加外部链接
35. JS上线后一般有哪些缓存？
    
    • 服务器缓存
    • 浏览器缓存
    • CDN缓存
    • dns缓存
36. rgba()和opacity()的异同？
    
    • 都可以设置透明度
    • rgba()背景色透明，不能继承
    • opcity()元素透明度，可以继承
37. less是什么？
    
    • css预处理器
    • 变量、嵌套、函数
    • 利于维护、结构清晰、提高效率
38. a链接点击过后不具备hover、active样式，怎么解决？
    
    • 遵守爱恨准则
    • link、visited、hover、active
39. HTML、XHTML的区别？
    
    • XHTML更为严格
    • 标签合理嵌套
    • 元素闭合
    • 标签小写
    • 必须有跟元素
    • 属性用“”
    • 注释内不能写–
    • 图片要有说明文字
40. CSS中link和@import的区别？
    
    • link是HTML标签，@import是CSS中提供的
    • link页面加载时同时加载，@import在CSS加载完成后加载
    • @import存在兼容性问题，IE5以上
    • @import权重低
41. CSS3新增伪类？
    
    • :nth-child(2n)，实现奇偶选择
    • :nth-of-type ,相同元素第一个
    • :nth-of-child, 父元素的第一个子元素
    • :empity、:checked、:disabled、
    • :target
42. 包含块：containing block
    
    • 为子元素提供尺寸、位置的参考
    • position：absolute，相对于离自己最近的已经定位的父元素定位
    • position：fixed，相对于浏览器窗口
43. 浏览器兼容性问题
    
    • 元素默认样式不同，padding、margin…=>初始化样式
    • 双倍margin，IE6、float与margin方向相同，hack：float与margin方向相反
    • IE6、7不支持小于12px的盒子，设置_font-size:0;
    • IE6不支持overflow:hidden;设置_zoom:1;
    • IE6的3px bug,子盒子margin-top会多3px,设置-margin
    • IE超链接后hover样式不存在，爱恨准则
44. web标准、W3C的理解？
    
    • 标准：结构、样式、行为分离，便于代码开发维护；
    • html的标签小写、闭合、合法嵌套，利于SEO优化；
    • W3C：统一标准，降低开发难度、成本，降低bug
45. http和https的异同？
    
    • https需要申请证书，需要费用
    • http是明文传输，无状态；https使用SSL加密传输，需要身份认证，更安全
    • http端口80；https端口443
46. cookies，sessionStorage和localStorage的区别？
    
    • 相同点：存储在浏览器端，同源
    • 区别：cookie每次请求都会携带，还有路径概念；
    • 大小：cookie最多4K，PK 5M；
    • 有效期：cookie可以设置、sessionStorage浏览器窗口关闭前，localStorage始终有效
47. src和href的区别？
    
    • src是页面必不可少的一部分，是引入
    • href是引用，当前元素和外部资源建立联系
    • 解析到src时，下载执行src文件，href不会影响当前页面的解析