HTML 헤드헤더 태그_HTML/Xhtml_웹페이지 제작 상세 소개
- WBOY원래의
- 2016-05-16 16:36:352263검색
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 엄격
- >
- >
- >
- >
HTML doctype에는 두 가지 주요 목적이 있습니다.
●서류의 유효성을 확인하세요.
사용자 에이전트와 검증자에게 이 문서가 어떤 DTD에 따라 작성되었는지 알려줍니다. 이 작업은 페이지가 로드될 때마다 브라우저가 DTD를 다운로드하지 않고 페이지가 수동으로 확인되는 경우에만 활성화됩니다.
●브라우저의 렌더링 모드 결정
실제 작업을 위해서는 문서를 읽을 때 어떤 파싱 알고리즘을 사용할지 브라우저에 알려주세요. 작성되지 않으면 브라우저는 자체 규칙에 따라 코드를 구문 분석하므로 HTML 레이아웃에 심각한 영향을 미칠 수 있습니다. 브라우저에는 HTML 문서를 구문 분석하는 세 가지 방법이 있습니다.
●이상하지 않은(표준) 모드
●이상한 모드
●부분적으로 이상한(거의 표준) 모드 IE 브라우저의 문서 모드, 브라우저 모드, 엄격 모드, 이상한 모드, DOCTYPE 태그에 대해 자세히 알아볼 수 있습니다. 읽기 모드? 기준! 콘텐츠.
문자세트
문서에서 사용되는 문자 인코딩을 선언합니다.
- <메타 문자 집합="utf-8">
html5 이전에는 웹페이지가 다음과 같았습니다.
- <메타 http-equiv="콘텐츠 유형 " 콘텐츠="text/html; charset=utf-8">
이 둘은 동일합니다. 아래 세부 정보를 읽어보세요. 대 기억하기 쉬운 짧은 단어를 사용하는 것이 좋습니다.
lang 속성
중국어 간체
- <html lang="zh-cmn-Hans ">
중국어 번체
- <html lang="zh-cmn-Hant ">
우리가 일반적으로 쓰는 lang="zh-CN" 대신 lang="zh-cmn-Hans"가 사용되는 이유는 무엇입니까? 다음을 읽어 보세요. 페이지 상단에 있는 설명을 lang="zh"로 해야 하나요? lang="zh-cn".
최신 버전의 IE와 Chrome을 우선적으로 사용하세요
- <메타 http-equiv="X-UA -호환 가능" 콘텐츠="IE=edge,chrome=1" />
360 Google 크롬 프레임 사용
- <메타 이름="렌더러" 콘텐츠="webkit">
360 브라우저는 이 태그를 읽은 후 즉시 해당 속도 코어로 전환합니다. 또한, 안전을 위해 가입하세요
- <메타 http-equiv="X-UA -호환 가능" 콘텐츠="IE=Edge,chrome=1">
이렇게 작성하면 얻을 수 있는 효과는 Google Chrome Frame이 설치되어 있으면 GCF를 사용하여 페이지를 렌더링한다는 것입니다. GCF가 설치되어 있지 않으면 IE 커널의 가장 높은 버전을 사용하여 렌더링합니다.
관련 링크: 브라우저 커널 제어 메타 태그 문서
Baidu는 트랜스코딩을 금지합니다
Baidu 휴대폰을 통해 웹페이지를 열면 Baidu에서 웹페이지 트랜스코드를 수정할 수 있습니다. 옷을 벗고 몸에 강아지 피부 반창고 광고를 붙이려면 머리에
- <메타 http-equiv="캐시 제어 " 콘텐츠="no-siteapp" />
관련 링크: SiteApp 트랜스코딩 설명
SEO 최적화 부분
페이지 제목<제목> )
- <제목>제목제목 >
페이지 키워드 키워드
- <메타 이름="키워드" 콘텐츠="키워드">
페이지 설명 내용 설명
- <메타 이름="설명" 콘텐츠="설명">
웹 작성자 작성자 정의
- <메타 이름="저자" 내용="작성자,이메일 주소">
웹 검색 엔진 색인 방법을 정의합니다. Robotterms는 영어 쉼표 ","로 구분된 값 집합입니다. 일반적으로 none, noindex, nofollow, all, index 및 follow 값을 갖습니다.
XML/HTML 코드클립보드에 콘텐츠 복사
- <메타 이름="로봇" 콘텐츠="index,follow">
관련 링크: WEB1038 - 태그에 잘못된 값이 포함되어 있습니다
뷰포트
Viewport는 모바일 브라우저에서 레이아웃 표시를 더 좋게 만들 수 있습니다. 보통
을 씁니다.- <메타 이름="뷰포트" 콘텐츠="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의 새로운 속성은 페이지가 로드될 때 상단 및 하단 상태 표시줄을 최소화할 수 있습니다. 이는 부울 값이며 다음과 같이 직접 작성할 수 있습니다.
- <메타 이름="뷰포트" 콘텐츠="width=device-width,initial-scale=1,minimal-ui">
웹사이트가 응답하지 않는 경우 초기 크기 조정을 사용하지 않거나 크기 조정을 비활성화하세요.
- <메타 이름="뷰포트" 콘텐츠="width=device-width,user-scalable=yes">
관련 링크: 비반응형 디자인의 뷰포트
iPhone 6 및 iPhone 6plus에 적용하려면 다음을 작성해야 합니다.
XML/HTML 코드클립보드에 콘텐츠 복사
- <메타 이름="뷰포트" 내용="width=375">
- <메타 이름="뷰포트" 내용="width=414">
대부분의 4.7~5인치 Android 기기의 뷰포트 너비는 360px로 설정되어 있지만 iPhone 6에서는 375px입니다. 대부분의 5.5인치 Android 기기(Samsung Note 등)의 뷰포트 너비는 400이며, iPhone 6 플러스에서는 414px입니다.
iOS 기기
홈 화면에 제목 추가(iOS 6의 새로운 기능)
- <메타 이름="apple-mobile-web -app-title" 콘텐츠="제목">
WebApp 전체 화면 모드 활성화 여부
- <메타 이름="apple-mobile-web -앱 가능" 콘텐츠="예" />
상태 표시줄 배경색 설정
- <메타 이름="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 코드클립보드에 콘텐츠 복사
- <메타 이름="뷰포트" 콘텐츠="width=device-width, initial-scale=1, user-scalable=no" />
- <메타 이름="apple- mobile-web-app-capable" 콘텐츠="예" / >
- <메타 이름="apple- mobile-web-app-status-bar-style" 콘텐츠="검은색" />
- <메타 이름="형식 감지"내용="전화=아니요, 이메일=아니요" />
- <메타 이름="뷰포트" 콘텐츠="width=device-width, initial-scale=1, user-scalable=no" />
- <메타 이름="apple- mobile-web-app-capable" 콘텐츠="예" / >
- <메타 이름="apple- mobile-web-app-status-bar-style" 콘텐츠="검은색" />
- <메타 이름="형식- 감지" 콘텐츠="telphone=no, email=no" / >
- <메타 이름="렌더러" 콘텐츠="웹킷">
- <메타 http-equiv=" " > <
- 메타 이름 =
- "HandheldFriendly" 콘텐츠="참">
<
- 메타 이름
=- "MobileOptimized" 콘텐츠="320"> <
- 메타 이름
=- "화면- 방향" 내용="인물"> <
- 메타 이름
=- "x5- 방향" 내용="인물"> <
- 메타 이름
=- "full- 화면" 콘텐츠="예"> <-- QQ 강제 전체화면 --> <
- 메타 이름
=- "x5- 전체 화면" 콘텐츠="참"> <
- 메타 이름
=- "browsermode" 콘텐츠="응용 프로그램"> <
- 메타 이름
=- "x5- 페이지 모드" 콘텐츠="앱">
- <메타 이름="msapplication- 탭 강조 표시" 콘텐츠="아니요">
투벅에서 공유한 내용을 요약한 것입니다.
더 많은 메타태그 참조
참고기사 :