>  기사  >  웹 프론트엔드  >  HTML의 메타 태그 및 사용법에 대한 자세한 설명

HTML의 메타 태그 및 사용법에 대한 자세한 설명

小云云
小云云원래의
2018-02-24 09:32:452075검색

요소는 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공합니다. 이번 글은 주로 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"
또한 연속적으로 작성할 수도 있습니다: 메타 이름="format-Detection" content="telephone=no,email=no,adress=no "1 � � \ atch humb 숫자! 이 전화 접속 링크를 제거하는 방법은 무엇입니까? 이때 우리 메타는 다시 마법의 힘을 과시해야 합니다. 코드는 다음과 같습니다.


  Telephone=no는 숫자를 전화 접속 링크로 변환하는 것을 금지합니다!

  Telephone=yes는 숫자를 전화 접속 링크로 변환하는 기능을 활성화합니다. 변환 기능을 활성화하려면 이 메타를 작성할 필요가 없습니다. 기본적으로 활성화되어 있습니다.


    (2)email

    장치에 편지함을 인식하지 않도록 설정하고 클릭 후 자동으로 보내지 않도록 합니다.

  email=no는 이메일 주소로 금지됩니다!

  email=yes가 켜져 있으면 텍스트는 이메일 주소로 기본 설정됩니다. 이 메타는 기본적으로 켜져 있습니다.

   (3) adress

  adress=no 지도로의 이동은 금지입니다!

  adress=yes는 주소를 클릭하면 지도로 바로 이동하는 기능을 활성화합니다. 기본적으로 활성화되어 있습니다!

6. apple-touch-fullscreen

  설명: 홈 화면에 추가하면 전체 화면으로 표시됩니다.

사용법:

7.apple-mobile-web-app-capable

 지침: 이 기능은 기본 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 메타 태그 사용법 요약

HTML 메타 태그의 일반적인 사용법 소개

위 내용은 HTML의 메타 태그 및 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.