Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Apa yang perlu dimasukkan ke dalam tajuk html

Apa yang perlu dimasukkan ke dalam tajuk html

青灯夜游
Lepaskan: 2021-12-14 12:06:42
asal
3633 orang telah melayarinya

Pengepala HTML perlu meletakkan: 1. Tag tajuk, tetapkan tajuk dokumen; tajuk laman web Fail gaya; 4. Tag skrip, memperkenalkan fail skrip.

Apa yang perlu dimasukkan ke dalam tajuk html

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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="这里是对网站的描述">
Salin selepas log masuk

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">
Salin selepas log masuk
  • 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" />
Salin selepas log masuk

css

untuk memautkan fail gaya melalui tag pautan

<link rel="stylesheet" href="css/test.css">
Salin selepas log masuk

javascript (penekanan)

Pautkan fail skrip melalui tag skrip

 <script src="js/test.js"></script>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan