HTML
1. <img>标签上title属性与alt属性的区别是什么?
title:当光标移动到图片上,显示title属性
alt:图片不显示,显示alt属性
2. 分别写出以下几个HTML标签:文字加粗、下标、居中、字体
文字加粗:b strong
下标:sub
居中:center
字体:font
3. 请说说你对标签语义化的理解?
让合适的标签作合适性,利于搜索引擎搜索
4. Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?
<!DOCTYPE> 标签位于文档的开头,用来说明当前文档的类型。
严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。(渐进增强
)
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。(优雅降级)
5.你知道多少种Doctype文档类型?
过渡的(Transitional)、严格的(Strict)和框架的(Frameset)
6. HTML与XHTML——二者有什么区别
a.XHTML元素必须被正确地嵌套。
b.XHTML元素必须被关闭。
c.标签名必须用小写字母。
d.XHTML文档必须拥有根元素。
7. iframe的优缺点?
优点:
a.解决加载缓慢的第三方内容如图标和广告等的加载问题
b.iframe无刷新文件上传
c.iframe跨域通信
缺点:
a.iframe会阻塞主页面的Onload事件
b.无法被一些搜索引擎索引到
c.页面会增加服务器的http请求
d.会产生很多页面,不容易管理。
8. 请阐述table的缺点
a.太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接
的损失就是大大增加了冗余代码量。
b.灵活性差,比如要将tr设置border等属性,是不行的,得通过td
c.代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱
d.混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺
序混乱。
e.不够语义
9. 简述一下src与href的区别
src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。
CSS
1. 谈谈你对CSS布局的理解
常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding。
2. 请列举几种可以清除浮动的方法(至少两种)
1、给父元素加overflow:hidden
2、给浮动元素加clear:left clear:right clear:both
3、父元素加clearfix::after{content:‘’;display:block;clear:both}
4、给父元素加
clearfix::after;clearfix::before{content:‘’;display:table;clear:both}
3. 请列举几种隐藏元素的方法
1、display:none; 2、opacity:0;3、visibility:hidden;
4. 如何让一段文本中的所有英文单词的首字母大写
text-transform:capitalize; 首字母大写
5. 请简述CSS样式表继承
CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素。会被继承下去的属性如下:
文本相关:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,color,text-…
列表相关:list-style-image,list-style-position,list-style-type,list-style
6. 请简述CSS的选择器
基本选择器:类名选择器、id选择器、标签选择器、多类名选择器、通配符选择器
复杂选择器:子代选择器、后代选择器、交集选择器、并集选择器
伪类选择器:a:link、a:hover、a:visite、a:active
7. CSS伪类与CSS伪对象的区别
根本区别在于:它们是否创造了新的元素(抽象)
伪类:一开始用来表示一些元素的动态状态,随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类
伪对象:代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中
8. 请简述CSS的权重规则
!Important>style>id选择器>类名选择器>标签选择器>通配符选择器
元素本身的样式>继承的样式
继承或者*的贡献值0,0,0,0
每个标签的贡献值0,0,0,1
每个类的贡献值0,0,1,0
每个id的贡献值0,1,0,0
每个行内样式的贡献值1,0,0,0
每个!important贡献值重要的无穷大
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是相对长度单位,相对于当前对象内文本的字体尺寸。
Rem是相对长度单位,相对于根元素文本的字体尺寸
11. CSS中 link 和@import 的区别是什么?
a.link属于HTML标签,而@import是CSS提供的,且只能加载CSS
b.页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加
载完再加载
c.import只在IE5以上才能识别,而link是HTML标签,无兼容问题
d.link方式的样式的权重高于@import的权重
e.当使用Javascript控制DOM去改变样式的时候,只能使用link方式,因
为@import眼里只有CSS,不是DOM可以控制
12. position的absolute与fixed共同点与不同点
absolute和fixed脱离标准流,不占位置
absolute: 父元素没有定位,元素相对于视口定位;父元素定位,元素相对于父元素定位。
fixed:相对于浏览器窗口定位
13. position的值, relative和absolute分别是相对于谁进行定位的?
relative:相对于元素本身定位
absolute:父元素没有定位,元素相对于视口定位;父元素定位,元素相对于父元素定位。
14. CSS3有哪些新特性?
CSS3实现圆角(border-radius),阴影(box-shadow),对文字加特效(text-shadow),线性渐变(gradient),变形(transform)
增加了更多的CSS选择器多背景rgba,在CSS3中唯一引入的伪元素是::selection,媒体查询,多栏布局
15. 为什么要初始化CSS样式?
浏览器存在兼容问题
16. 解释下 CSS sprites原理,优缺点
将背景图片放到一张图上,利用background-image、background-repeat,,background-position等样式对所需图片进行定位
17. 解释下浮动和它的工作原理?
浮动的元素会脱离标准流,移动到设置好的位置上
浮动元素碰到包含它的边框或者浮动元素的边框停留。
18. 浮动元素引起的问题
a.父元素的高度无法被撑开,影响与父元素同级的元素
b.与浮动元素同级的非浮动元素会跟随其后
c.若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响页面显
示的结构
19. 什么是 FOUC(无样式内容闪烁)?你如何来避免 FOUC?(未学)
如果使用import方法对CSS进行导入,会导致某些页面在Windows下的IE出现一些奇怪的现象:
以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(FlashofUnstyledContent),简称为FOUC。
原理:当样式表晚于结构性html加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象。
解决方法:使用LINK标签将样式表放在文档HEAD中。
20 :link、:visited、:hover、:active的执行顺序是怎么样的?
:link:未访问链接
:visited:已访问的链接
:hover:鼠标移动到链接上
:active:鼠标选定链接
21 经常遇到的浏览器兼容性有哪些?如何解决?
a.浏览器默认的margin和padding不同
b.IE6双边距bug
c.在ie6,ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给
元素设置默认的行高的高度导致的
d.min-height在IE6下不起作用
e.透明性IE用filter:Alpha(Opacity=60),而其他主流浏览器用opacity:0.6
f.input边框问题,去掉input边框一般用border:none;就可以,但由于IE6在解
析input样式时的BUG(优先级问题),在IE6下无效
22 有哪项方式可以对一个DOM设置它的CSS样式?
1、 行内样式
2、 内联样式
3、 外联样式
23 什么是外边距重叠?重叠的结果是什么?
外边距重叠有两种情况:1、两个相邻块元素,一个设置下外边距,一个设置上外边距,外边距发生重叠,它的值为两者的最大值;2、当父块状元素没有边框和上内边距时,父块状元素与子块状元素的上外边距发生合并,值为两者上外边距的最大值
24 rgba()和opacity的透明效果有什么不同?
opacity作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素
的颜色或其背景色。