HTML

Doctype作用?标准模式与兼容模式各有什么区别?

1、<!DOCTYPE>声明位于HTML文档中的第一行,处于<html>标签之前,告知浏览器的解析器用什么文档标准解析。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
2、标准模式的排版和JS运行模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

HTML5为什么只需要写<!DOCTYPE HTML>

HTML5不基于SGML(标准通用标记语言),因此不需要对DTD(文档类型定义)进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行)
HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类型。

行内元素有哪些?块级元素有哪些?空(void)元素有哪些?

首先:CSS规范规定,每个元素都有display属性,确定钙元素的类型,每个元素都有默认的display值,如divdisplay默认值为block,都是块级元素;span默认display属性值为inline,是行内元素。
1、行内元素:abspanimginputselectstrong(强调的语气)
2、块级元素:divulollidldtddh1h2h3h4p
3、常见的空元素:brhrimginputlinkmeta
不常用的空元素:areabasecolcommandembedkeygenparamsourcetrackwbr

页面导入样式时,使用link@import有什么区别?

1、link属于XHTML标签,除了加载CSS外,还能用于定义RSS,定义rel连接属性等作用;而@importCSS提供的,只能用于加载CSS
2、页面被加载时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载。
3、importCSS2.1提出的,只在IE5以上才能被识别,而linkXHTML标签,无兼容问题。
4、link支持使用JS控制DOM改变样式,而@import不支持。

浏览器渲染页面的过程

window.onloadDOMContentLoaded的区别

介绍一下你对浏览器内核的理解?

主要分成两部分:渲染引擎(layoutengine)和JS引擎。
渲染引擎:负责取得网页的内容(HTML、XML、图像等)、整理信息(加入CSS等),以及计算网页的显示方式,然后输出到显示器或打印机。浏览器的内核的不同对网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。
JS引擎:解析和执行JS来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分额很明确,后来JS引擎越来越独立,内核就倾向于只是指渲染引擎。

常见的浏览器内核有哪些?

Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等[MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上[Opera内核原为:Presto,现为:Blink]
Webkit内核:Safari,Chrome等[Chrome:Blink(Webkit的分支)]

简述一下你对HTML语义化的理解?

语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析
没有CSS样式也能正常阅读文档
搜索引擎的爬虫依赖HTML标记来确定上下文和各个关键字的权重,有利于SEO

iframe有哪些缺点?

iframe会阻塞主页面的onload事件
搜索引擎的检索程序无法解读这种页面,不利于SEO
iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载
使用iframe之前需要考虑两个缺点。如果需要使用iframe,最好是通过JS
动态给iframe添加src属性值,可以绕开以上两个问题。

label的作用是什么?怎么用?

label标签定义表单控件间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。

<label for="Name">Number:</label>
<input type="text" name="Name" id="Name">   

页面可见性可以有哪些用途?

通过visibilityState的值检测页面当前是否可见,以及打开页面的时间等
在页面被切换到其他后台进程的时候,自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域?

1、map+area或者SVG
2、border-radius
3、纯JS实现,需要求一个点在不在圆上简单算法、获取鼠标坐标等

实现不使用border画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div style="height: 1px;overflow: hidden;background: red;"></div>

列举IE与其他浏览器不同的特性?

事件:触发事件的元素被认为是目标(target)。在IE中,目标包含在event对象的SRCElement属性;

获取字符代码:如果按键代表一个字符(shiftCtrlAlt除外),IE的keyCode会返回字符代码unicode,DOM中按键的代码和字符是分离的,要获取字符代码,需要使用charCode属性;

阻止某个事件的默认行为:IE中阻止某个事件的默认行为,必须将returnValue属性设置为false,火狐浏览器中需要调用preventDefault()方法。

停止事件冒泡,IE中阻止事件进一步冒泡,需要设置cancelBubbletrue,火狐中需要调用stopPropagation()

解析一下优雅降级和渐进增强?

优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是旧式浏览器,则代码会针对旧版本的IE进行降级处理,使之在旧式浏览器上以某种形式降级体验而不至于完全不能使用。
例如:border-shadow

渐进增强:从被所有浏览器支持的基本功能开始,逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能。当浏览器支持时,它们会自定地呈现出来并发挥作用。
例如:默认使用flash上传,但如果浏览器支持HTML5的文件上传功能,则使用HTML5实现更好的体验。

对web标准以及W3C的理解与认识

xhtmlhtml有什么区别

写出几种IE6 bug的解决方法