html题库

什么是HTML?

HTML的全称为 超文本标记语言 ，是一种 标记语言 。 它包括一系列标签 ，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。

DOCTYPE 的作用是什么？标准模式与兼容模式（混杂模式）各有什么区别? 

  DOCTYPE告诉浏览器的解析器 用什么文档标准解析这个文档。

  DOCTYPE不存在或格式不正确，会导致文档以兼容模式呈现。

  标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行 

在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作.

html5为什么只需要写?  你知道多少种Doctype文档类型？

HTML5不基于SGML，所以不需要引用DTD，但是需要DOCTYPE来规范浏览器行为

有3种文档类型定义分别是过渡的（Transitional）、严格的（Strict）和框架的（Frameset）。

编码集的作用是什么？说出几个常见的编码集？为什么常用utf-8？

编码集有数据传输的作用 Unicode 相当于规定了字符对应的码值,这个码值必须编码成字节的形式去传输和存储。

最常见的编码方式是： UTF-8,另外还有 UTF-16,UTF-32 等。

utf-8优点：支持多种语言，不会有乱码，不会有重码和字符冲突，不需要调整页面的语言编码设置即可正常浏览，多种语言字符可以同时共存在页面上。

ASCII编码   GB2312 编码   GBK 编码    ANSI 编码     Unicode编码

meta viewport是什么？ 原理是什么？

Viewprot是用户网页的可视区域。

meta 标签的作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户进行手动缩放

viewport的原理：移动端浏览器通常都会在一个比移动端屏幕更宽的虚拟窗 口中渲染页面，这个虚拟窗口就是... viewport; 目的是正常展示没有做移动端适配的网页，让他们完整的展示给用户；

行内元素有哪些？块级元素有哪些？ 行内块元素有那些？他们有什么区别？

行内元素有： a、 b、span、br、 i、 s。

块级元素有：div、 ul、ol、li、h1...h6、p、td、th、form。

行内块元素有：img、input、textarea。

区别：

行内元素：从左往右排列，不占据一行：对其设置宽高及margin的上下距离无效。

块级元素：单独占据一行。

行内块元素：不会自动换行，相比行内可以设 置宽高，具有和行内块级共同特征

简述a标签target属性的取值和作用？

target可能的值：

_blank：在新窗口/选项卡中打开。

_self：在同一框架中打开。

_parent：在父框架中打开。派润他

_top：在整个窗口中打开。

标签上的 title 属性与 alt 属性的区别是什么？

title；对链接起注释作用，图片正常显示使鼠标划上去会显示他的值。

alt；对图片起注释作用，图片无法加载的时候会显示它的值。

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

web标准，就是将页面的结构、表现和行为这三部分独立分开，使其更具有模块化。

W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

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

结构层：HTML   搭建文档的结构

样式层：CSS   设置文档的呈现效果

行为层：JS     实现文档的动态行为

什么是iframe？请讲述一下iframe的优缺点？

iframe

是嵌入式框架, 是html标签, 还是一个内联元素, iframe 元素会创建包含另外一个文档的内联框架（即行内框架) . 说白了, iframe用来在页面嵌入其他页面.通常我们使用iframe直接在页面嵌套iframe标签指定src就可以了。

 优点:

1. 页面和程序分离,几乎不会受到外界任何js或者css的影响, 便于使用

2. 可以通过iframe嵌套通用的页面, 提高代码的重用率, 比如页面的头部样式和底部版权信息

3. 重新加载页面时, 不需要重载iframe框架页的内容, 增加页面重载速度.

4. iframe可以解决第三方内容加载缓慢的问题.

缺点:

1. 会产生很多页面，不容易管理

2. iframe框架的内容无法被搜索引擎捕获, 所以iframe不适用于首页

3. iframe兼容性较差

4. iframe有一定的安全风险

5. iframe会阻塞主页面的Onload事件

input只读，禁用，必填，提示词（占位符）属性分别是什么？

readonly  属性规定输入字段为只读（不能修改）

disabled  属性规定输入字段是禁用的    

required  属性规定必需在提交之前填写输入字段。 

placeholder    属性规定可描述输入  字段预期值的简短提示信息 。

div+css 的布局较 table 布局有什么优点？

分离 方便改版 快清晰简洁 seo

1. 改版的时候更方便 只要改 css 文件。

2. 页面加载速度更快、结构化清晰、页面显示简洁。

3. 表现与结构相分离。

4. 易于优化（seo）搜索引擎更友好，排名更容易靠前。

 SGML 、 HTML 、XML 和 XHTML 的区别？

SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。

HTML 是超文本标记语言，主要是用于规定怎么显示网页。

XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多，
而 HTML 的标签都是固定的而且数量有限。

XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 
更严格，比如标签必须都用小写，标签都必须有闭合标签等。

如何实现浏览器内多个标签页之间的通信?

 （1）使用 WebSocket，通信的标签页连接同一个服务器，发送消息到服务器后，服务器推送消息给所有连接的客户端。
 （2）使用 SharedWorker （只在 chrome 浏览器实现了），两个页面共享同一个线程，通过向线程发送数据和接收数据来实现标签页之间的双向通行。
 （3）可以调用 localStorage、cookies 等本地存储方式，localStorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个 storage 事件，我们通过监听 storage 事件，控制它的值来进行页面信息通信；
 （4）如果我们能够获得对应标签页的引用，通过 postMessage 方法也是可以实现多个标签页通信的。