Panduan Standard Penulisan Kod HTML_HTML/Xhtml_Penghasilan Halaman Web

Konvensyen Am
Tag

Teg penutup sendiri, tidak perlu ditutup (contohnya: input img br hr, dll.);
Teg penutup pilihan (tag penutup), perlu ditutup (contohnya: atau < ; /body>);
Kurangkan bilangan tag sebanyak mungkin;

Kod XML/HTMLSalin kandungan ke papan keratan

1. <img src="images/google.png " alt="Google">
2. <input taip="teks" nama="tajuk">
4. <ul>
5. <li>Gayali> 
6. <li>Panduanli> 
7. ul>
10. <span kelas="avatar" >
11. <img src=".. ."> 
12. jarak>
15. <img kelas="avatar" src="...">

Kelas dan ID

kelas hendaklah dinamakan sempena fungsi atau kandungan, bukan ungkapan
kelas dan id hendaklah dalam huruf kecil, dan apabila terdiri daripada berbilang perkataan, gunakan pemisah sempang
gunakan id unik sebagai cangkuk Javascript , dan elakkan membuat kelas tanpa maklumat gaya;

Kod XML/HTML

Salin kandungan ke papan keratan

2. <div kelas="j- cangkuk kiri contentWrapper">div>
5. <div id="j- cangkuk" kelas="pembungkus kandungan bar sisi">< /div>

Pesanan atribut

Atribut HTML harus muncul dalam susunan tertentu untuk memastikan kebolehbacaan.

id
kelas
nama
data-xxx
src, untuk, taip, href
tajuk, alt
aria-xxx, peranan

Kod XML/HTMLSalin kandungan ke papan keratan

1. <a id="..." kelas="..." modal data="togol" href="###"> a>
3. <input kelas="borang- control" taip="teks">
5. <img src=".. ." alt="...">

Tanda petikan

Gunakan petikan berganda secara seragam untuk takrifan atribut.

Kod XML/HTMLSalin kandungan ke papan keratan

2. <span id='j- cangkuk' kelas=teks>Google span>
5. <span id="j- cangkuk" kelas="teks">Googlejarak>

b Bersarang

a tidak membenarkan sarang div Kekangan ini adalah semantik kekangan bersarang termasuk kekangan bersarang yang ketat.

Kekangan sarang yang ketat tidak dibenarkan dalam semua penyemak imbas; bagi kekangan sarang semantik, kebanyakan penyemak imbas akan mengendalikan toleransi kesalahan, dan pepohon dokumen yang dijana mungkin berbeza antara satu sama lain.

Kekangan Bersarang Semantik

digunakan di bawah

;
; , , , digunakan di bawah ;


Kekangan bersarang yang ketat


elemen Tahap sebaris hanya boleh mengandungi teks atau elemen Tahap sebaris lain , , , dsb. tidak boleh bersarang dalam ; 🎜>

tidak boleh menyusun elemen peringkat blok

,

~

,

,

/
/
1. , /
   , , dsb.

   
   Atribut Boolean
   

   Dalam spesifikasi HTML5, atribut seperti dilumpuhkan, ditandai dan dipilih tidak perlu menetapkan nilai.

   Kod XML/HTML

   Salin kandungan ke papan keratan

   <

   1. input taip="teks" dilumpuhkan>
   <
   3. input taip="kotak semak" nilai="1" ditandai>
   <
   5. pilih> <
   6. pilihan nilai="1" dipilih>1pilihan> pilih>

      Semantik
      HTML tanpa CSS ialah sistem semantik dan bukannya sistem UI.

      Biasanya, setiap tag mempunyai semantik Apa yang dipanggil semantik bermaksud pakaian anda dibahagikan kepada jaket, seluar, skirt, seluar dalam, dsb., masing-masing dengan fungsi dan makna yang sepadan. Jadi anda tidak boleh meletakkan seluar dalam di leher anda. -- Satu jejak

      Selain itu, struktur HTML semantik membantu mesin (enjin carian) memahami Sebaliknya, apabila berbilang orang bekerjasama, mereka dapat memahami dengan cepat niat pembangun.

      Semantik teg biasa
      

      标签	语义
      	段落
      ...	标题
      	无序列表
      	有序列表
      	大段引用
      	一般引用
      	为样式加粗而加粗
      	为强调内容而加粗
      	为样式倾斜而倾斜
      	为强调内容而倾斜
      code	代码标识
      abbr	缩写

      Teg Semantik

      Perenggan

      ... Tajuk

      Senarai tidak tersusun
      Senarai pesanan

      Petikan panjang Petikan umum Tebal untuk gaya tebal Berani untuk menekankan kandungan Condongkan untuk gaya condong Condongkan untuk menekankan kandungan kod Pengenalan kod abbr Singkatan
      Contoh

      Anggap halaman yang anda bina sebagai buku, dan petakan semantik teg kepada fungsi dan maknanya;

      Nama buku:

      Tajuk setiap bab buku:

      
      Tajuk artikel dalam bab:

      
      Sari Kata: < ;h4>

      
      Perenggan bab:

      
      

      KEPALAJenis Dokumen
      

      Tambahkan pengisytiharan mod standard pada baris pertama setiap halaman HTML untuk memastikan prestasi yang konsisten dalam setiap penyemak imbas.

      Kod XML/HTMLSalin kandungan ke papan keratan

      1. >
      2. Atribut bahasa
      5. <html lang="zh- Hans"> 
      8. <html lang="zh- cmn-Hans">
      11. <html lang="zh- cmn-Hant">
      14. <html lang="en" >

      Pengekodan aksara

      Menggunakan pengekodan utf-8 tanpa BOM sebagai format fail;

      
      
      Kod XML/HTML

      Salin kandungan ke papan keratan

      <

      1. html> <
      2. kepala>  <
      3. meta charset="utf- 8">   … 
      kepala> <
      5. badan>  … 
      badan> html>

      Mod Keserasian IE

      Utamakan menggunakan versi terkini IE dan kernel Chrome.

      Kod XML/HTMLSalin kandungan ke papan keratan
      1. <meta http-equiv="X-UA -Serasi" kandungan="IE=edge,chrome=1">

      Pengoptimuman SEO

      Kod XML/HTMLSalin kandungan ke papan keratan
      1. <kepala>
      2.  <meta charset="utf- 8"> 
      " " 🎜>
      3.  <tajuk>Panduan Gaya<> 🎜>tajuk>
      4.  <
      meta
      5. nama="kata kunci" kandungan="kata kunci anda">
      6.  <meta nama="penerangan" kandungan="huraian anda">
      7.  <meta nama="pengarang" kandungan="pengarang,alamat e-mel">
      8. kepala> port pandangan port pandangan: secara amnya merujuk kepada saiz kawasan kandungan tetingkap penyemak imbas, tidak termasuk bar alat, tab, dsb. lebar: lebar penyemak imbas, lebar kawasan yang boleh dilihat pada halaman dalam peranti output; lebar peranti: lebar resolusi peranti, lebar skrin peranti output yang boleh dilihat; untuk peranti mudah alih, tetapkan lebar kawasan yang boleh dilihat dan penskalaan awal.
      Kod XML/HTML
      9. Salin kandungan ke papan keratan
         1. <meta nama="viewport" kandungan="width=device-width, initial-scale=1.0">
      ikon iOS
      gambar ikon-sentuh-epal diproses secara automatik ke sudut bulat dan sorotan;
      apple-touch-icon-precomposed melarang sistem daripada menambah kesan secara automatik dan terus memaparkan reka bentuk asal;
      
      Kod XML/HTML
      Salin kandungan ke papan keratan
      2. <pautan rel="epal- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"> 
      5. <pautan rel="epal- touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" saiz="72x72">
      8. <pautan rel="epal- touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" saiz="114x114">
      11. <pautan rel="epal- touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" saiz="144x144">
      favicon
      Apabila favicon tidak dinyatakan, kebanyakan penyemak imbas akan meminta favicon.ico dalam direktori akar Pelayan Web. Untuk memastikan favicon boleh diakses dan mengelakkan 404s, salah satu daripada dua kaedah berikut mesti diikuti:
      Letakkan fail favicon.ico dalam direktori akar Pelayan Web
      Gunakan pautan untuk menentukan favicon;
      
      
      Kod XML/HTML
      Salin kandungan ke papan keratan
      1. <pautan rel="ikon pintasan" href="path/to/favicon.ico">
      Templat HEAD
      Kod XML/HTMLSalin kandungan ke papan keratan
      1. >  
      2. <html lang="zh- cmn-Hans">  
      3. <kepala>  
      4.     <meta charset="utf- 8">  
      5.     <meta http-equiv=" X-UA-Serasi" kandungan="IE=edge,chrome=1">  
      6.     <tajuk>Panduan Gayatajuk>  
      7.     <meta nama="penerangan"  kandungan="不超过150个字符"> > 
      8.     <meta nama="kata kunci"  kandungan="">  
      9.     <meta nama="pengarang"  kandungan="nama, email@gmail.com">  
      10.   
      11.       
      12.     <meta nama="viewport"  kandungan="width=device-width, initial-scale=1.0">   
      13.   
      14.       
      15.     <pautan rel="epal- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">  
      16.   
      17.  <pautan rel="ganti" taip="aplikasi/rss xml" tajuk="RSS" href="/rss.xml" /> 
      18.  <pautan rel="ikon pintasan " href="path/to/favicon.ico">
      19. kepala>
      Komen HTML
      Komen Modul
      
      Kod XML/HTMLSalin kandungan ke papan keratan
      2. <div kelas="artikel- senarai"> 
      3. ...
      4. div>
      5. Sekat Ulasan
      6. 

         Alat AI Hot

         

         Undresser.AI Undress

         Apl berkuasa AI untuk mencipta foto bogel yang realistik

         

         AI Clothes Remover

         Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

         

         Undress AI Tool

         Gambar buka pakaian secara percuma

         

         Clothoff.io

         Penyingkiran pakaian AI

         

         AI Hentai Generator

         Menjana ai hentai secara percuma.

         Tunjukkan Lagi
         

         Artikel Panas

         R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

         4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

         R.E.P.O. Tetapan grafik terbaik

         4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

         Assassin's Creed Shadows: Penyelesaian Riddle Seashell

         2 minggu yang lalu By DDD

         R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

         4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

         WWE 2K25: Cara Membuka Segala -galanya Di Myrise

         1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

         Tunjukkan Lagi
         

         Alat panas

         

         Notepad++7.3.1

         Editor kod yang mudah digunakan dan percuma

         

         SublimeText3 versi Cina

         Versi Cina, sangat mudah digunakan

         

         Hantar Studio 13.0.1

         Persekitaran pembangunan bersepadu PHP yang berkuasa

         

         Dreamweaver CS6

         Alat pembangunan web visual

         

         SublimeText3 versi Mac

         Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

         Tunjukkan Lagi
         

         Topik panas

         Di manakah pintu masuk log masuk untuk e-mel gmail?

         7513

         15

         Tutorial CakePHP

         1378

         52

         Apakah format nama akaun stim

         79

         11

         kunci pengaktifan win11 kekal

         53

         19

         Sambungan NYT menunjukkan dan jawapan

         19

         64

         Tunjukkan Lagi
      Related knowledge
      Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM
      Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
      HTML jidar-kiri Sep 04, 2024 pm 04:48 PM
      Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
      Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM
      Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
      Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM
      Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
      Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM
      Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
      Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM
      Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
      Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM
      Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.
      Butang onclick HTML Sep 04, 2024 pm 04:49 PM
      Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
      See all articles