html5의 헤드에 대한 자세한 설명-H5 튜토리얼-php.cn

모바일 단말기 작업은 점점 프런트 엔드 작업에서 중요한 부분이 되었습니다. 일반적인 프로젝트 개발 외에도 HTML 헤더 태그 기능, 특히 메타 태그가 매우 중요합니다.

HTML 문서의 헤드 섹션에는 일반적으로 페이지 제목 지정, 검색 엔진에 페이지 자체에 대한 정보 제공, 스타일 시트 로드 및 JavaScript 파일 로드가 포함됩니다(성능상의 이유로 대부분의 경우 페이지 하단에 배치됩니다.< /body> 태그가 끝나기 전에 자바스크립트가 로드됩니다. 제목을 제외하고 헤드의 내용은 페이지 방문자에게 표시되지 않습니다.

다음은 HTML 문서의 헤드 부분의 예입니다.

<head>  
    <meta charset="utf-8" />  
    <meta name="author" content="Adam Freeman"/>  
    <title>Your page title</title>  
    <base href="http://titan/listings/" target="_blank"/>  
    <style type="text/css">  
        a{  
            background-color: grey;  
            color: white;  
            padding: 0.5em;  
        }  
    </style>  
</head>

로그인 후 복사

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

대소문자를 구분하지 않고 HTML5 문서 유형을 사용합니다.

title 요소

head 요소에는 제목 요소가 포함되어야 합니다. 이 요소의 콘텐츠는 브라우저의 탭 또는 브라우저 창 상단에 웹페이지 제목으로 표시되며 다음과 관련됩니다. 브라우저.

base 요소

base 요소는 HTML 문서의 상대 링크가 구문 분석되는 기본 URL을 설정하는 데 사용됩니다. 지정하지 않으면 현재 로드된 문서의 URL이 사용됩니다. 기본 요소는 사용자가 링크를 클릭할 때 링크가 열리는 방식과 양식이 제출될 때 브라우저가 반응하는 방식을 설정할 수도 있습니다.

<base href="http://bjpowernode/listings/" target="_blank"/>

로그인 후 복사

1) href는 지정된 기본 URL입니다.

2) target 속성은 다음 값을 포함하여 페이지의 모든 링크를 열 위치를 지정합니다.

1) _blank: 연결된 문서를 새 창에서 엽니다.
2) _self: 기본적으로 연결된 문서를 동일한 창에서 엽니다. 프레임 문서
3) _parent: 상위 프레임에서 링크된 문서를 엽니다.
4) _top: 링크된 문서를 전체 창에서 엽니다.
5) 프레임이름: 지정된 프레임에서 링크된 문서를 엽니다.

meta 요소

meta 요소는 문서의 다양한 메타데이터를 정의하는 데 사용됩니다. Meta 요소는 여러 용도로 사용될 수 있지만 각 메타 요소는 하나 이상의 용도로만 사용할 수 있습니다. head 요소에 여러 개의 메타 요소를 추가합니다.

이름/값 메타데이터 쌍 지정

<meta name="author" content="Adam Freeman"/>

로그인 후 복사

name 속성은 메타데이터 유형을 나타내는 데 사용되며, content 속성은 값을 제공합니다. name 속성에는 다음 값이 포함됩니다.

1) 애플리케이션 이름: 현재 페이지가 속한 웹 애플리케이션 시스템의 이름
2) 작성자: 현재 페이지의 작성자 이름
3) 설명: 현재 페이지;
4) 생성기: 사용됨 HTML을 생성하는 소프트웨어의 이름
5) 키워드: 페이지의 내용을 설명합니다.

위의 5가지 사전 정의된 메타데이터 이름 외에도 메타데이터 확장을 사용할 수도 있습니다. 여기(http://wiki.whatwg.org/wiki/MetaExtensions)에는 이러한 확장에 대해 자주 업데이트되는 목록이 있습니다. HTML 문서 작성자가 검색 엔진에 문서 처리 방법을 알려주는 데 사용할 수 있는 로봇 메타데이터와 같은 일부 확장자는 더 자주 사용됩니다.

<meta name="robots" content="noindex"/>

로그인 후 복사

이 속성에는 대부분의 검색 엔진이 인식하는 세 가지 값이 있습니다.

1) noindex: 이 페이지를 색인화하지 않습니다.
2) noarchive: 이 페이지를 보관하거나 캐시하지 않습니다.
3) nofollow: 이 페이지의 링크를 따라 계속 검색하지 않습니다.

대부분의 검색 엔진은 웹 최적화를 제공합니다. 페이지 또는 전체 웹사이트에 대한 안내는 해당 검색 엔진에서 제공하는 페이지 또는 웹사이트 최적화 가이드를 볼 수 있습니다.

문자 인코딩 선언

<meta charset="utf-8" />

로그인 후 복사

head 요소의 메타 요소는 문서의 문자 인코딩이 UTF-8(기본값)임을 선언합니다.

HTTP 헤더 필드 시뮬레이션

meta 요소는 세 개의 HTTP 헤더 필드 값을 시뮬레이션하거나 바꾸는 데 사용할 수 있습니다.

<meta http-equiv="refresh" content="5"/>

로그인 후 복사

http-equiv 속성의 목적은 시뮬레이션할 헤더 필드 이름을 지정하는 것이며, 필드 값은 content 속성에 지정됩니다. http-equiv 속성의 선택적 값은 다음과 같습니다.

1) 새로 고침: 현재 페이지가 서버에서 다시 로드되는 시간 간격을 초 단위로 지정합니다. 다음과 같이 브라우저가 로드할 URL을 지정할 수도 있습니다.

<meta http-equiv="refresh" content="5;http://www.apress.com"/>

로그인 후 복사

2) default-style: 페이지에서 먼저 사용할 스타일 시트를 지정합니다. content 속성의 값은 스타일 요소여야 합니다. 또는 동일한 문서의 link 요소입니다.

3) content-type: HTML 페이지에 사용되는 문자 인코딩을 선언하는 또 다른 방법입니다. HTML 문서에 포함된 CSS 스타일입니다.

<meta http-equiv="content-type" content="text/html charset=UTF-8"/>

로그인 후 복사

위의 a 요소를 위해 새로운 스타일이 디자인되었습니다. 스타일 요소는 HTML 문서의 다양한 부분에 나타날 수 있습니다. 문서에는 여러 스타일 요소가 포함될 수 있습니다. 이 요소는 템플릿에 의해 정의된 스타일을 보완하는 데 사용될 수 있습니다(링크 요소 가져오기).

可以为style元素指定样式适用的媒体：

<style media="screen AND (min-width:500px)" type="text/css">  
    ......   
</style>

로그인 후 복사

media属性中的screen是设备类型，可选值的范围包括：

1）all：将样式用于所有设备（默认值）；
2）aural：将样式用于语音合成器；
3）braille：将样式用于忙问设备；
4）handheld：将样式用于手持设备；
5）projection：将样式用于投影机；
6）print：将样式用于打印预览和打印页面时；
7）screen：将样式用于计算机显示器屏幕；
8）tty：将样式用于电传打字机之类的等宽设备；
9）tv：将样式用于电视机。

media属性中的(min-width:500px)指定特性，包括：

1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）

link元素

用来在HTML文档和外部资源（如CSS样式表）之间建立联系。link元素包含6个局部属性，如下：

1）href：指定link元素指向的资源的URL；
2）hreflang：说明所关联资源使用的语言；
3）media：说明所关联的内容用于哪种设备，同style中的media属性；
4）rel：说明文档与所关联资源的关系类型，值的范围如下：
---alternate：链接到文档的替代版本，比如另一种语言的译本；
---author：链接到文档的作者；
---help：连接到当前文档的说明文档；
---icon：指定图标资源；
---license：链接到当前文档的相关许可证；
---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：载入外部样式表。
5）sizes：指定图标的大小；
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。

载入外部样式表

<link rel="stylesheet" type="text/css" href="styles.css"/>

로그인 후 복사

可以使用多个link元素载入多个外部资源。

为页面定义网站标志

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

로그인 후 복사

浏览器载入HTML页面时，会加载并显示网站标志。

注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。

<link rel="prefetch" href="/page2.html"/>

로그인 후 복사

注：目前不是所有浏览器都支持该功能。

script元素

用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：

1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用

定义文档内嵌脚本

<script>  
    document.write("This is from the script");  
</script>

로그인 후 복사

默认情况下，浏览器在页面中一遇到脚本就会执行。

载入外部脚本库

可以将脚本放到单独的文件中，然后用script元素载入HTML文档。

<script src="simple.js"></script>

로그인 후 복사

推迟脚本的执行

使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：

<script defer src="simple2.js"></script>

로그인 후 복사

由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。

浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。

<script async src="simple2.js"></script>

로그인 후 복사

noscript元素

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

<noscript>  
    <h1>JavaScript is required!</h1>  
    <p>You cannot use this page without JavaScript</p>  
</noscript>

로그인 후 복사

还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。

<noscript>  
    <meta http-equiv="refresh" content="0;www.apress.com"/>  
</noscript>

로그인 후 복사

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