Spesifikasi pengekodan HTML Bootstrap


Sintaks

  • Gunakan dua ruang dan bukannya tab - ini adalah satu-satunya cara untuk menjamin konsistensi dalam semua kaedah pembentangan persekitaran.

  • Elemen bersarang hendaklah diinden sekali (iaitu dua ruang).

  • Untuk definisi atribut, pastikan anda menggunakan petikan berganda dan jangan sekali-kali petikan tunggal.

  • Jangan tambahkan garis miring mengekor pada elemen tutup sendiri - spesifikasi HTML5 dengan jelas menyatakan bahawa ini adalah pilihan.

  • Jangan tinggalkan teg penutup pilihan (contohnya, </li> atau </body>).

Contoh:

<!DOCTYPE html>
<html>
<head>
<tajuk> Tajuk halaman</tajuk>
</head>
<badan>
<img src="../style/images/company-logo.png" alt="Syarikat">
<h1 class="hello-world">Helo, dunia!</h1>
</body>
</html>

HTML5 doctype

menambah perisytiharan mod standard pada baris pertama setiap halaman HTML untuk memastikan pembentangan yang konsisten dalam setiap penyemak imbas.

Contoh:

<!DOCTYPE html>
<html>
<head>
</head>
< /html>

Atribut bahasa

Mengikut spesifikasi HTML5:

Adalah amat disyorkan untuk menentukan atribut lang untuk elemen akar html untuk menetapkan yang betul bahasa untuk dokumen. Ini akan membantu alat sintesis pertuturan menentukan sebutan yang harus digunakan, membantu alat terjemahan menentukan peraturan yang harus dipatuhi semasa menterjemah, dan sebagainya.

Maklumat lanjut tentang atribut lang boleh didapati dalam spesifikasi ini.

Senarai kod bahasa disenaraikan di sini.

<html lang="zh-CN">
<!-- ... -->
</html>

Mod Keserasian IE

IE menyokong teg <meta> khusus untuk menentukan versi IE yang harus digunakan untuk melukis halaman semasa. Melainkan terdapat keperluan khas yang kuat, sebaiknya tetapkannya kepada mod tepi untuk memberitahu IE supaya menggunakan mod terkini yang disokongnya.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Pengekodan aksara

Dengan mengisytiharkan pengekodan aksara secara eksplisit, ia boleh memastikan penyemak imbas boleh dengan cepat dan mudah menentukan cara kandungan halaman dipaparkan. Kelebihan ini ialah anda boleh mengelak daripada menggunakan entiti aksara dalam HTML, supaya semuanya konsisten dengan pengekodan dokumen (biasanya pengekodan UTF-8).

<head>
<meta charset="UTF-8">
</head>

Perkenalkan fail CSS dan JavaScript

Mengikut spesifikasi HTML5, secara amnya tidak ada keperluan untuk menentukan atribut type apabila memperkenalkan fail CSS dan JavaScript, kerana text/css dan text/javascript ialah nilai lalai masing-masing.

Pautan spesifikasi HTML5

  • Menggunakan pautan

  • Menggunakan gaya

  • Menggunakan skrip

<!-- CSS Luaran -->
<link rel="stylesheet" href="code-guide.css">

<!-- CSS Dalam dokumen -->
<style>
/* ... */
</style>

< ;!-- JavaScript -->
<script src="code-guide.js"></script>

Praktikal adalah raja

Sebagaimana seboleh-bolehnya Ikuti piawaian dan semantik HTML, tetapi jangan korbankan kepraktisan. Cuba gunakan teg yang paling sedikit dan pastikan kerumitan pada tahap minimum pada setiap masa.

Turutan atribut

Atribut HTML hendaklah disusun mengikut susunan yang diberikan di bawah untuk memastikan kebolehbacaan kod.

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

kelas digunakan untuk mengenal pasti komponen yang sangat boleh digunakan semula, jadi ia harus diletakkan pada kedudukan pertama. Id digunakan untuk mengenal pasti komponen tertentu dan harus digunakan dengan berhati-hati (contohnya, penanda halaman dalam halaman), jadi ia berada di tempat kedua.

<a class="..." id="..." data-modal="toggle" href="#">
Contoh pautan
< /a>

<input class="form-control" type="text">

<img src="..." alt="..."> ;

Atribut Boolean

Atribut Boolean boleh diisytiharkan tanpa memberikan nilai. Spesifikasi XHTML memerlukannya untuk diberikan nilai, tetapi spesifikasi HTML5 tidak.

Untuk maklumat lanjut, sila rujuk bahagian WhatWG pada atribut boolean:

Jika atribut Boolean elemen mempunyai nilai, ia adalah benar, jika ia tidak mempunyai nilai, ia adalah palsu .

Jika mesti diberikan nilai, sila rujuk spesifikasi WhatWG:

Jika atribut wujud, nilainya mestilah rentetan kosong atau [...] atribut Seragamkan nama dan jangan tambahkan ruang kosong di hadapan atau di belakang.

Ringkasnya, tidak perlu memberikan nilai.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

< ;select>
<option value="1" selected>1</option>
</select>

Kurangkan bilangan tag

Tulis HTML Semasa pengekodan, cuba elakkan unsur induk yang berlebihan. Banyak kali, ini memerlukan lelaran dan pemfaktoran semula untuk dicapai. Sila lihat kes berikut:

<!-- Tidak begitu hebat -->
<span class="avatar">
<img src=" ..">
</span>

<!-- Lebih baik -->
<img class="avatar" src="...">

Teg yang dijana JavaScript

Teg yang dijana melalui JavaScript menjadikan kandungan sukar dicari, diedit dan mengurangkan prestasi. Elakkan apabila anda boleh.