찾다
웹 프론트엔드HTML 튜토리얼HTML 헤드 태그에 대한 자세한 소개

HTML 헤드 태그에 대한 자세한 소개

Jun 27, 2017 am 10:20 AM
headhtml소개하다

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

DOCTYPE

DOCTYPE(Document 유형), 이 선언은 문서 맨 앞, html 태그 앞에 위치합니다. 이 태그는 문서가 사용하는 HTML 또는 XHTML 사양을 브라우저에 알려줍니다.

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

●HTML 4.01 엄격


XML/HTMLCode콘텐츠를 클립보드에 복사

  1. >

●HTML 4.01 Transitional


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

  1. span class="tag">>

  2. ●HTML 4.01 프레임세트




XML/HTML 코드

클립보드에 콘텐츠 복사

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

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




XML/HTML 코드

클립보드에 콘텐츠 복사

    li>>

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

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

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

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

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

●비이상(표준) 모드

●이상 모드

●부분 이상(거의 표준) 모드
IE 브라우저
의 문서 모드, 브라우저 모드, 엄격 모드, 이상한 모드, DOCTYPE 태그, 상세 읽기 모드에 대해서요? 기준! 콘텐츠.

charset

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


XML/HTML Code

클립보드에 콘텐츠 복사

  1. meta charset="utf-8">

html5 이전 페이지는 다음과 같습니다.


X HTML 코드복사 클립 보드에 대한 컨텐츠

  1. & lt; meta http-equiv = "content-type" content = "text/html; charset = utf-8" & gt;


이 둘은 동일합니다. 자세한 내용은 을 사용하는 것이 좋습니다. 짧고 기억하기 쉽습니다.

lang 속성

  중국어 간체


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

html lang="zh-cmn- 한스 ">

 중국어 번체


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

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


  우리가 일반적으로 쓰는 lang="zh-CN" 대신 lang="zh-cmn-Hans"인 이유는 무엇입니까? 다음 내용을 읽어 보십시오. 페이지 상단에 있는 설명은 다음과 같아야 합니다. lang="zh" 또는 lang="zh-cn"을 사용하세요.

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


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

  1. metahttp-equiv= "X - UA- 호환 가능"content="IE=edge,chrome=1"/>

 360 Google Chrome 프레임 사용


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

360 브라우저가 있을 예정입니다. 이 태그를 읽은 후 즉시 해당 속도 코어로 전환하세요. 또한
  1. xml/html 코드 내용을 클립보드에 복사 & & lt; Meta Http-Equiv =

  2. 另 另
content

=

"IE =Edge,chrome=1"


>

  이렇게 작성하면 얻을 수 있는 효과는 구글 크롬 프레임이 설치되어 있으면 GCF를 이용해 페이지를 렌더링하게 되고, GCF가 설치되어 있지 않으면, 그런 다음 렌더링을 위해 가장 높은 버전의 IE 커널을 사용하십시오.

 관련 링크: 브라우저 커널 제어 메타 태그 문서
  1. 바이두는 트랜스코딩을 금지합니다

     바이두 휴대폰으로 웹페이지를 열면 바이두가 웹페이지를 트랜스코딩한 후 옷을 벗고 몸에 붙일 수 있습니다. 개 피부 석고 광고, 이를 위해 XML/HTML 코드클립보드에 콘텐츠 복사를 추가할 수 있습니다.관련 링크 :SiteApp 트랜스코딩 선언문

    1. SEO 최적화 부분페이지 제목 태그(헤드 헤더 필수) XML/HTML Code클립보드에 콘텐츠 복사



    title

    >
    제목

    title


    >

    페이지 키워드키워드

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

      meta
    name

    =
    "keywords"

    content

    =
    "your 키워드"

    >

      페이지 설명 콘텐츠 설명
    1. XML/HTML 코드클립보드에 콘텐츠 복사

      meta
    name

    =
    "description"

    content

    =
    "설명"

    >

    웹 페이지 작성자 정의
    1. XML/HTML 코드콘텐츠를 클립보드에 복사meta

    2. name
    =

    "author"

    content

    =
    "작성자 , email address"

    >

    는 웹 검색 엔진 색인 방법을 정의합니다. Robotterms는 영어 쉼표 ","로 구분된 값 집합입니다. 일반적으로 none, noindex, nofollow, all 값을 갖습니다. , 색인을 생성하고 따라갑니다.
    1. XML/HTML 코드클립보드에 콘텐츠 복사 "index,follow" >


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


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

    1. XML/HTML Code내용을 클립보드에 복사meta name

      =
    2. "viewport"

    content
    =이라고 씁니다.
    "너비=장치 -width,initial-scale=1.0">

    width=device-width는 iPhone 5가 홈 화면에 추가되고 WebApp 전체 화면 모드에서 페이지를 열 때 검은색 테두리가 나타나게 합니다( http://bigc.at/ ios-webapp-viewport-meta.orz)


    콘텐츠 매개변수:

    width 뷰포트 너비(값/장치 너비) height 뷰포트 높이(값/장치 높이) initial-scale 초기 스케일링 최대 스케일 최대 스케일링 비율 최소 스케일 최소 스케일링

    user-scalable 사용자의 확대/축소 허용 여부(예/아니요)
      minimal-ui iOS 7.1 베타 2의 새로운 속성은 상단 및 하단 상태 표시줄을 최소화할 수 있습니다. 페이지가 로드될 때. 이는 부울 값이며 다음과 같이 직접 작성할 수 있습니다.
    1. XML/HTML 코드클립보드에 콘텐츠 복사

      1. meta name="viewport" content="width=device-width,initial -scale= 1 ,minimal-ui">

      그리고 웹사이트가 응답하지 않으면 초기 크기 조정을 사용하지 않거나 크기 조정을 비활성화하지 마세요.


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

      1. "width=device-width, user-scalable=yes">관련 링크 : 비 반응형 디자인 뷰포트  iPhone 6 및 iPhone 6plus에 적용하려면 다음을 작성해야 합니다. XML/HTML 코드

      2. 콘텐츠를 클립보드 보드에 복사





      meta


      name

      =
        "viewport"
      1. content="width=375"> meta name

        =
      2. "viewport"
      3. content ="너비 =414">대부분의 4.7~5인치 Android 기기의 뷰포트 너비는 360px로 설정되어 있지만, iPhone 6에서는 대부분의 5.5인치 Android 기기(예: Samsung Note)는 400이고 iPhone 6 plus의 뷰포트 너비는 414px입니다.  ios 기기

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



      XML/HTML Code

      콘텐츠를 클립보드에 복사


      메타 이름

      =
        "apple-mobile-web-app-title"
      1. content="title"> 웹앱의 배경색을 설정합니다. 상태 표시줄

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


      meta name

      =
        "apple-mobile-web-app-status-bar-style"
      1. content ="black-translucent" />

      "apple-mobile-web-app-capable" content="yes"인 경우에만 적용됩니다.

       content 매개변수:

      기본 기본값.
      black 상태 표시줄 배경이 검은색입니다.
      검은색 반투명 ​​상태 표시줄의 배경은 검은색 반투명입니다. default 또는 black 으로 설정하면 웹 콘텐츠가 상태 표시줄 하단부터 시작됩니다. 검은색 반투명으로 설정하면 웹 페이지 콘텐츠가 전체 화면을 채우고 상단이 상태 표시줄에 의해 가려집니다.

      숫자를 전화번호로 자동 인식 비활성화


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

      1. metaname= "형식 감지" content="telephone=no"/>

      iOS 아이콘

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

      코드가 있어야 합니다.


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

      코드는 다음과 같습니다.


      Retina iPhone 및 Retina iTouch(114x114픽셀)는 사용하지 않아도 되지만 권장됩니다.

      코드는 다음과 같습니다:


        Retina iPad, 144x144픽셀, 선택 사항이지만 권장됨

      코드는 다음과 같습니다.

      !-- Retina iPad, 144x144 픽셀, 선택 사항이지만 권장됨-->

       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 5/iPod Touch 5 세로 화면 640x1136(Retina)

      코드는 다음과 같습니다.

      gt ;


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

      코드는 다음과 같습니다.


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

      코드는 다음과 같습니다.



      Windows 8
        Windows 8 타일 색상

      코드는 다음과 같습니다


       Windows 8 타일 아이콘

      코드는 다음과 같습니다.

      < ;meta name=" msapplication-TileImage" content="icon.png"/>


       RSS 구독

      코드는 다음과 같습니다.


        파비콘 아이콘

      코드


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



      meta for mobile
      XML/HTML CodeCopy content toclipboard

      1. <을 참조하세요. ;metaname= "viewport "content="width=device-width,initial-scale=1, user-scalable=no"/>

      2. < ;meta name="apple -mobile-web-app-capable"content="yes"/>

      3. meta 이름 ="apple-mobile-web-app-status -bar-style" content="black"/>

      4. meta name="format- detector"content="telephone= no, email=no" />

      5. meta name=" 뷰포트" content ="width=de Vice-width,initial-scale=1, user-scalable=no"/>

      6. meta name="apple-mobile-web-app-capable" content="yes" />

      7. meta name="apple-mobile-web-app-status-bar-style" content="black " />

      8. meta name="format-Detection" content= "telphone =no, email=no"/>

      9. meta name="renderer" content="webkit">

      10. meta http-equiv="X-UA-Compatible" content=" IE= edge">

      11. meta name="HandheldFriendly" content="true">

      12. meta name="MobileOptimized" content="320">

      13. meta name="screen-orientation" content="portrait">

      14. meta name="x5-orientation" content="portrait">

      15. meta name="x5-fullscreen" content="true">

      16. -- 애플리케이션 모드 -->

      17. meta name="x5-page-mode" content="app"

        >
      18. < ;!-- Windows Phone 클릭 강조 표시 없음 -->
      19. meta name="msapplication-tap-highlight" content="no"

        >
      20. < ;!-- 모바일 엔드에 적응 -->
      21. 투벅에서 공유한 요약입니다.   더 많은 메타 태그 참조HTML META 태그의 전체 목록18개의 메타 태그는 2013년에 모든 웹페이지에 있어야 합니다

      22.  참조 기사:
      23. 일반적으로 사용됨 HTML 헤더 태그

      html5_header

        amazeui css
      • DOCTYPE
      • WEB 엔지니어와 디자이너는 iOS 8의 10가지 새로운 변경 사항을 배워야 합니다

위 내용은 HTML 헤드 태그에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향HTML, CSS 및 JavaScript의 미래 : 웹 개발 동향Apr 19, 2025 am 12:02 AM

HTML의 미래 트렌드는 의미론 및 웹 구성 요소이며 CSS의 미래 트렌드는 CSS-In-JS 및 CSShoudini이며, JavaScript의 미래 트렌드는 WebAssembly 및 서버리스입니다. 1. HTML 시맨틱은 접근성과 SEO 효과를 향상시키고 웹 구성 요소는 개발 효율성을 향상 시키지만 브라우저 호환성에주의를 기울여야합니다. 2. CSS-in-JS는 스타일 관리 유연성을 향상 시키지만 파일 크기를 증가시킬 수 있습니다. CSShoudini는 CSS 렌더링의 직접 작동을 허용합니다. 3. Webosembly는 브라우저 애플리케이션 성능을 최적화하지만 가파른 학습 곡선을 가지고 있으며 서버리스는 개발을 단순화하지만 콜드 스타트 ​​문제의 최적화가 필요합니다.

HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.

HTML의 미래 : 웹 디자인의 진화 및 트렌드HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AM

HTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.

HTML vs. CSS vs. JavaScript : 비교 개요HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

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

뜨거운 도구

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

mPDF

mPDF

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

안전한 시험 브라우저

안전한 시험 브라우저

안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.