HTML问题

说下你对 WEB 标准以及 W3C 的理解与认识?

web 标准： 简单来说可以分为结构、表现和行为。其中结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。

web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助）

1）。标签字母要小写

2）。标签要闭合

3）。标签不允许随意嵌套

2.对于 css 和 js 来说

1）。能提高搜索机器人的搜索几率,内容能被更广泛的用户所访问,尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）。样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）。使用更少的代码和组件，使其容易维护改版方便，不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

xhtml 和 html 的区别

必须被正确的嵌套
必须是小写
必须关闭标签
必须有根元素

前端页面有那三层构成，分别是什么？作用是什么

结构层   html  做页面显示结构的
表示层   css     做样式显示的
行为层   javascript  做事件触发显示的

隐藏元素的三个方法

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。    

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。        

visibility: collapse;  当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。其表现却跟 display: none 一样，也即其占用的空间会释放。

Doctype? 严格模式与混杂模式

doctype 的作用：
　　声明位于文档 的最前面，告知浏览器的解析器，用什么文档类型、规范来解析这个文档。

可以分为两种:

一种是 html4.01 中申明的严格模式：<!DOCTYPE html PUBLIC "-//W3C//DTD *XHTML 1.0* Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">；DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。没有文档声明的话大多数浏览器都将会转换到为怪异模式(quirk mode)，有些地方会称为混杂模式。

1
2
3
4
5
6
<!DOCTYPE html>
<html></html>
<!-- 这个是正常模式就是(标准模式也成为严格模式) -->

<html></html>
<!-- 这个是怪异模式也称为混杂模式,怪异模式则是使用浏览器自己的方式来解析执行代码。-->

混杂模式：混杂模式的页面以宽松的向后兼容的方式显示；模拟老的浏览器的行为以防止站点无法工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- 到底都有哪些声明呢？哪种声明更好呢？我们建议你使用XHTML 1.0最严格模式，从一开始我们就应该严格的要求自己，具体声明如下： -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <!-- 如果你接手的是一个遗留网页，最初并没有DTD声明，并且使用了很多在XHTML中已经废除的标签，那么，我们建议你使用XHTML兼容模式，声明如下： -->
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <!-- 

怪异模式中，IE6/7/8都不认识!important声明，这只是区别的一种，还有很多其它区别。所以，要想写出跨浏览器的CSS，你必须采用标准模式。 

在ie6中，如果在doctype声明前加一个xml声明，采用quirks模式解析

在标准模式和怪异模式下，盒子模型的差异：

标准模式下：  width = content

怪异模式下 ： width = border + padding  + content 

在标准情况下使用  box-sizing:border-box  才能和怪异模式下的盒子模型保持一致
-->
  </html>
</html>

还有一种是 javascript 中申明的严格模式：在函数内部的最上方写上“use strict”,严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。

两者区别很多，包括 css（、html 不知道有没有）、javascript 都有区别，严格模式可以向后兼容，其实严格模式可以理解为是已经确定了不需要更改的内容

就目前来说 html5 的<!DOCTYPE html>没有 DTD 因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容.

浏览器页面宽高度设置有哪些？

与浏览器相关

window.innerWidth
window.outerWidth
window.screen.width
window.screen.availWidth
window.screenLeft (浏览器距离屏幕左侧的距离宽度)

含有 screen 关键字的与浏览器无关

与浏览器元素有关

语法：document.documentElement.clientWidth.或者 doucment.body.clientWidth.

clientWidth（距离父级元素 clientLeft）

offsetWidth（距离父级元素 offsetLeft）

scrollWidth（距离滚动条顶部 scrollTop）

兼容写法

由于 document.compatMode 在 IE 浏览器是”BackCompat”;而在 chrome 浏览器则是”CSS1Compat”。

兼容写法：页面不出现滚动条，那么 clientWidth 和 scrollWidth 应该相等。但不同浏览器有不同的处理，这两个值未必相等，所以取最大值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function getPagearea() {
  if (document.compatMode == "BackCompat") {
    return {
      width: Math.max(document.body.scrollWidth, document.body.clientWidth),
      height: Math.max(document.body.scrollHeight, document.body.clientHeight)
    };
  } else {
    return {
      width: Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.clientWidth
      ),
      height: Math.max(
        document.documentElement.scrollHeight,
        document.documentElement.clientHeight
      )
    };
  }
}

一般无滚动条情况下 offsetWidth=clientWidth=scrollWidth(有可能存在误差 1px)

标签语义化的好处

更直观的认识标签，让页面的内容结构化，对搜索引擎抓取有好处，用正确的标签做正确的事，便于开发者更好的阅读理解，以及修改代码。
后期方便维护，更利于 seo

HTML5 新特性

1.新的绘画  canvas  svg
2.新的媒体图像  video  audio
3.新的存储方式  localstorage   sessionstorage
4.新的标签  header nav  section article  aside footer
5.新的控件  email url search date time calendar
6.新的技术 websocket  webworker  geolocation
7.ie8,ie7,ie6支持通过createElement方法产生的标签可以利用这一特性让这些浏览器支持HTML5新标签

伪类和伪元素的区别

①伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

②与伪类针对特殊状态的元素不同的是，伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

区别： 伪类是”:”,伪元素是”::”
伪类一般有::hover,:focus,:nth-child,:checked,:not

伪元素一般有 ::before,::first-letter,::first-line,伪元素也可以将双冒号改为单冒号。

DOM 节点操作 API

getElementById()    返回带有指定 ID 的元素。
getElementsByTagName()    返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()    返回包含带有指定类名的所有元素的节点列表。
appendChild()    把新的子节点添加到指定节点。
removeChild()    删除子节点。
replaceChild()    替换子节点。
insertBefore()    在指定的子节点前面插入新的子节点。
createAttribute()    创建属性节点。
createElement()    创建元素节点。
createTextNode()    创建文本节点。
getAttribute()    返回指定的属性值。getAttributeNode
setAttribute()    把指定属性设置或修改为指定的值。setAttributeNode

tip： 删除，替换与插入的第二参数都必须是节点写法：abc.replaceChild(news,abc.childNodes[0]),

删除已有的 HTML 元素:

方法一必需引用父元素
var parent=document.getElementById("div1");     //如果p元素的父元素是Body就用ByTagName("body")[0]
var child=document.getElementById("p1");
parent.removeChild(child);

方法二无需引用父元素    //此方法缺点：只能清空元素内容，但元素依旧存在并占据原有空间
var a=document.getElementById("p1");
    a.removeChild(a.childNodes[0]);

方法三无缺点

child.parentNode.removeChild(child)
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素

cloneNode(true) //true表示复制包括其子节点，false 只复制其标签元素(但不复制其 innerHTML 内容)

非 node 与 node 的区别
俩这都是删除指定的属性,前者不返回值,后者以 Attr Node 对象返回被删除的属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/*1.removeAttribute与removeAttributeNode的区别*/
//前者写法:没有返回值
document.getElementsByTagName("H1")[0].removeAttribute("style"); //正确

//后者写法:返回具有指定名称的属性
document.getElementsByTagName("H1")[0].removeAttributeNode(); //报错,不能一行完成

var n = document.getElementsByTagName("H1")[0];
var a = n.getAttributeNode("style");
n.removeAttributeNode(a); //正确

document.getElementsByTagName("INPUT")[0].attributes.removeNamedItem("type");
/*2.setAttribute和setAttributeNode区别*/
//前者写法
document.getElementsByTagName("H1")[0].setAttribute("id", "sett");

//后者写法
var atr = document.createAttribute("id");
atr.nodeValue = "sett";
var h = document.getElementsByTagName("H1")[0];
h.setAttributeNode(atr);

//简写document.getElementsByTagName("H1")[0].setAttributeNode(atr)

/*3.getAttribute和getAttributeNode区别*/
//前者写法
var a = document.getElementsByTagName("a")[0].getAttribute("target");

//后者写法
var a = document.getElementsByTagName("a")[0].getAttributeNode("target"); //返回的是[object Attr],Attr对象

var a = document.getElementsByTagName("a")[0].getAttributeNode("target").value; //正确,或者nodeValue

/*4.hasAttribute和hasAttributes区别*/
//俩这均返回布尔值
//前者写法
var a = document.getElementsByTagName("BUTTON")[0].hasAttribute("onclick");
//后者写法
var a = document.getElementsByTagName("BUTTON")[0].hasAttributes(); //无参数的

/*5.children和childNodes*/
var y = document.getElementsByTagName("UL")[0].children[0].tagName; //等于
var y = document.getElementsByTagName("UL")[0].childNodes[0].tagName; //其中tagName也可以写为nodeName

//childNodes返回类似数组形式

/*6.parentNode使用*/
parentNode.nodeName;

/*7.previousSibling和previousElementSibling*/
itm.previousSibling.id; //等于
itm.previousElementSibling.id; //节点写法

/*8.nextSibling和nextElementSibling*/
itm.nextSibling.id; //等于
itm.nextElementSibling.id; //节点写法

返回该元素的所有属性长度：x.innerHTML=btn.attributes.length

childNodes[0]等于 abc.firstChild

http 事务是怎样的一个过程？

1.域名解析
2.tcp三次握手
3.建立tcp连接，发起http请求
4.服务器响应，浏览器得到代码
5.浏览器解析代码，请求代码中的资源
6.得到资源，呈现给用户网页

AJAX 的优缺点？

优点：相对于同步而言，不会产生卡死，无需刷新网页更新，
缺点：后退按钮无效，多个请求同时触发，由于回调时间不确定会造成混乱，不利于SEO,数据安全有隐患

AJAX 请求时 get 和 post 的区别

1.一个在url后面，一个在虚拟载体里
2.根据不同的浏览器区别有大小限制
3.安全问题，应用不同，一个是只需要请求明文可见的，一个类似于修改密码的

补充 get 和 post 请求在缓存方面的区别

1.get在查找的过程，用户获取数据(明文传输)，可以不用每次都与后台数据库连接，所以可以使用缓存。
2.post不同，post做的一般是修改和删除的工作，所以每次都需要与数据库进行交互，所以不能使用缓存

简单说下 xml，html,xhtml,以及 html5 区别

1. XML 用来描述数据，而 HTML 则用来显示数据
2. xhtml是为了取代html的，但xhtml不是html的升级版，html5是html的升级版，html5不是xhtml的升级版。
3. 简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。XHTML相对于HTML更严谨，不过被html5规范淘汰了。

由于 SGML 的复杂，因而难以普及。HTML 和 XML 同样衍生于 SGML，XML 可以被认为是 SGML 的一个子集，而 HTML 是 SGML 的一个应用。

从继承关系上讲，HTML 是一种基于标准通用标记语言(SGML)的应用，是一种非常灵活的置标语言，而 XHTML 则基于可扩展标记语言(XML)，XML 是 SGML 的一个子集。XHTML 1.0 在 2000 年 1 月 26 日成为 W3C 的推荐标准。

图片的预加载和懒加载？

预加载：提前加载图片，当用户需要查看图片的时候可直接从本地缓存中渲染，预加载会给服务器增加压力。
懒加载：不提前加载，甚至不加载，优化了服务器前端的优化，减少了请求数或延迟请求数

浮动定位和绝对定位

一个元素若设置了 position:absolute | fixed; 则该元素就不能设置 float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流(这是自己起的名字，呵呵)”。

但是 relative 却可以。因为它原本所占的空间仍然占据文档流。
当元素设置 position:absolute、float:left、float:right 中任意一个时，都会让元素以display:inline-block的方式显示（特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置 display:inline; display:block 都是无效的。
但是 float 在 IE6 下的双边距 bug 就是用 display:inline; 来解决的。

HTML 5 应用程序缓存

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
1.离线浏览 - 用户可在应用离线时使用它们
2.速度 - 已缓存资源加载得更快
3.减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

创建一个文本节点（Text）的过程

创建一个文本节点一共溯寻了 6 层原型链。

使用document.createTextNode("xxx")创建文本节点，
其实document.createTextNode("xxx")是Text的一个实例，
而Text的父类是CharactorData，CharactorData的父类是Node，
Node的父类是EventTarget，
EventTarget的父类是Function，
Function的父类是Object。

HTML 的渲染引擎过程

这四步仅仅是HTML的渲染引擎过程，
1.解析HTML，构建DOM树(将标签转化为节点) ——>
2.解析样式信息，构建渲染树(外部css文件、style标签) ——>
3.布局渲染树，即布局DOM节点(确定每个节点在屏幕上的确切坐标) ——>
4.绘制渲染树，即绘制DOM节点(遍历渲染树，使用UI后端层绘制每个节点)

BOM 和 DOM 的关系

1.BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”，主要处理浏览器窗口和框架。

2.DOM （Document Object Model）是指文档对象模型，通过它，可以访问 HTML 文档的所有元素。是 HTML 和 XML 的应用程序接口（API），遵循 W3C 的标准，所有浏览器公共遵守的标准。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。

XML 操作 API

下面的 api 用于获取 book.xml 文档的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
appendData()，deleteData()，insertData()，replaceData()，subStringData()
以下5个方法都是编辑Text节点文本内容的方法。
appendData()：在Text节点尾部追加字符串。
deleteData()：删除Text节点内部的子字符串，第一个参数为子字符串开始位置，第二个参数为子字符串长度。
insertData()：在Text节点插入字符串，第一个参数为插入位置，第二个参数为插入的子字符串。
replaceData()：用于替换文本，第一个参数为替换开始位置，第二个参数为需要被替换掉的长度，第三个参数为新加入的字符串。
subStringData()：用于获取子字符串，第一个参数为子字符串在Text节点中的开始位置，第二个参数为子字符串长度。
// HTML 代码为 //
<p>Hello World</p>
var pElementText = document.querySelector('p').firstChild;
pElementText.appendData('!'); // 页面显示 Hello World!
pElementText.deleteData(7, 5); // 页面显示 Hello W pElementText.insertData(7,
'Hello '); // 页面显示 Hello WHello pElementText.replaceData(7, 5, 'World'); //
页面显示 Hello WWorld pElementText.substringData(7, 10); //
页面显示不变，返回"orld"

tip： 貌似可以和 nodeValue 获取值,也就是说可以使用节点的 API。

用到雪碧图的场景

1.静态图片，不随用户信息的变化而变化

2.小图片，图片容量比较小

3.加载量比较大
一些大图不建议拼成雪碧图

为了减少 http 请求数量，加速网页内容显示，很多网站的导航栏图标、登录框图片等，使用的并不是<image>标签，而是 CSS Sprite 雪碧图

div+css 较 table 有哪些优势

1.表现与结构相分离
2.扩展性更好，便于维护
3.页面加载速度更快，结构化清晰，页面显示简洁
4.对搜索引擎更友好，网站排名更靠前
统一的标准，降低开发难度，开发成本，SEO也会更好做

http 状态码

200, OK，访问正常
301, Moved Permanently，永久移动
302, Moved temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权    //如豆瓣需要apiKey才能访问
403, Forbidden，禁止访问    //需要特指的服务器或者IP以及账号才能访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误

js 动画和 css3 动画的差异

1.js功能覆盖上，比css3好
2.重构/构建上css3比js简单，快速方便
3.css3对表现帧速不好的低版本浏览器，可以做到自动降级
4.css3有天然事件支持
5.css3有兼容性问题

Ajax 的工作原理

AJAX 全称 Async Javascript and XML 翻译成中文：异步的 JavaScript 和 XML

Ajax 技术的核心是 XMLHttpRequest 对象（简称：XHR），可以在不刷新页面页面也能取得新的数据。

满足下面的条件就是 AJAX

使用 XMLHttpReques 发请求
服务器返回 XML 格式的字符串
JS 解析 XML，并更新局部页面

Ajax 的工作原理相当于在用户和服务器之间加了—个中间层(AJAX 引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器。像—些数据验证和数据处理等都交给 Ajax 引擎自己来做,，只有确定需要从服务器读取新数据时再由 Ajax 引擎代为向服务器提交请求。

前端优化性能有哪些？

1.减少http请求数
2.减少html标签带来的带宽浪费
3.用innerHTML代替基本的DOM 操作
4.用className代替style
5.少用全局变量，减少IO操作
6.避免使用css表达式
7.图片预加载，样式放在顶部，脚本放在底部

前端开发人员具备哪些条件？

1.将产品从90分做到100分，甚至更好
2.快速的做出高效高质量的效果图，精确到1px
3.与团队成员，UI设计，产品经理沟通
4.做好页面结构/页面重构工作，给用户好体验
5.处理hack，兼容，优化代码格式
6.针对服务器优化