HTML5 WEB 인터페이스의 메타 열에 대한 자세한 설명

이번에는 HTML5 WEB 인터페이스의 메타 컬럼에 대해 자세히 설명하겠습니다. HTML5 WEB 인터페이스에서 메타를 사용할 때의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

소개

메타 태그는 HTML 언어의 HEAD 영역에 있는 보조 태그입니다.

메타는 페이지 설명, 키워드, 마지막 수정 날짜 및 기타 메타데이터를 정의하는 데 자주 사용됩니다. 이 메타데이터는 브라우저(페이지 레이아웃 또는 다시 로드 방법), 검색 엔진 및 기타 웹 서비스에 제공됩니다.

mata 태그에는 웹 페이지의 문자 인코딩을 선언하는 전역 속성

charset

이 포함되어 있습니다.

content

콘텐츠의 내용 attribute는 사용하는 속성에 따라 htp-equiv 또는 name 속성 값입니다.

http-equiv

이 속성에는 HTTP 헤더의 이름이 포함될 수 있습니다. 속성의 전체 영어 이름은 http-equival입니다. 서버와 사용자 에이전트의 동작을 변경할 수 있는 지시어를 정의합니다. 이 지시문의 값은 content 속성 내에서 정의되며 다음 중 하나일 수 있습니다.

content-언어(구식)

페이지의 기본 언어를 정의합니다. 모든 요소의 lang 속성으로 재정의될 수 있습니다.

Pragma

는 브라우저가 로컬 컴퓨터 캐시의 페이지 콘텐츠에 액세스하지 못하도록 비활성화합니다. 예:

expires

를 사용하여 웹 페이지의 만료 시간을 설정할 수 있습니다. 웹페이지가 만료되면 서버로 다시 전송되어야 합니다.

cache-control

요청과 응답이 따르는 캐싱 메커니즘을 지정합니다. 여러 가지 사용법이 있습니다:

no-cache: 먼저 요청을 보내고 리소스가 변경되었는지 서버에 확인합니다. 그렇지 않은 경우 캐시를 사용합니다.
no-store: 캐싱이 허용되지 않습니다. 매번 서버에 가서 전체 응답을 다운로드해야 합니다. (보안 조치)
public : 모든 응답을 캐시하지만 필수는 아닙니다. max-age도 동일한 효과를 얻을 수 있기 때문에
private: 단일 사용자에 대해서만 캐시되므로 릴레이에서는 캐시가 허용되지 않습니다. (예를 들어 CDN은 비공개 응답 캐싱을 허용하지 않습니다.)
max-age: 서버에 다시 요청하지 않고 현재 요청부터 응답을 캐시하고 재사용할 수 있는 기간을 나타냅니다. 예를 들어 max-age=60은 응답을 캐시하고 60초 동안 다시 사용할 수 있음을 의미합니다.

content-security-policy

페이지 작성자가 현재 페이지에 대한 콘텐츠 정책을 정의할 수 있습니다. 콘텐츠 정책은 주로 허용된 서버 주소와 스크립팅 끝점을 지정하여 교차 사이트 스크립팅 공격을 방지하는 데 도움이 됩니다.

CSP의 핵심은 화이트리스트 시스템입니다. 개발자는 어떤 외부 리소스를 로드하고 실행할 수 있는지 명확하게 알려줍니다. 이는 화이트리스트를 제공하는 것과 같습니다. 구현과 실행은 모두 브라우저에 의해 완료되며 개발자는 구성만 제공하면 됩니다.

CSP는 웹페이지의 보안을 크게 강화합니다. 공격자가 취약점을 발견하더라도 화이트리스트에 등록된 신뢰할 수 있는 호스트를 제어하지 않는 한 스크립트를 주입할 수 없습니다. CSP를 활성화하는 방법에는 두 가지가 있습니다. 하나는 HTTP 헤더의 Content-Security-Policy 필드를 통하는 것입니다.

콘텐츠 보안 정책: script-src 'self'; object-src 'none';

style-src cdn.example.org third-party.org;child-src https:

위 코드에서 CSP는 다음 구성을 만들었습니다.

스크립트: 현재 도메인 이름만 신뢰
라벨: URL을 신뢰하지 않음, 즉 리소스를 로드하지 않음
스타일 시트 : cdn.example.org 및 third-party.org만 신뢰하십시오.
프레임: HTTPS 프로토콜을 사용하여 로드해야 합니다.
기타 리소스: 제한 없음
활성화하면 CSP를 준수하지 않는 외부 리소스는 로드되지 않습니다.

자세한 소개는 콘텐츠 보안 정책 시작 튜토리얼을 참조하세요.

content-type(구식)

문서의 MIME 유형을 정의한 다음 문자 인코딩을 정의합니다.

이 값은 더 이상 사용되지 않으므로 사용하지 마세요. 요소에 charset 속성을 사용하는 것이 좋습니다.
XHTML 또는 HTML5에 대한 XHTML 직렬화에서는 문서 유형을 변경할 수 없으므로 MIME 유형을 XHTML MIME 유형으로 설정을 사용하지 마십시오.
refresh

이 지시문은 다음을 지정합니다.

content 속성에 양의 정수만 포함된 경우 페이지를 다시 로드하는 데 걸리는 시간(초)을 나타냅니다.
콘텐츠 속성에 양의 정수가 포함되고 그 뒤에 문자열 ';이 오면 현재 페이지가 XX초 안에 다른 유효한 URL로 리디렉션된다는 의미입니다.

robots

로봇은 크롤러에게 색인을 생성해야 하는 페이지와 색인을 생성할 필요가 없는 페이지를 알려주는 데 사용됩니다. ㅋㅋㅋ 이 페이지에서 다른 웹 페이지 색인 검색(기본값) 모두

nofollow 검색 엔진은 이 웹 페이지의 링크 색인을 통해 다른 웹 페이지를 계속 검색하지 않습니다. All

none noindex와 동일, nofollow Google

noodp 오픈 디렉토리 프로젝트 설명(있는 경우)을 페이지로 사용하는 것이 금지됩니다. 검색 엔진 결과에 대한 설명입니다. Google, Yahoo, Bing

noarchive 검색 엔진이 페이지 콘텐츠를 캐시하지 않도록 요구합니다. Google, Yahoo, Bing

nosnippet 페이지에 대한 설명이 검색 엔진 결과에 표시되는 것을 금지합니다. Google, Bing

noimageindex에서는 이 페이지가 참조 페이지에 대한 색인 이미지로 표시되지 않도록 요구합니다. noarchive Bing

viewport

과 동의어인 Google

nocache는 뷰포트의 초기 크기에 대한 힌트를 제공합니다. 모바일 전용입니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

HTML 웹 페이지에 비디오를 삽입하는 방법

HTML 텍스트 상자를 읽기 전용 효과로 만드는 방법

프런트 엔드 인터페이스가 자동으로 캐시를 지우도록 만드는 방법 js 및 CSS 파일

위 내용은 HTML5 WEB 인터페이스의 메타 열에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!