>  기사  >  웹 프론트엔드  >  HTML 메타태그의 역할은 무엇인가요? HTML 메타 태그 사용 소개

HTML 메타태그의 역할은 무엇인가요? HTML 메타 태그 사용 소개

寻∝梦
寻∝梦원래의
2018-08-27 18:44:583749검색

이 글에서는 HTML 메타 태그의 역할과 사용 방법을 소개합니다. 또한 이러한 코드를 직접 여러 번 연습해 볼 수 있기를 바랍니다. 마지막으로 여러 가지 방법도 소개합니다. 유명 웹사이트의 HTML 메타 태그 사용.

먼저 메타 태그의 역할에 대해 이야기해 보겠습니다.

메타 태그는 HTML 마크업의 헤드 영역에 있는 핵심 태그입니다. ; HTML 문서(일부는 93f0f5c25f18dab9d176bd4f6de5d30e와 b2386ffb911b14667cb8f0f91ea547a7 사이에 없음) 제공되는 정보는 사용자에게는 보이지 않지만 문서의 가장 기본적인 정보입니다. 문서 문자 집합, 언어 및 작성자와 같은 기본 정보를 제공하는 것 외에도 HTMLe8e496c15ba93d81f6ea4fe5f55a2244에는 키워드 및 웹 페이지 수준 설정도 포함됩니다.

w3school을 확인했을 때 첫 문장의 "메타데이터"가 Google 여행을 시작하게 만들었습니다. 그러다가 영어 버전의 w3school에서 원하는 결과를 성공적으로 찾았습니다. (중국어 w3school은 메타정보를 말하는 것으로, 구글이나 바이두 모두 관련 항목이 없습니다. 다만 메타데이터는 구글에 자세히 설명되어 있으므로 여기서는 W3school 영어판 설명을 사용합니다.)

보기 어렵지 않습니다. 키는 메타데이터이고 중국어 이름은 메타데이터이며 데이터를 설명하는 데 사용되는 데이터입니다. 페이지에는 표시되지 않지만 기계는 이를 인식합니다. 이런 식으로 메타태그의 기능을 이해하기 쉽습니다.

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

HTML에서 메타 태그 사용 소개:

<head>
<! - 声明文档使用的字符编码 - >
<meta charset =“utf-8”/>
<! - 页面关键词 - > 
<meta name =“keywords”content =“个人活动发布,会办app,活动管理,会议管理,社群管理“/> 
<! - 页面描述 - > 
<meta name =”description“content =”发布个人会议,发布公司会议,w我们都可以帮你找到合适的会议地点和参会观众“> 
<! - 网页作者 - > 
<meta name =”author“content =”xin1642868874@163.com“> 
<! - 搜索引擎抓取robotterms是一组使用逗号(, )分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。 - > 
<meta name =“机器人“content =”索引,按照“> 
<! - 页面重定向和刷新 - > 
<meta http-equiv =”refresh“content =”0; url =“/> 
<! - 禁止Chrome浏览器中自动提示翻译 - > 
<meta name =“google”value =“notranslate”> 
<! - - 禁止百度转码 - > 
<meta http-equiv =“Cache-Control”content =“no-siteapp”> 
<! - 自定义标签:app版本号说明 - > 
<meta name =“app-version”content =“1.13.3”> 
<title>php中文网</title> 
</head>

위는 모두 HTML 메타 태그의 역할과 사용에 대한 것이며 많은 속성이 있지만 아직 우리가 이것을 배우기에는 조금 이르습니다.

여러 유명 웹사이트 홈페이지의 메타 파일을 공유해 보겠습니다.

JD.com 홈페이지의 메타 설정:

<meta charset="gbk">
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!">
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东">

타오바오 홈페이지의 메타 설정:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台,提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品,同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务,让你全面安心享受网上购物乐趣!">
<meta name="keyword" content="">

의 메타 설정 Youku 홈페이지:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

위에서 설명한 것 외에도 메타 태그에서 일반적으로 사용되는 속성이기도 한 보충입니다.

X-UA-Compatible IE8의 특수 태그로, IE8 브라우저를 지정하여 렌더링을 시뮬레이션하는 데 사용됩니다. 일부 호환성 문제를 해결하기 위한 특정 버전의 IE 브라우저 방식입니다.

<meta http-equiv="X-UA-Compatible" content="IE=7">

위 코드는 문서 표준을 선언하는 데 DTD가 사용되는지 여부에 관계없이 IE8/9가 IE7 엔진을 사용하여 페이지를 렌더링한다는 것을 IE 브라우저에 알려줍니다.

대규모 웹사이트의 메타 설정을 보면 일반적으로 사용되는 세 가지가 X-UA 호환, 키워드, 설명임을 알 수 있습니다.

【에디터 추천】

HTML에서 head 태그는 무엇을 의미하나요? 헤드 태그를 올바르게 사용하는 방법을 알려주는 기사가 있습니다

해커는 PHP나 Python을 배워야 할까요? PHP와 Python의 10가지 차이점에 대한 합리적인 분석

위 내용은 HTML 메타태그의 역할은 무엇인가요? HTML 메타 태그 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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