HTML에서 헤더 구조를 사용하는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에서 헤더 구조를 사용하는 방법

php中世界最好的语言

Jan 26, 2018 am 10:23 AM

headhtml어떻게

이번에는 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는 보다 간결한 쓰기 기능을 도입했으며, 이는 전방 및 후방 호환이 가능하며 사용을 권장합니다.

<!doctype html>

HTML의 doctype에는 두 가지 주요 목적이 있습니다.
•서류의 유효성을 확인하세요.
이 문서가 어떤 DTD에 따라 작성되었는지 사용자 에이전트와 검증자에게 알려줍니다. 이 작업은 페이지가 로드될 때마다 브라우저가 DTD를 다운로드하지 않고 페이지가 수동으로 확인되는 경우에만 활성화됩니다.
•브라우저의 렌더링 모드 결정
실제 작업을 위해 문서를 읽을 때 사용할 구문 분석 알고리즘을 브라우저에 알려줍니다. 작성되지 않으면 브라우저는 자체 규칙에 따라 코드를 구문 분석하므로 HTML 레이아웃에 심각한 영향을 미칠 수 있습니다. 브라우저에는 HTML 문서를 구문 분석하는 세 가지 방법이 있습니다.

◦ 비이상함(표준) 모드
◦ 이상함 모드
◦ 부분적으로 이상함(거의 표준) 모드
IE 브라우저 의 문서 모드, 브라우저 모드, 엄격 모드, 이상 모드, DOCTYPE 태그, 상세 읽기 모드에 대해 ? 기준! , 그리고 박스 모델.

charset

문서에 사용된 문자 인코딩을 선언합니다.

다음과 같이 코드를 복사합니다.

<meta charset=&#39;utf-8&#39;>

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中文网其它相关文章！

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

Dreamweaver Mac版

시각적 웹 개발 도구

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는