Cara menggunakan atribut meta dalam petua tutorial HTML5

Atribut meta menduduki kedudukan yang sangat penting dalam HTML. Contohnya: SEO untuk enjin carian, pengekodan aksara dokumen, menetapkan cache segar semula, dsb. Walaupun sesetengah halaman web mungkin tidak menggunakan meta, sebagai askar biasa, kami masih perlu memahami beberapa sifat meta dan boleh menggunakannya dengan mahir.

1. Isytiharkan pengekodan aksara yang digunakan dalam dokumen

Kod XML/HTMLSalin kandungan ke papan keratan

<meta charset='utf-8'>

2. Isytiharkan mod keserasian dokumen

Kod XML/HTMLSalin kandungan ke papan keratan

<meta http-equiv="X-UA -Serasi" kandungan="IE=edge" /> Mengarahkan IE untuk memaparkan kandungan dalam mod tertinggi yang tersedia pada masa ini
<meta http-equiv=" " /> mengarahkan IE untuk menggunakan arahan > untuk menentukan cara untuk memaparkan kandungan. Perintah mod standard dipaparkan dalam mod standard IE7, manakala arahan mod Quirks dipaparkan dalam mod IE5. 3. Pengoptimuman SEO
Salin kandungan ke papan keratan

meta nama

"penerangan" kandungan="Tidak lebih daripada 150 aksara" />Penerangan halaman <meta nama
"kata kunci" kandungan="html5, css3, kata kunci"/>Kata Kunci halaman <meta nama
"pengarang" kandungan="Magic Inn" />Tentukan pengarang web <meta nama
"robot" kandungan="indeks,ikut" />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.
4. Tambahkan port pandangan untuk peranti mudah alih
Kod XML/HTMLSalin kandungan ke papan keratan
1. <meta nama ="viewport" kandungan ="lebar=lebar peranti, skala awal=1, skala maksimum=1, skala minimum=1, pengguna- boleh skala=tidak">
2. penjelasan parameter kandungan:
3. lebar port pandangan lebar (nilai/lebar peranti)
4. ketinggian viewport ketinggian (nilai/ketinggian peranti)
5. nisbah penskalaan awal skala awal
6. skala maksimum Nisbah zum maksimum
7. nisbah zum minimum skala minimum
8. berskala pengguna Sama ada membenarkan penskalaan pengguna (ya/tidak)
9. minimal-ui Terdapat atribut baharu dalam iOS 7.1 beta 2 yang boleh meminimumkan bar status atas dan bawah apabila halaman dimuatkan. Ini ialah nilai Boolean dan boleh ditulis terus seperti ini:
10. <meta nama="viewport" kandungan="width=device-width, initial-scale=1, minimal-ui"> ;
5. Peranti iOS
Kod XML/HTMLSalin kandungan ke papan keratan
1. <meta nama="apple-mobile-web -app-title" kandungan="tajuk"> ditambahkan pada Tajuk selepas skrin utama (baharu dalam iOS 6)
2. <meta nama="epal- mobile-web-app-capable" kandungan="ya" / >Sama ada hendak mendayakan mod skrin penuh WebApp
3. <meta nama="epal- mobile-web-app-status-bar-style" kandungan="hitam-lut sinar" />Tetapkan warna latar belakang bar status
4. Hanya berkuat kuasa apabila "apple-mobile-web-app-capable" kandungan="ya"
5. parameter kandungan:
6. nilai lalai lalai.
7. hitam Latar belakang bar status berwarna hitam.
8. hitam-lut sinar Latar belakang bar status adalah hitam dan lut sinar.
9. Tetapkan kepada lalai atau hitam , kandungan halaman web bermula dari bahagian bawah bar status.
10. Jika ditetapkan kepada lut sinar hitam, kandungan web akan memenuhi seluruh skrin dan bahagian atas akan disekat oleh bar status.
6. Parameter rel ikon iOS
Kod XML/HTMLSalin kandungan ke papan keratan
1. gambar ikon sentuh-epal diproses secara automatik menjadi sudut bulat dan sorotan.
2. apple-touch-icon-precomposed melarang sistem daripada menambah kesan secara automatik dan memaparkan reka bentuk asal secara langsung.
3. <pautan rel="epal- touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" />iPhone dan iTouch, lalai 57x57 piksel, mesti mempunyai
4. <pautan rel="epal- touch-icon-precomposed" saiz="72x72" href="/apple-touch-icon-72x72-precomposed.png" />iPad, 72x72 piksel , anda tidak boleh memilikinya, tetapi disyorkan untuk memilikinya
5. <pautan rel="epal- touch-icon-precomposed" saiz="114x114" href="/apple-touch-icon-114x114-precomposed.png" />Retina iPhone dan Retina iTouch, 114x114 piksel, pilihan tetapi disyorkan
6. <pautan rel="epal- touch-icon-precomposed" saiz="144x144" href="/apple-touch-icon-144x144-precomposed.png" />Retina iPad, 144x144 Piksel adalah pilihan, tetapi disyorkan agar semua orang menggunakan
7. <meta nama="epal- mobile-web-app-title" kandungan="tajuk">Sebaik-baiknya untuk menghadkan tajuk kepada enam aksara Cina dalam panjang Kandungan yang lebih panjang akan disembunyikan dan ditambahkan pada tajuk selepas skrin utama (baharu dalam iOS 6)
7. Skrin permulaan iOS
Kod XML/HTMLSalin kandungan ke papan keratan
1. Skrin permulaan iPad tidak termasuk kawasan bar status.
2. Skrin potret iPad 768 x 1004 (peleraian standard)
3. <pautan rel="epal- touch-startup-image" saiz="768x1004" href="/splash-screen-768x1004.png" />iPad skrin menegak 1536x2008 (Retina)
4. <pautan rel="epal- touch-startup-image" saiz="1536x2008" href="/splash-screen-1536x2008.png" />skrin landskap iPad 1024x748 (resolusi standard )
5. <pautan rel="epal- touch-startup-image" saiz="1024x748" href="/Default-Portrait-1024x748.png" />landskap iPad 2048x1496 🎜 (Retina)
6. <pautan rel="epal- touch-startup-image" saiz="2048x1496" href="/splash-screen-2048x1496.png" />
7. Skrin permulaan iPhone dan iPod touch termasuk kawasan bar status.
8. Skrin potret iPhone/iPod Touch 320x480 (peleraian standard)
9. <pautan rel="epal- touch-startup-image" href="/splash-screen-320x480.png" />iPhone/iPod Touch Skrin Menegak 640x960 (Retina)
10. <pautan rel="epal- touch-startup-image" saiz="640x960" href="/splash-screen-640x960.png" />iPhone 5/iPod Touch 5 skrin menegak 640x1136 (Retina)
11. <pautan rel="epal- touch-startup-image" saiz="640x1136" href="/splash-screen-640x1136.png" />
12. <pautan rel="epal- touch-startup-image" href="Startup.png" / > Apabila pengguna mengklik pada ikon skrin utama untuk membuka WebApp, sistem akan memaparkan skrin permulaan Jika ia tidak ditetapkan, sistem akan memaparkan tangkapan skrin halaman utama tapak web secara lalai. Sudah tentu, pengalaman ini tidak begitu baik
8, Windows 8
Kod XML/HTMLSalin kandungan ke papan keratan
1. <meta nama="msapplication-TileColor" kandungan="#000"/> Warna Tile Windows 8
2. <meta nama="msapplication- TileImage" kandungan="icon.png"/>Windows 8 Ikon Jubin
9. Jarang digunakan
Kod XML/HTMLSalin kandungan ke papan keratan
1. <pautan rel="ganti" taip="aplikasi/rss xml" tajuk="RSS" href="/rss.xml" />Tambah Langganan RSS
2. <pautan rel="ikon pintasan " taip="imej/ico" href="/favicon.ico" />Tambah ikon favicon
3. <meta nama="format- pengesanan" kandungan="telefon=no" />Larang pengecaman digit daripada dikenali secara automatik sebagai nombor telefon
4. <meta nama="format- pengesanan" kandungan="email=no" />Jangan biarkan android mengenali e-mel
5. <meta nama="penyampai" kandungan="webkit">Dayakan mod kelajuan pelayar 360 (webkit)
6. <meta http-equiv=" " >Elakkan IE menggunakan mod keserasian <meta nama
7. "Mesra Tangan" kandungan="benar">Dioptimumkan untuk peranti pegang tangan, terutamanya Untuk beberapa penyemak imbas lama yang tidak mengenali port pandang, seperti BlackBerry <meta nama
8. "MobileOptimized" kandungan="320">Pelayar lama Microsoft <meta nama
9. "x5- orientasi" kandungan="potret">QQ skrin menegak paksa
10. <meta nama="penuh- skrin" kandungan="ya">UC paksa skrin penuh
11. <meta nama="x5- skrin penuh" kandungan="benar">QQ paksa skrin penuh
12. <meta nama="browsermode" kandungan="aplikasi">Mod aplikasi UC
13. <meta nama="x5- mod halaman" kandungan="aplikasi">Mod aplikasi QQ
14. <meta http-equiv=" Kawalan Cache" kandungan="tiada aplikasi tapak" /> Transkod Baidu dilarang
15. <meta nama="msapplication- ketik-serlah" kandungan="tidak">klik telefon tetingkap Tiada sorotan
16. <meta nama="kata kunci" kandungan="" /> Kunci Perkataan
17. <meta nama="penerangan" kandungan="" /> Penerangan
18. <meta nama="tajuk" kandungan="" /> tajuk
19. <meta nama="pengarang" kandungan="-06" /> Pengarang
20. <meta nama="Hak Cipta" kandungan="" /> Syarikat
21. <meta http-equiv=" " 🎜> Biarkan penyemak imbas IE menggunakan kernel paling canggih untuk memaparkan halaman dan halaman menggunakan rangka kerja Chrome menggunakan kernel webkit <meta nama
22. ="epal- mobile-web-app-capable" kandungan="ya"> Skrin penuh IOS6 <meta nama
23. ="mudah alih- web-app-capable" kandungan="ya"> Chrome Skrin penuh versi tinggi <meta nama
24. ="penyampai" kandungan="webkit"> Biarkan penyemak imbas dwi-teras 360 menggunakan Halaman Rendering kernel webkit <meta nama
25. ="epal- itunes-app" kandungan="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> Tambah Sepanduk Aplikasi Pintar Sepanduk Aplikasi Pintar (iOS 6 Safari) 10 sns tag sosial
26. Kod XML/HTMLSalin kandungan ke papan keratan
1. <meta property="og:type" Inhalt="Typ" />
2. <meta property="og: url" Inhalt="URL-Adresse" />
3. <meta property="og: title" content="title" />
4. <meta property="og: image" content="image" />
5. <meta property="og: Beschreibung" Inhalt="Beschreibung" />
11. Bedingte Kommentare zur Bestimmung des IE-Browsers
XML/HTML-CodeInhalt in die Zwischenablage kopieren
4. ![endif]-->
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Label berkaitan：

html5

sumber：php.cn

Artikel sebelumnya：Menganalisis fungsi storan HTML5 dan kaedah pengendalian berkaitan kemahiran tutorial SQL_html5 web Artikel seterusnya：Penjelasan ringkas tentang menggunakan formula matematik MathML dalam kemahiran tutorial HTML5_html5

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

Artikel terbaru oleh pengarang