Piawaian pengek...LOGIN

Piawaian pengekodan HTML5

Gunakan jenis dokumen yang betul

Pengisytiharan jenis dokumen terletak pada baris pertama dokumen HTML:

<!DOCTYPE html>

Jika anda mahu sama seperti teg lain Untuk menggunakan huruf kecil, anda boleh menggunakan kod berikut:

<!doctype html>


Gunakan nama elemen huruf kecil

Nama elemen HTML5 boleh digunakan dengan huruf besar dan huruf kecil.

Gunakan huruf kecil disyorkan:

Gaya campuran huruf besar dan huruf kecil adalah sangat teruk.

Pembangun biasanya menggunakan huruf kecil (serupa dengan XHTML).

Gaya huruf kecil kelihatan lebih menyegarkan.

Huruf kecil mudah ditulis.

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


Tutup semua elemen HTML

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

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


Tutup elemen HTML kosong

Dalam HTML5, elemen HTML kosong tidak semestinya Untuk menutup:

kita boleh menulis:

<meta charset="utf-8">

kita 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:

Menggunakan huruf besar dan huruf kecil pada masa yang sama adalah tabiat yang sangat buruk.

Pembangun biasanya menggunakan huruf kecil (serupa dengan XHTML).

Gaya huruf kecil kelihatan lebih menyegarkan.

Huruf kecil mudah ditulis.

<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.

Gunakan tanda petikan untuk nilai atribut supaya lebih mudah dibaca.

<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" style="width:128px;height:128px">

Tentukan saiz imej dan anda boleh memuatkan ia Simpan ruang yang ditetapkan untuk mengurangkan kelipan.

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


ruang Anda boleh menggunakan ruang sebelum dan selepas tanda sama dengan

.

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

Tetapi kami mengesyorkan menggunakan kurang ruang:

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


Elakkan baris kod yang terlalu panjang

Apabila 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.

<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:

<th>Nama</th>

<th>Penerangan</th>
</tr>
< ;tr>
                                                                       ;B</td>
< td>Penerangan tentang B</td>
</tr>
</table>

Senarai contoh:

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

</ol>

>
><🎜


Abaikan <html> dan <body>?

Dalam HTML5 standard, < teg html> .

Dokumentasi HTML5 berikut adalah betul:

<!DOCTYPE html>

<head>

<tajuk>Tajuk halaman</tajuk>
</kepala>
<h1>Ini ialah tajuk</h1>
<p>Ini adalah perenggan . </p>

Mengabaikan teg <html>



Abaikan<head>?

Dalam HTML5 standard, The < teg ;head> boleh diabaikan.

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

Mengabaikan tag kepala tidak disyorkan.



Metadata

Elemen <title> Ya, nama tajuk menerangkan tema halaman:

<title>php中文网</title>

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

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


komen HTML

ulasan OK Ditulis dalam <!-- dan -->:

<!-- Ini ulasan -->

Ulasan yang lebih panjang boleh ditulis dalam <! -- dan --> Cawangan tengah menulis:

<!--
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 ulasan 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.into {font-family: Verdana; saiz fon: 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.

Kurung kurawal penutup diletakkan pada barisan 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 (taip atribut tidak diperlukan):

<script src="myscript.js">


Mengakses elemen HTML menggunakan JavaScript

HTML yang tidak diformatkan dengan baik boleh menyebabkan ralat pelaksanaan JavaScript.

Dua pernyataan JavaScript berikut akan mengeluarkan hasil yang berbeza:

Instance

var obj = getElementById("Demo")

var obj = getElementById(" demo")


Cubalah»

Cuba gunakan peraturan penamaan yang sama untuk JavaScript dalam HTML.


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 r . 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 menyatakan 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".



<!DOCTYPE html> <!-- HTML5 doctype 标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现--> <html lang="zh-CN"> <!-- 语言属性 有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等 --> <head> <!-- 字符编码 通过明确声明字符编码,能够确保浏览器快速并容易的判断页面内容的渲染方式 --> <meta charset="UTF-8"> <!-- IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。 除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式 --> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Page title</title> <!-- External CSS 根据 HTML5 规范,在引入 CSS 文件时一般不需要指定 type 属性,因为 text/css 是它的默认值 --> <link rel="stylesheet" href="code-guide.css"> <!-- In-document CSS --> <style> /* ... */ </style> <!-- JavaScript 根据 HTML5 规范,在引入 JavaScript 文件时一般不需要指定 type 属性,因为 text/javascript 是它的默认值 --> <script src="code-guide.js"></script> </head> <body> <!-- 属性顺序 HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。 class id, name data-* src, for, type, href title, alt aria-*, role class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位 --> <a class="..." id="..." data-modal="toggle" href="#"> Example link </a> <br><br> <input class="form-control" type="text"> <br><br> <img src="..." alt="..."> <br><br> <!-- 布尔(boolean)型属性 不用赋值 元素的布尔型属性如果有值,就是 true,如果没有值,就是 false --> <select> <option value="1" selected>1</option> </select> <br><br> <!-- JavaScript 放在 body 底部加载可增快页面渲染速度 --> <script src="code-guide.js"></script> </body> </html>
babperisian kursus