HTML의 메타 태그에 대해 알아야 할 사항

Meta 태그는 HTML 언어의 head 영역에 있는 보조 태그로, HTML 문서의 head 태그와 title 태그 사이에 위치하여 사용자에게 보이지 않는 정보를 제공합니다. 브라우저(콘텐츠가 표시되거나 페이지가 다시 로드되는 방식), 검색 엔진(키워드) 또는 기타 웹 서비스에서 사용할 수 있습니다.

프런트엔드 페이지 개발에 자주 사용되는 메타태그 내용을 문서로 정리하고, 필요할 때 참고할 수 있도록 모바일 웹 개발 메타정보도 추가했습니다.

​1. 문서에 사용된 문자 인코딩에 대해 설명

<meta charset=&#39;utf-8&#39;>

아니면

메타 태그는 HTML 페이지에서 사용되는 문자 집합을 유니코드인 utf-8로 정의합니다. 중국어 간체, 중국어 번체 및 기타 언어(일본어, 한국어 등)를 동일한 페이지에 표시할 수 있습니다. 물론 gb2312(중국어 간체), big5(중국어 번체) 등과 같은 다른 문자 집합을 사용할 수도 있습니다.

현재로서는 일반적으로 HTML5에서 사용하는 작성 방법이기도 한 첫 번째 작성 방법을 사용하는 것이 좋습니다.

​2.사용된 브라우저와 버전을 선언하세요

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

지정된 콘텐츠 값이 IE=edge,chrome=1인 경우 최신 버전의 IE 및 Chrome이 먼저 사용됩니다. 클라이언트에 Google Chrome 프레임이 설치되어 있다고 가정하면 IE에서 크롬 렌더링 엔진이 사용되어 페이지가 렌더링됩니다. 그렇지 않으면 클라이언트 IE의 가장 높은 표준 모드가 페이지를 렌더링하는 데 사용됩니다.

다음과 같은 설정 방법도 있습니다:

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

​3. SEO 최적화 관련

페이지 설명, 각 웹페이지에는 웹페이지의 내용을 정확하게 반영하는 150자 이하의 설명 태그가 있어야 합니다.

페이지 키워드, 각 웹페이지에는 웹페이지의 콘텐츠를 설명하는 고유한 키워드 세트가 있어야 합니다.

사람들이 검색할 가능성이 있는 설명적이고 대표적인 키워드와 문구를 사용하고, 페이지에 제공되는 정보를 정확하게 설명하세요.

웹페이지 작성자 정의, 선택사항

<meta http-equiv="X-UA-Compatible" content="IE=6" /><!-- 使用IE6 --> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><!-- 使用IE7 --> 
<meta http-equiv="X-UA-Compatible" content="IE=8" /><!-- 使用IE8 --> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--指示IE以目前可用的最高模式显示内容-->

​4. 페이지 리디렉션 및 새로 고침: 콘텐츠의 숫자는 시간(초), 즉 새로 고치는 데 걸리는 시간을 나타냅니다. URL을 추가하면 지정된 웹페이지로 리디렉션됩니다.

위 코드는 5초 동안 머무르면 자동으로 새로 고쳐지고 URL //m.sbmmt.com

으로 이동한다는 의미입니다. 5. 웹페이지 만료시간 만료

<meta name="description" content="不超过150个字符" />

웹 페이지의 만료 시간을 설정합니다. 만료되면 서버에서 다시 호출해야 합니다. GMT 시간 형식을 사용하거나 직접 0(캐싱 없음)으로 설정해야 합니다.

​6. Pragma는 로컬 캐싱을 금지합니다

웹페이지가 캐시에 저장되지 않도록 설정하고 방문할 때마다 페이지를 새로고침하세요. 이 설정을 사용하면 방문자는 오프라인으로 탐색할 수 없습니다.

​7. 뷰포트 모바일 기기 화면 가시 영역

모바일 기기의 화면 너비는 기존 웹의 화면 너비와 다르기 때문에 뷰포트 값을 변경해야 합니다.

대부분의 4.7~5인치 기기의 뷰포트 너비는 360px로 설정되어 있으며, 5.5인치 기기는 400px로 설정되어 있으며, iphone6 ​​​​plus는 414px로 설정되어 있습니다.

width – 뷰포트의 너비(범위: 200~10,000, 기본값 980픽셀)

height – 뷰포트의 높이(범위: 223~10,000)

초기 규모 – 초기 규모 조정(범위: 0부터 10까지)

​minimum-scale – 사용자가 확대/축소할 수 있는 최소 비율

​maximum-scale – 사용자가

으로 확대/축소할 수 있는 최대 비율 ​user-scalable – 사용자가 수동으로 확장할 수 있는지 여부(아니요, 예)

<meta name="keywords" content="html5, css3, 关键字"/>

문서와 장치 너비를 1:1로 유지합니다.

문서의 최대 너비 비율은 1.0(초기 배율 초기 배율 값 및 최대 배율 최대 배율 값)입니다. 사용자 확장 가능 여부는 사용자가 수동으로 확대/축소할 수 있는지(아니요는 크기 조정이 없음을 의미함) 정의하여 페이지가 기기 크기에 맞게 고정되도록 합니다. 참고: 실제 테스트에서 일부 Android 브라우저는 이 규칙을 지원하지 않아 페이지를 확대할 수 있는 것으로 나타났습니다. 일단 응답 상자가 확대되면 페이지도 확대되어 페이지가 혼란스러워집니다. 페이지.

많은 사람들이 비반응형 웹사이트에서initial-scale=1을 사용하는데, 이로 인해 웹사이트가 100% 너비로 렌더링되므로 사용자가 수동으로 페이지를 이동하거나 확대/축소해야 합니다. user-scalable=no 또는 maximum-scale=1을initial-scale=1과 함께 사용하면 사용자는 전체 내용을 보기 위해 웹 페이지를 확대/축소할 수 없습니다.

모바일 장치의 메타에는 다음과 같은 설정도 있습니다.

​

​9. 상태 표시줄 숨기기/상태 표시줄 색상 설정: WebApp 전체 화면 모드가 켜져 있는 경우에만 적용됩니다. 콘텐츠의 값은 기본값 | 검정-반투명입니다.

​10.홈 화면에 제목 추가

​11. 번호를 무시하고 자동으로 전화번호로 식별

​12. 이메일 주소 식별 무시

위 내용은 HTML의 메타 태그에 대해 알아야 할 사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!