HTML 헤드헤더 태그_HTML/Xhtml_웹페이지 제작 상세 소개

HTML 헤드 부분에는 웹 페이지의 브라우저 렌더링, SEO 등을 포함하는 많은 태그와 요소가 있습니다. 각 브라우저 코어와 국내 브라우저 제조업체마다 고유한 태그 요소가 있으므로 많은 차이가 있습니다. 모바일 인터넷 시대에는 모바일 단말기의 헤드 구조와 메타 요소가 더욱 중요해졌습니다. 각 태그의 의미를 이해하고 자신의 필요에 맞는 head 태그를 작성하는 것이 이 글의 목적입니다. 이 기사는 Yishi의 기사를 기반으로 하며 일반적으로 사용되는 헤드의 각 태그와 요소의 의미와 사용 시나리오를 소개하는 확장된 요약을 제공합니다.

DOCTYPE

DOCTYPE(문서 유형), 이 선언은 문서의 가장 앞쪽, html 태그 앞에 위치합니다. 이 태그는 브라우저에 어떤 종류의 문서인지 알려줍니다. 또는 문서가 사용하는 HTML.

DTD(Document Type Definition) 선언은 으로 시작하고 대소문자를 구분하지 않으며 앞에 내용이 없습니다(공백 제외). IE의 모드(쿼크 모드)는 웹 페이지를 렌더링합니다. Public DTD, 이름 형식은 등록 // 조직 // 유형 태그 // 언어입니다. 등록은 조직이 국제 표준화 기구(ISO)에 등록되었는지 여부를 나타내며 예는 아니요, - 아니요를 나타냅니다. 조직은 조직의 이름입니다(예: W3C). 유형은 일반적으로 DTD입니다. 태그는 공개 텍스트에 대한 설명, 즉 버전 번호가 뒤에 올 수 있는 참조된 공개 텍스트에 대한 고유한 설명 이름을 지정합니다. 최종 언어는 DTD 언어의 ISO 639 언어 식별자입니다(예: 영어의 경우 EN, 중국어의 경우 ZH). XHTML 1.0은 세 가지 DTD 유형을 선언할 수 있습니다. 엄격한 버전, 전환 버전, 프레임 기반 HTML 문서를 각각 나타냅니다.

●HTML 4.01 엄격

XML/HTML 코드클립보드에 콘텐츠 복사

1. /span>>

●HTML 4.01 전환

XML/HTML 코드클립보드에 콘텐츠 복사

1. /span>> 

●HTML 4.01 프레임셋

XML/HTML 코드클립보드에 콘텐츠 복사

1. 레임셋//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 

●최신 HTML5에서는 보다 간결한 작성 기능이 도입되어 상위 및 하위 호환이 가능하며 사용을 권장합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. /span>>

HTML doctype에는 두 가지 주요 목적이 있습니다.

●서류의 유효성을 확인하세요.

사용자 에이전트와 검증자에게 이 문서가 어떤 DTD에 따라 작성되었는지 알려줍니다. 이 작업은 페이지가 로드될 때마다 브라우저가 DTD를 다운로드하지 않고 페이지가 수동으로 확인되는 경우에만 활성화됩니다.

●브라우저의 렌더링 모드 결정

실제 작업을 위해서는 문서를 읽을 때 어떤 파싱 알고리즘을 사용할지 브라우저에 알려주세요. 작성되지 않으면 브라우저는 자체 규칙에 따라 코드를 구문 분석하므로 HTML 레이아웃에 심각한 영향을 미칠 수 있습니다. 브라우저에는 HTML 문서를 구문 분석하는 세 가지 방법이 있습니다.

●이상하지 않은(표준) 모드
●이상한 모드
●부분적으로 이상한(거의 표준) 모드 IE 브라우저의 문서 모드, 브라우저 모드, 엄격 모드, 이상한 모드, DOCTYPE 태그에 대해 자세히 알아볼 수 있습니다. 읽기 모드? 기준! 콘텐츠.

문자세트

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

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 문자 집합="utf-8"> 

html5 이전에는 웹페이지가 다음과 같았습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 http-equiv="콘텐츠 유형 " 콘텐츠="text/html; charset=utf-8">

이 둘은 동일합니다. 아래 세부 정보를 읽어보세요. 대 기억하기 쉬운 짧은 단어를 사용하는 것이 좋습니다.

lang 속성

중국어 간체

XML/HTML 코드클립보드에 콘텐츠 복사

1. html lang="zh-cmn-Hans "> 

중국어 번체

XML/HTML 코드클립보드에 콘텐츠 복사

1. html lang="zh-cmn-Hant "> 

우리가 일반적으로 쓰는 lang="zh-CN" 대신 lang="zh-cmn-Hans"가 사용되는 이유는 무엇입니까? 다음을 읽어 보세요. 페이지 상단에 있는 설명을 lang="zh"로 해야 하나요? lang="zh-cn".

최신 버전의 IE와 Chrome을 우선적으로 사용하세요

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 http-equiv="X-UA -호환 가능" 콘텐츠="IE=edge,chrome=1" />

　360 Google 크롬 프레임 사용

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="렌더러" 콘텐츠="webkit">

360 브라우저는 이 태그를 읽은 후 즉시 해당 속도 코어로 전환합니다. 또한, 안전을 위해 가입하세요

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 http-equiv="X-UA -호환 가능" 콘텐츠="IE=Edge,chrome=1">

이렇게 작성하면 얻을 수 있는 효과는 Google Chrome Frame이 설치되어 있으면 GCF를 사용하여 페이지를 렌더링한다는 것입니다. GCF가 설치되어 있지 않으면 IE 커널의 가장 높은 버전을 사용하여 렌더링합니다.

관련 링크: 브라우저 커널 제어 메타 태그 문서

Baidu는 트랜스코딩을 금지합니다

Baidu 휴대폰을 통해 웹페이지를 열면 Baidu에서 웹페이지 트랜스코드를 수정할 수 있습니다. 옷을 벗고 몸에 강아지 피부 반창고 광고를 붙이려면 머리에

를 추가하면 됩니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 http-equiv="캐시 제어 " 콘텐츠="no-siteapp" />

관련 링크: SiteApp 트랜스코딩 설명


SEO 최적화 부분

페이지 제목 )

XML/HTML 코드클립보드에 콘텐츠 복사

1. 제목>제목제목 >

페이지 키워드 키워드

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="키워드" 콘텐츠="키워드">

페이지 설명 내용 설명

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="설명" 콘텐츠="설명">

웹 작성자 작성자 정의

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="저자" 내용="작성자,이메일 주소">

웹 검색 엔진 색인 방법을 정의합니다. Robotterms는 영어 쉼표 ","로 구분된 값 집합입니다. 일반적으로 none, noindex, nofollow, all, index 및 follow 값을 갖습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="로봇" 콘텐츠="index,follow">

관련 링크: WEB1038 - 태그에 잘못된 값이 포함되어 있습니다

뷰포트

　Viewport는 모바일 브라우저에서 레이아웃 표시를 더 좋게 만들 수 있습니다. 보통

을 씁니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1.0">

width=device-width로 인해 iPhone 5가 홈 화면에 추가되고 WebApp 전체 화면 모드로 열릴 때 검은색 테두리가 나타납니다(http://bigc.at/ios-webapp-viewport- 메타.orz )

콘텐츠 매개변수:

너비 뷰포트 너비(숫자 값/장치 너비)
높이 뷰포트 높이(숫자 값/장치 높이)
초기 크기 조정 비율
최대 크기 조정 비율
최소 -scale 최소 확대/축소 비율
user-scalable 사용자 크기 조정 허용 여부(예/아니요)
minimal-ui iOS 7.1 베타 2의 새로운 속성은 페이지가 로드될 때 상단 및 하단 상태 표시줄을 최소화할 수 있습니다. 이는 부울 값이며 다음과 같이 직접 작성할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1,minimal-ui">

웹사이트가 응답하지 않는 경우 초기 크기 조정을 사용하지 않거나 크기 조정을 비활성화하세요.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="뷰포트" 콘텐츠="width=device-width,user-scalable=yes">

관련 링크: 비반응형 디자인의 뷰포트

iPhone 6 및 iPhone 6plus에 적용하려면 다음을 작성해야 합니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="뷰포트" 내용="width=375">
2. 메타 이름="뷰포트" 내용="width=414">

대부분의 4.7~5인치 Android 기기의 뷰포트 너비는 360px로 설정되어 있지만 iPhone 6에서는 375px입니다. 대부분의 5.5인치 Android 기기(Samsung Note 등)의 뷰포트 너비는 400이며, iPhone 6 플러스에서는 414px입니다.

iOS 기기

홈 화면에 제목 추가(iOS 6의 새로운 기능)

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="apple-mobile-web -app-title" 콘텐츠="제목">

WebApp 전체 화면 모드 활성화 여부

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="apple-mobile-web -앱 가능" 콘텐츠="예" />

상태 표시줄 배경색 설정

XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="apple-mobile-web -app-status-bar-style" 콘텐츠="검은색 ​​반투명" /> 

iOS 아이콘

　rel 매개변수: apple-touch-icon 이미지가 자동으로 둥근 모서리와 하이라이트로 처리됩니다. apple-touch-icon-precomposed는 시스템이 자동으로 효과를 추가하는 것을 금지하고 원본 디자인을 직접 표시합니다. iPhone 및 iTouch, 기본 57x57 픽셀, 필수

코드 복사

코드는 다음과 같습니다.

iPad, 72x72픽셀, 선택 사항이지만 권장됨

코드 복사

코드는 다음과 같습니다.

Retina iPhone 및 Retina iTouch, 114x114 픽셀, 선택 사항이지만 권장됨

코드 복사

코드는 다음과 같습니다.

　iOS 아이콘 크기는 iPhone 6 Plus에서는 180×180, iPhone 6에서는 120x120입니다. iPhone 6 plus에 적응하려면 이 단락을 추가해야 합니다

코드 복사

코드는 다음과 같습니다.

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(표준 해상도)

코드 복사

코드는 다음과 같습니다.

iPad 세로 모드 1536x2008(Retina)

코드 복사

코드는 다음과 같습니다.

iPad 가로 1024x748(표준 해상도)

코드 복사

코드는 다음과 같습니다.

iPad 가로 모드 2048x1496(Retina)

코드 복사

코드는 다음과 같습니다.

iPhone 및 iPod touch의 시작 화면에는 상태 표시줄 영역이 포함되어 있습니다.

　iPhone/iPod Touch 세로 화면 320x480(표준 해상도)

코드 복사

코드는 다음과 같습니다.

　iPhone/iPod Touch 세로 화면 640x960(Retina)

코드 복사

코드는 다음과 같습니다.

　iPhone 5/iPod Touch 5 세로 화면 640x1136(Retina)

코드 복사

코드는 다음과 같습니다.

스마트 앱 배너 추가 스마트 앱 배너(iOS 6 Safari)

코드 복사

코드는 다음과 같습니다.

iPhone 6에 해당하는 이미지 크기는 750×1294이고, iPhone 6 Plus에 해당하는 이미지 크기는 1242×2148입니다.

코드 복사

코드는 다음과 같습니다.

Windows 8
　Windows 8 타일 색상

코드 복사

코드는 다음과 같습니다.

　Windows 8 타일 아이콘

코드 복사

코드는 다음과 같습니다.

RSS 구독

코드 복사

코드는 다음과 같습니다.

파비콘 아이콘

코드 복사

코드는 다음과 같습니다.

파비콘에 대한 자세한 소개는 https://github.com/audreyr/favicon-cheat-sheet

모바일 메타
를 참고하세요
XML/HTML 코드클립보드에 콘텐츠 복사

1. 메타 이름="뷰포트"  콘텐츠="width=device-width, initial-scale=1, user-scalable=no" />  
2. 메타 이름="apple- mobile-web-app-capable" 콘텐츠="예" / >  
3. 메타 이름="apple- mobile-web-app-status-bar-style" 콘텐츠="검은색"  />  
4. 메타 이름="형식 감지"내용="전화=아니요, 이메일=아니요" />  
5. 메타 이름="뷰포트"  콘텐츠="width=device-width, initial-scale=1, user-scalable=no" />  
6. 메타 이름="apple- mobile-web-app-capable" 콘텐츠="예" / >  
7. 메타 이름="apple- mobile-web-app-status-bar-style" 콘텐츠="검은색"  />  
8. 메타 이름="형식- 감지" 콘텐츠="telphone=no, email=no" / >  
9.   
10. 메타 이름="렌더러"  콘텐츠="웹킷">  
11.   
12. 메타 http-equiv=" " >
메타 이름=
13. "HandheldFriendly" 콘텐츠="참">
메타 이름=
14. "MobileOptimized" 콘텐츠="320">
메타 이름=
15. "화면- 방향" 내용="인물">
메타 이름=
16. "x5- 방향" 내용="인물">
메타 이름=
17. "full- 화면" 콘텐츠="예">
메타 이름=
18. "x5- 전체 화면" 콘텐츠="참">
메타 이름=
19. "browsermode" 콘텐츠="응용 프로그램">
메타 이름=
20. "x5- 페이지 모드" 콘텐츠="앱">
22. 메타 이름="msapplication- 탭 강조 표시" 콘텐츠="아니요">

투벅에서 공유한 내용을 요약한 것입니다.

더 많은 메타태그 참조

• HTML 메타 태그 전체 목록
• 2013년 모든 웹페이지에 있어야 할 18가지 메타태그

참고기사 :

• 자주 사용되는 HTML 헤더 태그
• html5_header
• amazeui CSS
• 문서 유형
• 웹 엔지니어와 디자이너가 꼭 배워야 할 IOS 8의 10가지 새로운 변화