HTML_HTML/Xhtml_Web 페이지 제작 시 헤더 구조
- WBOY원래의
- 2016-05-16 16:36:431989검색
다음은 일반적으로 사용되는 헤드 구조와 각 태그 및 요소의 의미 및 사용 시나리오를 소개합니다(이 기사는 마스터의 기사를 기반으로 하며 확장된 요약입니다).
padding.me 헤더 구조
< ;meta name="viewport" content="width=device-width, user-scalable=yes">
< ;meta name="robots" content="index,follow">
<메타>
https://plus. google.com/u/1/105241873904238310190/?rel=author">
http://padding.me/humans.txt" />
http://feeds.feedburner.com/paddingme" />
문서 유형
DOCTYPE(문서 유형), 이 선언은 문서 앞부분, html 태그 앞에 위치합니다. 이 태그는 문서가 어떤 HTML 또는 XHTML 사양을 사용하는지 브라우저에 알려줍니다.
DTD(Document Type Definition) 선언은 으로 시작하며 대소문자를 구분하지 않으며 앞에 내용이 없으면(공백 제외) 브라우저가 쿼크 모드를 활성화합니다. IE에서 웹페이지를 렌더링합니다. Public DTD, 이름 형식은 "등록 // 조직 // 유형 태그 // 언어"입니다. "등록"은 해당 조직이 국제 표준화 기구(ISO)에 등록되었는지 여부를 나타내며 예를 의미하고 -는 아니오를 의미합니다. "조직"은 다음과 같은 조직의 이름입니다. "유형"은 일반적으로 DTD이고 "레이블"은 지정된 공개 텍스트 설명, 즉 참조된 공개 텍스트에 대한 고유한 설명 이름입니다. 그 뒤에 버전 번호가 옵니다. 마지막 "언어"는 DTD 언어의 ISO 639 언어 식별자입니다. 예를 들어 EN은 영어를 의미하고 ZH는 중국어를 의미합니다. XHTML 1.0은 세 가지 DTD 유형을 선언할 수 있습니다. 엄격한 버전, 전환 버전, 프레임 기반 HTML 문서를 각각 나타냅니다.
•
HTML 4.01 엄격
http://www.w3.org/TR/html4 /strict.dtd">
•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">
•
HTML 4.01 프레임세트
http://www.w3.org/TR/html4/frameset.dtd">
•
그리고 최신 HTML5에서는 보다 간결한 작성 기능이 도입되었으며, 이는 상위 및 하위 호환이 가능하므로 사용을 권장합니다.
HTML의 doctype에는 두 가지 주요 목적이 있습니다.
•서류의 유효성을 확인하세요.
사용자 에이전트와 검증자에게 이 문서가 어떤 DTD에 따라 작성되었는지 알려줍니다. 이 작업은 페이지가 로드될 때마다 브라우저가 DTD를 다운로드하지 않고 페이지가 수동으로 확인되는 경우에만 활성화됩니다.
•브라우저의 렌더링 모드 결정
실제 작업을 위해서는 문서를 읽을 때 어떤 파싱 알고리즘을 사용할지 브라우저에 알려줍니다. 작성되지 않으면 브라우저는 자체 규칙에 따라 코드를 구문 분석하므로 HTML 레이아웃에 심각한 영향을 미칠 수 있습니다. 브라우저에는 HTML 문서를 구문 분석하는 세 가지 방법이 있습니다.
◦ 비이상함(표준) 모드
◦ 이상함 모드
◦ 부분적으로 이상함(거의 표준) 모드
IE 브라우저의 문서 모드, 브라우저 모드, 엄격 모드, 이상한 모드, DOCTYPE 태그, 상세 정보 읽기 모드를 사용할 수 있나요? 기준! , 그리고 상자 모델입니다.
문자세트
문서에 사용된 문자 인코딩을 선언하고
html5 이전에는 웹 페이지가 다음과 같이 작성되었습니다.
이 두 가지는 동일하며, 더 구체적으로 읽어볼 수 있습니다. http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type 기억하기 쉬운 짧은 단어를 사용하는 것이 좋습니다.
언어 속성
중국어 간체
중국어 번체
일반적으로 지역별 중국어 사용 차이를 강조하기 위해 지역 코드를 추가할 필요가 거의 없습니다. 예:
파인애플및파인애플은 실제로 같은 과일입니다. 단지 중국 본토와 대만의 이름이 다를 뿐이고, 싱가포르와 말레이시아의 이름도 다를 뿐입니다. 소나무라고 합니다.
자세한 내용은 http://zhi.hu/XyIa
를 참고하세요.최신 버전의 IE와 Chrome을 우선적으로 사용하세요
Google 크롬 프레임을 사용하는 360
360 브라우저는 이 태그를 읽은 후 즉시 해당 속도 코어로 전환합니다.
안전을 위해 가입하세요
이렇게 작성하면 얻을 수 있는 효과는 Google Chrome Frame이 설치되어 있으면 GCF를 사용하여 페이지를 렌더링한다는 것입니다. GCF가 설치되어 있지 않으면 IE 커널의 가장 높은 버전을 사용하여 렌더링합니다.
관련 링크: 브라우저 커널 제어 메타 태그 문서
바이두는 트랜스코딩을 금지합니다
Baidu 휴대폰을 통해 웹페이지를 열면 Baidu에서 웹페이지를 트랜스코딩하고, 옷을 벗고, 몸에 개 피부 반창고 광고를 붙일 수 있습니다. 이렇게 하려면
관련 링크: SiteApp 트랜스코딩 문
SEO 최적화 부분
•
페이지 제목
•
페이지 키워드키워드
•
페이지 설명 콘텐츠 설명
•
웹 작성자 작성자 정의
•
웹 검색 엔진 색인 방법은 영어 쉼표 ","로 구분된 값의 집합입니다. 일반적으로 none, noindex, nofollow, all, index 및 follow 값을 갖습니다.
관련 링크: WEB1038 - 태그에 잘못된 값이 포함되어 있습니다
뷰포트
뷰포트를 사용하면 모바일 브라우저에서 레이아웃 표시를 더 좋게 만들 수 있습니다.
보통
width=device-width로 인해 iPhone 5가 홈 화면에 추가되고 WebApp 전체 화면 모드로 열릴 때 검은색 테두리가 나타납니다(http://bigc.at/ios-webapp-viewport- 메타.orz )
콘텐츠 매개변수:
•width 뷰포트 너비(숫자 값/장치 너비)
•height 뷰포트 높이(숫자 값/장치 높이)
•초기 배율 초기 크기 조정
•최대 - 스케일 최대 스케일링
•최소 스케일 최소 스케일링
•사용자가 확대/축소할 수 있는지 여부를 사용자가 확장 가능(예/아니요)
•
minimal-ui iOS 7.1 베타 2의 새로운 속성, 페이지가 로드될 때 상단 및 하단 상태 표시줄을 최소화할 수 있습니다. 이는 부울 값이며 다음과 같이 직접 작성할 수 있습니다.
웹사이트가 응답하지 않는 경우 초기 크기 조정을 사용하지 않거나 크기 조정을 비활성화하세요.
관련 링크: 비반응형 디자인의 뷰포트
ios 기기
홈 화면에 제목 추가(iOS 6의 새로운 기능)
WebApp 전체 화면 모드 활성화 여부
상태 표시줄의 배경색을 설정합니다
"apple-mobile-web-app-capable" content="yes"인 경우에만 적용됩니다.
콘텐츠 매개변수:
•기본값.
•black 상태바의 배경이 검정색입니다.
•black-translucent 상태 표시줄의 배경은 검정색이며 반투명합니다.
default 또는 black 으로 설정하면 웹페이지 내용이 상태 표시줄 하단부터 시작됩니다.
검정 반투명으로 설정하면 웹 콘텐츠가 전체 화면을 채우고 상단이 상태 표시줄에 의해 가려집니다.
숫자 인식이 전화번호로 자동 인식되지 않도록 비활성화
iOS 아이콘
rel 매개변수:
apple-touch-icon 사진은 자동으로 둥근 모서리와 하이라이트로 처리됩니다.
apple-touch-icon-precomposed는 시스템이 자동으로 효과를 추가하는 것을 금지하고 원본 디자인을 직접 표시합니다.
기본 57x57 픽셀인 iPhone 및 iTouch에는
;!-- 기본 57x57 픽셀인 iPhone 및 iTouch에는 -->
iPad, 72x72픽셀, 선택 사항이지만 권장됨
Retina iPhone 및 Retina iTouch, 114x114픽셀, 선택 사항이지만 권장됨
Retina iPad, 144x144 픽셀, 선택 사항이지만 권장됨
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 세로 화면 320x480(표준 해상도) -->
iPhone/iPod Touch 세로 화면 640x960(Retina)
iPhone 5/iPod Touch 5 세로 화면 640x1136(Retina)
스마트 앱 배너 추가(iOS 6 Safari)
윈도우 8
Windows 8 타일 색상
Windows 8 타일 아이콘
RSS 구독
파비콘에 대한 자세한 소개는 https://github.com/audreyr/favicon-cheat-sheet
를 참고하세요.모바일 메타
< ;meta name="format-Detection" content="telephone=no, email=no" />
< ;meta name="format-Detection" content="telphone=no, email=no" />
< ;! -- 360 브라우저 속도 모드 활성화(webkit) -->
< ;meta name= "MobileOptimized" content="320">
;!-- QQ 강제 세로 화면-->
더 많은 메타 태그 참조
•HTML 메타 태그 전체 목록
•2013년에 모든 웹페이지에 있어야 하는 18개의 메타 태그
참조 기사:
•https://github .com /yisibl/blog/issues/1
•https://gist.github.com/paddingme/6182708733917ae36331
•http://amazeui.org/css/
•http://www .douban .com/note/170560091/