html题库

什么是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

  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 方法也是可以实现多个标签页通信的。

相关推荐
neter.asia13 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫14 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年33 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_34 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891136 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾38 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu40 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫1 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫1 小时前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js