HTML 헤더에 무엇을 넣을지-프런트엔드 Q&A-php.cn

HTML 헤더에 무엇을 넣을지

青灯夜游

풀어 주다： 2021-12-14 12:06:42

원래의

3615명이 탐색했습니다.

HTML 헤더에는 다음이 포함되어야 합니다. 1. 제목 태그, 문서 제목 설정 2. 여러 메타 태그, 인코딩 방법, 웹사이트 설명 및 뷰포트 설정 3. 링크 태그, 웹 페이지 제목의 작은 아이콘 설정 스타일 파일을 소개합니다. 4, 스크립트 태그, 스크립트 파일을 소개합니다.

HTML 헤더에 무엇을 넣을지

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

제가 주로 플러그인을 사용하면서 접한 질문입니다! html5 구조를 생성하기 위해 탭을 추가하는데 css와 js 외에는 넣을 것이 생각나지 않습니다. 이 문제는 매우 간단한 것 같지만 우리가 쉽게 무시하기 때문에 이를 요약하는 기사를 작성하겠습니다. HTML 헤드(헤더)(파트)에는 무엇을 넣어야 하나요?

제목 필수

제목은 필수인데, 추가하지 않으면 브라우저가 자동으로 추가해 줍니다.

<head>
    <title>web</title>
</head>

로그인 후 복사

인코딩(인코딩 방식)

인코딩 방식에 대한 사양은 헤드 앞쪽에 위치합니다. 지정하지 않으면 브라우저에서도 서버의 헤더를 기준으로 판단하지만 정확하지 않을 수 있습니다.

<head>
    <meta charset="UTF-8">
    <title>web</title>
</head>

로그인 후 복사

설명(웹사이트 설명)

이전에 눈치채지 못했습니다. 웹사이트에 대한 설명이므로 검색 엔진에서 볼 수 있으며 SEO에서 매우 일반적으로 사용됩니다

<meta name="description" content="这里是对网站的描述">

로그인 후 복사

Viewport

이는 매우 흔한 일이며, 뷰포트는 일반적으로 모바일 터미널에 맞춰져 있으며 페이지는 가상 창(뷰포트)에 배치됩니다. 웹페이지가 뷰포트를 사용하지 않으면 모바일 브라우저를 열 때 매우 작게 나타납니다. , 이동 및 확대/축소도 가능합니다. 뷰포트를 사용하면 웹 개발자가 크기를 통해 웹 페이지 콘텐츠의 제어 요소 크기를 동적으로 설정할 수 있으므로 웹 페이지와 동일한 효과(규모 축소)가 가능합니다. 브라우저에서 얻을 수 있습니다. , 반응형 웹사이트를 더 효과적으로 지원하는 데 사용됩니다.

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

로그인 후 복사

width: 뷰포트의 크기를 제어합니다. 일반적으로 장치 너비(단위는 100%로 조정된 CSS 픽셀)로 지정됩니다. 600과 같은 고정 값을 지정할 수도 있습니다. height: 및 width 그에 따라 높이를 지정합니다.
initial-scal: 초기 크기 조정 비율, 페이지가 처음 로드될 때의 크기 조정 비율.
maximum-scale: 사용자가 확대/축소할 수 있는 최대 비율입니다.
minimum-scale: 사용자가 확대/축소할 수 있는 최소 비율입니다.
user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부입니다.
Favicon

이것은 웹 페이지 제목 왼쪽에 있는 작은 아이콘입니다. 경로를 지정하지 않으면 브라우저는 루트 디렉터리에서 <link rel="icon" href="/favicon.ico" type="image/x-icon" />
로그인 후 복사

css

을 찾습니다. 링크 태그를 통해 스타일 파일 링크 <link rel="stylesheet" href="css/test.css">
로그인 후 복사

javascript (강조)

스크립트 태그를 통해 스크립트 파일 링크 <script src="js/test.js"></script>
로그인 후 복사

여기서 몇 가지 사항에 대해 논의합니다

1 head and in the body

먼저 head에 넣어주세요. script 태그에 async 속성이 추가되지 않으면 브라우저가 차단됩니다. 파일이 있는 경우에는 js 파일을 다운로드해야 합니다. 작으면 괜찮습니다. 상대적으로 크면 차단 효과가 있고 사용자 경험에 영향을 미칩니다. 브라우저가 웹 페이지를 구문 분석할 때 한 줄씩 구문 분석합니다. 즉, 헤드의 js 파일을 구문 분석할 때 중지되며 Dom 구조는 헤드 아래의 body 태그에 있습니다. js 파일이 다운로드될 때까지 기다리세요. 본문의 내용은 본문 하단에 배치하도록 선택하면 브라우저가 먼저 dom을 로드하고 js를 구문 분석한 후에만 다운로드합니다. 그러나 다운로드하기 전에 이미 본문의 내용을 볼 수 있습니다. 찾아보기 경험이 더 좋을 것입니다. ? 사실 바디의 헤드에 넣는 것은 헤드에 넣는 것과 같습니다

2 js 파일을 헤드에 넣는 것은 단점을 피합니다

js 파일의 동기 다운로드 문제를 해결할 수 있는 두 가지 속성이 있습니다 : defer and async

defer :스크립트에 defer 속성을 추가하면 헤드에 배치하더라도 HTML 페이지를 파싱한 후에 실행되는데, 이는 스크립트를 맨 아래에 배치하는 것과 유사합니다. 페이지.

<script defer src="test.js"></script>

로그인 후 복사

async:

비동기의 경우 이는 HTML5의 새로운 속성입니다. 해당 기능은 스크립트 로드로 인해 페이지 로드를 차단하지 않고 스크립트를 비동기적으로 로드하고 실행하는 것입니다. 로드되면 즉시 실행됩니다. 비동기를 사용하면 후속 문서 요소를 로드하고 렌더링하는 프로세스가 script.js의 로드 및 실행과 병렬로(비동기적으로) 발생합니다. 하지만 원래 순서대로 실행되지 않을 가능성이 매우 높습니다. js 전후에 종속성이 있는 경우 async를 사용하면 오류가 발생할 수 있습니다.