머리

HEAD

Document Type

각 브라우저에서 일관된 성능을 보장하려면 각 HTML 페이지의 첫 번째 줄에 표준 모드 선언을 추가하세요.

<!DOCTYPE html>

Language attribute

우리가 일반적으로 작성하는 lang="zh-CN" 대신 lang="zh-cmn-Hans"를 사용하는 이유는 Zhihu에 대한 토론을 참조하세요. 웹 페이지 상단에 있는 설명은 다음과 같습니다. lang="zh" 또는 lang="zh-cn"을 사용하시겠습니까?

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

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

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

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

문자 인코딩

파일 형식으로 BOM 없는 utf-8 인코딩을 사용합니다.
문자 인코딩을 지정하는 메타는 헤드의 첫 번째 직접 하위 요소여야 합니다.

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

IE 호환 모드

최신 버전의 IE 및 Chrome 커널

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

SEO 최적화

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

viewport

viewport 사용을 우선시합니다. 일반적으로 툴바를 제외한 브라우저 창의 콘텐츠 영역 크기를 말합니다. 탭 등;viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale

width

device-width: 장치 해상도; width, 출력 장치의 화면 너비;

`initial-scale`: 초기 크기 조정

maximum-scale

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

apple-touch-icon 사진은 자동으로 둥근 모서리와 하이라이트로 처리됩니다.

apple-touch-icon-precomposed는 시스템이 자동으로 효과를 추가하는 것을 금지하고 원본 디자인을 직접 표시합니다. favicon

favicon을 지정하지 않으면 대부분의 브라우저는 웹 서버의 루트 디렉터리에 있는 favicon.ico를 요청합니다. 파비콘에 액세스할 수 있고 404를 방지하려면 다음 두 가지 방법 중 하나를 따라야 합니다.

<!-- 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">

HEAD 템플릿

<link rel="shortcut icon" href="path/to/favicon.ico">

🎜

머리