1.iframe标签有哪些缺点；

1)Iframes 阻塞页面加载

window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发。在 Safari 和 Chrome 里，通过 JavaScript 动态设置 iframe 的 SRC 可以避免这种阻塞情况。

2)唯一的连接池

有人可能希望 iframe 会有自己独立的连接池，但不是这样的。绝大部分浏览器，主页面和其中的 iframe 是共享这些连接的。这意味着 iframe 在加载资源时可能用光了所有的可用连接，从而阻塞了主页面资源的加载。如果 iframe 中的内容比主页面的内容更重要，这当然是很好的。但通常情况下，iframe 里的内容是没有主页面的内容重要的。这时 iframe 中用光了可用的连接就是不值得的了。一种解决办法是，在主页面上重要的元素加载完毕后，再动态设置 iframe 的 SRC。

3)搜做引擎的检索程序无法解读这种页面，不利于SEO

iframe好在能够把原先的网页全部原封不动显示下来,但是如果用在首页,是搜索引擎最讨厌的.那么你的网站即使做的在好,也排不到好的名次!?

4)样式/脚本需要额外链入，会增加请求。

2.Doctype作用？严格模式与混杂模式如何区分？它们有何意义？

1）<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2）严格模式、混杂模式、怪异模式的区分

1、严格模式：严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。

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

3、怪异模式：怪异模式则是使用浏览器自己的方式来解析执行代码。

3）Dcotype不存在或者不正确会导致文档以混杂模式呈现。

3.简述一下src和href的区别；

（1）请求资源类型不同：

href是超文本引用Hypertext Reference的简写，用来为当前元素和文档之间建立连接，常用的是link、a标签。src会将指向的资源下载并引用到当前文档中，常用的标签有script，img，iframe标签。

（2）作用的结果不同：

href是为当前文档和引用资源建立联系；
而src是替换当前的元素。

（3）浏览器的解析方式不同

herf引用的资源，浏览器会将其识别为CSS文档，并行下载资源并且不会停止对当前文档的处理。
当浏览器解析到src时，会暂停其他资源的下载和处理，直接将该资源下载，编译，执行完毕，图片和框架也是如此，类似于将所指资源应用到当前内容。这也是为什么建议使用link方式来加载css,而不是使用@import方式

4.HTML全局属性有哪些；

所谓全局属性是指任何元素都可以使用的属性。

以下是常用的全局属性：

id、class:分别是为元素设置唯一id和类名。
style:行内css样式
title:元素相关的建议信息
lang:元素内容的语言
data-*：为元素增加自定义属性
draggable：设置元素是否可拖拽
hidden:规定元素为隐藏，为布尔值
contenteditable:规定元素内容是否可编辑的，"true"表示可编辑，"false"表示不能编辑
tabindex:规定tab键控制次序(tab键用于导航时)，当按tab键时，元素聚焦的次序。tabindex="number"，"number"代表聚焦的次序。

...

5.viewport详解；

1）移动端与桌面端最明显的区别就在于屏幕的大小。在比桌面端屏幕小不少的手机移动端上做web开发，网页的布局将会是一个全新的课题。因此首先我们需要了解的就是一个与屏幕大小息息相关的属性–Viewport。

2）Viewport翻译成中文可以叫“视窗”或者是“视口”，它表示的是用户网页的可视范围（指页面能够被浏览的范围）

3）viewport的属性值：

<meta name="viewport"

content="width=device-width,

...

initial-scale=1.0"

>

width：控制viewport的宽度，这个值可以被指定，例如：500px。亦或者是“device-width”，意思是设置视口宽度为设备宽度。
height：控制viewport的高度，一般设置了宽度会自动解析高度，可以不用设置。
initial-scale：初始缩放比例，即每一次加载时页面缩放的比例，可以带小数。
maximum-scale：允许用户缩放到的最大缩放比例，可以带小数。
minimum-scale：允许用户缩放到的最小缩放比例，可以带小数。
user-scaleable：是否允许用户缩放，可以传“yes”或“no”。

6.怎样处理移动端1px被渲染成2px的问题；

1、局部处理
? ?meta标签中的 viewport属性，initial-scale 设置为 1?
? ?rem 按照设计稿标准走，外加利用transform 的scale(0.5) 缩小一倍即可；
2、全局处理
? ?meta标签中的 viewport属性，initial-scale 设置为 0.5
? ?rem 按照设计稿标准走即可。

7.渐进增强与优雅降级之间的不同；

1、渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2、优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3、区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

8.页面导入样式时，使用link和@import有什么区别？

1.link是HTML标签，写在<head>中，@import是css提供的，写在css文件中。
2.link引入的样式页面加载时同时加载，@import引入的样式需等页面加载完成后再加载。
3.link没有兼容性问题，@import不兼容ie5以下。
4.link可以通过js操作DOM动态引入样式表改变样式，而@import不可以。

注：

在html页面中，link标签引用css文件，script标签引用js文件，对于新的HTML5规范，由于现代浏览器默认的script标签里是js代码，script的type属性默认是 text/javascript，因此如果一个script标签里是js代码或引用的是js文件，那么标签里不需要写type=text/javascript，但是如果不是js那就需要添加type。type这个东西是表示标签中脚本的类型的。

9.Label的作用是什么？是怎么用的？

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

input设置id属性，label设置for属性，for属性的属性值=id属性值。

<form>

<label for="male">Male</label>

<input type="radio" name="sex" id="male" />

</form>

10.网页代码的SEO优化；

1) meta标签优化：例如：title，description,keywords等的优化；title：只要强调重点即可，重要关键词出现不要超过2次，而且要靠前，每个页面的title要有所不同。description：把网页内容高度概括到这里，长度要合理，不可过分堆砌关键词，每个页面的description要有所不同。keywords：列举几个重要的关键词即可，不可过分堆砌。

2)语义化的HTML代码：符合W3C规范，让搜索引擎更容易理解网页。

3)不建议使用frame和iframe框架结构，通过iframe显示的内容可能会被百度丢弃。

4)重要的内容不要用js输出: 爬虫不会读取js里的内容，所以重要的内容必须放在html里。

5）重要内容的HTML代码一定要放前面：搜索引擎抓取HTML顺序是从上到下。

6）非装饰性图片都要加alt。

...