Penjelasan terperinci tentang markup dan struktur dokumen HTML programming_HTML/Xhtml_Web page production

Tujuan menanda kandungan dengan HTML adalah untuk memberikan semantik halaman web. Dengan kata lain, anda perlu memberikan kandungan halaman web anda beberapa makna yang boleh difahami oleh ejen pengguna.

HTML menentukan set teg untuk menandakan kandungan secara berbeza. Setiap teg ialah perihalan tentang kandungannya. Penerangan HTML yang paling biasa digunakan ialah tajuk, perenggan, pautan dan imej. Pada masa ini, HTML mempunyai sejumlah 114 tag, tetapi menurut prinsip 80/20, menggunakan kira-kira 25 daripadanya boleh memenuhi 80% keperluan markup.

Versi terkini HTML, HTML5, menetapkan kumpulan baharu teg berstruktur, yang digunakan untuk mengumpulkan teg kandungan berkaitan untuk menyeragamkan struktur keseluruhan halaman web dengan lebih baik. Teg baharu ini termasuk

,

(navigasi), ,

, dan

.

1. Penutupan label

Untuk setiap elemen yang mengandungi kandungan (seperti tajuk, perenggan dan imej), terdapat dua cara berbeza untuk menandakannya, bergantung pada sama ada kandungan yang terkandung di dalamnya ialah teks, satu menggunakan teg penutup dan satu lagi. ialah Gunakan tag bukan penutup.

1.1 Gunakan tag penutup untuk teks

Contoh:

Helo, CSS!

1.2 Gunakan teg tutup sendiri untuk kandungan yang dirujuk

Contoh: Petua:

Untuk teg menutup sendiri, keperluan XHTML mesti ditulis seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan

1. img src="images/dog.jpg " alt="Ini anjing saya." />

Dalam HTML5, anda boleh meninggalkan garis miring terakhir dan tulis:

Kod XML/HTMLSalin kandungan ke papan keratan

1. img src="images/dog.jpg " alt="Ini anjing saya." >

2. Atribut

Petua: Pembaca skrin yang digunakan oleh pengguna cacat penglihatan akan membaca kandungan atribut alt dengan kuat, jadi pastikan anda menambah kandungan pada atribut alt

tag yang boleh difahami oleh orang sepintas lalu (atau sepintas lalu).

3. Tajuk dan perenggan4
HTML menentukan bukan sahaja teg kandungan asas seperti tajuk, imej dan perenggan, tetapi juga teg untuk mencipta komponen antara muka pengguna yang kompleks seperti senarai, jadual dan borang Ini adalah apa yang dipanggil elemen komposit, iaitu, ia Ia terdiri daripada berbilang tag .

5. Teg bersarang

Ringkasnya, ia adalah untuk meletakkan satu teg di dalam teg lain. 6.Templat HTML5

Kod XML/HTML

Salin kandungan ke papan keratan

1. html>  
2. html>  
3.  kepala>  
4.  meta charset="utf- 8" />  
5.  tajuk>Templat HTML tajuk>  
6.  kepala>  
7.  badan>  
8.    
9.  badan>  
10. html>  

7.块级元素和行内元素

    几乎所有HTML 元素的 paparan 属性要么为 blok，要么为 sebaris。最明显的一个例外是 table 元素的元素，要么为 inline。最明显的一个例外是 table 元幷是 。 🎜>

    块级元素（比如标题和段落）会相互堆叠在一起沿页面向下排列，慃下排列，毀中行。而行内元素（比如链接和图片）则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。

    无论你想了解哪个 HTML 元素，第一个要问的问题都应该是：它是块级元子素，耶和道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定。有两点要知道的：

    块级元素盒子会扩展到与父元素同宽。

    行内元素盒子会 收缩包裹 其内容，并且会尽可能包紧。

7.嵌套的元素

在标记中嵌套的是HTML标签，而在屏幕上嵌套的则是一个个的盒子。8.>

8.>
文档对象模型（简称 DOM）是从浏览器的视角来观察页面中的元素以及是从浏览器的视角来观察页面中的元素以及每素以及每个的，出这些元素的一个家族树。通过DOM，可以确定元素之间的相互HTML HTML DOM。