HTML CSS 基础面试题

来源：互联网发布：网络作家猫腻金泰妍编辑：程序博客网时间：2024/05/20 04:26

HTML、CSS基础

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

阅读全文

1 0

HTML CSS 基础 面试题

HTML、CSS基础

HTML CSS 基础面试题