前端面试题(基础篇十一)

一、DOCTYPE 的作用是什么?

 <!DOCTYPE>  声明一般位于文档的第一行,它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析,否则就以兼容模式进行解析。在标准模式下,浏览器的解析规则都是按照最新的标准进行解析的。在兼容模式下,浏览器会以向后兼容的方式来模拟老式浏览器的行为,以保证一些老的网站的正确访问。

 在 html5 之后不再需要指定 DTD 文档,因为 html5 以前的 html 文档都是基于 SGML 的,所以需要通过指定 DTD 来定义文档中允许的属性以及一些规则。而 html5 不再基于 SGML 了,所以不再需要使用 DTD。

二、标准模式与兼容模式各有什么区别?

标准模式的渲染方式和 JS 引擎的解析方式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

三、SGML 、 HTML 、XML 和 XHTML 的区别?

SGML(Standard Generalized Markup language)是标准通用置标语言,是一种定义电子文档结构和描述其内容的国际标准语言,是所有电子文档标记语言的起源。

HTML(HyperText Markup Language)是超文本标记语言,主要是用于规定怎么显示网页。

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

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

四、DTD 介绍

DTD( Document Type Definition 文档类型定义)是一组机器可读的规则,它们定义 XML 或 HTML 的特定版本中所有允许元素及它们的属性和层次关系的定义。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。

DTD 是对 HTML 文档的声明,还会影响浏览器的渲染模式(工作模式)

五、行内、块级元素的定义及其区别

行内元素(Inline Elements)

  • 定义:行内元素不会创建新的块级上下文,它们在页面中从左到右流动,像文本一样排布在同一行内,直到该行排满后才会换行。
  • 特点
    • 不会自动换行,可以与其他行内元素共享一行。
    • 宽度和高度默认由内容决定,不能直接设置宽度和高度。
    • 水平方向的边距(margin)和内边距(padding)可以正常工作,但垂直方向的边距和内边距在某些情况下可能表现不一致,因为它们不会影响行高。
    • 通常用于文本格式化和链接等,如<span><a><strong><em>等。

块级元素(Block-Level Elements)

  • 定义:块级元素会创建一个新的块级上下文,每个块级元素都从新的一行开始,并且尽可能地占据父元素的全部宽度。
  • 特点
    • 总是从新的一行开始,并且独占一行。
    • 可以设置明确的宽度、高度、内边距和外边距。
    • 默认情况下,宽度为100%,如果没有设置宽度,它将填充其父元素的整个宽度。
    • 可以包含行内元素和其他块级元素,提供了更强大的布局能力。
    • 例如<div><p><h1><h6><ul><li>等。

区别总结

  • 布局方式:块级元素独占一行,而行内元素则可以在一行内连续排列。
  • 尺寸控制:块级元素可以设置宽度和高度,而行内元素的尺寸主要由内容决定。
  • 内容包含:块级元素可以包含行内元素和块级元素,而行内元素通常只包含文本或其他行内元素。
  • 边距与内边距:虽然两者都能应用内外边距,但块级元素在四个方向上的调整更为自由,而行内元素在垂直方向上的调整受限

但在实际的开发过程中,因为页面表现的需要,我们经常把 inline 元素的 display 值设定为 block (比如 a 标签),也经常把 block 元素的 display 值设定为 inline 之后更是出现了 inline-block 这一对外呈现 inline 对内呈现 block 的属性(比如img标签)。因此,简单地把 HTML 元素划分为inline 与 block 已经不再符合实际需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/36739.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

速盾:ddos高防ip是什么?

DDoS攻击是一种通过向目标网络发送大量的无效请求&#xff0c;以致其无法正常运作的攻击方式。这种攻击方式广泛应用于各种网络服务&#xff0c;如网站、服务器、游戏等。由于DDoS攻击可以导致被攻击的网络瘫痪&#xff0c;因此许多组织和个人都开始关注网络安全&#xff0c;并…

什么是C++模块化系统?C++20的模块化系统。

C20引入的模块化系统是一种新的代码组织和编译机制&#xff0c;它旨在替代传统的头文件机制&#xff0c;提供更好的代码组织、更快的编译速度和更强的封装性。模块化系统的主要目标包括&#xff1a; 减少编译时间&#xff1a;通过减少冗余的头文件解析和宏定义传播&#xff0c…

Nest使用multer实现文件上传,并实现大文件分片上传(下)

上节我们学了在 Express 里用 multer 包处理 multipart/form-data 类型的请求中的 file。 单个、多个字段的单个、多个 file 都能轻松取出来。 接下来我们就来学习一下在Nest 里使用multer。 一,Nest如何使用multer实现文件上传 首先我们先创建一个Nest项目&#xff1a; nest…

性能测试4【搬代码】

性能测试4与性能测试3最后的 三、性能瓶颈分析和性能调优 (1)基准测试 (2)负载测试 (3)压力测试 (4)浪涌测试 (5)容量测试 有关&#xff0c;需要结合看 性能瓶颈分析和性能调优 (1)基准测试 一般是单接口&#xff08;单交易&#xff09;&#xff1a;使用一个用持续压测1min以…

【Linux系列】Fedora40安装VMware Workstation Pro报错

问题描述 由于Fedora 40使用的Linux内核是6.9,导致安装VMware Workstation Pro 时&#xff0c;安装依赖无法成功&#xff0c;具体报错如下 ..................CC [M] /tmp/modconfig-a8Fcf5/vmnet-only/smac.oCC [M] /tmp/modconfig-a8Fcf5/vmnet-only/vnetEvent.oCC [M] …

液体粒子计数器的原理及常见型号选择 lighthouse代理商北京中邦兴业

​液体颗粒计数用于测量液体样品中颗粒的大小和分布。通过用激光二极管照射液体样品并检测散射光来测量颗粒分布和尺寸。散射光的性质与粒子大小的大小有关。液体颗粒计数器可用于批量取样或在线&#xff08;连续监测&#xff09;应用&#xff0c;如水处理厂&#xff0c;或用于…

【封装】Unity编辑器模式GUID加载资源

介绍 在编辑器模式下通过GUID获取工程目录下的指定资源的接口工具封装 工具原理 借助AssetDatabaseAPI FindAssets : 获取 GUID GUIDToAssetPath : 通过GUID获取路径LoadAssetAtPath<T>: 通过路径加载资源 代码&#xff1a; public static class GetAssetUtil {pub…

ADC位数、增益调制与参考电压

位数&#xff1a;12bit、10bit、8bit 一般就是对应的ADC值分别为&#xff1a;4095、1023、255&#xff0c;也就选用对应位数时ADC的最大值。 增益的作用 增益设置用于放大或缩小输入信号&#xff0c;使其适配到ADC的输入范围。增益设置可以通过配置SAADC的通道配置寄存器来实…

Vscode lanuch.json

Intro 使用launch.json 能够方便的运行需要传很多参数的代码文件 如下&#xff1a; import math import argparse # 1、导入argpase包def parse_args():parse argparse.ArgumentParser(descriptionCalculate cylinder volume) # 2、创建参数对象parse.add_argument(--rad…

怎么处理整合了shiro的应用的RPC接口鉴权问题

这篇文章分享一下&#xff1a;当一个服务提供者整合了shiro安全框架来实现权限访问控制时&#xff0c;服务消费者通过feign请求服务提供者的接口时的鉴权不通过问题。 问题描述 博主有一个项目pms&#xff08;权限管理系统&#xff09;&#xff0c;使用了shiro框架来实现鉴权功…

【免费可视化工具】智慧港口全景监测大屏引领行业变革

在传统的港口运营中&#xff0c;人们往往要面对繁琐的数据、复杂的流程和不确定的风险。但随着科技的发展&#xff0c;智慧港口全景监测大屏&#xff0c;集数据整合、实时监控、智能分析于一体&#xff0c;为港口运营提供了全新的解决方案。 今天要说的是山海鲸可视化搭建的智慧…

Android 通知组

一. 通知组简介 从 Android 7.0&#xff08;API 级别 24&#xff09;开始&#xff0c;您可以在一个组中显示相关通知。如下所示: 图 1. 收起&#xff08;顶部&#xff09;和展开&#xff08;底部&#xff09;的通知组。 注意 &#xff1a;如果应用发出 4 条或更多条通知且未…

第十一次Javaweb作业

4.登录校验 4.1会话 --用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求和响应。 会话跟踪&#xff1a;一种维护浏览器状态的方法&#xff0c;服务器需要识别多次请求…

Django(根据Models中模型类反向生成数据库表)—— python篇

一、数据库的配置 1、 django默认支持 sqlite&#xff0c;mysql, oracle,postgresql数据库。 sqlite&#xff1a;django默认使用sqlite的数据库&#xff0c;默认自带sqlite的数据库驱动 , 引擎名称&#xff1a;django.db.backends.sqlite3 mysql&#xff1a;引擎名称&#xff…

解决Transformer根本缺陷,所有大模型都能获得巨大改进

即使最强大的 LLM 也难以通过 token 索引来关注句子等概念&#xff0c;现在有办法了。 最近两天&#xff0c;马斯克和 LeCun 的口水战妥妥成为大家的看点。这两位 AI 圈的名人你来我往&#xff0c;在推特&#xff08;现为 X&#xff09;上相互拆对方台。 LeCun 在宣传自家最新论…

leetcode 动态规划(基础版)单词拆分

题目&#xff1a; 题解&#xff1a; 一种可行的dp做法是基于完全背包问题&#xff0c;将s看成是一个背包&#xff0c;wordDict看作是物品&#xff0c;然后往s中放入物品判断最终是否可以变为给定的s即可。这道题和上一题都用到了在dp如何枚举连续子串和状态表示&#xff1a;枚…

【C++】C++拷贝构造引发的无限递归问题及其解决方法

了解C拷贝构造引发的无限递归问题及其解决方法 在C中&#xff0c;拷贝构造函数用于创建一个对象的副本。正确使用拷贝构造函数非常重要&#xff0c;否则可能会引发无限递归问题&#xff0c;导致程序崩溃。 什么是拷贝构造函数&#xff1f; 拷贝构造函数是一种特殊的构造函数…

Golang 百题(实战快速掌握语法)_2

返回集合中满足指定条件的最后一个元素 本实验将实现判断给定集合中的元素是否符合&#xff0c;并返回符合的最后一个元素。 知识点 forfmt.Error 适合人群 本课程属于基础课程。需要用户掌握 Go 语言编程基础知识、计算机基础知识和 Linux 环境的基本用法。 许可证 内容…

潮玩手办盲盒前端项目模版的技术探索与应用案例

一、引言 在数字化时代&#xff0c;随着消费者对个性化和艺术化产品的需求日益增长&#xff0c;潮玩手办和盲盒市场逐渐崭露头角。为了满足这一市场需求&#xff0c;前端技术团队需要构建一个功能丰富、用户友好的在线平台。本文旨在探讨潮玩手办盲盒前端项目模版的技术实现&a…

MySQL入门学习-MySQL日志.查询日志

MySQL 日志包括错误日志、通用查询日志、二进制日志、中继日志、慢查询日志等&#xff0c;以下是关于查询日志的介绍&#xff1a; 一、概念&#xff1a; 查询日志记录了客户端连接 MySQL 后执行的所有语句&#xff0c;包括执行失败的语句。 二、特点&#xff1a; - 记录详细…