掌握面試所需的 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中文網其他相關文章！