Soalan Temuduga HTML Teratas untuk Pembangun Frontend

Hai, peminat bahagian hadapan! ? Sama ada anda bersiap sedia untuk temu duga pertama anda atau bersiap sedia untuk peluang besar anda yang seterusnya, menguasai HTML adalah satu kemestian. Berikut ialah senarai susun atur soalan temu bual HTML yang paling biasa dengan contoh praktikal. Jom terjun! ?

---

1. Apakah itu teg HTML semantik?

Teg semantik dengan jelas menerangkan tujuannya dalam halaman web. Mereka menjadikan kod anda lebih mudah dibaca dan meningkatkan SEO. ?

Contoh:

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div>



<p><strong>Why it matters:</strong> Semantic tags improve accessibility and help search engines understand your content better.</p>


<hr>

<h3>
  
  
  2. <strong>What is the difference between id and class attributes?</strong>
</h3>

<ul>
<li>
id: Unique identifier, used once per page.</li>
<li>
class: Can be reused multiple times for styling or grouping elements.</li>
</ul>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><!-- Using id -->
<div>



<p><strong>Pro Tip:</strong> Use id for unique elements like headers or footers, and class for reusable components.</p>


<hr>

<h3>
  
  
  3. <strong>What are void elements in HTML?</strong>
</h3>

<p>Void elements are self-closing and don’t have a closing tag.</p>

<p><strong>Examples:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

Fakta Keseronokan: Menambah teg penutup pada elemen batal ialah HTML tidak sah!

---

4. Bagaimanakah anda memasukkan JavaScript dalam dokumen HTML?

Terdapat tiga cara untuk memasukkan JavaScript:

1) Sebaris:

   <button onclick="alert('Hello!')">Click Me</button>

2) Dalaman:

   <script>
     console.log('Hello from internal script!');
   </script>

3) Luaran:

   <script src="script.js"></script>

Petua Pro: Skrip luaran diutamakan untuk pengasingan kebimbangan yang lebih baik. ?️

---

5. Apakah tujuan atribut alt dalam imej?

Atribut alt menyediakan teks alternatif untuk imej apabila ia tidak dipaparkan atau untuk pembaca skrin.

Contoh:

<img src="logo.png" alt="Company Logo">

Mengapa ia penting: Meningkatkan kebolehaksesan dan meningkatkan kedudukan SEO.

---

6. Apakah perbezaan antara elemen sebaris, blok dan blok sebaris dalam HTML?

• Sebaris: Tidak bermula pada baris baharu dan hanya mengambil lebar sebanyak yang diperlukan.
• Sekat: Bermula pada baris baharu dan menggunakan lebar penuh yang tersedia.
• Blok sebaris: Berkelakuan seperti elemen sebaris tetapi membenarkan lebar dan ketinggian tetapan.

Contoh:

<!-- Inline -->
<span>This is inline</span>
<span>Another inline</span>

<!-- Block -->
<div>This is block</div>
<div>Another block</div>

<!-- Inline-block -->
<div>



<p><strong>Pro Tip:</strong> Use inline-block for layouts where you need elements side-by-side with specific dimensions.</p>


<hr>

<h3>
  
  
  7. <strong>What are data attributes in HTML?</strong>
</h3>

<p>Custom attributes to store extra data without cluttering your DOM.</p>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><button data-user-id="123" onclick="handleClick(this)">Click Me</button>
<script>
  function handleClick(button) {
    alert(`User ID: ${button.dataset.userId}`);
  }
</script>

Sebab ia berguna: Bagus untuk menghantar data ke JavaScript tanpa pengekodan keras.

---

8. Bagaimana anda boleh menjadikan elemen HTML boleh diakses?

• Gunakan tag semantik yang betul.
• Tambahkan atribut aria-* untuk sokongan pembaca skrin yang lebih baik.

Contoh:

<button aria-label="Submit Form">Submit</button>

Petua Pro: Uji tapak web anda dengan pembaca skrin untuk kebolehcapaian dunia sebenar. ?

---

9. Apakah perbezaan antara dan tanda nama?

• : Mentakrifkan hubungan antara dokumen dan sumber luaran (seperti CSS).
• : Mencipta hiperpautan.

Contoh:

<!-- Semantic -->
<header>
  <h1>Welcome to My Blog</h1>
</header>
<article>
  <h2>How to Code</h2>
  <p>Start by learning the basics...</p>
</article>

<!-- Non-semantic -->
<div>



<p><strong>Why it matters:</strong> Semantic tags improve accessibility and help search engines understand your content better.</p>


<hr>

<h3>
  
  
  2. <strong>What is the difference between id and class attributes?</strong>
</h3>

<ul>
<li>
id: Unique identifier, used once per page.</li>
<li>
class: Can be reused multiple times for styling or grouping elements.</li>
</ul>

<p><strong>Example:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><!-- Using id -->
<div>



<p><strong>Pro Tip:</strong> Use id for unique elements like headers or footers, and class for reusable components.</p>


<hr>

<h3>
  
  
  3. <strong>What are void elements in HTML?</strong>
</h3>

<p>Void elements are self-closing and don’t have a closing tag.</p>

<p><strong>Examples:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><img src="image.jpg" alt="A beautiful view">
<input type="text" placeholder="Enter your name">
<hr>

Petua Pantas: Jangan kelirukan kedua-duanya—satu untuk sumber, satu lagi untuk navigasi!

---

10. Apakah pengisytiharan doctype?

pengisytiharan mentakrifkan versi HTML yang digunakan dalam dokumen.

Contoh:

   <button onclick="alert('Hello!')">Click Me</button>

Fakta Keseronokan: Penyemak imbas moden lalai kepada HTML5 walaupun jenis dokumen tiada, tetapi sebaiknya masukkannya.

---

Masa Kuiz! ?

Jom uji pengetahuan anda. Jawab ini dalam komen di bawah! ?

1. Teg apa yang akan anda gunakan untuk menentukan menu navigasi?

• a)
• b)
• c)

1. Atribut yang manakah secara unik mengenal pasti elemen dalam DOM?

• a) kelas
• b) id
• c) gaya

1. Betul atau Salah: teg ialah teg HTML semantik.

Letakkan jawapan anda di bawah dan mari berbincang! ?

Atas ialah kandungan terperinci Soalan Temuduga HTML Teratas untuk Pembangun Frontend. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!