Mastering HTML and CSS for the Interview: Obligatory Questions and Which Will Surprise You-CSS Tutorial-php.cn

. These tags provide structure and clarity for organizing content.

6. What is DOCTYPE and why is it important in an HTML document?
declaration defines the version of HTML to be used. In HTML5, the simple declaration ensures that the page is displayed correctly in all browsers.

7. How to make a link in HTML?
Use label: Click here. The href attribute specifies the URL to which the link leads.

8. How to create a table in HTML?
The table is created using the

labels, and rows and columns using ,

, and

. Example:

<table>
  <tr>
    <th>Ime</th>
    <th>Prezime</th>
  </tr>
  <tr>
    <td>Marko</td>
    <td>Marković</td>
  </tr>
</table>

9. What is the image alt attribute and why is it important?
The alt attribute provides alternative text for images that cannot be displayed. It is important for SEO and accessibility, as screen readers use it to describe the image.

10. How to create a form in HTML?
Forms are created using the

tags with fields like ,

, and <button>. Example: <br>
</p>

<pre class="brush:php;toolbar:false"> <form action="/submit" method="POST">
     <input type="text" name="ime" placeholder="Unesi ime" />
     <button type="submit">Pošalji</button>
 </form>
</pre>

<p><strong>11. How to use radio and checkbox input?</strong><br>
     the radio is used when it is necessary to select one option from a group, while the checkbox enables the selection of several options. Example: <br>
</p>

<pre class="brush:php;toolbar:false">  <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
</pre>

<p><strong>12. How to embed video in HTML?</strong><br>
     Use <video> tag:<br>
</p>

<p><strong>13. What is a placeholder attribute in HTML form?</strong><br>
     The placeholder attribute provides a text hint inside the input field that is visible until the user enters data. Example: <br>
</p>

<p><strong>14. How do we define an ordered and unordered list?</strong><br>
     Use <ol> for numbered lists and <ul> for bulleted lists. Items are defined using <li>. Example: <br>
</p>

<pre class="brush:php;toolbar:false">   <ul>
      <li>Prva stavka</li>
      <li>Druga stavka</li>
   </ul>
</pre>

<p><strong>15. How do we create external and internal links in HTML?</strong><br>
     An external link leads to another page on the Internet (the full URL is used), while an internal link leads to another page within the site (a relative address is used). Example: <br>
</p>

<pre class="brush:php;toolbar:false">   <a href="https://example.com">Spoljni link</a>
   <a href="/kontakt">Unutrašnji link</a>
</pre>

<h3>
  
  
  CSS pitanja:
</h3>

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

<p><strong>17. Koje su prednosti korišćenja eksternih CSS fajlova?</strong><br>
     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.</p>

<p><strong>18. Kako primenjujemo CSS na HTML elemente?</strong><br>
     CSS se može primeniti na tri načina: inline (unutar HTML-a pomoću style atributa), u <style> oznaci unutar <head>, ili u eksternom CSS fajlu.</p>

<p><strong>19. Objasni box model u CSS-u.</strong><br>
     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.</p>

<p><strong>20. Kako dodati pozadinsku sliku u CSS-u?</strong><br>
     Koristi se background-image svojstvo:<br>
</p>

<pre class="brush:php;toolbar:false">      body {
        background-image: url('slika.jpg');
      }
</pre>

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

<p><strong>22. Kako se kreiraju responsive web stranice pomoću CSS-a?</strong><br>
     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.</p>

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

<pre class="brush:php;toolbar:false">      a:hover {
        color: red;
      }
</pre>

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

<pre class="brush:php;toolbar:false">      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
</pre>

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

<pre class="brush:php;toolbar:false">      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }
</pre>

<p><strong>26. Koja je razlika između inline i block elemenata u CSS-u?</strong><br>
     block elementi zauzimaju celu širinu roditeljskog elementa i počinju novi red (npr. <div>), dok inline elementi zauzimaju samo potrebnu širinu i stoje u istom redu (npr. <span>).</p>

<p><strong>27. Kako funkcioniše z-index?</strong><br>
     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.</p>

<p><strong>28. Šta je razlika između position: relative, absolute, fixed, i sticky?</strong><br>
    - relative: Pozicionira element relativno prema njegovom uobičajenom mestu.<br><br>
    - absolute: Pozicionira element relativno prema najbližem pozicioniranom roditelju.<br><br>
    - fixed: Element je fiksiran u odnosu na prozor pretraživača.<br><br>
    - sticky: Kombinacija relative i fixed - ostaje relativan dok ne dosegne određenu tačku.</p>

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

<pre class="brush:php;toolbar:false">      div {
        width: calc(100% - 50px);
      }
</pre>

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

<pre class="brush:php;toolbar:false">      button {
        background-color: blue;
        transition: background-color 0.3s ease;
      }
      button:hover {
        background-color: red;
      }
</pre>

<p><strong>31. Kako primeniti više klasa na jedan HTML element?</strong><br>
     Više klasa se dodaje razdvajanjem njihovih imena razmakom. Primer:<br>
</p>

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

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

<pre class="brush:php;toolbar:false">      :root {
        --main-color: #96c1b0;
      }
      body {
        background-color: var(--main-color);
      }
</pre>

<p><strong>34. Kako izbeći CSS konflikte pomoću specificity pravila?</strong><br>
     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).</p>

<ol>
<li><p>Nivo - univerzalni selektor, ne utiče uopšte na specifičnost (*)</p></li>
<li>
<p>Nivo </p>

<ul>
<li>HTML selektor </li>
<li>pseudo-element (::before, ::after, ::first-letter, ::first-line, ::selection...)</li>
</ul>
</li>
<li>
<p>Nivo </p>

<ul>
<li>selektor klase </li>
<li>selektor HTML parametra (npr.: a[href$=".pdf"], input[name*="email"] ,  [class~="button"] ...)</li>
<li>pseudo-klasa (:hover, :focus, :active, :first-child, :nth-child())</li>
</ul>
</li>
<li><p>Nivo - ID selektor</p></li>
<li><p>Nivo - inline CSS</p></li>
<li><p>Nivo - !important pravilo</p></li>
</ol>

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

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

<pre class="brush:php;toolbar:false">      div {
        transition: transform 0.5s;
      }
      div:hover {
        transform: rotate(45deg);
      }
</pre>

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

<pre class="brush:php;toolbar:false">      box {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }
</pre>

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

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

<pre class="brush:php;toolbar:false">      @media (max-width: 768px) {
        body {
          background-color: blue;
        }
      }
</pre>

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

<p><strong>41. Kako kreirati transparentnost u CSS-u?</strong><br>
     Koristi se opacity ili RGBA boje. Primer:<br>
</p>

<pre class="brush:php;toolbar:false">      div {
        opacity: 0.5;
      }
</pre>

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

<pre class="brush:php;toolbar:false">      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
</pre>

<p><strong>43. Šta su CSS vendor prefiksi i zašto su važni?</strong><br>
     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.</p>

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

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

<pre class="brush:php;toolbar:false">      h1, h2, h3 {
        color: #96c1b0;
      }
</pre>

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

<pre class="brush:php;toolbar:false">      input[type="text"] {
        padding: 10px;
        border: 2px solid #96c1b0;
      }
</pre>

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

<pre class="brush:php;toolbar:false">      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
</pre>

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

<pre class="brush:php;toolbar:false">      div {
        aspect-ratio: 16 / 9;
      }
</pre>

<p><strong>49. Kako možemo kontrolisati protok teksta unutar elementa?</strong><br>
    Koriste se svojstva kao što su:</p>

<ul>
<li><p>white-space: kontroliše kako se upravlja razmacima i linijama unutar elementa (npr. nowrap za onemogućavanje prelamanja teksta).</p></li>
<li><p>overflow: određuje šta se dešava sa sadržajem koji izlazi izvan granica elementa (npr. hidden, scroll, auto).</p></li>
<li><p>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:<br>
</p></li>
</ul>
<pre class="brush:php;toolbar:false">     p {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
</pre>

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

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

<pre class="brush:php;toolbar:false">      ul {
        list-style-type: none;
      }
</pre>

<p>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.</p>

<hr>

<h2>
  
  
  Bonus pitanja
</h2>

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

<p><strong>1. Kako funkcioniše data-* atribut u HTML-u i za šta se koristi?</strong></p>

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

<p>Možeš pristupiti ovim podacima pomoću JavaScript-a:<br>
</p>

<pre class="brush:php;toolbar:false">     var userId = document.querySelector('div').dataset.userId;
</pre>

<p><strong>2. Šta se dešava ako u CSS-u primeniš width: 100% na element koji već ima padding i border?</strong><br>
    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.</p>

<p><strong>3. Koja je razlika između link i @import za dodavanje CSS-a u HTML?</strong></p>

<p>link element se koristi u <head> sekciji za uključivanje CSS-a, dok se @import koristi unutar CSS fajlova za učitavanje drugih CSS fajlova. <br>
Razlike:</p>

<ul>
<li><p>link je brži jer se CSS učitava paralelno.</p></li>
<li><p>@import odlaže učitavanje CSS-a, što može usporiti renderovanje stranice.</p></li>
<li><p>link je bolje podržan i ima veći prioritet.</p></li>
</ul>

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

<pre class="brush:php;toolbar:false">     input::placeholder {
       color: grey;
       font-style: italic;
     }
</pre>

<p><strong>5. Šta se dešava kada postaviš position: absolute na element bez pozicioniranog roditelja?</strong><br>
    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.</p>

<p><strong>6. Kako kreirati trougao koristeći samo CSS?</strong><br>
Trougao se kreira pomoću border svojstava. Na primer:<br>
</p>

<pre class="brush:php;toolbar:false">     .triangle {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid red;
     }
</pre>

<p>Ovaj kod kreira crveni trougao.</p>

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

<p>Na primer, ako je html { font-size: 16px; }:</p>

<ul>
<li><p>1rem je uvek 16px.</p></li>
<li><p>1em zavisi od veličine fonta roditelja.</p></li>
</ul>

<p><strong>8. Kako radi zlatni rez (Golden Ratio) u web dizajnu i kako ga koristiš u CSS-u?</strong><br>
    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:<br>
</p>

<pre class="brush:php;toolbar:false">     .box {
       width: 61.8%;
       height: 100%;
     }
</pre>

<p><strong>9. Šta se dešava kada HTML dokument nema deklaraciju <!DOCTYPE html>?</strong><br>
    Bez <!DOCTYPE html>, 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.</p>

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

<pre class="brush:php;toolbar:false">      p {
        user-select: none;
      }
</pre>

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

<hr>

<h2>
  
  
  Zaključak:
</h2>

<p>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.</p>

<p>The above is the detailed content of Mastering HTML and CSS for the Interview: Obligatory Questions and Which Will Surprise You. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">css</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">webkit</a> <a href="javascript:void(0);">Static</a> <a href="javascript:void(0);">Float</a> <a href="javascript:void(0);">select</a> <a href="javascript:void(0);">checkbox</a> <a href="javascript:void(0);">auto</a> <a href="javascript:void(0);">class</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">position</a> <a href="javascript:void(0);">overflow</a> <a href="javascript:void(0);">margin</a> <a href="javascript:void(0);">padding</a> <a href="javascript:void(0);">border</a> <a href="javascript:void(0);">background</a> <a href="javascript:void(0);">transform</a> <a href="javascript:void(0);">transition</a> <a href="javascript:void(0);">flex</a> <a href="javascript:void(0);">canvas</a> <a href="javascript:void(0);">input</a> <a href="javascript:void(0);">ul</a> <a href="javascript:void(0);">table</a> <a href="javascript:void(0);">td</a> <a href="javascript:void(0);">tr</a> <a href="javascript:void(0);">th</a> <a href="javascript:void(0);">li</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Configuring Tailwind as a Design System" href="http://m.php.cn/faq/1796611180.html">Configuring Tailwind as a Design System</a></span><span>Next article：<a class="dBlack" title="Configuring Tailwind as a Design System" href="http://m.php.cn/faq/1796611442.html">Configuring Tailwind as a Design System</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="http://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-6t+ed+2i-1n-4w"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="8966999616"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/faq/1796680125.html" title="How to Freeze Chrome DevTools Panel for Popover Inspection?" class="aBlack">How to Freeze Chrome DevTools Panel for Popover Inspection?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1796680167.html" title="SPAN vs DIV: When to Use Inline-Block for Web Page Layout?" class="aBlack">SPAN vs DIV: When to Use Inline-Block for Web Page Layout?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1796680172.html" title="How Can I Target Specific Browsers with Custom CSS Styles?" class="aBlack">How Can I Target Specific Browsers with Custom CSS Styles?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1796680181.html" title="How to Prevent Unintended Page Movement When Using ScrollIntoView()?" class="aBlack">How to Prevent Unintended Page Movement When Using ScrollIntoView()?</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/faq/1796680182.html" title="How can I change the color of specific words in HTML text?" class="aBlack">How can I change the color of specific words in HTML text?</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5902227090019525"
     data-ad-slot="5027754603"></ins><script>     (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/"><b class="icon1"></b><p>Home</p></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="http://m.php.cn/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/" >Home</a></div><div class="swiper-slide"><a href="http://m.php.cn/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="http://m.php.cn/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="http://m.php.cn/course.html" >Course</a></div><div class="swiper-slide"><a href="http://m.php.cn/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="http://m.php.cn/xiazai"  >Download</a></div><div class="swiper-slide"><a href="http://m.php.cn/game" >Game</a></div><div class="swiper-slide"><a href="http://m.php.cn/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs"  ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a  onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan "  href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a  onclick="javascript:;" class="language course-right-orders chooselan chooselanguage"  href="javascript:;"><span>English</span><span>（EN）</span></a><a  onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan "  href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a  onclick="javascript:setlang('ja');" class="language course-right-orders chooselan "  href="javascript:;"><span>日本語</span><span>（JA）</span></a><a  onclick="javascript:setlang('ko');" class="language course-right-orders chooselan "  href="javascript:;"><span>한국어</span><span>（KO）</span></a><a  onclick="javascript:setlang('ms');" class="language course-right-orders chooselan "  href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a  onclick="javascript:setlang('fr');" class="language course-right-orders chooselan "  href="javascript:;"><span>Français</span><span>（FR）</span></a><a  onclick="javascript:setlang('de');" class="language course-right-orders chooselan "  href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script>            var swiper = new Swiper('.nphpNavSwiper1', {
                slidesPerView : 'auto',
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper

});
        </script></div></div><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
    var _times = times || -1, //100次
    _interval = interval || 20, //20毫秒每次
    _self = this,
    _selector = this.selector, //选择器
    _iIntervalID; //定时器id
    if( this.length ){ //如果已经获取到了，就直接执行函数
        func && func.call(this);
    } else {
        _iIntervalID = setInterval(function() {
            if(!_times) { //是0就退出
                clearInterval(_iIntervalID);
            }
            _times <= 0 || _times--; //如果是正数就 --

_self = $(_selector); //再次选择
            if( _self.length ) { //判断是否取到
                func && func.call(_self);
                clearInterval(_iIntervalID);
            }
        }, _interval);
    }
    return this;
}
$("table.syntaxhighlighter").wait(function() {
    $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
      $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>

Mastering HTML and CSS for the Interview: Obligatory Questions and Which Will Surprise You

HTML questions: