Struktur pengepala dalam HTML_HTML/Xhtml_Penghasilan halaman web

Yang berikut memperkenalkan struktur kepala yang biasa digunakan, serta maksud dan senario penggunaan setiap teg dan elemen (artikel ini berdasarkan artikel induk dan merupakan ringkasan lanjutan).

Struktur pengepala padding.me

Salin kod

Kodnya adalah seperti berikut:

< ;meta name="viewport" content="width=device-width, user-scalable=yes">


< ;meta name="robots" content="index,follow">

https://plus. google.com/u/1/105241873904238310190/?rel=author">
http://padding.me/humans.txt" />

http://feeds.feedburner.com/paddingme" />

DOCTYPE

DOCTYPE (Jenis Dokumen), pengisytiharan ini terletak di hadapan dokumen, sebelum teg html Teg ini memberitahu penyemak imbas spesifikasi HTML atau XHTML yang digunakan oleh dokumen.

Pengisytiharan DTD (Definisi Jenis Dokumen) bermula dengan , ia tidak sensitif huruf besar-besaran dan tiada kandungan di hadapan Jika terdapat kandungan lain (kecuali ruang), penyemak imbas akan menghidupkan mod quirks dalam IE. DTD Awam, format nama ialah "pendaftaran // organisasi // teg jenis // bahasa", "pendaftaran" menunjukkan sama ada organisasi itu didaftarkan oleh Pertubuhan Standardisasi Antarabangsa (ISO), bermakna ya, - bermaksud tidak. "Organisasi" ialah nama organisasi, seperti: W3C; "Jenis" biasanya DTD, dan "Label" ialah perihalan teks awam yang ditetapkan, 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 bermaksud Inggeris, ZH bermaksud 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
http://www.w3.org/TR/html4 /strict.dtd">

•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">

•
HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd">

•
Dan HTML5 terkini memperkenalkan tulisan yang lebih ringkas, yang serasi ke hadapan dan ke belakang, dan disyorkan untuk digunakan.

Doctype dalam HTML mempunyai dua tujuan utama.
•Sahkan kesahihan dokumen.
Ia memberitahu ejen pengguna dan pengesah tentang DTD dokumen ini ditulis mengikut. Tindakan ini adalah pasif. Setiap kali halaman dimuatkan, penyemak imbas tidak akan 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 mungkin 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 , terperinci mod membaca tersedia? standard! , dan model kotak.

set aksara

Isytiharkan pengekodan aksara yang digunakan dalam dokumen,

Salin kod

Kod adalah seperti berikut:

Sebelum html5, halaman web akan menulis seperti ini:

Salin kod

Kod adalah seperti berikut:

Kedua-duanya adalah bersamaan, anda boleh membaca lebih khusus: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content- type, jadi disyorkan untuk menggunakan yang lebih pendek yang lebih mudah diingati.

atribut lang

Cina Ringkas

Cina Tradisional

Jarang sekali diperlukan untuk menambah kod wilayah, biasanya untuk menekankan perbezaan dalam penggunaan bahasa Cina di wilayah yang berbeza, contohnya:

Salin kod

Kod adalah seperti berikut:

nenasandNenas sebenarnya adalah buah yang sama. Cuma nama di tanah besar China dan Taiwan berbeza, dan nama di Singapura dan Malaysia juga berbeza. Ia dipanggil Pine Pear.

Untuk butiran, sila pergi ke http://zhi.hu/XyIa

Utamakan menggunakan versi terkini IE dan Chrome

Salin kod

Kodnya adalah seperti berikut:

360 menggunakan Bingkai Google Chrome

Salin kod

Kodnya adalah seperti berikut:

Pelayar 360 akan segera bertukar kepada teras kelajuan yang sepadan selepas membaca teg ini.
Sertai juga hanya untuk berada di pihak yang selamat

Salin kod

Kodnya adalah seperti berikut:

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: Kawalan kernel penyemak imbas Dokumentasi tag Meta

Baidu melarang transkoding

Apabila anda membuka halaman web melalui telefon mudah alih Baidu, Baidu boleh menukar kod halaman web anda, menanggalkan pakaian anda dan meletakkan iklan plaster kulit anjing pada badan anda, anda boleh menambah

Pautan berkaitan: Penyataan transcoding SiteApp

Bahagian pengoptimuman SEO
•
Tajuk halaman teg (pengepala kepala diperlukan)
tajuk anda

•
Kata Kunci Halaman


•
Page description content description


•
Tentukan pengarang web


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

Pautan berkaitan: WEB1038 - Teg mengandungi nilai tidak sah

port pandangan

port pandangan boleh menjadikan paparan reka letak lebih baik pada penyemak imbas mudah alih.
Biasanya tulis

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 pandang lebar (nilai angka/lebar peranti)
•tinggi port pandangan tinggi (nilai angka/tinggi peranti)
•skala awal skala awal
•maksimum - skala Skala maksimum
•skala minimum Skala minimum
•berskala pengguna Sama ada untuk membenarkan pengguna mengezum (ya/tidak)
•
minimal-ui Atribut baharu dalam iOS 7.1 beta 2, anda boleh Minimumkan bar status atas dan bawah apabila halaman dimuatkan. Ini ialah nilai Boolean dan boleh ditulis terus seperti ini:

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

Pautan berkaitan: Viewport dengan reka bentuk tidak responsif

peranti ios

Tajuk ditambahkan pada skrin utama (baharu dalam iOS 6)

Salin kod

Kod tersebut adalah seperti berikut:

Sama ada hendak mendayakan mod skrin penuh WebApp

Salin kod

Kodnya adalah seperti berikut:

Tetapkan warna latar belakang bar status

Salin kod

Kodnya adalah seperti berikut:

Hanya berkuat kuasa apabila "apple-mobile-web-app-capable" content="yes"

parameter kandungan:
•nilai lalai lalai.
•hitam Latar belakang bar status berwarna hitam.
•hitam-lut sinar Latar belakang bar status adalah hitam dan lut sinar.
Jika ditetapkan kepada lalai atau hitam , kandungan halaman web bermula dari bahagian bawah bar status.
Jika ditetapkan kepada lutsinar hitam, kandungan web akan memenuhi seluruh skrin dan bahagian atas akan disekat oleh bar status.

Lumpuhkan pengecaman digit daripada dikenali secara automatik sebagai nombor telefon

ikon iOS

parameter rel:
gambar ikon sentuh-epal 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, piksel lalai 57x57, mesti mempunyai
;!-- iPhone dan iTouch, lalai 57x57 piksel, mesti mempunyai -->

iPad, 72x72 piksel, pilihan, tetapi disyorkan

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

Retina iPad, 144x144 piksel, pilihan tetapi disyorkan

Skrin percikan iOS

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

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)
- Skrin potret iPhone/iPod Touch 320x480 (peleraian standard) -->

Skrin potret iPhone/iPod Touch 640x960 (Retina)

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

Tambah Sepanduk Apl Pintar (iOS 6 Safari)

Windows 8

Warna jubin Windows 8

Salin kod

Kodnya adalah seperti berikut:

Ikon Jubin Windows 8

Salin kod

Kodnya adalah seperti berikut:

Langganan RSS
>

ikon favicon

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

Meta mudah alih

Salin kod

Kod tersebut adalah seperti berikut:

< ;meta name="format-detection" content="telephone=no, email=no" />


< ;meta name="format-detection" content="telphone=no, email=no" />
< ;! -- Dayakan mod kelajuan 360 ​​pelayar (webkit) -->




< ;meta name= "MobileOptimized" content="320">

;!-- Skrin menegak paksa QQ-->

Perkongsian daripada pepijat.

Lebih banyak rujukan tag meta

•SENARAI LENGKAP TEG META HTML
•18 Teg Meta Setiap Halaman Web Perlu Ada pada 2013

Artikel rujukan:
•https://github .com /yisibl/blog/issues/1
•https://gist.github.com/paddingme/6182708733917ae36331
•http://amazeui.org/css/
•http://www .douban .com/note/170560091/