您的位置：首页 > 职场人生

HTML+CSS面试技巧

2015-10-21 13:49 246 查看

HTML

Doctype作用？标准模式与兼容模式各有什么区别?
（
1
）、
<!DOCTYPE>
声明位于位于
HTML
文档中的第一行，处于
<html>
标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE
不存在或格式不正确会导致文档以兼容模式呈现。


（
2
）、标准模式的排版和
JS
运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示
,
模拟老式浏览器的行为以防止站点无法工作。


HTML5为什么只需要写<!DOCTYPEHTML>？
HTML5
不基于
SGML
，因此不需要对
DTD
进行引用，但是需要
doctype
来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；


而
HTML4.01
基于
SGML,
所以需要对
DTD
进行引用，才能告知浏览器文档所使用的文档类型。


行内元素有哪些？块级元素有哪些？空(void)元素有那些？
首先：
CSS
规范规定，每个元素都有
display
属性，确定该元素的类型，每个元素都有默认的
display
值，如
div
的
display
默认值为“
block”
，则为“块级”元素；
span
默认
display
属性值为“
inline”
，是“行内”元素。


（
1
）行内元素有：
abspanimginputselectstrong
（强调的语气）

（
2
）块级元素有：
divulollidldtddh1h2h3h4…p


（
3
）常见的空元素：

<br><hr><img><input><link><meta>

鲜为人知的是：

<area><base><col><command><embed><keygen><param><source><track><wbr>
[/code]

页面导入样式时，使用link和@import有什么区别？
（
1
）
link
属于
XHTML
标签，除了加载
CSS
外，还能用于定义
RSS,
定义
rel
连接属性等作用；而
@import
是
CSS
提供的，只能用于加载
CSS;


（
2
）页面被加载的时，
link
会同时被加载，而
@import
引用的
CSS
会等到页面被加载完再加载
;


（
3
）
import
是
CSS2.1
提出的，只在
IE5
以上才能被识别，而
link
是
XHTML
标签，无兼容问题
;
[/code]

介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎
(layoutengineer
或
RenderingEngine)
和
JS
引擎。

渲染引擎：负责取得网页的内容（
HTML
、
XML
、图像等等）、整理讯息（例如加入
CSS
等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。


JS
引擎则：解析和执行
javascript
来实现网页的动态效果。


最开始渲染引擎和
JS
引擎并没有区分的很明确，后来
JS
引擎越来越独立，内核就倾向于只指渲染引擎。


常见的浏览器内核有哪些？
Trident
内核：
IE,MaxThon,TT,TheWorld,360,
搜狗浏览器等。
[
又称
MSHTML]

Gecko
内核：
Netscape6
及以上版本，
FF,MozillaSuite/SeaMonkey
等

Presto
内核：
Opera7
及以上。
[Opera
内核原为：
Presto
，现为：
Blink;]

Webkit
内核：
Safari,Chrome
等。
[Chrome
的：
Blink
（
WebKit
的分支）
]
[/code]

详细文章：浏览器内核的解析和对比-依水间

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
*HTML5
现在已经不是
SGML
的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画
canvas;

用于媒介回放的
video
和
audio
元素
;

本地离线存储
localStorage
长期存储数据，浏览器关闭后数据不丢失
;

sessionStorage
的数据在浏览器关闭后自动删除
;

语意化更好的内容元素，比如
article
、
footer
、
header
、
nav
、
section;

表单控件，
calendar
、
date
、
time
、
email
、
url
、
search;

新的技术
webworker,websockt,Geolocation;


移除的元素：


纯表现的元素：
basefont
，
big
，
center
，
font,s
，
strike
，
tt
，
u;

对可用性产生负面影响的元素：
frame
，
frameset
，
noframes
；


*
支持
HTML5
新标签：

IE8/IE7/IE6
支持通过
document.createElement
方法产生的标签，

可以利用这一特性让这些浏览器支持
HTML5
新标签，

浏览器支持新标签后，还需要添加标签默认的样式。


当然最好的方式是直接使用成熟的框架、使用最多的是
html5shim
框架

<!--[ifltIE9]>

<script>src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

<![endif]-->


*
如何区分：
DOCTYPE
声明
\
新增的结构元素
\
功能元素


简述一下你对HTML语义化的理解？
用正确的标签做正确的事情。

html
语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析
;

及时在没有样式
CCS
情况下也以一种文档格式显示，并且是容易阅读的
;

搜索引擎的爬虫也依赖于
HTML
标记来确定上下文和各个关键字的权重，利于
SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。


HTML5的离线储存怎么使用，工作原理能不能解释一下？
在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：
HTML5
的离线存储是基于一个新建的
.appcache
文件的缓存机制
(
不是存储技术
)
，通过这个文件上的解析清单离线存储资源，这些资源就会像
cookie
一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。


如何使用：

1
、页面头部像下面一样加入一个
manifest
的属性；

2
、在
cache.manifest
文件的编写离线存储的资源；

CACHEMANIFEST

#v0.11

CACHE:

js/app.js

css/style.css

NETWORK:

resourse/logo.png

FALLBACK:

//offline.html

3
、在离线状态时，操作
window.applicationCache
进行需求实现。


详细的使用请参考：有趣的HTML5：离线存储

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
在线的情况下，浏览器发现
html
头部有
manifest
属性，它会请求
manifest
文件，如果是第一次访问
app
，那么浏览器就会根据
manifest
文件的内容下载相应的资源并且进行离线存储。如果已经访问过
app
并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的
manifest
文件与旧的
manifest
文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。

离线的情况下，浏览器就直接使用离线存储的资源。


详细的使用请参考：有趣的HTML5：离线存储

请描述一下cookies，sessionStorage和localStorage的区别？
localStorage
长期存储数据，浏览器关闭后数据不丢失；

sessionStorage
数据在浏览器关闭后自动删除。


iframe有那些缺点？
*iframe
会阻塞主页面的
Onload
事件；


*iframe
和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。


使用
iframe
之前需要考虑这两个缺点。如果需要使用
iframe
，最好是通过
javascript

动态给
iframe
添加
src
属性值，这样可以可以绕开以上两个问题。


Label的作用是什么？是怎么用的？
label
标签来定义表单控制间的关系
,
当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。


<labelfor="Name">Number:</label><inputtype=“text“name="Name"id="Name"/>


<label>Date:<inputtype="text"name="B"/></label>
[/code]

HTML5的form如何关闭自动完成功能？
给不想要提示的
form
或下某个
input
设置为
autocomplete=off
。


请描述一下cookies，sessionStorage和localStorage的区别？
cookie
在浏览器和服务器间来回传递。
sessionStorage
和
localStorage
不会

sessionStorage
和
localStorage
的存储空间更大；

sessionStorage
和
localStorage
有更多丰富易用的接口；

sessionStorage
和
localStorage
各自独立的存储空间；


如何实现浏览器内多个标签页之间的通信?(阿里)
调用
localstorge
、
cookies
等本地存储方式


webSocket如何兼容低浏览器？(阿里)
AdobeFlashSocket
、
ActiveXHTMLFile(IE)
、基于
multipart
编码发送
XHR
、基于长轮询的
XHR
[/code]


CSS
介绍一下CSS的盒子模型？
（
1
）有两种，
IE
盒子模型、标准
W3C
盒子模型；
IE
的
content
部分包含了
border
和
pading;


（
2
）盒模型：内容
(content)
、填充
(padding)
、边界
(margin)
、边框
(border).
[/code]

CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？
*1.id
选择器（
#myid
）

2.
类选择器（
.myclassname
）

3.
标签选择器（
div,h1,p
）

4.
相邻选择器（
h1+p
）

5.
子选择器（
ul>li
）

6.
后代选择器（
lia
）

7.
通配符选择器（
*
）

8.
属性选择器（
a[rel="external"]
）

9.
伪类选择器（
a:hover,li:nth-child
）


*
可继承的样式：
font-sizefont-familycolor,ULLIDLDDDT;


*
不可继承的样式：
borderpaddingmarginwidthheight;


*
优先级就近原则，同权重情况下样式定义最近者为准
;


*
载入样式以最后载入的定位为准
;
[/code]

优先级为:
!important>id>class>tag


important
比内联优先级高


CSS3新增伪类举例：
p:first-of-type
选择属于其父元素的首个
<p>
元素的每个
<p>
元素。

p:last-of-type
选择属于其父元素的最后
<p>
元素的每个
<p>
元素。

p:only-of-type
选择属于其父元素唯一的
<p>
元素的每个
<p>
元素。

p:only-child
选择属于其父元素的唯一子元素的每个
<p>
元素。

p:nth-child(2)
选择属于其父元素的第二个子元素的每个
<p>
元素。

:enabled:disabled
控制表单控件的禁用状态。

:checked
单选框或复选框被选中。


如何居中div？如何居中一个浮动元素？

给div设置一个宽度，然后添加margin:0auto属性
div{

width:200px;

margin:0auto;

}
[/code]

居中一个浮动元素
确定容器的宽高宽
500
高
300
的层

设置层的外边距


.div{

Width:500px;height:300px;//
高度可以不设

Margin:-150px00-250px;

position:relative;
相对定位

background-color:pink;//
方便看效果

left:50%;

top:50%;

}
[/code]

列出display的值，说明他们的作用。position的值，relative和absolute定位原点是？
1.

block
象块类型元素一样显示。

none
缺省值。象行内元素类型一样显示。

inline-block
象行内元素一样显示，但其内容象块类型元素一样显示。

list-item
象块类型元素一样显示，并添加样式列表标记。


2.

*absolute

生成绝对定位的元素，相对于
static
定位以外的第一个父元素进行定位。


*fixed
（老
IE
不支持）

生成绝对定位的元素，相对于浏览器窗口进行定位。


*relative

生成相对定位的元素，相对于其正常位置进行定位。


*static
默认值。没有定位，元素出现在正常的流中

*
（忽略
top,bottom,left,rightz-index
声明）。


*inherit
规定从父元素继承
position
属性的值。


CSS3有哪些新特性？
CSS3
实现圆角（
border-radius:8px
），阴影（
box-shadow:10px
），

对文字加特效（
text-shadow
、），线性渐变（
gradient
），旋转（
transform
）

transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//
旋转
,
缩放
,
定位
,
倾斜

增加了更多的
CSS
选择器多背景
rgba
[/code]

一个满屏品字布局如何设计?

常见兼容性问题？
*png24
位的图片在
iE6
浏览器上出现背景，解决方案是做成
PNG8.


*
浏览器默认的
margin
和
padding
不同。解决方案是加一个全局的
*{margin:0;padding:0;}
来统一。


*IE6
双边距
bug:
块属性标签
float
后，又有横行的
margin
情况下，在
ie6
显示
margin
比设置的大。


浮动
ie
产生的双倍距离
#box{float:left;width:10px;margin:000100px;}


这种情况之下
IE
会产生
20px
的距离，解决方案是在
float
的标签样式控制中加入——
_display:inline;
将其转化为行内属性。
(_
这个符号只有
ie6
会识别
)


渐进识别的方式，从总体中逐渐排除局部。


首先，巧妙的使用“
\9”
这一标记，将
IE
游览器从所有情况中分离出来。

接着，再次使用“
+”
将
IE8
和
IE7
、
IE6
分离开来，这样
IE8
已经独立识别。


css

.bb{

background-color:#f1ee18;/*
所有识别
*/

.background-color:#00deff\9;/*IE6
、
7
、
8
识别
*/

+background-color:#a200ff;/*IE6
、
7
识别
*/

_background-color:#1e0bd1;/*IE6
识别
*/

}


*IE
下
,
可以使用获取常规属性的方法来获取自定义属性
,

也可以使用
getAttribute()
获取自定义属性
;

Firefox
下
,
只能使用
getAttribute()
获取自定义属性
.

解决方法
:
统一通过
getAttribute()
获取自定义属性
.


*IE
下
,even
对象有
x,y
属性
,
但是没有
pageX,pageY
属性
;

Firefox
下
,event
对象有
pageX,pageY
属性
,
但是没有
x,y
属性
.


*
解决方法：（条件注释）缺点是在
IE
浏览器下可能会增加额外的
HTTP
请求数。


*Chrome
中文界面下默认会将小于
12px
的文本强制按照
12px
显示
,

可通过加入
CSS
属性
-webkit-text-size-adjust:none;
解决
.


超链接访问过后
hover
样式就不出现了被点击访问过的超链接样式不在具有
hover
和
active
了解决方法是改变
CSS
属性的排列顺序
:

L-V-H-A:a:link{}a:visited{}a:hover{}a:active{}
[/code]

为什么要初始化CSS样式。
-
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对
CSS
初始化往往会出现浏览器之间的页面显示差异。


-
当然，初始化样式会对
SEO
有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。


*
最简单的初始化方法就是：
*{padding:0;margin:0;}
（不建议）


淘宝的样式初始化：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;}

body,button,input,select,textarea{font:12px/1.5tahoma,arial,\5b8b\4f53;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

address,cite,dfn,em,var{font-style:normal;}

code,kbd,pre,samp{font-family:couriernew,courier,monospace;}

small{font-size:12px;}

ul,ol{list-style:none;}

a{text-decoration:none;}

a:hover{text-decoration:underline;}

sup{vertical-align:text-top;}

sub{vertical-align:text-bottom;}

legend{color:#000;}

fieldset,img{border:0;}

button,input,select,textarea{font-size:100%;}

table{border-collapse:collapse;border-spacing:0;}
[/code]

absolute的containingblock计算方式跟正常流有什么不同？

position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？

对BFC规范的理解？
（
W3CCSS2.1
规范中的一个概念
,
它决定了元素如何对其内容进行定位
,
以及与其他元素的关系和相互作用。）


css定义的权重
以下是权重的规则：标签的权重为
1
，
class
的权重为
10
，
id
的权重为
100
，以下例子是演示各种定义的权重值：


/*
权重为
1*/

div{

}

/*
权重为
10*/

.class1{

}

/*
权重为
100*/

#id1{

}

/*
权重为
100+1=101*/

#id1div{

}

/*
权重为
10+1=11*/

.class1div{

}

/*
权重为
10+10+1=21*/

.class1.class2div{

}


如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现


解释下浮动和它的工作原理？清除浮动的技巧

用过媒体查询，针对移动端的布局吗？

使用CSS预处理器吗？喜欢那个？
SASS
[/code]

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是
60Hz
，即
1
秒刷新
60
次，所以理论上最小间隔为
1/60
＊
1000ms
＝
16.7ms
[/code]

display:inline-block什么时候会显示间隙？(携程)
移除空格、使用
margin
负值、使用
font-size:0
、
letter-spacing
、
word-spacing
[/code]
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html
                                                css
                                                面试技巧
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航