面试准备之（一）：HTML元素基础总结

**

一：HTML文档的组成：

**
标准的超文本标记语言组成元素如下：

1、HTML5新增属性及优点：
1）旧版本依赖插件实现功能（如Flash插件），而HTML5聚合了插件功能，如播放视频、音频的 video 和 audio 元素。
2）HTML5不再基于SGML，所以文档声明类型DOCTYPE只有一种，不需要再引用DTD：
标准形式：<！DOCTYPE html>
3) HTML5删除了一些过时无用的（一些与语义化冲突的）元素，如font和center，新增了一些语义化元素： article、footer、header、nav、section、menu，新的表单控件：number、date、time、email、url、search、color、range、month、week、datetime、datetime_local，新功能：canvas、video\audio
4）制定了新的全局属性和元素属性，全局属性：draggable、contenteditable,元素属性：accept、placeholder等
2、浏览器渲染模式有哪几种？
1）怪异模式（混杂模式）：向后兼容，兼容早期浏览器，如颜色值要以#开头、设置元素左右外边距margin:auto，不会水平居中等
2）接近标准模式：由某些DOCTYPE触发，基本接近标准模式，区别：如计算表格单元格尺寸要基于CSS2，可以消除图像底部的空隙
3）标准模式：常用，根据规范呈现页面。
3、HTML和XHTML区别：
1）XHTML需要元素嵌套正确
2）XHTML标签区分大小写
3）XHTML标签需要有结束标签,如</ div>
4）XHTML中可以混合各种XML应用，如MathML、SVG
5）HTML中读取标签名和属性名以大写返回，XHTML中以小写返回
6）XHTML中元素属性值必须要用引号包裹，且不允许简化
7）XHTML中特殊字符要换成实体引用，如’<'要用‘&lt；’代替，
HTML中也一样要对不能识别的符号进行实体转化，常见的实体（entity，特点：只显示，不执行不计算）定义方式有：名称方式；十进制方式；十六进制方式。例：

二、HTML元素常考知识点

1、嵌入CSS的方式及重点：
1）内联样式：使用全局属性style=“ ”方式
2）内嵌样式：全局属性+4个特殊属性：type,media，title，scoped。使用元素<style type="text/css"></style> //type处的属性还可以为scoped(定义样式使用范围仅在当前文件)，media(指定样式应用的媒体类型)，title(设置首选样式表，title='red'即为元素首选样式颜色为红色)
3）外部样式：用元素link使用，有http请求，特殊属性有5个：type，media，title，href，rel.
rel：定义当前文档与目标资源的关系，一般是stylesheet（文档的外部样式表）
href：定义要链接的资源的URL，可以为相对/绝对URL
例：<link rel="stylesheet" type="text/css" href="css/style.css"/>
2、嵌入JS的方式：
1）内联脚本（无http，当前文档可用）：<script> </script>方式，主要问题：导致资源下载阻塞，不能并行下载。原因是内联脚本中可能会有依赖样式表中的CSS规则的代码，所以必须要等样式表下载完、内联代码执行完后，才会下载后续资源。
2）外部脚本(有http，整个项目可用)：<script src="xxx.js" type="text/javascript" ></script> 将内容和行为分离，维护性和复用性优于内联。阻塞问题解决：增加两个布尔值：defer–HTML文档解析和外部脚本下载同步进行，都完成后脚本执行；async–HTML文档解析和外部脚本下载同步进行，但下载完脚本即开始执行。
3）元素属性（无http，不可复用）：

• 事件属性：on为前缀，缺点是无复用性、执行内容简单不适用于复杂场景、可读性差
• 特殊协议：“javascript:”伪协议，只能用于特定的几个属性：如a元素的href、from元素的action属性等。

3、HTML5常用元素：
元素作用域定义：CSS规范规定，每个元素都有 display 属性，确定该元素的类型，每个元素都有默认的 display 值，如 div 的 display 默认值为“block”，则为“块级”元素；span 默认 display 属性值为“inline”，是“行内”元素。
行内元素有：a b span img input select strong
块级元素有：div ul ol li dl dt dd h1 h2 h3 …p
空元素：常见：br hr img link input meta；不常见：area base col command embed keygen param source track wbr

4、meta元素可以定义文档的哪些元数据：
1）charset：声明HTML文档内容所用的字符编码：<meta charset=utf-8>
2）name：提供给计算机如搜索引擎，让其更好理解索引，提升SEO；可设置视口宽高、是否可以伸缩等适配不同设备： <meta name=viewport content="user-scalable=no,width=device-width">
3）http-equiv：指定首选样式表、执行重载（定义秒数：content=“2”//2s）或重定向（定义秒数和url,例如：content=“2”; url=http://www/diandiantest.com）

5、input元素的类型及相关属性介绍：
1）文本：type=hidden、text、password、tel、email、search、url，除password外都有list属性
例：<input type="tel" form="info" />
2）日期：type=date、datetime-local、month、time、week
3）数值：type=number(可输入整数或浮点数)、range（指定范围内的数值，包括整数或浮点数，可用step设置增量值）
4）按钮：type=image(图像做成按钮，可提交表单)、button、submit（提交表单）、reset（重置表单）
5）其他：checkbox(选择是/否,多选)、radio（选择是/否，单选）、color（指定颜色）、file（将选定的文件上传服务器，可使用multiple进行多选上传）

6、iframe框架：
优点和作用：
1）嵌入第三方内容
2）无刷新可上传文件
3）长轮询，实现设备监控、文字直播，现用webSocket替代
4）跨域通信，暴露了数据且数据量很小
5）可用iframe实现一个统一风格的页面，然后把这个页面在一个新页面中嵌套、引入，形成最终的网页
6）在移动端使用iframe唤起客户端的功能，如JSBridge
缺点：
1）浏览器对于同一域名的请求数量是有限制的，而frame中的文档和frame这个父文档本身共享链接（域名），如果子文档过多，就会出现部分子文档的资源只能等待。换句话说，会增加http请求
2）搜索引擎的爬虫程序无法解读这种页面
3）框架结构中出现各种滚动条
4）可以制造点击劫持，将一个iframe作为隐藏显示在文档中，引诱用户点击，常见的页面弹出的垃圾广告

7、canvas和SVG:

1）canvas位图图像：像素点构成

• 只能使用JS绘制图形、设置CSS样式和动画
• 实现图像合成和裁剪，还可修改图像的像素数据实现滤镜效果等
• 内容变化就会重新渲染整个画布
• 绘制按钮时，不能直接添加DOM事件（如点击）
• 使用时，画背景fillStyle，画形状fillRect，画文本fillText

2）SVG矢量图形：点和线组成，是一种用XML描述图形的标记语言

Canvas和SVG实现举例：

在Chrome上的效果图：

8、HTML5数据存储：
1）Cookie:用于浏览器和服务器之间传递额外的数据，常用语标识用户身份，避免重复验证。
缺点：a、大小只有4KB，只能存储简单信息
b、可以指定过期时间进行记忆用户信息，但是记忆的内容会放在http首部，用户过多时会影响带宽（速度）
c、不适合存储隐私信息，因为cookie会在网络中传递，容易被劫持 — 设置HttpOnly属性禁止页面的JS访问此cookie，避免被盗。
特点：a、存储时间：在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭
b、作用域：所有的同源窗口共享
c、存储位置：浏览器端
2）Web存储–local Storage:
特点：a、存储大小大概5MB
b、存储时间：即便窗口或浏览器关闭也一直有效
c、作用域：所有的同源窗口共享
d、存储位置：浏览器端
3）Web存储–session Storage:
特点：a、存储大小大概5MB
b、存储时间：仅在浏览器窗口关闭之前有效
c、作用域：不在不同的浏览器共享
d、存储位置：浏览器端
4）userData：
特点：a、存储大小大概1MB
b、存储时间：在设置的失效时间内都有效
c、作用域：所有的同源窗口共享
d、存储位置：HTML元素中

9、浏览器内核相关：
1）简介：可以认为内核分为渲染引擎(Layout Engine或Rendering Engine)和JS引擎两部分，目前JS引擎越来越独立，所以直接称内核就是渲染引擎也可以。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。
2）目前常见的内核：
IE浏览器：Trident内核
Safari浏览器：Webkit内核
Opera浏览器：Presto内核----Blink内核
Chrome浏览器：webkit内核—Blink内核
Firefox火狐浏览器：Gecko内核

10、HTML5的文件离线储存，工作原理？

<html manifest='cache.manifest'>  //在cache.mainfest中规定需要缓存的内容

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

未完待续。。。。。