HTML 和 CSS 面试问题
HTML 和 CSS 面试问题
必须知道 HTML 和 CSS 的面试问题
HTML 是网页的标准标记语言。它代表 超文本标记语言 .它指示网络浏览器如何显示网页。
对于 Web 开发人员来说，仅 HTML 是不够的。作为 Web 开发人员，我们需要亲身体验 HTML 和 CSS。因此，在准备 Web 开发人员面试时，准备 HTML 和 CSS 问题变得非常重要。
以下是我在为多个组织进行面试时遇到的一些面试问题的列表。我希望您会发现它对您的准备工作有所帮助。
HTML 面试问题
- HTML 中的 DOCTYPE 是什么？
文档类型 是文档类型声明。它告诉浏览器该页面是用 HTML 编写的以及使用的 HTML 版本。是 HTML5 的语法。
每个 HTML 页面都必须以 DOCTYPE 开头。如果没有指定 DOCTYPE，网页浏览器将无法获取 HTML 版本，它会进入 怪癖 模式。
2 . 和有什么区别 ** <!DOCTYPE html>** 和 ** <!Doctype html>** ?哪种语法有效？
两种语法都是有效的，并且它们之间没有区别，因为 doctype 声明不区分大小写。
3. HTML 中的单例标签是什么？
单例标签是不需要结束标签的标签。
,
标签是单例标签的一些示例。
<br>标签
<hr>标签
4. HTML 中的语义元素是什么？
语义元素=有意义的元素。
它们以对开发人员和 Web 浏览器都有意义的方式描述了他们所持有的信息。
例如，
, 页脚标签被认为是语义标签，因为它们非常清楚地说明了它们的用途以及它们所持有的内容类型。
例子：
<p>
<header>
<footer>
<table>
5、div和span有什么区别？
- div 用于将网页划分为块，而 span 用于对元素进行分组，而不会对网页产生任何副作用。
- div 是块级元素，而 Span 是内联元素。
- 开发人员可以通过使用 div 标签来保存网页的部分并应用样式，而 span 可以很容易地用于设置段落内的任何单词/短语的样式。
6.版权符号的代码是什么？
在 HTML 文件中使用 © 或 © 作为版权符号。
7. 什么是 HTML5 功能？
HTML5 特点：
- 标题元素
- 页脚元素
- 截面元素
- 音频和视频插件
- 本地数据存储
- 电子邮件输入
- 图元素
- 帆布
8. 有什么区别 **本地存储** 和 **会话存储** ?
本地存储和会话存储几乎相同，唯一的区别是会话存储数据会在窗口/选项卡关闭后自动删除。
本地存储 数据不会在选项卡/窗口关闭时被清除，只有在用户删除它或 Web 应用程序清除数据时才会被删除。
使用本地/会话存储，我们可以存储比 cookie 更多的数据。也比cookies更安全。
9. HTML页面可以使用多个body标签吗？
我们不能在单个 HTML 文档中使用多个 body 标签。如果我们在一个 HTML 文档中有多对 body 标签，那么它将被认为是无效的 HTML。大多数情况下，除非用户在其中添加一些脚本或 CSS，否则它不会出错。
10. HTML 中的列表元素是什么？
HTML 列表元素：
- 项目清单 ：
- 定义列表项。
- 有序列表：
- 定义一个有序列表。
- 无序列表：
- 定义无序列表。
- 描述列表：
- 定义描述列表。
CSS 面试问题
- 是什么
**vh**CSS中的单位？
vh代表 视口高度 .它以相对于视口的百分比测量高度。对于整页高度，它将是 100vh。vh当我们想为整个页面设置背景颜色时，通常会使用它。2. 内联元素和块元素有什么区别？
- Span 是内联元素的示例，而 div 是块级元素的示例。
- 内联元素主要用于一些父元素内部，例如
这是一个块级元素，用于在该特定行/短语上应用样式。内联元素从同一行开始影响。
块级元素用于将网页划分为块并对其应用样式/执行操作。它们跳过定义它们的行并从新行开始影响。
3. CSS中的盒子模型是什么？
顾名思义，你可以说 CSS 盒子模型是一个盒子，它包裹着每个 HTML 元素，包括内容、填充、边框和边距。内容是包含网页实际内容的最里面的部分。然后是被边框包围的填充。边距是清除边界外区域的最外层部分。
//检查TnS_box类，你可以清楚地检查盒子模型是如何使用以下属性的 TnS_box{ 填充：15px； 边框：20px 纯黑色； 边距：25px； 红色; 字体大小：20px； }4. 有什么区别
**时间**,**雷姆**和**像素**?什么时候不应该使用像素单位？**像素（像素）**被认为是一个绝对单位。**雷姆**和**时间**被认为是相对单位。- 像素单位是固定的，不会相对于其他元素调整大小。
- 根元素 (
**雷姆**) 是相对于根元素的。 - 元素 （
**恩**) 相对于其父元素。 - 在处理响应式网页时使用像素单位可能会导致糟糕的用户体验，因为像素不会相对于其他元素调整它们的大小。另一方面，如果我们想在每个平台上保持一些相同大小的元素，它们非常有用。
例如，段落的字体大小。
5. 什么是不同的位置属性？
CSS位置属性如下：
- 静止的： 当位置为静态时，元素不受左、右、上或下属性的影响。经过 默认 所有元素都是 静止的 .
- 相对的： 当相对位置应用于一个元素时，它会受到left、right、top和bottom属性的影响。
- 绝对： 当元素位置是绝对位置时，它将相对于其父元素定位。
- 固定的： 当元素定位为固定时，它不会受到滚动的影响。它将保持固定在其位置。
例如，应用程序标头。 - 黏： 当元素定位为粘性时，它将显示相对位置和固定位置的组合属性。
例如，如果我们有多个应用程序标题，并且在 header2 上应用了粘性位置，则 header2 将表现为相对，直到 header1 的滚动结束，然后它将表现为固定并且不会从其位置移动。
6.有什么区别
**可见性：隐藏**和**显示：无**?**可见性：隐藏**意味着我们要求使该元素在网页上不可见，但这里要注意的是该元素只是隐藏的，但它占用了网页上的空间/尺寸。**显示：无**意味着我们根本不会在网页上显示该元素，因此，在这种情况下，它不会占用网页上的空间，并且会相应地调整其他元素。例子： 假设你有三个按钮 登录、注销和配置文件 在您的网页上。什么时候
可见性：隐藏应用在登录按钮上，它会被隐藏，但它仍然会占据屏幕上的空间，其他按钮没有调整。
什么时候显示：无应用于登录按钮，它将从页面中删除，现在注销将在登录按钮的位置进行调整，并且个人资料按钮将移动到注销按钮的位置。7. CSS 的特殊性是什么？优先顺序是什么？
Web 浏览器使用特异性来决定应将哪个 CSS 属性应用于给定元素。当多个 CSS 类声明针对同一个元素时，特异性就会出现。
与 ID 相比，内联 CSS 样式具有更高的偏好，ID 之后是 className。
8. 在网页中集成 CSS 的不同方式？
将 CSS 集成到网页中的三种方法：
-
内部的 ：内部 CSS 将应用于单个网页。它被定义在内部的顶部页面的部分。
-
外部的 ：外部 CSS 文件被创建并全局应用于所有页面。我们需要在内部配置外部 CSS 文件的路径元素。
-
排队 ：内联 CSS 应用于网页中的单个块/元素。
//内部CSS
这是内联 CSS。
//内联CSS
9.
**边距：10px 20px 30px 40px**, margin-top 的值是多少？对于 margin 和 padding 属性，你可以记住它——Margin 为从 Topside 开始的元素按顺时针方向取值。它将是上 - 右 - 下 - 左。
在给定的代码中，margin-top 将是 10像素 .10、折叠展开的默认行为是什么？如何改变它？
折叠展开的默认行为是从上到下。为了更好地理解，您可以将其与手风琴的行为联系起来。我们可以很容易地改变这种行为。如果我们将 flex-direction 指定为 column-reverse，则折叠将向上扩展，即从下到上。
显示：弯曲； 弹性方向：列反向；11、margin和padding有什么区别？
根据 CSS 框模型，填充是实际页面内容和边框之间的空白空间。边距是边界之外的区域。换句话说，相对于应用于元素的边框，我们可以说填充在内部，边距在外部。
这就是本文的内容。如果您觉得这篇文章对您的准备工作有帮助，请不要忘记查看其他文章！
更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
- 描述列表：
- 无序列表：
