HTML의 메타 태그는 무엇입니까? 어떤 속성이 있나요?

HTML에서 메타는 "메타"를 의미합니다. 헤드 영역에 있는 보조 태그로, 내용을 포함하지 않으며 검색 엔진에 대한 설명, 키워드, 업데이트 빈도 등 페이지에 대한 메타 정보를 제공하는 데 사용됩니다. 메타 태그의 속성은 문서와 관련된 이름/값 쌍을 정의합니다.

HTML의 메타 태그는 헤드 영역의 보조 태그로 일반적으로 페이지 설명, 키워드 및 기타 메타데이터에 사용됩니다. 이러한 데이터는 브라우저, 검색 엔진 등에 사용됩니다. 이름 속성, http-equiv 속성, 콘텐츠 속성, 스키마 속성이 있습니다.

프론트엔드를 학습하는 과정에서 메타 태그에 대한 이해는 대부분 입니다. 웹사이트를 열면 이 문장을 보게 되지만, 우리는 메타에 대해 그다지 익숙하지 않습니다. 다음은 이 라벨을 기사에서 자세히 소개할 예정인데, 이는 모두에게 도움이 되기를 바랍니다.

【추천 과정: HTML 튜토리얼】

메타 태그 소개

meta 태그는 HTML 언어 헤드 영역의 보조 태그로, 페이지 설명, 키워드, 마지막 수정 날짜 및 기타를 정의하는 데 자주 사용됩니다. 메타데이터. 이 메타데이터는 브라우저, 검색 엔진 및 기타 웹 서비스에 제공됩니다.

메타 태그의 구성

meta 태그에는 http-equiv 속성과 name 속성이라는 두 가지 속성이 있습니다.

name 속성

name 속성은 주로 웹페이지의 키워드, 서사 등 웹페이지를 설명하는 데 사용됩니다. 해당 속성 값은 content입니다. content의 콘텐츠는 검색 엔진이 크롤링하는 데 편리한 이름 입력 유형에 대한 구체적인 설명입니다.

메타 태그의 이름 속성 구문 형식은 다음과 같습니다.

<meta name="参数" content="具体的描述">

이름 속성에는 다음 매개변수가 있습니다. (A-C는 공통 속성입니다)

(1) 키워드(키워드)

설명: 검색 엔진에 웹 페이지의 키워드를 알리는 데 사용됩니다. 예:

<meta name="keywords" content="PHP中文网">

(2) 설명(웹사이트 콘텐츠 설명)

설명: 검색 엔진에 웹사이트의 주요 콘텐츠를 알리는 데 사용됩니다. 예:

<meta name="description" content="php中文网提供大量免费、原创、高清的php视频教程">

(3) 뷰포트(모바일 터미널 창)

설명: 이 개념은 비교적 복잡하므로 다음 블로그 게시물에서 자세히 설명하겠습니다. 이 속성은 모바일 웹페이지를 디자인할 때 자주 사용됩니다. bootstrap, AmazeUI 등의 프레임워크를 사용할 때 뷰포트를 사용했습니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

(4) 로봇(검색 엔진 크롤러의 색인 생성 방법 정의)

설명: 로봇은 크롤러에게 색인을 생성해야 하는 페이지와 색인을 생성할 필요가 없는 페이지를 알려주는 데 사용됩니다. 콘텐츠의 매개변수에는 all, none, index, noindex, follow, nofollow가 포함됩니다. 기본값은 모두입니다.

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

특정 매개변수는 다음과 같습니다:

1. 없음: 검색 엔진은 이 웹 페이지를 무시하며 이는 noindex 및 nofollow와 동일합니다.
2. noindex: 검색 엔진은 이 페이지를 색인화하지 않습니다.
3. nofollow: 검색 엔진은 이 웹 페이지의 링크 색인을 통해 다른 웹 페이지를 계속 검색하지 않습니다.
4. 모두: 검색 엔진은 이 웹페이지를 색인화하고 이 웹페이지를 통해 링크를 계속 색인화합니다. 이는 색인화 및 팔로우와 동일합니다.
5. 색인: 검색 엔진이 이 웹페이지의 색인을 생성합니다.
6. 팔로우: 검색 엔진은 이 웹 페이지의 링크 색인을 통해 다른 웹 페이지를 계속 검색합니다.

(5) 작성자(author)

설명: 웹페이지의 작성자를 표시하는 데 사용됩니다. 예:

<meta name="author" content="PHP中文网">

(6) 생성기(웹페이지 제작 소프트웨어)

설명: 웹페이지의 작성자를 표시하는 데 사용됩니다. 웹 페이지를 구성하는 소프트웨어의 예: (이렇게 쓸 수 있는지는 모르겠습니다):

<meta name="generator" content="Sublime Text3">

(7) copyright(저작권)

설명: 저작권 정보를 표시하는 데 사용됩니다. 예:

<meta name="copyright" content="PHP中文网"> //代表该网站为PHP中文网个人版权所有。

(8) revisit-after (검색 엔진 크롤러 재방문 시간 )

참고: 페이지가 자주 업데이트되지 않는 경우 검색 엔진 크롤러로 인해 서버에 가해지는 부담을 줄이기 위해 크롤러 재방문을 설정할 수 있습니다. 시간. 재방문 시간이 너무 짧으면 크롤러는 정의된 기본 시간에 방문합니다. 예:

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

(9) 렌더러(듀얼 코어 브라우저 렌더링 방법)

설명: 렌더러는 듀얼 코어 브라우저용으로 준비되었으며 듀얼 코어 브라우저가 기본적으로 페이지를 렌더링하는 방법을 지정하는 데 사용됩니다. 예를 들어 360 브라우저입니다. 예:

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

http-equiv attribute

http-equiv는 이름에서 알 수 있듯이 HTTP의 역할과 동일합니다.

meta 태그의 http-equiv 속성 구문 형식은 다음과 같습니다.

<meta http-equiv="参数" content="具体的描述">

http-equiv 속성은 주로 다음 매개변수를 갖습니다.

(1) content-Type(웹페이지 문자 집합 설정)( HTML5 방법을 사용하는 것이 좋습니다. )

설명: 페이지의 브라우저 구문 분석 및 렌더링을 용이하게 하기 위해 웹 페이지 문자 집합을 설정하는 데 사용됩니다. 예:

<meta http-equiv="content-Type" content="text/html;charset=utf-8">  //旧的HTML，不推荐

<meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8

(2): 페이지를 렌더링할 버전을 브라우저에 알리는 데 사용됩니다. . (일반적으로 최신 모드로 설정되며, 이 설정은 주요 프레임워크에서도 매우 일반적입니다.)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

(3) 캐시 제어(요청 및 응답에 따른 캐싱 메커니즘 지정)

설명: 브라우저에 방법을 지시합니다. 캐시 특정 응답 및 캐시 기간

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

共有以下几种用法：

no-cache: 先发送请求，与服务器确认该资源是否被更改，如果未被更改，则使用缓存。

no-store: 不允许缓存，每次都要去服务器上，下载完整的响应。（安全措施）

public : 缓存所有响应，但并非必须。因为max-age也可以做到相同效果

private : 只为单个用户缓存，因此不允许任何中继进行缓存。（比如说CDN就不允许缓存private的响应）

maxage : 表示当前请求开始，该响应在多久内能被缓存和重用，而不去服务器重新请求。例如：max-age=60表示响应可以再缓存和重用 60 秒。

禁止百度自动转码

说明：用于禁止当前页面在移动端浏览时，被百度自动转码。虽然百度的本意是好的，但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话，就可以避免百度自动转码了。

<meta http-equiv="Cache-Control" content="no-siteapp" />

（4）expires(网页到期时间)

说明:用于设定网页的到期时间，过期后网页必须到服务器上重新传输。

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

（5） refresh(自动刷新并指向某页面)

说明：网页将在设定的时间内，自动刷新并调向设定的网址。

<meta http-equiv="refresh" content="2；URL=//m.sbmmt.com/"> //意思是2秒后跳转到PHP中文网

（6） Set-Cookie(cookie设定)

说明：如果网页过期。那么这个网页存在本地的cookies也会被自动删除。

<meta http-equiv="Set-Cookie" content="name, date"> //格式
<meta http-equiv="Set-Cookie" content="User=Lxxyx; path=/; expires=Sunday, 10-Jan-16 10:00:00 GMT"> //具体范例

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 标签的 profile 属性指定的概况文件中进行了定义。

总结：meta标签的自定义属性实在太多了。所以只总结了一些常用的，希望对大家有所帮助。

위 내용은 HTML의 메타 태그는 무엇입니까? 어떤 속성이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!