HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
2. 页面导入样式时,使用link和@import有什么区别?
(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
(2)import是CSS2.1 提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
3. 浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
4. html5有哪些新特性? 移除了那些元素? 如何处理HTML5新标签的浏览器兼容问题? 如何区分 HTML 和HTML5?
1) 新特性
HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如 article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
新的技术webworker, websockt, Geolocation
2) 移除的元素
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
3) 支持HTML5新标签:
IE8/IE7/IE6支持通过document.createElement方法产生的标签, 可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式:
当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
4) 如何区分: DOCTYPE声明\新增的结构元素\功能元素
5. html语义化的理解?
用正确的标签做正确的事情!
html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
6. 什么是HTML5的离线储存?如何使用?
LocalStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 数据在浏览器关闭后自动删除。
7. HTML5的form如何关闭自动完成功能?
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
8. 如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge、cookies等本地存储方式
9. CSS3新增伪类举例:
:first-of-type p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
:last-of-type p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
:only-of-type p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
:only-child p:only-child 选择属于其父元素的唯一子元素的每个
元素。
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
:nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个
元素的每个
元素。
:nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
:last-child p:last-child 选择属于其父元素最后一个子元素每个
元素。
:root :root 选择文档的根元素。
:empty p:empty 选择没有子元素的每个
元素(包括文本节点)。
:target #news:target 选择当前活动的 #news 元素。
:enabled input:enabled 选择每个启用的 元素。
:disabled input:disabled 选择每个禁用的 元素
:checked input:checked 选择每个被选中的 元素。
10.如何居中div?如何居中一个定位元素?
给div设置一个宽度,然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
居中一个定位元素
.div {
Width:500px ;
Margin: 0 0 0 -250px;
position:relative;
background-color:pink;
left:50%;
top:50%;
}
11. 列出display的值,说明他们的作用。position的值, relative和absolute定位原点是?
1. position取值
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
2. 定位原点
*absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
*fixed (老IE不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
*relative
生成相对定位的元素,相对于其正常位置进行定位。
3. 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
12. 你有哪些性能优化的方法?
(1) 减少http请求次数:CSS Sprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
对普通的网站有一个统一的思路,就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成(例如join查询),减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分,换语言是无法“优化”的。
20.你使用过meidia queries(媒体查询)吗(如何使用?),或者移动网站相关的CSS布局?
@media 用宽度( width ) 判断
下面的语法,是最常用到的Media Queries:(下方为同一档案之内容)
@media screen and (min-width: 1200px) {
// 如果视窗宽度 >= 1200px,將会加载此 CSS。
}
@media screen and (min-width: 768px) and (max-width: 979px) {
// 如果视窗宽度介于 768px ~ 979px,将会载入此 CSS。
}
@media screen and (max-width: 767px) {
// 如果视窗宽度 <= 768px,将会载入此 CSS。
}
@media screen and (max-device-width: 480px) {
// 若视窗宽度 <= 480px,则载入此CSS。
}
在 Media Queries 中,我们最常使用min-width 和max-width 来判断使用者的视窗宽度,而max-device-width 则是使用者「装置」的最大宽度。 width 和device-width 差在哪里?
width : 因为浏览器可以自由调整宽度,所以这边指的是该浏览视窗的宽度。
device-width : 就算你把浏览器视窗弄到符合最大(小)宽度,还是不会生效。 因为,device-width 指的是使用者的「装置」最大宽度,而不是浏览器视窗。 所以,device-width 常用在判断手机上。
所以,你也可以自己加上其他的条件下去。 要注意的是,每一个条件之间请用and 来分隔,并要适时加上括号以免错误。
min-width 是最小宽度;max-width 是最大宽度,可以用来表示一定的范围。
编程题
1. 一个满屏 品 字布局 如何设计?
2. 2种方式,实现某DIV元素以50px每秒的速度左移100px。
方法一 使用 jQuery
$('div').animate({'left': 100}, 2000);
方法二 js + css3
div {
transition: all 2s linear; // linear 规定以相同速度开始至结束的过渡效果
}
div.style.left = (div.offsetLeft + 100) + 'px';
3. 用DIV+CSS实现三栏布局(左右固定200px,中间自适应)。
HTML
左边
右边
CSS
.container > div {
height: 200px;
}
.container {
padding: 0 200px;
}
.main,
.left,
.right {
position: relative;
float: left;
}
.left,
.right {
width: 200px;
}
.main {
width: 100%;
background-color: yellow;
}
.left {
background-color: blue;
margin-left: -100%;
left: -200px;
}
.right {
background-color: green;
margin-left: -200px;
left: 200px;
}
5. 使用Bootstrap完成模态框的编写,调用方式使用“data-”方式和“JS”方式两种
1>通过data属性
不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素(例如,按钮)上设置data-toggle="modal",并使用data-target="#foo"或href="#foo"指向特定的模态框即可。
例子:
2>通过JavaScript调用
只需一行JavaScript代码,即可通过id myModal调用模态框:
$('#myModal').modal(options)
方法
.modal(options)
将你指定的内容作为模态框启动。其接受一个可选的object类型的参数。
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
手动启动或隐藏模态框。
$('#myModal').modal('toggle')
手动打开一个模态框。
$('#myModal').modal('show')
手动隐藏一个模态框。
$('#myModal').modal('hide')
例子: