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不会影响当前页面的解析