이번에는 HTML head 태그 사용법과 HTML head 태그 사용 시 주의사항 에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.
HTML 헤드 헤드 부분에는 브라우저의 웹 페이지 렌더링, SEO 등과 관련된 많은 태그와 요소가 있습니다. 각 브라우저 커널과 국내 브라우저 제조업체마다 고유한 태그 요소가 있으므로 많은 차이가 발생합니다. 모바일 인터넷 시대에는 모바일 단말기의 헤드구조와 메타요소가 더욱 중요해졌습니다. 각 태그의 의미를 이해하고 자신의 필요에 맞는 head 태그를 작성하는 것이 이 글의 목적입니다. 이 기사는 Yishi의 기사를 기반으로 하며 일반적으로 사용되는 헤드의 각 태그와 요소의 의미와 사용 시나리오를 소개하는 확장된 요약을 제공합니다. Document 유형), 이 선언은 문서 맨 앞, html 태그 앞에 위치합니다. 이 태그는 문서가 사용하는 HTML 또는 XHTML 사양을 브라우저에 알려줍니다. XML/HTML 클립보드에 콘텐츠 코드 복사
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 로그인 후 복사
●HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 로그인 후 복사
●HTML 4.01 프레임셋
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 로그인 후 복사
●최신 HTML5에서는 보다 간결한 글쓰기가 도입되어 미래 지향적입니다. 이전 버전과 호환되며 권장됩니다.
HTML의 doctype에는 두 가지 주요 목적이 있습니다.
●서류의 유효성을 확인하세요.
이 문서가 어떤 DTD에 따라 작성되었는지 사용자 에이전트와 유효성 검사기에 알려줍니다. 이 작업은 페이지가 로드될 때마다 브라우저가 DTD를 다운로드하지 않고 페이지가 수동으로 확인되는 경우에만 활성화됩니다.
●브라우저의 렌더링 모드 결정
실제 작업을 위해서는 문서를 읽을 때 어떤 파싱 알고리즘을 사용할지 브라우저에 알려주세요. 작성되지 않으면 브라우저는 자체 규칙에 따라 코드를 구문 분석하므로 HTML 레이아웃에 심각한 영향을 미칠 수 있습니다. 브라우저에는 HTML 문서를 구문 분석하는 세 가지 방법이 있습니다.
●비이상(표준) 모드 IE 브라우저 의 문서 모드, 브라우저 모드, 엄격 모드, 이상한 모드, DOCTYPE 태그, 상세 읽기 모드에 대해서요? 기준! 콘텐츠.
charset
문서에 사용된 문자 인코딩을 선언합니다.
<meta charset="utf-8"> 로그인 후 복사
html5 이전 웹 페이지는 다음과 같이 작성합니다:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 로그인 후 복사
이 두 가지는 동일합니다. 더 구체적으로 읽을 수 있습니다:
최신 버전의 IE와 Chrome을 우선적으로 사용하세요
<html lang="zh-cmn-Hans"> 로그인 후 복사
360 Google Chrome 프레임을 사용하세요
<html lang="zh-cmn-Hant"> 로그인 후 복사
360 이 태그를 읽은 후 브라우저는 즉시 해당 속도 코어로 전환합니다. 그리고 안전을 위해
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 로그인 후 복사
를 추가해 주세요. 이렇게 작성하면 얻을 수 있는 효과는 Google Chrome Frame이 설치되어 있으면 GCF를 사용하여 페이지를 렌더링하는 것입니다. GCF가 설치되어 있지 않으면 최상위 버전입니다. IE 커널 중 하나가 렌더링에 사용됩니다.
관련 링크: 브라우저 커널 제어 메타 태그 문서
바이두는 트랜스코딩을 금지합니다
바이두 휴대폰으로 웹페이지를 열면 바이두가 웹페이지를 트랜스코딩한 후 옷을 벗고 몸에 붙일 수 있습니다. 강아지 피부 반창고의 경우 광고의 경우 헤드에
<meta name="renderer" content="webkit"> 로그인 후 복사
를 추가할 수 있습니다. 관련 링크: SiteApp 트랜스코딩 구문
SEO 최적화 부분
페이지 제목 <제목> 태그(헤드 헤더 필수)
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 로그인 후 복사
페이지 키워드 키워드
<meta http-equiv="Cache-Control" content="no-siteapp" /> 로그인 후 복사
페이지 설명 내용 Description
<title>your title</title> 로그인 후 복사
웹 페이지 작성자 작성자 정의
<meta name="keywords" content="your keywords"> 로그인 후 복사
웹 검색 엔진 색인 방법을 정의합니다. Robotterms는 영어 쉼표 ","로 구분된 값 집합입니다. 일반적으로 none, noindex, nofollow, all, 색인을 만들고 따라가세요.
<meta name="description" content="your description"> 로그인 후 복사
관련 링크: WEB1038 - 태그에 잘못된 값이 포함되어 있습니다.
viewport
viewport 可以让布局在移动浏览器上显示的更好。 通常会写
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 로그인 후 복사
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)
content 参数：
width viewport 宽度(数值/device-width)
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"> 로그인 후 복사
而如果你的网站不是响应式的，请不要使用 initial-scale 或者禁用缩放。
<meta name="viewport" content="width=device-width,user-scalable=yes"> 로그인 후 복사
相关链接：非响应式设计的viewport
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414"> 로그인 후 복사
大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px，iPhone 6 上却是 375px，大部分 5.5 寸安卓机器（比如说三星 Note）的 viewport 宽为 400，iPhone 6 plus 上是 414px。
<meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） --> 로그인 후 복사
是否启用 WebApp 全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 是否启用 WebApp 全屏模式 --> 로그인 후 복사
设置状态栏的背景颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 --> 로그인 후 복사
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
<meta name="format-detection" content="telephone=no" /> <!-- 禁止数字识自动别为电话号码 --> 로그인 후 복사
iOS 图标
rel 参数： apple-touch-icon 图片自动处理成圆角和高光等效果。 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 iPhone 和 iTouch，默认 57x57 像素，必须有
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --> 로그인 후 복사
iPad，72x72 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /> <!-- iPad，72x72 像素，可以没有，但推荐有 --> 로그인 후 복사
Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --> 로그인 후 복사
Retina iPad，144x144 像素，可以没有，但推荐有
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> <!-- Retina iPad，144x144 像素，可以没有，但推荐有 --> 로그인 후 복사
IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。 适配iPhone 6 plus，则需要在中加上这段
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"> 로그인 후 복사
iOS 启动画面https:// developer.apple.com/library/ios/qa/qa1686/_index.html
iPad 竖屏 768 x 1004（标准分辨率）
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> <!-- iPad 竖屏 768 x 1004（标准分辨率） --> 로그인 후 복사
iPad 竖屏 1536x2008（Retina）
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> <!-- iPad 竖屏 1536x2008（Retina） --> 로그인 후 복사
iPad 横屏 1024x748（标准分辨率）
复制代码代码如下:
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> <!-- iPad 横屏 1024x748（标准分辨率） --> 로그인 후 복사
iPad 横屏 2048x1496（Retina）
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> <!-- iPad 横屏 2048x1496（Retina） --> 로그인 후 복사
iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
iPhone/iPod Touch 竖屏 640x960 (Retina)
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --> 로그인 후 복사
iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --> 로그인 후 복사
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --> 로그인 후 복사
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)"> 로그인 후 복사
Windows 8
复制代码代码如下:
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 --> 로그인 후 복사
Windows 8 磁贴图标
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 --> 로그인 후 복사
rss订阅
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->
favicon icon 로그인 후 복사
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon --> 로그인 후 복사
比较详细的 favicon 介绍可参考https://github.com/audreyr/favicon-cheat-sheet
로그인 후 복사
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
html怎样使用style添加属性
a标签href属性与onclick事件应该如何使用
html文件中include文件内容应该如何使用
위 내용은 HTML head 태그의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
