HTML 문서의 헤드 부분에는 일반적으로 페이지 자체에 대한 정보를 제공하고 스타일 테이블을로드하며 JavaScript 파일을로드하는 지정된 페이지 제목이 포함되어 있습니다 (성능 고려 사항을 위해 대부분의 시간은 페이지 하단에 배치됩니다. /body> 레이블의 끝이 끝나기 전에 하중이 JavaScript를 끝내십시오). 제목을 제외하고는 페이지 방문자에게는 헤드 콘텐츠가 보이지 않습니다.
다음은 HTML 문서의 헤드 부분의 예입니다.
<head> <meta charset = utf-8/> <meta name = author 컨텐츠 = Adam Freeman/> <title> 페이지 제목 </title> <base href = http : // titings/target = _ blank/> < 스타일 유형 = 텍스트/CSS> {배경 색 : 회색; 흰색;} </style> </head> 제목 요소헤드 요소에는 웹 페이지의 제목으로 브라우저와 관련하여 브라우저 탭 또는 브라우저 창의 상단에 표시되는 제목 요소가 포함되어야합니다.
기본 요소기본 요소는 벤치 마크 URL을 설정하여 HTML 문서의 상대 링크를 분석 하여이 기반으로 사용됩니다. 지정되지 않은 경우 현재 로딩 문서의 URL을 사용하십시오. 기본 요소는 사용자가 클릭 할 때 링크를 열 수있는 방법과 양식을 제출할 때 브라우저가 어떻게 반응하는지를 설정할 수 있습니다.
<base href = http : // bjpowernode/listings/target = _blank/>
1) HREF는 지정된 벤치 마크 URL입니다.
2) 값을 포함하여 대상 속성이 열리는 위치를 포함하여 페이지에서 모든 링크를 열 수있는 위치 :
1) _blank : 새 창에서 연결된 문서를 엽니 다.
2) _self : 기본적으로 동일한 프레임 워크에서 링크 문서를 엽니 다.
3) _parent : 부모 프레임에서 연결된 문서를 엽니 다.
4) _top : 전체 창에서 링크 문서를 엽니 다.
5) 프레임 이름 : 지정된 프레임 워크에서 링크 문서를 엽니 다.
메타 요소메타 요소는 다양한 문서를 여러 가지 사용 할 수 있지만 각 메타 요소는 하나 이상의 유형이있는 경우에만 헤드 요소에 여러 가지 메타를 추가해야합니다. 헤드 요소.
이름/값 메타 데이터 쌍을 지정하십시오<메타 이름 = 저자 내용 = Adam Freeman/>
이름 속성은 내용 속성의 값을 제공하는 메타 데이터 유형을 나타내는 데 사용됩니다. 이름 속성에는 다음 값이 포함됩니다.
1) 응용 프로그램 이름 : 현재 페이지에 속하는 웹 응용 프로그램 시스템의 이름;
2) 저자 : 현재 페이지의 저자 이름;
3) 설명 : 현재 페이지의 지침;
4) 생성기 : HTML을 생성하는 데 사용되는 소프트웨어 이름;
5) 키워드 : 페이지의 내용을 설명하십시오.
위의 5 개의 사전 정의 된 메타 데이터 이름 외에도 메타 데이터 확장 (http://wiki.whatwg.org/wiki/metaextensions)에는 이러한 확장 목록이 종종 업데이트됩니다. 로봇 메타 데이터와 같은 일부 확장은 더 많이 사용됩니다.
<메타 이름 = 로봇 내용 = noindex/>
이 속성에는 대부분의 검색 엔진이 인식되는 값이 있습니다.
1) nondex :이 페이지를 색인하지 마십시오.
2) NoArchive :이 페이지를 보관하거나 캐시하지 마십시오.
3) Nofollow :이 페이지의 링크를 따라 계속 검색하지 마십시오.
대부분의 검색 엔진은 웹 페이지 또는 전체 웹 사이트를 최적화하기위한 지침을 제공하며 해당 검색 엔진에서 제공하는 웹 페이지 또는 웹 사이트 최적화 지침을 볼 수 있습니다.
선언 문자 코드<meta charset = utf-8 />
헤드 요소의 메타 요소 선언 문서의 문자 코딩은 UTF-8 (기본값)입니다.
시뮬레이션 HTTP 헤더 필드메타 요소는 3 개의 HTTP 헤더 필드의 값을 시뮬레이션하거나 교체하는 데 사용될 수 있습니다.
<메타 http-equiv = 새로 고침 컨텐츠 = 5/>
http-equiv 속성을 사용하는 것은 시뮬레이션 헤더를 지정하는 헤더 필드 이름의 이름이며 필드 값은 컨텐츠 속성에 지정됩니다. HTTP-equiv 속성의 선택적 값은 다음과 같습니다.
1) 새로 고침 :이 시간이 지나면 시간 간격을 몇 초 만에 지정하면 서버에서 현재 페이지를 다시로드하십시오. 브라우저가로드 할 수있는 URL을 별도로 지정할 수도 있습니다.
<meta http-equiv = refressh content = 5;
2) 기본 스타일 : 페이지에서 선호하는 스타일 테이블을 지정하십시오. 컨텐츠 속성의 값은 동일한 문서에서 스타일 요소 또는 링크 요소의 제목 값이어야합니다.
3) Content-Type : HTML 페이지에 사용 된 문자 코딩을 : ::
<meta http-equiv = content-type content = text/html charset = utf-8/>스타일 요소
HTML 문서에 포함 된 CSS 스타일을 정의하십시오.
<스타일 유형 = 텍스트/CSS> {배경 색 : 회색;새로운 스타일은 A 요소를 위해 설계되었습니다. 스타일 요소는 HTML 문서의 여러 부분에 나타날 수 있습니다. 하나의 문서에는 여러 스타일 요소가 포함될 수 있습니다.
스타일 요소에 스타일을 지정할 수있는 미디어 :
<스타일 미디어 = 화면 및 (min-width : 500px) type = text/css> ...... </style>
미디어 속성의 화면은 장치 유형이며 옵션 값의 범위에는 다음이 포함됩니다.
1) 모두 : 모든 장치의 스타일을 사용하십시오 (기본값).
2) 청각 : 음성 신디사이저에 스타일을 사용하십시오.
3) 점자 : 스타일을 사용하여 장치를 요청하십시오.
4) 핸드 헬드 : 핸드 헬드 장치에 스타일을 사용하십시오.
5) 프로젝트 : 프로젝터에 스타일을 사용합니다.
6) 인쇄 : 스타일을 사용하여 미리보기 및 인쇄 페이지를 인쇄 할 때;
7) 화면 : 컴퓨터 디스플레이 화면의 스타일을 사용합니다.
8) TTY : 전기 통과 기계와 같은 동일한 폭 장비에 스타일을 사용하십시오.
9) TV : TV에 스타일을 사용합니다.
(min-width : 500px) 미디어 속성의 지정된 기능은 다음을 포함합니다.
1) 너비 높이 : 브라우저 창의 너비와 높이, 단위 PX (예 : 너비 : 200px)를 지정합니다.
2) 장치폭 장치 높이 : 전체 장치의 너비와 높이 (브라우저 창뿐만 아니라), 예 : Min-Device-Height : 200px.
3) 해상도 : 장치의 픽셀 밀도, 장치 DPI (Point/Inch) 또는 DPCM (Point/CM), 예 : MAX-RESULOTION : 600DPI
4) 오리엔테이션 : 지정된 장치의 긴 매개 방향, 선택적 값은 초상화와 풍경입니다.
5) 측면 -RATIO 장치-관습-비율 : 브라우저 창 또는 전체 장치의 픽셀 너비 비율을 지정하십시오 (예 : Min-Aspect-Ratio : 16/9).
6) 컬러 흑백 : 색상 또는 흑백 장치의 각 픽셀에서 각 픽셀로 차지하는 이진 숫자를 지정하십시오. 예 : Min-Monochrome : 2
7) 색상-인덱스 : 지정된 장치에서 표시 할 수있는 색상 수 (예 : Max-Color-Idex : 256)
8) 스캔 : 값 점진적 및 상호 작용을 포함하여 TV의 스캔 모드를 지정합니다.
9) 그리드 : 지정된 장치의 유형, 지원 값은 0 및 1입니다 (1은 고정 그리드 디스플레이 컨텐츠를 사용하여 그리드 형 장치를 나타냅니다)
링크 요소HTML 문서와 외부 리소스 (예 : CSS 스타일 테이블) 간의 연결을 설정하는 데 사용됩니다. 링크 요소에는 다음과 같이 6 개의 로컬 속성이 포함됩니다.
1) HREF : 링크 요소를 가리키는 리소스의 URL을 지정합니다.
2) Hreflang : 관련 자원에 사용 된 언어를 설명하십시오.
3) 미디어 : 관련 컨텐츠에 사용되는 장치와 스타일의 미디어 속성을 설명하십시오.
4) rel : 문서와 관련 리소스 간의 관계 범위는 다음과 같습니다.
--- 대체 : 다른 언어의 번역과 같은 문서에 대한 링크의 대체 버전;
--- 저자 : 문서 링크의 저자;
--- 도움말 : 현재 문서에 연결된 설명 문서;
--- 아이콘 : 아이콘 리소스를 지정합니다.
--- 라이센스 : 현재 문서에 대한 관련 라이센스에 대한 링크;
--- Pingback : Pingback 서버를 지정하여 다른 웹 사이트에서 블로그에 링크 할 때 자동으로 알릴 수 있습니다.
--- 프리 페치 : 미리 리소스를 얻으십시오.
--- 스타일 시트 : 외부 스타일 테이블을로드하십시오.
5) 크기 : 아이콘의 크기를 지정합니다.
6) 유형 : 텍스트/CSS, 이미지/X-ICON과 같은 관련 리소스의 MIME 유형을 지정하십시오.
외부 스타일 테이블을로드하십시오<link rel = 스타일 시트 유형 = 텍스트/css href = styles.css/>
여러 링크 요소를 사용하여 여러 외부 리소스를로드 할 수 있습니다.
페이지의 웹 사이트 로고를 정의하십시오<link rel = 바로 가기 아이콘 href = favicon.ico type = image /x-icon />
브라우저에 HTML 페이지가로드되면 웹 사이트 로고를로드하여 표시합니다.
참고 : 웹 사이트 로고 파일이 /favicon.ico (웹 서버의 루트 디렉토리)에있는 경우 대부분의 브라우저는 페이지를로드 할 때이 파일을 자동으로 요청할 필요가 없습니다. 링크 요소가 없습니다.
사전 -인식 자원
브라우저는 곧 사용할 것으로 예상되는 리소스를 얻어야 할 수 있습니다.
<link rel = prefetch href =/page2.html/>
참고 : 모든 브라우저가 현재이 기능을 지원하는 것은 아닙니다.
스크립트 요소페이지에 스크립트를 추가하는 데 사용되면 스크립트를 정의하고 문서의 스크립트를 직접 참조 할 수 있습니다. 이 요소에서 지원하는 로컬 속성은 다음과 같습니다.
1) 유형 : JavaScript 스크립트의 속성에 대해 참조 또는 정의 된 스크립트의 유형은 생략 할 수 있습니다.
2) SRC : 외부 스크립트 파일의 URL을 지정합니다.
3) Async 연기 (HTML5 새로운 추가) : 스크립트의 실행 방법을 설정하면이 두 속성은 SRC 속성과 함께 만 사용할 수 있습니다.
4) charset : 외부 스크립트 파일에 사용 된 문자 인코딩을 설명하며 SRC 속성에서만 사용할 수 있습니다.
내장 된 스크립트에서 문서를 정의하십시오<cript> work.write (이것은 스크립트에서 나온다);
기본적으로 브라우저는 스크립트가 페이지가 나타나 자마자 실행됩니다.
외부 스크립트 라이브러리를로드하십시오스크립트를 별도의 파일에 넣은 다음 스크립트 요소로 HTML 문서를로드 할 수 있습니다.
<스크립트 src = simple.js> </script>스크립트의 실행을 배출하십시오
스크립트의 실행 방법을 제어하려면 Async 및 Defer 속성을 사용하면 스크립트가 실행되기 전에 페이지를로드하고 구문 분석 할 때까지 브라우저를 기다립니다.
<스크립트 연기 SRC = simple2.js> </script>
스크립트가 발생하면 HTML이 실행되기 때문에 스크립트가 HTML 스크립트에서 내용을 사용해야하는 경우 일반적으로 해당 HTML 스크립트에 스크립트를 넣어야하지만 HTML5에서는 DEFER와 동일한 목적을 달성 할 수 있습니다. 재산.
브라우저에서 스크립트 요소가 발생하면 기본 동작은 스크립트를로드 및 실행하는 동안 처리 페이지를 중단하고 각 스크립트 요소는 차례로 실행됩니다. Async 속성은 HTML 문서를 제대로 사용하는 동안 스크립트를 비동기로드 및 실행할 수 있습니다.
<스크립트 Async Src = simple2.js> </script>noscript 요소
noscript 요소는 JavaScript를 비활성화하거나 브라우저가 JavaScript를 지원하지 않는 사용자에게 일부 컨텐츠를 표시하는 데 사용됩니다.
<noscript> <h1> JavaScript가 필요합니다!
또 다른 선택은 브라우저가 JavaScript를 지원하지 않을 때 다른 URL로 이끌어내는 것입니다.
<noscript> <meta http-equiv = refresh content = 0;