masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Piawaian pengekodan HTML5

Konvensyen pengekodan HTML

Ramai pembangun web mengetahui serba sedikit tentang konvensyen pengekodan HTML.

Antara tahun 2000 dan 2010, banyak pembangun web telah menukar daripada HTML kepada XHTML.

Menggunakan pembangun XHTML telah membangunkan piawaian penulisan HTML yang lebih baik secara beransur-ansur.

Untuk HTML5, kita harus membentuk piawaian kod yang lebih baik.

Gunakan jenis dokumen yang betul

Pengisytiharan jenis dokumen berada pada baris pertama dokumen HTML:

<!DOCTYPE html>

Jika anda ingin menggunakan huruf kecil seperti tag lain, anda boleh menggunakan yang berikut kod:

<!doctype html>

Gunakan elemen huruf kecil nama

Nama elemen HTML5 boleh menggunakan huruf besar dan huruf kecil.

Disyorkan untuk menggunakan huruf kecil:

  • Gaya campuran huruf besar dan huruf kecil sangat teruk.

  • Pembangun biasanya menggunakan huruf kecil (serupa dengan XHTML).

  • Gaya huruf kecil kelihatan lebih menyegarkan.

  • Huruf kecil mudah ditulis.

Tidak disyorkan:

<BAHAGIAN> ;p>Ini adalah perenggan. </p>
</SEKSYEN>

Sangat teruk:

<Bahagian> <p>Ini ialah perenggan. </p>
</SEKSYEN>

Disyorkan:

<bahagian>
<p>Ini ialah perenggan. </p>
</section>

Tutup semua elemen HTML

Dalam HTML5, anda tidak perlu menutup semua elemen (seperti <p> elemen), tetapi kami mengesyorkan menambah tag penutup pada setiap elemen.

Tidak disyorkan:

<bahagian>
<p>Ini ialah perenggan.
<p>Ini ialah perenggan.
</section>

Disyorkan:

<bahagian>
<p>Ini ialah perenggan. </p>
<p>Ini ialah perenggan. </p>
</section>

Tutup elemen HTML kosong

Dalam HTML5, elemen HTML kosong tidak perlu ditutup:

Kita boleh menulis:

<meta charset="utf-8">

Anda juga boleh menulis:

<meta charset="utf-8" />

Slash (/) diperlukan dalam XHTML dan XML.

Menggunakan gaya ini adalah bagus jika anda mengharapkan perisian XML menggunakan halaman anda.

Gunakan nama atribut huruf kecil

Nama atribut HTML5 membenarkan penggunaan huruf besar dan huruf kecil.

Kami mengesyorkan menggunakan huruf kecil untuk nama atribut:

  • Adalah satu tabiat yang sangat buruk untuk menggunakan huruf besar pada masa yang sama.

  • Pembangun biasanya menggunakan huruf kecil (serupa dengan XHTML).

  • Gaya huruf kecil kelihatan lebih menyegarkan.

  • Huruf kecil mudah ditulis.

Tidak disyorkan:

<div CLASS="menu">

Disyorkan:

<div class="menu">

Nilai atribut

Nilai atribut HTML5 boleh digunakan tanpa tanda petikan.

Kami mengesyorkan menggunakan tanda petikan untuk nilai atribut:

  • Jika nilai atribut mengandungi ruang, anda perlu menggunakan tanda petikan.

  • Gaya pencampuran tidak disyorkan, adalah disyorkan untuk menyatukan gaya.

  • Nilai atribut mudah dibaca menggunakan petikan.

Nilai atribut contoh berikut mengandungi ruang dan tidak dipetik, jadi ia tidak akan berfungsi:

<table class=table berjalur>

Yang berikut menggunakan petikan berganda, yang betul:

<table class="table striped">

Atribut imej

Imej biasanya menggunakan atribut alt. Apabila gambar tidak dapat dipaparkan, ia boleh menggantikan paparan gambar.

<img src="html5.gif" alt="HTML5" >

Tentukan saiz imej semasa memuatkan Anda boleh menempah ruang yang ditetapkan untuk mengurangkan kelipan.

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

Ruang dan tanda sama

Anda boleh menggunakan ruang sebelum dan selepas tanda sama.

<link rel = "stylesheet" href = "styles.css">

Tetapi kami mengesyorkan menggunakan lebih sedikit ruang:

<link rel="stylesheet" href="styles.css">

Elakkan satu baris Kod terlalu panjang

Menggunakan editor HTML, adalah menyusahkan untuk menatal kod ke kiri dan kanan.

Kekalkan setiap baris kod kepada kurang daripada 80 aksara.

Garis kosong dan lekukan

Jangan tambah baris kosong tanpa sebab.

Tambahkan baris kosong pada setiap blok fungsi logik untuk menjadikannya lebih mudah dibaca.

Gunakan dua ruang untuk lekukan, TAB tidak disyorkan.

Jangan gunakan garis kosong atau lekukan yang tidak perlu di antara kod yang lebih pendek. < ;h1>php中文网</h1>

<h2>HTML</h2> Ia adalah mimpi. Laman web PHP Cina, apa yang anda pelajari bukan sahaja teknologi, tetapi juga impian. php中文网, apa yang anda pelajari bukan sahaja teknologi, tetapi juga impian.

php中文网, anda belajar bukan sahaja teknologi, tetapi juga impian.
</p>

</body>





Disyorkan:


<body>

<h1>php tapak web Cina</h1>

<h2></h2>
< ; p>php Laman web Cina, apa yang anda pelajari bukan sahaja teknologi, tetapi juga impian.
Laman web Cina php, apa yang anda pelajari bukan sahaja teknologi, tetapi juga impian.
Laman web Cina php, apa yang anda pelajari bukan sahaja teknologi, tetapi juga impian.
Laman web Cina php, apa yang anda pelajari bukan sahaja teknologi, tetapi juga impian. </p>

</body>

Contoh borang:

<jadual>
<tr>
<th>Nama</th>
> <tr>
  <td>A</t; >  <td>Penerangan tentang A</td>
;td>B</td>
  <td>Penerangan tentang B</td>
<<> /table>





Contoh senarai:

<ol> < ;li>London</li> Paris</li>

<li>Tokyo</li>
</ol>





Abaikan<html> ; dan <body>?

Dalam HTML5 standard, teg <html> . Dokumentasi HTML5 berikut adalah betul:

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
</head>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>

Jalankan program untuk mencubanya

Mengabaikan teg <html> dan <body> disyorkan. Elemen

<html> ialah elemen akar dokumen dan digunakan untuk menerangkan bahasa halaman:

<!DOCTYPE html> ;

< html lang="zh">

Bahasa yang diisytiharkan adalah untuk kemudahan pembaca skrin dan enjin carian.
Mengabaikan <html> atau <body> akan ranap dalam perisian DOM dan XML.

Mengabaikan <body> akan menyebabkan ralat dalam penyemak imbas lama (IE9).

Tinggalkan <head>?

Dalam HTML5 standard, teg <head>

Secara lalai, penyemak imbas akan menambah kandungan sebelum <body> pada elemen <head> 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<body>
<p id="Demo">段落 1。</p>
<p id="demo">段落 2。</p>
<script>
    // 只有段落 2 会被替换
    document.getElementById("demo").innerHTML = "HELLO。";
</script>
</body>
</html>

Jalankan program dan mencubanya

Petua: Mengabaikan tag kepala sekarang masih tidak disyorkan penggunaan.

Data sumber

Elemen <title> dalam HTML5 diperlukan nama tajuk halaman. :

<title>php tapak web Cina</title>

Tajuk dan bahasa boleh membolehkan enjin carian memahami anda dengan cepat Tema halaman:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset=" UTF -8">
<title>php tapak web Cina</title>
</head>

HTML Komen

Ulasan boleh ditulis dalam <!-- dan -->:

<!-- Ini ulasan-->

Ulasan yang lebih panjang boleh ditulis dalam baris berasingan antara <!-- dan-->:

<!--
Ini adalah ulasan yang panjang. Ini adalah ulasan yang lebih panjang. Ini adalah ulasan yang lebih panjang.
Ini adalah ulasan yang lebih panjang Ini adalah ulasan yang lebih panjang. Ini adalah ulasan yang lebih panjang.
-->

Watak pertama komen panjang diindenkan dengan dua ruang untuk memudahkan pembacaan.

Helaian gaya

Helaian gaya menggunakan format sintaks ringkas (atribut jenis tidak diperlukan):

<link rel="stylesheet" href="styles.css">

Peraturan ringkas boleh ditulis dalam satu baris:

p.ke dalam {font-family: Verdana; font-size: 16em;}

Peraturan panjang boleh ditulis dalam berbilang baris:

badan {
warna latar belakang: kelabu muda;
keluarga fon: "Arial Black", Helvetica, sans-serif;
saiz fon: 16em;
warna: hitam;
}

  • Letakkan pendakap kerinting pembukaan pada baris yang sama dengan pemilih.

  • Tambahkan ruang antara pendakap kerinting kiri dan pemilih.

  • Gunakan dua ruang untuk lekukan.

  • Tambahkan ruang antara titik bertindih dan nilai atribut.

  • Gunakan ruang selepas koma dan simbol.

  • Gunakan simbol di hujung setiap atribut dan nilai.

  • Gunakan petikan hanya jika nilai atribut mengandungi ruang.

  • Pendakap kerinting penutup diletakkan pada baris baharu.

  • Maksimum 80 aksara setiap baris.



Peraturan biasa ialah menambah ruang selepas koma dan koma bernoktah.

Muat JavaScript dalam HTML

Gunakan sintaks ringkas untuk memuatkan fail skrip luaran (atribut jenis tidak diperlukan):

<script src="myscript.js"> 🎜>

Menggunakan JavaScript untuk mengakses elemen HTML
HTML yang tidak diformatkan boleh membawa kepada ralat Pelaksanaan JavaScript.

Cuba gunakan peraturan penamaan yang sama untuk JavaScript dalam HTML.

Akses spesifikasi kod JavaScript.


Gunakan nama fail huruf kecil Kebanyakan pelayan web (Apache, Unix) adalah sensitif huruf besar/kecil: london.jpg tidak boleh diakses melalui London.jpg.

Pelayan web lain (Microsoft, IIS) tidak sensitif huruf besar-besaran: london.jpg boleh diakses sebagai London.jpg atau london.jpg.

Anda mesti mengekalkan gaya yang konsisten dan kami mengesyorkan menggunakan nama fail huruf kecil secara konsisten.

Sambungan fail

Akhiran fail HTML boleh menjadi .html (atau .htm).

Akhiran fail CSS ialah .css.

Akhiran fail JavaScript ialah .js .

Perbezaan antara .htm dan .html

Pada asasnya tiada perbezaan antara fail sambungan .htm dan .html. Kedua-dua pelayar dan pelayan web menganggapnya sebagai fail HTML.

Perbezaannya ialah:

.htm telah digunakan dalam sistem DOS awal, dan sistem kini hanya mempunyai tiga aksara.

Tiada sekatan khas pada akhiran dalam sistem Unix, secara amnya .html digunakan.

Perbezaan teknikal

Jika URL tidak dinyatakan nama fail (seperti http://www.php.cn/css/), pelayan akan mengembalikan nama fail lalai. Biasanya nama fail lalai ialah index.html, index.htm, default.html dan default.htm.

Jika pelayan dikonfigurasikan dengan hanya "index.html" sebagai fail lalai, anda mesti menamakan fail "index.html", bukan "index.htm".

Namun, biasanya pelayan boleh menetapkan berbilang fail lalai, bolehkah anda menetapkan fail lalai mengikut keperluan anda.

Apa pun, akhiran lengkap HTML ialah ".html".



Meneruskan pembelajaran
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>php.cn</title> </head> <body> <h3>HTML5 代码规范</h3> <p>知道并按照这些代码规范来编写程序，对我们是有很大帮助的</p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492462 permainan