HTML 和 CSS 面试问题

时间:2022-09-23
本文章向大家介绍HTML 和 CSS 面试问题,主要内容包括必须知道 HTML 和 CSS 的面试问题、HTML 面试问题、CSS 面试问题、使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

HTML 和 CSS 面试问题

必须知道 HTML 和 CSS 的面试问题

Photo by 杰克逊·索法特 on 不飞溅

HTML 是网页的标准标记语言。它代表 超文本标记语言 .它指示网络浏览器如何显示网页。
对于 Web 开发人员来说,仅 HTML 是不够的。作为 Web 开发人员,我们需要亲身体验 HTML 和 CSS。因此,在准备 Web 开发人员面试时,准备 HTML 和 CSS 问题变得非常重要。
以下是我在为多个组织进行面试时遇到的一些面试问题的列表。我希望您会发现它对您的准备工作有所帮助。

HTML 面试问题

  1. 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 列表元素:

  • 项目清单 :
  • 定义列表项。
  • 有序列表:
      定义一个有序列表。
    1. 无序列表:
        定义无序列表。
      • 描述列表:
        定义描述列表。

      CSS 面试问题

      Photo by KOBU代理商 on 不飞溅

      1. 是什么 **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 版权协议,转载请附上原文出处链接和本声明

      本文链接:https://www.qanswer.top/38746/07322310

原文地址:https://www.cnblogs.com/amboke/p/16721748.html