Skip to content

Commit 9530566

Browse files
update
1 parent 0b38279 commit 9530566

File tree

1 file changed

+139
-5
lines changed

1 file changed

+139
-5
lines changed

README.md

Lines changed: 139 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,14 @@ JSON建构于两种结构:
240240
(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
241241
```
242242

243+
- HTML5 为什么只需要写 <!DOCTYPE HTML>
244+
245+
```html
246+
HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);
247+
248+
而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。
249+
```
250+
243251
- 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
244252

245253
```html
@@ -283,11 +291,30 @@ inline-block:是使元素以块级元素的形式呈现在行内。
283291
(4)link方式的样式的权重 高于@import的权重.
284292
```
285293

294+
- 介绍一下你对浏览器内核的理解?
295+
296+
```html
297+
主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
298+
299+
渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
300+
301+
JS引擎则:解析和执行javascript来实现网页的动态效果。
302+
303+
最开始渲染引擎和JS引擎并没有区分的很明确,后来JS引擎越来越独立,内核就倾向于只指渲染引擎。
304+
```
305+
286306
- 浏览器的内核分别是什么?
287307

288308
```html
289-
* IE浏览器的内核Trident、Mozilla的Gecko、
290-
* Chrome的Blink(WebKit的分支)、Opera内核原为Presto,现为Blink;
309+
Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
310+
311+
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
312+
313+
Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
314+
315+
Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
316+
317+
详细文章:[浏览器内核的解析和对比](http://www.cnblogs.com/fullhouse/archive/2011/12/19/2293455.html)
291318
```
292319

293320
- 常见兼容性问题?
@@ -379,13 +406,43 @@ html语义化就是让页面的内容结构化,便于对浏览器、搜索引
379406
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
380407
```
381408

382-
- HTML5的离线储存
409+
- HTML5的离线储存怎么使用,工作原理能不能解释一下
383410

384411
```html
412+
在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。
413+
414+
原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
415+
416+
如何使用:
417+
1、页面头部像下面一样加入一个manifest的属性;
418+
2、在cache.manifest文件的编写离线存储的资源;
419+
CACHE MANIFEST
420+
#v0.11
421+
CACHE:
422+
js/app.js
423+
css/style.css
424+
NETWORK:
425+
resourse/logo.png
426+
FALLBACK:
427+
/ /offline.html
428+
3、在离线状态时,操作window.applicationCache进行需求实现。
429+
430+
详细的使用请参考:[有趣的HTML5:离线存储](http://segmentfault.com/a/1190000000732617)
431+
385432
localStorage 长期存储数据,浏览器关闭后数据不丢失;
386433
sessionStorage 数据在浏览器关闭后自动删除。
387434
```
388435

436+
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?
437+
438+
```html
439+
在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。
440+
441+
离线的情况下,浏览器就直接使用离线存储的资源。
442+
443+
详细的使用请参考:[有趣的HTML5:离线存储](http://segmentfault.com/a/1190000000732617)
444+
```
445+
389446
- (写)描述一段语义的html代码吧。
390447

391448
```html
@@ -401,21 +458,98 @@ sessionStorage 数据在浏览器关闭后自动删除。
401458

402459
```html
403460
*iframe会阻塞主页面的Onload事件;
461+
*搜索引擎的检索程序无法解读这种页面,不利于SEO;
404462

405463
*iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
406-
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,
407-
最好是通过javascript动态给iframe添加src属性值,这样可以可以绕开以上两个问题。
464+
465+
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript
466+
动态给iframe添加src属性值,这样可以绕开以上两个问题。
408467
```
409468

410469
- 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
411470

412471
```html
472+
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
473+
474+
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递。
475+
476+
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
477+
478+
存储大小:
479+
cookie数据大小不能超过4k。
480+
sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
481+
482+
有期时间:
483+
localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
484+
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
485+
cookie 设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
486+
413487
cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
414488
sessionStorage和localStorage的存储空间更大;
415489
sessionStorage和localStorage有更多丰富易用的接口;
416490
sessionStorage和localStorage各自独立的存储空间;
417491
```
418492

493+
- Label的作用是什么?是怎么用的?
494+
495+
```html
496+
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
497+
498+
<label for="Name">Number:</label>
499+
<input type=“text“name="Name" id="Name"/>
500+
501+
<label>Date:<input type="text" name="B"/></label>
502+
```
503+
504+
- HTML5的form如何关闭自动完成功能?
505+
506+
```html
507+
给不想要提示的 form 或下某个input 设置为 autocomplete=off。
508+
```
509+
510+
- 如何实现浏览器内多个标签页之间的通信? (阿里)
511+
512+
```html
513+
调用localstorge、cookies等本地存储方式
514+
```
515+
516+
- webSocket如何兼容低浏览器?(阿里)
517+
518+
```html
519+
Adobe Flash Socket 、
520+
ActiveX HTMLFile (IE) 、
521+
基于 multipart 编码发送 XHR 、
522+
基于长轮询的 XHR
523+
```
524+
525+
- 页面可见性(Page Visibility)API 可以有哪些用途?
526+
527+
```html
528+
在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放
529+
```
530+
531+
- 如何在页面上实现一个圆形的可点击区域?
532+
533+
```html
534+
1、map+area或者svg
535+
2、border-radius
536+
3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
537+
```
538+
539+
- 实现不使用 border,画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果
540+
541+
```html
542+
<div style="height:1px;overflow:hidden;background:#ccc"></div>
543+
```
544+
545+
- 网页验证码是干嘛的,是为了解决什么安全问题。
546+
547+
```html
548+
区分用户是计算机还是人的公共全自动程序。可以防止:恶意破解密码、刷票、论坛灌水;
549+
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试;
550+
```
551+
552+
419553
## <a name='css'>CSS</a>
420554

421555
- 介绍一下CSS的盒子模型?

0 commit comments

Comments
 (0)