Rumah > Artikel > hujung hadapan web > Apa yang perlu dimasukkan ke dalam tajuk html
Apa yang perlu dimasukkan ke dalam tajuk html
- 青灯夜游asal
- 2021-12-14 12:06:173605semak imbas
Pengepala HTML perlu meletakkan: 1. Tag tajuk, tetapkan tajuk dokumen; tajuk laman web Fail gaya; 4. Tag skrip, memperkenalkan fail skrip.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Ini adalah soalan yang saya temui semasa temu duga saya biasanya menggunakan pemalam! Saya menambah tab untuk menjana struktur html5, tetapi saya tidak dapat memikirkan apa lagi yang perlu diletakkan selain css dan js Masalah ini kelihatan sangat mudah, tetapi ia mudah diabaikan oleh kami, jadi saya akan menulis artikel untuk meringkaskannya, Kepala HTML Apakah yang perlu diletakkan di dalam (kepala)?
Tajuk yang diperlukan
tajuk adalah perlu, tetapi jika ia tidak ditambahkan, penyemak imbas akan menambahkannya secara automatik untuk anda.
<head> <title>web</title> </head>
Pengekodan (kaedah pengekodan)
Spesifikasi kaedah pengekodan diletakkan di bahagian hadapan kepala Jika tidak dinyatakan, pelayar juga akan menggunakan pengepala pelayan Penghakiman dibuat, tetapi mungkin tidak tepat.
<head> <meta charset="UTF-8"> <title>web</title> </head>
Penerangan (huraian tapak web)
Saya tidak perasan perkara ini sebelum ini. Enjin carian anda akan melihatnya menjadi sangat berguna dalam SEO. Biasa digunakan
<meta name="description" content="这里是对网站的描述">
Lihat Pandangan
Ini sangat biasa digunakan untuk terminal mudah alih dan meletakkan halaman dalam tetingkap maya - viewport , jika halaman web tidak menggunakan viewport, ia akan kelihatan bahawa apabila kita membuka penyemak imbas mudah alih, ia adalah sangat kecil, dan ia juga boleh dialihkan dan dizumkan ia sangat rendah saiz elemen kawalan dalam kandungan halaman web mereka melalui saiznya, dengan itu mencapai kesan yang sama (pengurangan skala) pada pelayar seperti pada halaman web. , digunakan untuk menyokong tapak web responsif dengan lebih baik.
<meta name="viewport" content="width=device-width, initial-scale=1">
lebar: Kawal saiz port pandangan, biasanya dinyatakan sebagai lebar peranti (unit ialah piksel CSS yang diskalakan kepada 100%), anda juga boleh menentukan nilai tetap, untuk contoh 600.
tinggi: sepadan dengan lebar, menentukan ketinggian.
skala awal: nisbah penskalaan awal, nisbah penskalaan apabila halaman pertama kali dimuatkan.
skala maksimum: Nisbah maksimum yang dibenarkan untuk zum pengguna.
skala minimum: Nisbah minimum yang pengguna dibenarkan mengezum.
boleh berskala pengguna: Sama ada pengguna boleh mengezum secara manual.
Favicon
Ini ialah ikon kecil di sebelah kiri tajuk halaman web Jika tidak dinyatakan, penyemak imbas akan berada dalam direktori akar. Cari
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
css
untuk memautkan fail gaya melalui tag pautan
<link rel="stylesheet" href="css/test.css">
javascript (penekanan)
Pautkan fail skrip melalui tag skrip
<script src="js/test.js"></script>
Di sini kita membincangkan beberapa perkara
1 js Perbezaan antara meletakkan fail di kepala dan meletakkannya di dalam badan
Pertama letakkan di kepala Jika teg skrip tidak menambah atribut async, ia akan menyekat penyemak imbas, iaitu memuat turun fail js Hanya selepas itu langkah seterusnya akan dilakukan.
Apabila penyemak imbas menghuraikan halaman web, ia menghuraikannya baris demi baris, yang bermaksud ia akan berhenti apabila ia menghuraikan fail js di kepala dan struktur Dom kami berada dalam teg badan di bawah kepala, yang bermaksud kita perlu Kandungan badan tidak boleh dilihat sehingga fail js dimuat turun Jika kita memilih untuk meletakkannya di bahagian bawah badan, penyemak imbas akan memuatkan dom terlebih dahulu dan memuat turunnya hanya selepas menghuraikan js di bahagian. bahagian bawah badan. Walau bagaimanapun, kita sudah boleh melihat badan sebelum memuat turun kandungan, pengalaman menyemak imbas akan menjadi lebih baik
Kemudian ada yang bertanya, apa bezanya di kepala dan bawah. badan? Malah, meletakkannya di kepala badan adalah sama dengan meletakkannya di kepala
2 Letakkan fail js di kepala untuk mengelakkan keburukan
Ada dua atribut yang boleh menyelesaikan js Isu dengan muat turun fail segerak: defer and async
defer:
Jika skrip menambah atribut defer, walaupun ia diletakkan di kepala, ia akan dilaksanakan selepas halaman html dihuraikan Itu sama dengan meletakkan skrip ini di bahagian bawah halaman.
<script defer src="test.js"></script>
async:
Untuk async, ini ialah atribut baharu dalam HTML5 Fungsinya adalah untuk memuatkan dan melaksanakan skrip secara tidak segerak tanpa menyekat pemuatan halaman kerana memuatkan skrip. . Setelah dimuatkan ia akan dilaksanakan serta-merta. Dengan async, proses memuatkan dan memaparkan elemen dokumen seterusnya akan berlaku selari (tak segerak) dengan pemuatan dan pelaksanaan script.js. Tetapi kemungkinan besar ia tidak dilaksanakan dalam susunan asal. Jika terdapat kebergantungan sebelum dan selepas js, menggunakan async berkemungkinan menyebabkan ralat.
<script async src="test.js"></script>
3 Di manakah tempat terbaik untuk meletakkan fail js
Sekarang penyemak imbas telah melakukan sedikit pengoptimuman, walaupun anda meletakkan fail js dalam kepala, tidak akan ada masalah besar, jadi kita boleh meletakkan js yang diperlukan di kepala, dan js yang lebih besar di bahagian bawah badan, tetapi cara paling mudah dan terbaik ialah meletakkannya di bahagian bawah badan. W3C meletakkan js di kepala
Tutorial yang disyorkan: "tutorial video html"
Atas ialah kandungan terperinci Apa yang perlu dimasukkan ke dalam tajuk html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!