掌握面试所需的 HTML 和 CSS：必答题以及哪些会让您感到惊讶

在准备面试前端开发人员职位时，HTML和CSS是你面试中肯定会掌握的基础技术。大多数雇主会问您有关 HTML 结构和 CSS 样式的常见问题，但有些问题可能会让您感到惊讶并引起困惑。这就是为什么不仅掌握基础知识很重要，而且为更深层次和意想不到的问题做好准备也很重要。
在这篇文章中，我们将首先介绍 50 个最常见的 HTML 和 CSS 面试问题以及详细的答案。最后，我会添加 10 个可能让你感到困惑的意想不到的问题，但会解释如何解决它们。

---

HTML 问题：

1。什么是 HTML？它的基本用途是什么？
HTML（超文本标记语言）是一种用于构建网页内容的标记语言。允许创建标题、段落、链接、图像、表格和其他页面元素。

2。与以前的版本相比，HTML5 主要的新颖之处是什么？
HTML5 带来了诸如

、

、

、

等语义标签，支持多媒体元素

3。解释一下 id 和 class 属性的区别。
id 是一种唯一标识符，只能分配给页面上的一个元素，而 class 可以分配给多个元素，用于对具有相似样式或功能的元素进行分组。

4。什么是语义 HTML 以及为什么它很重要？
语义 HTML 使用具有明确定义含义的元素（例如

、

、

）。它提高了可访问性、SEO、代码可读性，并使浏览器和屏幕阅读器更容易使用。

5。 HTML5 的主要语义标签有哪些以及它们如何使用？
主要标签包括

、

、

、

、

、

和

。这些标签为组织内容提供了结构和清晰度。

6。什么是 DOCTYPE？为什么它在 HTML 文档中很重要？
声明定义要使用的 HTML 版本。在 HTML5 中，简单的声明 确保页面在所有浏览器中正确显示。

7。如何在 HTML 中创建链接？ 使用 ;标签：单击此处。 href 属性指定链接指向的 URL。

8。如何在 HTML 中创建表格？

该表是使用

创建的。使用 、

和

的标签、行和列。示例：

Ime	Prezime
Marko	Marković

9。什么是图像 alt 属性以及为什么它很重要？

alt 属性为无法显示的图像提供替代文本。它对于 SEO 和可访问性非常重要，因为屏幕阅读器使用它来描述图像。

10。如何用 HTML 创建表单？

表单是使用

创建的。带有 、 和 <button> 等字段的标签。示例：</button>

Pošalji

11。如何使用单选和复选框输入？

当需要从一组选项中选择一个选项时使用单选按钮，而复选框则可以选择多个选项。示例：

  <input type="radio" name="pol" value="muško"> Muško
  <input type="radio" name="pol" value="žensko"> Žensko
  <br>
  <input type="checkbox" name="hobi" value="sport"> Sport

12。如何在 HTML 中嵌入视频？

使用标签：

   <video controls>
      <source src="video.mp4" type="video/mp4">
   </source></video>

13。 HTML 表单中的占位符属性是什么？

placeholder 属性在输入字段内提供文本提示，该文本提示在用户输入数据之前一直可见。示例：

   <input type="text" placeholder="Unesi svoje ime">

14。我们如何定义有序列表和无序列表？

使用

;对于编号列表和

;用于项目符号列表。项目使用
• 定义。示例：

• Prva stavka
• Druga stavka

15。我们如何在 HTML 中创建外部和内部链接？

外部链接指向 Internet 上的另一个页面（使用完整的 URL），而内部链接则指向站点内的另一个页面（使用相对地址）。示例：

   <a href="https://example.com">Spoljni link</a>
   <a href="/kontakt">Unutrašnji link</a>

CSS pitanja:

16. Šta je CSS i čemu služi?
CSS (Cascading Style Sheets) služi za stilizovanje HTML elemenata, definišući boje, margine, pozicioniranje, fontove, itd.

17. Koje su prednosti korišćenja eksternih CSS fajlova?
Eksterni CSS fajlovi omogućavaju da se stilovi dele između više HTML stranica, smanjujući redundanciju i olakšavajući održavanje koda.

18. Kako primenjujemo CSS na HTML elemente?
CSS se može primeniti na tri načina: inline (unutar HTML-a pomoću style atributa), u

19. Objasni box model u CSS-u.
CSS box model definiše kako se svaki HTML element prikazuje, uključujući sadržaj (content), padding, border, i margin. To je ključna osnova za razumevanje layout-a.

20. Kako dodati pozadinsku sliku u CSS-u?
Koristi se background-image svojstvo:

      body {
        background-image: url('slika.jpg');
      }

21. Kako centrirati element horizontalno pomoću CSS-a?
Za blok elemente koristi se margin: 0 auto ako element ima zadatu širinu. Za inline elemente koristi se text-align: center na roditelju.

22. Kako se kreiraju responsive web stranice pomoću CSS-a?
Responsive dizajn se kreira korišćenjem media query-ja, fleksibilnih jedinica poput em, rem, i vw/vh, i fleksibilnih layout sistema kao što su Flexbox i Grid.

23. Šta su CSS pseudo-klase i kako se koriste?
Pseudo-klase definišu posebna stanja elemenata, npr. :hover, :focus, :nth-child(). Primer:

      a:hover {
        color: red;
      }

24. Kako koristiti Flexbox za postavljanje elemenata?
Flexbox je moćan alat za postavljanje elemenata u jednom pravcu (horizontalno ili vertikalno) i koristi se pomoću display: flex. Primer:

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

25. Kako funkcionišu CSS grid layout sistemi?
CSS Grid omogućava kreiranje dvodimenzionalnih layout-ova koristeći redove i kolone.
Primer:

      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }

26. Koja je razlika između inline i block elemenata u CSS-u?
block elementi zauzimaju celu širinu roditeljskog elementa i počinju novi red (npr.

), dok inline elementi zauzimaju samo potrebnu širinu i stoje u istom redu (npr. ).

27. Kako funkcioniše z-index?
z-index definiše redosled preklapanja elemenata. Elementi sa većim z-index vrednostima će biti iznad onih sa manjim vrednostima. Radi samo na elementima sa position vrednostima osim static.

28. Šta je razlika između position: relative, absolute, fixed, i sticky?
- relative: Pozicionira element relativno prema njegovom uobičajenom mestu.

- absolute: Pozicionira element relativno prema najbližem pozicioniranom roditelju.

- fixed: Element je fiksiran u odnosu na prozor pretraživača.

- sticky: Kombinacija relative i fixed - ostaje relativan dok ne dosegne određenu tačku.

29. Kako se koristi calc() funkcija u CSS-u?
calc() omogućava kombinovanje različitih CSS jedinica u izračunavanju vrednosti.
Primer:

      div {
        width: calc(100% - 50px);
      }

30. Kako se koristi transition za animaciju u CSS-u?
transition omogućava dodavanje efekta prelaza između dva stanja elementa.
Primer:

      button {
        background-color: blue;
        transition: background-color 0.3s ease;
      }
      button:hover {
        background-color: red;
      }

31. Kako primeniti više klasa na jedan HTML element?
Više klasa se dodaje razdvajanjem njihovih imena razmakom. Primer:

      <div class="box rounded"></div>

32. Kako se kreira vertikalni razmak između blok elemenata?
Koristi se margin. Na primer, margin-top ili margin-bottom mogu kreirati razmak između elemenata.

33. Šta su CSS varijable i kako se koriste?
CSS varijable omogućavaju definisanje prilagodljivih vrednosti koje se mogu koristiti više puta u stilovima.
Primer:

      :root {
        --main-color: #96c1b0;
      }
      body {
        background-color: var(--main-color);
      }

34. Kako izbeći CSS konflikte pomoću specificity pravila?
Specificity određuje koja pravila će biti primenjena kada više selektora odgovaraju istom elementu. Specifičniji selektori (npr. ID selektori) imaju prednost nad opštim selektorima (npr. tagovi ili klase).

1. Nivo - univerzalni selektor, ne utiče uopšte na specifičnost (*)

2. Nivo

   • HTML selektor
   • pseudo-element (::before, ::after, ::first-letter, ::first-line, ::selection...)

3. Nivo

   • selektor klase
   • selektor HTML parametra (npr.: a[href$=".pdf"], input[name*="email"] , [class~="button"] ...)
   • pseudo-klasa (:hover, :focus, :active, :first-child, :nth-child())

4. Nivo - ID selektor

5. Nivo - inline CSS

6. Nivo - !important pravilo

35. Šta znači !important i kada ga treba koristiti?
!important preuzima prioritet nad bilo kojim drugim pravilima za isti element. Koristi se samo u posebnim slučajevima kada treba nadjačati pravilo.

36. Kako kreirati transition ili transform animacije u CSS-u?
Koriste se svojstva poput transition za prelaze između stanja ili transform za transformacije (rotacija, skaliranje, itd.). Primer:

      div {
        transition: transform 0.5s;
      }
      div:hover {
        transform: rotate(45deg);
      }

37. Kako dodati senku elementima?
Koristi se box-shadow za elemente kao što su div-ovi ili text-shadow za tekst. Primer:

      box {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }

38. Šta znači display: none i kako se razlikuje od visibility: hidden?
display: none potpuno uklanja element iz dokumenta i layout-a, dok visibility: hidden element čini nevidljivim, ali on i dalje zauzima prostor na stranici.

39. Kako koristiti media queries za prilagođavanje različitim uređajima?
Media queries omogućavaju promenu stilova zavisno od veličine ekrana ili uređaja.
Primer:

      @media (max-width: 768px) {
        body {
          background-color: blue;
        }
      }

40. Kako koristiti float i koje su njegove alternative?
float se koristi za postavljanje elemenata levo ili desno od roditeljskog elementa. Moderne alternative su Flexbox i Grid.

41. Kako kreirati transparentnost u CSS-u?
Koristi se opacity ili RGBA boje. Primer:

      div {
        opacity: 0.5;
      }

42. Kako definišemo globalne stilove?
Globalni stilovi se definišu na vrhu CSS fajla ili koristeći selektore poput * ili html, body.
Primer:

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

43. Šta su CSS vendor prefiksi i zašto su važni?
Vendor prefiksi (npr. -webkit-, -moz-, -o-) omogućavaju podršku za novija CSS svojstva u različitim pretraživačima, dok svojstva još nisu potpuno standardizovana.

44. Kako koristiti min-width i max-width za responsivne dizajne?
min-width i max-width ograničavaju minimalne i maksimalne širine elemenata, čime se osigurava prilagodljiv dizajn.

45. Kako primeniti iste stilove na više elemenata u CSS-u?
Više selektora se može grupisati koristeći zarez.
Primer:

      h1, h2, h3 {
        color: #96c1b0;
      }

46. Kako stilizovati forme u CSS-u?
Možeš koristiti CSS pravila kao za druge elemente, ali može biti potrebno dodatno prilagođavanje za različite pretraživače.
Primer:

      input[type="text"] {
        padding: 10px;
        border: 2px solid #96c1b0;
      }

47. Šta je clearfix trik u CSS-u?
clearfix se koristi za rešavanje problema sa float elementima. Najčešće koristi pseudo-element:

      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }

48. Kako koristiti aspect-ratio u CSS-u?
aspect-ratio održava proporcije elementa (širina naspram visine) u zadatom odnosu. Primer:

      div {
        aspect-ratio: 16 / 9;
      }

49. Kako možemo kontrolisati protok teksta unutar elementa?
Koriste se svojstva kao što su:

• white-space: kontroliše kako se upravlja razmacima i linijama unutar elementa (npr. nowrap za onemogućavanje prelamanja teksta).

• overflow: određuje šta se dešava sa sadržajem koji izlazi izvan granica elementa (npr. hidden, scroll, auto).

• text-overflow: koristi se zajedno sa overflow i white-space svojstvima za kontrolu kako se prikazuje višak teksta, npr. sa ellipsis dodaje tri tačke kada tekst prelazi granicu elementa. Primer:
  

     p {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }

Ova svojstva omogućavaju kontrolu prikaza i formatiranja teksta, posebno u slučajevima kada je prostor za tekst ograničen.

50. Kako stilizovati listu tako da nema tačke ili brojeve?
Koristi se svojstvo list-style-type: none;. Primer:

      ul {
        list-style-type: none;
      }

Ovo su najčešća i najbitnija pitanja sa odgovorima za HTML i CSS intervjue. Ova pitanja pokrivaju širok spektar osnovnih i naprednih tema, koje su ključne za web development.

---

Bonus pitanja

Evo 10 pitanja za HTML i CSS koja mogu biti neočekivana ili te mogu zbuniti na intervjuu, zajedno sa objašnjenjima:

1. Kako funkcioniše data-* atribut u HTML-u i za šta se koristi?

• data-* atributi se koriste za čuvanje prilagođenih podataka u HTML elementima koje JavaScript može da koristi. Na primer:

     <div data-user-id="123"></div>

Možeš pristupiti ovim podacima pomoću JavaScript-a:

     var userId = document.querySelector('div').dataset.userId;

2. Šta se dešava ako u CSS-u primeniš width: 100% na element koji već ima padding i border?
Podrazumevano, width: 100% će postaviti širinu elementa na 100% njegove roditeljske širine, ali će padding i border dodatno proširiti ukupnu širinu. Da bi to izbegao, koristi box-sizing: border-box, što uključuje padding i border u izračunavanje širine.

3. Koja je razlika između link i @import za dodavanje CSS-a u HTML?

link element se koristi u

sekciji za uključivanje CSS-a, dok se @import koristi unutar CSS fajlova za učitavanje drugih CSS fajlova.
Razlike:

• link je brži jer se CSS učitava paralelno.

• @import odlaže učitavanje CSS-a, što može usporiti renderovanje stranice.

• link je bolje podržan i ima veći prioritet.

4. Kako možeš stilizovati placeholder tekst u HTML input elementima?
Koristi pseudo-klasu ::placeholder da bi stilizovao tekst unutar input polja. Na primer:

     input::placeholder {
       color: grey;
       font-style: italic;
     }

5. Šta se dešava kada postaviš position: absolute na element bez pozicioniranog roditelja?
Ako roditeljski element nema zadatu poziciju (relative, absolute, fixed ili sticky), apsolutno pozicionirani element će se pozicionirati relativno prema prozoru pretraživača, a ne prema roditelju.

6. Kako kreirati trougao koristeći samo CSS?
Trougao se kreira pomoću border svojstava. Na primer:

     .triangle {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid red;
     }

Ovaj kod kreira crveni trougao.

7. Kako funkcionišu CSS rem i em jedinice i koja je razlika između njih?
rem je relativna jedinica u odnosu na font-size root elementa (obično ), dok je em relativan u odnosu na font-size roditeljskog elementa.

Na primer, ako je html { font-size: 16px; }:

• 1rem je uvek 16px.

• 1em zavisi od veličine fonta roditelja.

8. Kako radi zlatni rez (Golden Ratio) u web dizajnu i kako ga koristiš u CSS-u?
Zlatni rez je odnos od otprilike 1.618:1 i često se koristi za raspored elemenata na stranici kako bi dizajn bio vizuelno prijatan. Može se koristiti za određivanje proporcija elemenata, npr. širine i visine sekcija:

     .box {
       width: 61.8%;
       height: 100%;
     }

9. Šta se dešava kada HTML dokument nema deklaraciju ?
Bez , pretraživač može prikazivati stranicu u "quirks mode", što uzrokuje ponašanje neusklađeno sa standardima, potencijalno menjajući renderovanje elemenata, veličine margina, itd.

10. Kako možeš učiniti da tekst bude selektibilan ili neselektibilan pomoću CSS-a?
Koristi CSS svojstvo user-select. Na primer, da onemogućiš selektovanje teksta:

      p {
        user-select: none;
      }

Možeš omogućiti selektovanje sa user-select: text;.

---

Zaključak:

Intervju za poziciju front-end developera može biti izazovan, ali uz pravu pripremu možete se lako izboriti sa svim pitanjima. Osim što je važno savladati osnovne koncepte HTML-a i CSS-a, od koristi vam može biti i priprema za pitanja koja idu korak dalje i zahtevaju dublje razumevanje tehnologija. Neočekivana pitanja koja vas zbunjuju pružaju priliku da se izdvojite od konkurencije i pokažete svoju sposobnost za rešavanje problema na kreativne načine.

以上是掌握面试所需的 HTML 和 CSS：必答题以及哪些会让您感到惊讶的详细内容。更多信息请关注PHP中文网其他相关文章！