HTML 基础知识点
HTML
Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
告知浏览器用什么文档标准来解析这个文档，标准模式和兼容模式
HTML5为什么只需要写DOCTYPE HTML？
在HTML 4.01中有三种!DOCTYPE声明。在HTML5中只有一种：!DOCTYPE html，这是为什么呢？
HTML 4.01中的DOCTYPE需要对DTD进行引用，因为HTML 4.01基于SGML。而HTML 5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为。
行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
（1）行内元素有：a bspan img input select strong
（2）块级元素有：div ul
ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：
brhrimginputlinkmeta
页面导入样式时，使用link和@import有什么区别？
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(layout
engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和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的分支）]
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框架
src="http://html5shim.googlecode.com/svn/trunk/html5.js"
简述一下你对HTML语义化的理解？
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
HTML5的离线储存怎么使用，工作原理能不能解释一下？
浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
一.离线存储
有一个web应用有三个文件index.html,a.js,b.css，现在需要把js和css文件缓存起来
1.在index.html里加上
2.manifest清单格式如下
CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
3.manifest文件的mime-type必须是text/cache-manifest类型
注意点：
1.对于每个index.html?id=1或index.html?id=2都会分别缓存index.html页面，可以通过chrome浏览器Resources/Application Cache观察
2.如果想更新缓存内容，只要修改下manifest文件即可，如改版本号v1.0.1
4.离线存储如果资源有更新，可以通过如下代码来监听，但第一次加载还会是原来的版本
window.applicationCache.addEventListener('updateready',function(e){
if(window.applicationCache.status== window.applicationCache.UPDATEREADY){
window.applicationCache.swapCache();
if(confirm("loding new?")){
window.location.reload()
}
}
},false)
请描述一下cookies，sessionStorage和localStorage的区别？
1.存储大小
cookie数据大小不能超过4k。
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
2.有效时间
localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage数据在当前浏览器窗口关闭后自动删除。
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3.数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
iframe有那些缺点？
1.会产生很多页面，不容易管理
2.不容易打印（目前只能实现分框架页面的打印，不能实现对frameset的打印）
3.浏览器的后退按钮无效（只能针对实现当前光标所在页面的前进与后退，无法实现frameset整个页面的前进与后退）
4.代码复杂,无法被一些搜索引擎索引到（框架结构（帧结构）的不能为每个网页都设置一个标题（TITLE），更为糟糕的是，有些搜索引擎对框架结构的页面不能正确处理，会影响到搜索结果的排列名次）
5.多数小型的移动设备（PDA手机）无法完全显示框架
6.多框架的页面会增加服务器的http请求
7.由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃，目前的html5已不再支持此标签
Label的作用是什么？是怎么用的？（加for或 包裹）
label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
Number:
Date:
HTML5的form如何关闭自动完成功能？
1.定义
autocomplete属性规范表单是否启用自动完成功能。自动完成允许浏览器对字段的输入，是基于之前输入的值。
2.应用范围
autocomplete使用,以及类型text,search,url,telephone,email,password,datepickers,range,color
3.属性值
on--------默认，启动自动完成
off-------禁用自动完成
如何实现浏览器内多个标签页之间的通信? (阿里)
方法1. localStorage
方法2. Cookie
页面可见性（Page Visibility）API可以有哪些用途？
页面可见性：就是对于用户来说，页面是显示还是隐藏,所谓显示的页面，就是我们正在看的页面；隐藏的页面，就是我们没有看的页面。因为，我们一次可以打开好多标签页面来回切换着，始终只有一个页面在我们眼前，其他页面就是隐藏的，还有一种就是.........，(把浏览器最小化，所有的页面就都不可见了)。
API很简单，document.hidden就返回一个布尔值，如果是true,表示页面可见，false则表示，页面隐藏。不同页面之间来回切换，触发visibilitychange事件。还有一个document.visibilityState,表示页面所处的状态，取值：visible,hidden等四个。
document.addEventListener("visibilitychange", function(){
if(document.hidden){
document.title ="hidden";
}else {
document.title = "visibile";
}
})
我们打开这个页面，然后再打开另一个页面，来回点击这两个页面，当我们看到这个页面时，标题显示visiable ,当我们看另一个页面时，标题显示hidden;
动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭。
如何在页面上实现一个圆形的可点击区域？
解决方法
1. map+area
2. border-radius（H5）
实现不使用border画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
document 有个属性 compatMode 可以用来判断当前页面采用的何种渲染方式：
BackCompat – Standards-compliant mode is not switched on.
CSS1Compat – Standards-compliant mode is switched on.
Quirksmode即怪异模式，而css1compat是标准模式
#line{width:1000px; height:1px; background-color: #3ecdb5;}
网页验证码是干嘛的，是为了解决什么安全问题？
验证码是为了防止一些人使用软件恶意注册、发帖等行为而设的。
它的存在是为了确保登陆网站的是一个坐在电脑面前的真人，而不是一个自动登陆的软件
tite与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页
面信息的抓取也有很大的影响;strong是标明重点内容，有语气加强的含义，
使用阅读设备阅读网络时：会重读，而是展示强调内容;i内容
展示为斜体，em表示强调的文本;PhysicalStyleElements--自然样式标
签b,i,u,s,preSemanticStyleElements--语义样式标签strong,em,
ins,del,code应该准确使用语义样式标签,但不能滥用,如果不能确定时
首选使用自然样式标签;
