이번에는 HTML에서 헤더 구조를 사용하는 방법과 HTML에서 헤더 구조를 사용할 때 주의사항에 대해 알려드리겠습니다.
다음은 일반적으로 사용되는 헤드 구조와 각 태그 및 요소의 의미 및 사용 시나리오를 소개합니다(이 기사는 마스터의 기사를 기반으로 하며 확장된 요약입니다).
padding.me의 헤더 구조
다음과 같이 코드를 복사하세요.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
<meta name="keywords" content="PaddingMe,front-end,前端,前端工程师,web开发工程师,HTML,CSS,JavaScript,HTML5,CSS3,git,Github">
<meta name="description" content="PaddingMe - he is a front-end developer.">
<meta name="robots" content="index,follow">
<meta name="author" content="PaddingMe,padding4me@gmail.com"></p>< p> <meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta></p>< p> <meta http-equiv="Cache-Control" content="no-siteapp"></p>< p> <title>PaddingMe</title>
<link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"></p>< p> <link rel="author" href="<a href="https://plus.google.com/u/1/105241873904238310190/?rel=author">https://plus.google.com/u/1/105241873904238310190/?rel=author</a>">
<link type="text/plain" rel="author" href="<a href="http://padding.me/humans.txt">http://padding.me/humans.txt</a>" /></p>< p> <link rel="stylesheet" href="/css/screen.css">
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/social.css">
<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<a href="http://feeds.feedburner.com/paddingme">http://feeds.feedburner.com/paddingme</a>" />
</head>로그인 후 복사
DOCTYPE(Document Type), 이 문은 문서의 가장 앞쪽에 위치하며, html 태그 앞에 이 태그가 알려줍니다. 어떤 HTML 또는 XHTML 사양을 사용할 문서의 브라우저입니다.
DTD(문서 유형 정의) 선언은 으로 시작하고 대소문자를 구분하지 않으며 앞에 내용이 없습니다(공백 제외). 브라우저는 IE에서 특수 모드 렌더링을 활성화합니다. 웹페이지. Public DTD, 이름 형식은 "등록 // 조직 // 유형 태그 // 언어"입니다. "등록"은 조직이 국제 표준화 기구(ISO)에 등록되었는지 여부를 나타내며 +는 예, -는 아니요를 의미합니다. "조직"은 다음과 같은 조직의 이름입니다. "유형"은 일반적으로 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는 보다 간결한 쓰기 기능을 도입했으며, 이는 전방 및 후방 호환이 가능하며 사용을 권장합니다.
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">
로그인 후 복사
이 두 가지는 동일합니다. 단계별로: http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type이므로 더 쉽게 사용할 수 있도록 더 짧은 것을 사용하는 것이 좋습니다. 기억하다.
lang 속성
중국어 간체
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
로그인 후 복사
로그인 후 복사
중국어 번체
<html> <!-- 更加标准的 lang 属性写法 <http://zhi.hu/XyIa> -->
로그인 후 복사
로그인 후 복사
일반적으로 지역별 중국어 사용 차이를 강조하기 위해 지역 코드를 추가할 필요가 거의 없습니다. 예:
<p>
<strong>菠萝</strong>和<strong>鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong>黄梨</strong>。
</p>로그인 후 복사
http로 이동하세요. : //zhi.hu/XyIa
최신 버전의 IE와 Chrome을 우선적으로 사용하세요
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
로그인 후 복사
360 Google Chrome Frame 사용
<meta name="renderer" content="webkit">
로그인 후 복사
360 브라우저는 이 태그를 읽은 후 즉시 해당 초고속 코어로 전환됩니다.
또한, 안전을 위해
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
로그인 후 복사
를 추가하세요. 이렇게 작성하면 얻을 수 있는 효과는 Chrome 프레임이 설치되어 있으면 GCF가 설치되지 않은 경우 GCF를 사용하여 페이지를 렌더링한다는 것입니다. IE 커널의 가장 높은 버전이 렌더링에 사용됩니다.
관련 링크: 브라우저 커널 제어 메타 태그 문서
바이두는 트랜스코딩을 금지합니다
바이두 휴대폰을 통해 웹페이지를 열면 바이두가 웹페이지를 트랜스코딩하고, 옷을 벗고, 몸에 개 피부 반창고를 붙일 수 있습니다. 헤드에
<meta http-equiv="Cache-Control" content="no-siteapp" />
로그인 후 복사
추가 가능
<title>your title</title>
로그인 후 복사
웹 페이지 작성자 작성자 정의
<meta name="keywords" content="your keywords">
로그인 후 복사
<meta name="description" content="your description">
로그인 후 복사
관련 링크: WEB1038 - 태그에 잘못된 값이 포함되어 있습니다.
viewport
viewport를 사용하면 모바일 브라우저에서 레이아웃을 더 잘 표시할 수 있습니다.
일반적으로
<meta name="author" content="author,email address">
로그인 후 복사
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
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" /> <!-- 禁止数字识自动别为电话号码 -->
로그인 후 복사
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
在HTML的列表中，dl(dt,dd)、ul(li)、ol(li) 有什么不同
html怎样使用超链接打开新窗口并且控制该窗口属性
HTML的head头标签有哪些用法
위 내용은 HTML에서 헤더 구조를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
