cari

Rumah  >  Artikel  >  hujung hadapan web  >  Pengenalan terperinci kepada teg pengepala kepala HTML_HTML/Xhtml_Pengeluaran halaman web

Pengenalan terperinci kepada teg pengepala kepala HTML_HTML/Xhtml_Pengeluaran halaman web

WBOY
WBOYasal
2016-05-16 16:36:352263semak imbas

Terdapat banyak teg dan elemen dalam bahagian kepala HTML, yang melibatkan pemaparan penyemak imbas halaman web, SEO, dsb. Setiap teras penyemak imbas dan setiap pengeluar penyemak imbas domestik mempunyai elemen teg mereka sendiri, yang menghasilkan banyak perbezaan. Dalam era Internet mudah alih, struktur kepala dan elemen meta terminal mudah alih adalah lebih penting. Memahami maksud setiap teg dan menulis teg kepala yang memenuhi keperluan anda sendiri ialah tujuan artikel ini. Artikel ini adalah berdasarkan artikel Yishi dan menyediakan ringkasan yang diperluaskan untuk memperkenalkan maksud dan senario penggunaan setiap teg dan elemen dalam kepala yang biasa digunakan.

DOCTYPE

DOCTYPE (Jenis Dokumen), pengisytiharan ini terletak di kedudukan paling hadapan dalam dokumen, sebelum teg html ini memberitahu pelayar jenis apa HTML yang digunakan oleh dokumen Atau spesifikasi XHTML.

Pengisytiharan DTD (Definisi Jenis Dokumen) bermula dengan , tidak sensitif huruf besar dan tidak mempunyai kandungan di hadapan Jika terdapat kandungan lain (kecuali ruang), penyemak imbas akan membuka pelik mod di bawah IE ( mod quirks) menjadikan halaman web. DTD awam, format nama adalah pendaftaran // organisasi // tag jenis // bahasa, pendaftaran merujuk kepada sama ada organisasi itu didaftarkan oleh Pertubuhan Standardisasi Antarabangsa (ISO), menunjukkan ya, - menunjukkan tidak. Organisasi ialah nama organisasi, seperti: W3C. Jenisnya biasanya DTD. Teg menentukan perihalan teks awam, iaitu nama deskriptif unik untuk teks awam yang dirujuk, yang boleh diikuti dengan nombor versi. Bahasa terakhir ialah pengecam bahasa ISO 639 bagi bahasa DTD, seperti: EN untuk bahasa Inggeris, ZH untuk bahasa Cina. XHTML 1.0 boleh mengisytiharkan tiga jenis DTD. Mewakili versi ketat, versi peralihan dan dokumen HTML berasaskan bingkai masing-masing.

●HTML 4.01 ketat

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >
●HTML 4.01 Peralihan

Kod XML/HTMLSalin kandungan ke papan keratan
  1. > 
●HTML 4.01 Frameset

Kod XML/HTMLSalin kandungan ke papan keratan
  1. > 
●HTML5 terkini memperkenalkan tulisan yang lebih ringkas, yang serasi ke hadapan dan ke belakang serta disyorkan untuk digunakan.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. >

Doctype mempunyai dua tujuan utama dalam HTML.

●Sahkan kesahihan dokumen.

Ia memberitahu ejen pengguna dan pengesah apa DTD dokumen ini ditulis mengikut. Tindakan ini adalah pasif. Setiap kali halaman dimuatkan, penyemak imbas tidak memuat turun DTD dan menyemak kesahihan ia hanya didayakan apabila halaman disahkan secara manual.

●Tentukan mod pemaparan penyemak imbas

Untuk operasi sebenar, maklumkan penyemak imbas algoritma penghuraian yang hendak digunakan semasa membaca dokumen. Jika ia tidak ditulis, penyemak imbas akan menghuraikan kod mengikut peraturannya sendiri, yang boleh menjejaskan reka letak html secara serius. Pelayar mempunyai tiga cara untuk menghuraikan dokumen HTML.

●Mod bukan pelik (standard)
●Mod pelik
●Mod separa pelik (hampir standard) Mengenai mod dokumen pelayar IE, mod penyemak imbas, mod ketat, mod aneh, tag DOCTYPE, anda boleh mengetahui lebih lanjut Mod membaca? standard! kandungan.

set aksara

Isytiharkan pengekodan aksara yang digunakan oleh dokumen,

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta charset="utf-8"> 

Sebelum html5, halaman web akan berbunyi seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta http-equiv="Jenis Kandungan " kandungan="text/html; charset=utf-8">

Kedua-dua ini bersamaan, sila baca butiran di bawah: vs , jadi ia disyorkan untuk menggunakan yang lebih pendek yang lebih mudah diingati.

atribut lang

Bahasa Cina Ringkas

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <html lang="zh-cmn-Hans "> 

Cina Tradisional

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <html lang="zh-cmn-Hant "> 

Mengapa lang="zh-cmn-Hans" bukannya lang="zh-CN" yang biasa kita tulis? lang="zh-cn".
Utamakan menggunakan versi terkini IE dan Chrome

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta http-equiv="X-UA -Serasi" kandungan="IE=edge,chrome=1" />
　360 Menggunakan Bingkai Google Chrome

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="penyampai" kandungan="webkit">
　360 penyemak imbas akan segera bertukar kepada teras kelajuan yang sepadan selepas membaca teg ini. Juga, hanya untuk berada di pihak yang selamat, sertai

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta http-equiv="X-UA -Serasi" kandungan="IE=Edge,chrome=1">

Kesan yang boleh dicapai dengan menulis cara ini ialah jika Google Chrome Frame dipasang, GCF akan digunakan untuk memaparkan halaman Jika GCF tidak dipasang, versi tertinggi kernel IE akan digunakan untuk pemaparan.

Pautan berkaitan: Dokumentasi Teg Meta Kawalan Kernel Penyemak Imbas

Baidu melarang transkod

Apabila anda membuka halaman web melalui telefon mudah alih Baidu, Baidu boleh mengubah suai Transkod halaman web anda, tanggalkan pakaian anda, dan letakkan iklan plaster kulit anjing pada badan anda Untuk tujuan ini, anda boleh menambah

di kepala
Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta http-equiv="Cache-Control " kandungan="tiada aplikasi tapak" />

Pautan berkaitan: Pernyataan transcoding SiteApp


Bahagian pengoptimuman SEO

Tajuk halaman )

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <tajuk>tajuk andatajuk >

Kata kunci halaman

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="kata kunci" kandungan="kata kunci anda">


Huraian kandungan huraian halaman

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="penerangan" kandungan="huraian anda">

Tentukan pengarang web

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="pengarang" kandungan="pengarang,alamat e-mel">

Tentukan kaedah pengindeksan enjin carian web ialah satu set nilai yang dipisahkan dengan koma bahasa Inggeris "," Ia biasanya mempunyai nilai berikut: tiada, noindex, nofollow, semua, indeks dan ikut.

Kod XML/HTMLSalin kandungan ke papan keratan

  1. <meta nama="robot" kandungan="indeks, ikut">

Pautan berkaitan: WEB1038 - Teg mengandungi nilai tidak sah

port pandangan

　Viewport boleh menjadikan paparan reka letak lebih baik pada penyemak imbas mudah alih. Selalunya tulis

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="viewport" kandungan="width=device-width, initial-scale=1.0">

width=device-width akan menyebabkan sempadan hitam muncul apabila iPhone 5 ditambahkan pada skrin utama dan dibuka dalam mod skrin penuh WebApp (http://bigc.at/ios-webapp-viewport- meta.orz )

parameter kandungan:

lebar port pandangan lebar (nilai angka/lebar peranti)
tinggi port pandangan ketinggian (nilai angka/tinggi peranti)
nisbah skala awal skala awal
nisbah skala maksimum skala maksimum
minimum -skala Nisbah zum minimum
boleh berskala pengguna Sama ada untuk membenarkan penskalaan pengguna (ya/tidak)
minimal-ui Atribut baharu dalam iOS 7.1 beta 2 boleh meminimumkan bar status atas dan bawah apabila halaman dimuatkan. Ini ialah nilai Boolean dan boleh ditulis terus seperti ini:

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="viewport" kandungan="width=device-width, initial-scale=1, minimal-ui">

Dan jika tapak web anda tidak responsif, sila jangan gunakan skala awal atau lumpuhkan penskalaan.

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="viewport" kandungan="width=device-width,user-scalable=yes">

Pautan berkaitan: Viewport dengan reka bentuk tidak responsif

Untuk menyesuaikan diri dengan iPhone 6 dan iPhone 6plus, anda perlu menulis:

XML/HTML KodSalin kandungan ke papan keratan

  1. <meta nama="viewport" kandungan="lebar=375">
  2. <meta nama="viewport" kandungan="width=414">

Lebar port pandangan bagi kebanyakan peranti Android 4.7~5-inci ditetapkan kepada 360px, tetapi 375px pada iPhone 6. Lebar port pandangan bagi kebanyakan peranti Android 5.5-inci (seperti Samsung Note) ialah 400, dan ia adalah 414px pada iPhone 6 plus .

peranti ios

Tajuk ditambahkan pada skrin utama (baharu dalam iOS 6)

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="apple-mobile-web -app-title" kandungan="tajuk">


Sama ada hendak mendayakan mod skrin penuh WebApp

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="apple-mobile-web -app-capable" kandungan="ya" />

Tetapkan warna latar belakang bar status

Kod XML/HTMLSalin kandungan ke papan keratan
  1. <meta nama="apple-mobile-web -app-status-bar-style" kandungan="hitam-lut sinar" /> 

ikon iOS

　parameter rel: apple-touch-icon Imej diproses secara automatik ke sudut bulat dan sorotan. apple-touch-icon-precomposed melarang sistem daripada menambah kesan secara automatik dan memaparkan reka bentuk asal secara langsung. iPhone dan iTouch, lalai 57x57 piksel, diperlukan


Salin kod
Kodnya adalah seperti berikut:


iPad, 72x72 piksel, pilihan tetapi disyorkan


Salin kod
Kodnya adalah seperti berikut:


Retina iPhone dan Retina iTouch, 114x114 piksel, pilihan tetapi disyorkan


Salin kod
Kodnya adalah seperti berikut:


　Saiz ikon iOS ialah 180×180 pada iPhone 6 plus dan 120x120 pada iPhone 6. Untuk menyesuaikan diri dengan iPhone 6 plus, anda perlu menambah perenggan ini


Salin kod
Kodnya adalah seperti berikut:


skrin percikan iOS

Dokumentasi rasmi: https://developer.apple.com/library/ios/qa/qa1686/_index.html
Artikel rujukan: http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

Skrin permulaan iPad tidak termasuk kawasan bar status.

Skrin potret iPad 768 x 1004 (peleraian standard)


Salin kod
Kod tersebut adalah seperti berikut:


Potret iPad 1536x2008 (Retina)


Salin kod
Kod tersebut adalah seperti berikut:


Landskap iPad 1024x748 (peleraian standard)


Salin kod
Kod tersebut adalah seperti berikut:


Landskap iPad 2048x1496 (Retina)


Salin kod
Kod tersebut adalah seperti berikut:


Skrin permulaan iPhone dan iPod touch termasuk kawasan bar status.

　Skrin potret iPhone/iPod Touch 320x480 (resolusi standard)

Salin kod
Kodnya adalah seperti berikut:


　Skrin potret iPhone/iPod Touch 640x960 (Retina)


Salin kod
Kod tersebut adalah seperti berikut:


　iPhone 5/iPod Touch 5 skrin menegak 640x1136 (Retina)


Salin kod
Kod tersebut adalah seperti berikut:


Tambah Sepanduk Aplikasi Pintar Sepanduk Aplikasi Pintar (iOS 6 Safari)


Salin kod
Kodnya adalah seperti berikut:


Saiz imej yang sepadan untuk iPhone 6 ialah 750×1294, dan saiz imej yang sepadan untuk iPhone 6 Plus ialah 1242×2148.


Salin kod
Kod tersebut adalah seperti berikut:



Windows 8
　Warna jubin Windows 8


Salin kod
Kodnya adalah seperti berikut:


　Ikon jubin Windows 8


Salin kod
Kodnya adalah seperti berikut:


Langganan RSS


Salin kod
Kod tersebut adalah seperti berikut:


　ikon favicon


Salin kod
Kod tersebut adalah seperti berikut:


Untuk pengenalan yang lebih terperinci kepada favicon, sila rujuk https://github.com/audreyr/favicon-cheat-sheet

Meta mudah alih

Kod XML/HTMLSalin kandungan ke papan keratan

  1. <meta nama="viewport"  kandungan="width=device-width, initial-scale=1, user-scalable=no" />  
  2. <meta nama="epal- mobile-web-app-capable" kandungan="ya" / >  
  3. <meta nama="epal- mobile-web-app-status-bar-style" kandungan="hitam"  />  
  4. <meta nama="format-detection"kandungan="telefon=tidak, e-mel<🎜 🎜>=tidak" />  
  5. <meta nama="viewport"  kandungan="width=device-width, initial-scale=1, user-scalable=no" />  
  6. <meta nama="epal- mobile-web-app-capable" kandungan="ya" / >  
  7. <meta nama="epal- mobile-web-app-status-bar-style" kandungan="hitam"  />  
  8. <meta nama="format- pengesanan" kandungan="telphone=no, email=no" / > >    
  9.   
  10. <meta nama="penyampai"  kandungan="webkit">  
  11.   
  12. <meta http-equiv=" " >
    13. <
  13. meta nama
    14. =
  14. "Mesra Tangan" kandungan="benar"> <
  15. meta nama
    16. =
  16. "MobileOptimized" kandungan="320"> <
  17. meta nama
    18. =
  18. "skrin- orientasi" kandungan="potret"> <
  19. meta nama
    20. =
  20. "x5- orientasi" kandungan="potret"> <
  21. meta nama
    22. =
  22. "penuh- skrin" kandungan="ya"> <
  23. meta nama
    24. =
  24. "x5- skrin penuh" kandungan="benar"> <
  25. meta nama
    26. =
  26. "browsermode" kandungan="aplikasi"> <
  27. meta nama
    28. =
  28. "x5- mod halaman" kandungan="aplikasi">
  30. <meta nama="msapplication- ketik-serlah" kandungan="tidak">


Ini adalah ringkasan perkongsian daripada toobug.

Lagi rujukan tag meta

Artikel rujukan:

Kenyataan：
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
Artikel sebelumnya：Ringkasan terperinci peraturan bersarang teg HTML sesuai untuk rakan baru_HTML/Xhtml_Pengeluaran halaman webArtikel seterusnya：Ringkasan terperinci peraturan bersarang teg HTML sesuai untuk rakan baru_HTML/Xhtml_Pengeluaran halaman web

Artikel berkaitan

Lihat lagi