요소는 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공합니다. 이번 글은 주로 HTML의 메타태그와 사용법에 대한 자세한 설명을 소개합니다. 관심있는 친구들이 꼭 읽어보셨으면 좋겠습니다.
Html의 메타 태그
1. 메타 태그 의미
요소는 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공할 수 있습니다.
태그는 문서의 머리 부분에 있으며 어떤 내용도 포함하지 않습니다.
태그의 속성은 문서와 관련된 이름/값 쌍을 정의합니다.
2. 메타에서 일반적으로 사용되는 속성
1. charset(문자 집합)
설명: HTML 문서의 문자 인코딩을 지정합니다.
사용법:
2.viewport(viewport)
설명: 사용자의 웹 페이지에서 보이는 영역입니다. 모바일 장치의 화면은 일반적으로 PC의 화면보다 훨씬 작다는 것을 모두가 알고 있습니다. Webkit 브라우저는 더 큰 "가상" 창을 모바일 장치의 화면에 매핑합니다. 기본 가상 창은 너비가 980픽셀입니다(대부분 웹사이트의 현재 표준). . 너비)를 선택한 다음 특정 비율(3:1 또는 2:1)에 따라 크기를 조정합니다.加 즉, 일반 웹페이지를 로드할 때 웹킷은 먼저 980픽셀 브라우저 표준으로 웹페이지를 로드한 다음 너비를 490픽셀로 줄입니다. 이 축소는 전역 축소입니다. 즉, 페이지의 모든 요소가 축소됩니다.
사용법:
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">
(1) width
너비는 뷰포트의 크기를 제어하며 일반적으로 device-width
(2)initial-scale
Initial-scale: 스케일링 비율, 즉 페이지가 처음 로드될 때의 확대/축소 비율입니다.
(3) maximum-scale
Maximum-scale 최대 줌. 즉, 허용되는 최대 크기 조정 수준입니다. 이는 화면 크기와 비교한 페이지 크기의 최대 배수를 나타내는 부동 소수점 값이기도 합니다.
(4) maximum-scale
minimum-scale: 사용자가 확대/축소할 수 있는 최소 비율입니다. 최대 규모 사용량과 유사합니다.
”by by by / / [(5) 사용자 - 확장 가능한 사용자 - 확장 가능 사용자는 줌을 조정합니다. 즉, 사용자가 페이지의 확대/축소 수준을 변경할 수 있는지 여부입니다. yes로 설정하면 사용자가 이를 변경할 수 있으며, 그렇지 않으면 no입니다.
3. 키워드(keywords)
설명: 검색엔진에 제공되는 키워드 목록입니다. 각 키워드는 영문 콤마(,)로 구분하세요. 검색 품질을 향상시키기 위해 검색 엔진이 사용하는 키워드를 지정합니다.
사용법:
4. 설명(설명, 소개)
: 설명이 사용됩니다. 검색 엔진에 웹사이트의 주요 콘텐츠를 알려줍니다.
5. 형식 감지(형식 감지)
설명: 형식 감지는 일부 요소를 감지하는 데 사용됩니다. HTML 형식으로.
사용법: 메타의 형식 감지 속성은 주로 다음과 같은 설정을 갖습니다:
meta name="format-detection" content="telephone=no" meta name="format-detection" content="email=no" meta name="format-detection" content="adress=no"
Telephone=no는 숫자를 전화 접속 링크로 변환하는 것을 금지합니다!
(2)email
장치에 편지함을 인식하지 않도록 설정하고 클릭 후 자동으로 보내지 않도록 합니다.
email=yes가 켜져 있으면 텍스트는 이메일 주소로 기본 설정됩니다. 이 메타는 기본적으로 켜져 있습니다.
(3) adress
adress=yes는 주소를 클릭하면 지도로 바로 이동하는 기능을 활성화합니다. 기본적으로 활성화되어 있습니다!
6. apple-touch-fullscreen
설명: 홈 화면에 추가하면 전체 화면으로 표시됩니다.
지침: 이 기능은 기본 Apple 도구 모음과 메뉴 모음을 삭제하는 것입니다. 콘텐츠에는 "yes"와 "no"라는 두 가지 값이 있습니다. 도구 모음과 메뉴 표시줄을 표시해야 하는 경우 이 메타 줄을 추가할 필요가 없습니다. 기본값은 표시하는 것입니다.
사용법:
8. App-Config
설명: 기록 및 애니메이션 효과 유지
사용법: < ; Meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>
9.msapplication-tap-highlight
설명: 강조 표시 없이 클릭(강조 표시)
사용법 ：< ;meta name="msapplication-tap-highlight" content="no">
관련 권장 사항:
기기 화면의 CSS 속성을 제어하기 위해 메타 태그에 뷰포트를 구현하는 방법
위 내용은 HTML의 메타 태그 및 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
