html 헤드 헤더 태그
HTML 헤드 부분에는 브라우저의 웹 페이지 렌더링, SEO 등을 수반하는 많은 태그와 요소가 있으며 각 브라우저 커널과 각 국내 브라우저 제조업체는 자체 태그 요소를 가지고 있어 결과적으로 많은 결과가 발생합니다. 차이점. 모바일 인터넷 시대에는 모바일 단말기의 헤드 구조와 메타 요소가 더욱 중요해졌습니다. 각 태그의 의미를 이해하고 자신의 필요에 맞는 head 태그를 작성하는 것이 이 글의 목적입니다. 이 기사는 Yishi의 기사를 기반으로 하며 일반적으로 사용되는 헤드의 각 태그와 요소의 의미와 사용 시나리오를 소개하는 확장된 요약을 제공합니다.
DOCTYPE
DOCTYPE(문서 유형), 이 선언은 문서 맨 앞, html 태그 앞에 위치합니다. 이 태그는 문서가 사용하는 HTML 또는 XHTML 사양을 브라우저에 알려줍니다.
DTD(Document Type Definition) 선언은 으로 시작하고 대소문자를 구분하지 않으며 앞에 내용이 없습니다(공백 제외). IE의 모드(쿼크 모드)는 웹 페이지를 렌더링합니다. Public DTD, 이름 형식은 등록 // 조직 // 유형 태그 // 언어, 등록은 해당 조직이 국제 표준화 기구(ISO)에 등록되었는지 여부를 나타내며 +는 예, -는 아니오를 의미합니다. 조직은 조직의 이름입니다(예: W3C). 유형은 일반적으로 DTD입니다. 태그는 공개 텍스트에 대한 설명, 즉 버전 번호가 뒤에 올 수 있는 참조된 공개 텍스트에 대한 고유한 설명 이름을 지정합니다. 최종 언어는 DTD 언어의 ISO 639 언어 식별자입니다(예: 영어의 경우 EN, 중국어의 경우 ZH). XHTML 1.0은 세 가지 DTD 유형을 선언할 수 있습니다. 엄격한 버전, 전환 버전, 프레임 기반 HTML 문서를 각각 나타냅니다.
HTML 4.01 strict
<!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 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
최신 HTML5에서는 더욱 간결한 글쓰기가 도입되었습니다. 순방향 및 역방향 호환이 가능하며 권장됩니다.
<!doctype html>
doctype은 HTML에서 두 가지 주요 목적을 가지고 있습니다.
문서의 유효성을 확인하세요.
이 문서가 어떤 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 사용을 선호합니다
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
360 Chrome 프레임 사용
<meta name="renderer" content="webkit">
360 브라우저는 다음을 읽습니다. 이 라벨에 도달하면 즉시 해당 속도 코어로 전환하십시오. 그리고 보험을 위해
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
을 추가해 줍니다. 이렇게 작성하면 얻을 수 있는 효과는 Google Chrome Frame이 설치되어 있으면 GCF를 사용하여 페이지를 렌더링한다는 것입니다. 설치되지 않은 경우 IE 커널의 가장 높은 버전이 렌더링에 사용됩니다.
관련 링크: 브라우저 커널 제어 메타 태그 문서
Baidu는 트랜스코딩을 금지합니다
Baidu 휴대폰을 통해 웹페이지를 열면 Baidu가 웹페이지를 트랜스코딩할 수 있으며, 옷을 벗을 수 있습니다. 이를 위해 머리에
<meta http-equiv="Cache-Control" content="no-siteapp" />
을 추가할 수 있습니다. 관련 링크: 사이트앱 트랜스코딩 설명
SEO 최적화 섹션
페이지 제목
<title>your title</title>
페이지 키워드 키워드
<meta name="keywords" content="your keywords">
페이지 설명 콘텐츠 설명
<meta name="description" content="your description">
웹 페이지 작성자
<meta name="author" content="author,email address">
웹 검색 엔진 색인 방법을 정의합니다. Robotterms는 영어 쉼표 ","로 구분된 값 집합입니다. 일반적으로 none, noindex, nofollow, all 값을 갖습니다. , 색인을 생성하고 따라갑니다.
<meta name="robots" content="index,follow">
관련 링크: 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)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增属性,可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:
<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
适配 iPhone 6 和 iPhone 6plus 则需要写:
<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。
ios 设备
添加到主屏后的标题(iOS 6 新增)
<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" 时生效
content 参数:
default 默认值。
black 状态栏背景是黑色。
black-translucent 状态栏背景是黑色半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕,顶部会被状态栏遮挡。
禁止数字识自动别为电话号码
<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 参考文章:http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/
iPad 的启动画面是不包括状态栏区域的。
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 (标准分辨率)
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> <!-- 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
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
移动端的meta
<meta name="renderer" content="webkit">
这是来自 toobug 的分享总结。
更多的 meta 标签参考
COMPLETE LIST OF HTML META TAGS
18 Meta Tags Every Webpage Should Have in 2013
参考文章:
常用的 HTML 头部标签
html5_header
amazeui css
DOCTYPE
WEB 工程师和设计师必学的 10 个 IOS 8 新鲜改变

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
