当前位置：首页 > news >正文

html题库

news 文章来源：https://blog.csdn.net/m0_72759446/article/details/132390169 2024/9/22 19:23:56

什么是HTML?

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

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

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

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

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

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

html5为什么只需要写<!doctype html>? 你知道多少种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：在整个窗口中打开。

<img>标签上的 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 属性规定可描述输入 <input> 字段预期值的简短提示信息。

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

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

改版的时候更方便只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（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 方法也是可以实现多个标签页通信的。