KEPALA


HEAD

Jenis Dokumen

Tambahkan perisytiharan mod standard pada baris pertama setiap halaman HTML untuk memastikan prestasi yang konsisten dalam setiap penyemak imbas. 

<!DOCTYPE html>

Atribut bahasa

Mengapa menggunakan lang="zh-cmn-Hans" dan bukannya lang="zh-CN" yang biasa kita tulis? Sila rujuk perbincangan tentang Zhihu: Pernyataan di kepala halaman web harus gunakan lang ="zh" atau lang="zh-cn"? 

<!-- 中文 -->
<html lang="zh-Hans">

<!-- 简体中文 -->
<html lang="zh-cmn-Hans">

<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">

<!-- English -->
<html lang="en">

Pengekodan aksara

  • Menggunakan pengekodan utf-8 tanpa BOM sebagai format fail
  • Meta yang menentukan pengekodan aksara mestilah elemen anak langsung pertama bagi mod
rreee

IE; Mengutamakan penggunaan Versi terkini IE dan kernel Chrome

<html>
  <head>
    <meta charset="utf-8">
    ......
  </head>
  <body>
    ......
  </body>
</html>

Pengoptimuman SEO

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

viewport

viewport: Secara umumnya merujuk kepada saiz kawasan kandungan tetingkap penyemak imbas, tidak termasuk bar alat, tab, dsb.;
  • lebar: lebar penyemak imbas, lebar kawasan halaman yang boleh dilihat dalam peranti output viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
  • width: 浏览器宽度，输出设备中的页面可见区域宽度；
  • device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
  • initial-scale: 初始缩放比例；
  • maximum-scale
    • lebar peranti: resolusi peranti lebar, lebar skrin peranti output yang boleh dilihat; peranti mudah alih, tetapkan lebar dan penskalaan awal kawasan yang boleh dilihat . 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

ikon iOS

gambar ikon sentuh-epal diproses secara automatik ke sudut bulat dan sorotan; favicon
  • Apabila favicon tidak dinyatakan, kebanyakan pelayar akan meminta favicon.ico dalam direktori akar Pelayan Web. Untuk memastikan favicon boleh diakses dan mengelakkan 404, salah satu daripada dua kaedah berikut mesti diikuti:
  • Letakkan fail favicon.ico dalam direktori akar Pelayan Web

Gunakan pautan untuk menentukan favicon; 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

templat HEAD
    <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png">

<!-- iPad，72x72 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-72x72-precomposed.png" sizes="72x72">

<!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-114x114-precomposed.png" sizes="114x114">

<!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-144x144-precomposed.png" sizes="144x144">
←