html 메타태그 사용 및 속성에 대한 상세한 분석

이 기사는 html 메타 태그의 사용 및 속성에 대한 자세한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

프런트엔드를 독학하다보니 스팬, 버튼, h1 등 표시할 수 있는 태그에 주로 집중했어요. 가끔 유명 웹사이트의 소스코드를 확인하다 보면 head 태그에서 메타가 많이 발견되기도 합니다.

오늘은 메타의 사용법을 배우고 그것이 어떤 속성을 가지고 있는지 살펴보겠습니다.

1. 정의 및 기능

메타, 즉 메타데이터(Metadata)는 데이터의 데이터 정보입니다.

이 태그는 HTML 문서의 메타데이터를 제공합니다. 메타데이터는 클라이언트에 표시되지 않지만 브라우저에서 구문 분석됩니다.

일반적으로 웹 페이지의 설명, 키워드, 파일의 마지막 수정 시간, 작성자 및 기타 메타데이터를 지정하는 데 사용됩니다.

메타데이터는 브라우저(콘텐츠가 표시되거나 페이지가 다시 로드되는 방식), 검색 엔진(키워드) 또는 기타 웹 서비스를 사용하여 호출할 수 있습니다.

2. 속성

charset(htm5의 새로운 기능)	문서의 문자 인코딩을 정의합니다
content	http-equiv 또는 name 속성과 관련된 메타 정보를 정의합니다.
http-equiv	http 응답 헤더
name	속성 이름
scheme (htm5 obsolete)	콘텐츠 속성의 값을 변환하는 방식

1.charset

HTML5 새 속성은 현재 페이지의 문자 인코딩을 정의합니다

새 쓰기 방법:

<meta charset="UTF-8">

기존 쓰기 방법:

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

새 쓰기 방법은 HTML5

2에서 선호됩니다. a, 키워드, 현재 웹 페이지의 키워드는 검색 엔진이 쉽게 식별하고 검색 정확도를 높일 수 있습니다.

<meta name="keywords" content="cdn，网络加速，运营商">

b, 설명, 현재 웹 페이지에 대한 간단한 설명 바이두를 사용하여 검색하면 설명 내용이 표시됩니다. 사용자의 편의를 위해 검색결과의 각 제목 아래에 표시됩니다.

<meta name="description" content="本公司专注提供CDN网络加速，同时也提供云计算服务">

c, 뷰포트를 빠르게 찾으세요. 이 메타는 다소 복잡하며 주로 모바일 웹페이지에서 사용되므로 별도의 글로 작성해야 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

d, robots, 검색엔진 크롤러의 색인 방식

<meta name="robots" content="none">

content 값은 all, none, index, noindex, follow, nofollow를 포함하며, 기본값은 all입니다. 표에 표시됨:

allnoneindexnoindexfollownofollowe, 작성자, 문서 작성자

문서를 색인화할 수 있으며 문서의 링크를 쿼리할 수 있습니다
문서를 색인화할 수 없으며 문서의 링크를 쿼리할 수 없습니다
문서를 색인화할 수 있습니다
문서를 색인화할 수 없지만 문서의 링크를 쿼리할 수 있습니다
문서의 링크를 쿼리할 수 있습니다
문서는 색인화할 수 있지만 문서의 링크는 쿼리할 수 없습니다.

<meta name="author" content="liuhw，liuhuansir@126.com">

f, copyright , 문서의 저작권 설명

<meta name="copyright" content="liuhw">

g , revisit-after, 검색 엔진 크롤러가 다시 방문하는 시간 간격입니다. 웹 사이트가 자주 업데이트되지 않는 경우 이 시간을 약간 더 길게 설정하면 서버에 대한 부담을 약간 줄일 수 있습니다.

<meta name="revisit-after" content="5 days" >

h, 렌더러. , 듀얼 코어 브라우저의 렌더링 방법은 기본적으로 렌더링에 사용되는 브라우저 코어를 지정합니다. 예를 들어 360 브라우저:

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

3, http-equiv

는 http에서 헤더를 시뮬레이션하고, 일부 정보를 다음으로 다시 보냅니다. 서버

a, 만료, 웹 페이지 만료 시간, 만료 후 서버

<meta http-equiv="expires" content="Sunday 26 October 2018 01:00 GMT" />

b를 다시 방문해야 함, pragma(http1.0, 1.1과 호환 가능), 캐시 제어(http1.1의 새로운 기능) ), 캐시 방법을 설정하려면 캐시 제어를 사용하는 것이 좋습니다. 이 속성의 내용은 캐시 제어

<meta http-equiv="cache-control" content="no-cache">

c를 참조하고 http에서 새로 고치면 자동으로 새로 고쳐지고 선언된 URL로 이동합니다. content. 호환 가능, 문서를 렌더링하는 데 사용할 버전을 브라우저에 알려주십시오

<meta http-equiv="refresh" content="5；URL=http://www.liuhw.club/"> //5秒后跳转向我自己的域名

요약하자면 위는 단지 목록일 뿐입니다. 일반적으로 사용되는 속성이 나열되어 있지 않은 경우 사용해야 할 때 문서를 확인하세요

[관련 권장 사항:

HTML5 비디오 튜토리얼

]

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