> 웹 프론트엔드 > HTML 튜토리얼 > HTML 웹 페이지 헤더 코드 예제에 대한 자세한 설명

HTML 웹 페이지 헤더 코드 예제에 대한 자세한 설명

高洛峰
풀어 주다: 2017-03-09 16:15:03
원래의
3303명이 탐색했습니다.

HTML에서는 일반적으로 이 부분을 웹페이지의 헤드라고 부릅니다. 헤더의 내용이 페이지에 표시되지는 않지만 검색 엔진의 웹페이지 포함 및 정렬은 물론 웹페이지의 다양한 전역 설정에 영향을 미칠 수 있으며 이는 매우 중요하다고 할 수 있습니다

지식 포인트 1: 헤더 정보에 웹페이지의 기본 URL 설정

기본 URL의 핵심은 하이퍼링크의 속성을 균일하게 설정하는 것입니다. 에는 href와 _target이라는 두 가지 속성이 있습니다. href는 기본 URL의 경로를 설정하는 데 사용되며, _target은 하이퍼링크 열기 방법을 설정하는 데 사용됩니다.

기본 URL을 추가하면 해당 페이지의 모든 상대 웹사이트 루트 주소를 절대 주소로 변환할 수 있습니다. 브라우저가 페이지를 탐색할 때 상대 웹사이트와 디렉토리 주소는 태그를 통해 기본 URL 경로 뒤에 추가되어 절대 주소로 변환됩니다. 먼저 base.htm을 생성하고 HTML 코드를 다음과 같이 작성합니다.

코드는 다음과 같습니다.

<html> 
<head> 
<title>基底网址的设置</title> 
<base href="<a href="http://www.php.cn">http://www.php.cn/;/a>" _target="_blank" /> 
</head> 
<body> 
</body> 
</html>
로그인 후 복사

위 코드를 통해 기본 URL을 설정합니다. Base.htm 페이지의 하이퍼링크 주소 앞에는 "http://www.jb51.net"이 붙으며 이는 절대 주소로 변환됩니다. 또한 페이지의 하이퍼링크가 새 창에서 열립니다.

지식 2: 헤더 정보의 메타정보 태그

메타정보 태그는 헤더정보의 기본 태그로, 전문적인 웹페이지 코드에 메타정보가 자세히 기술되어 있습니다. . 설정. 메타정보 태그는 로 단일 태그입니다. Meta 요소가 제공하는 정보는 탐색하는 사용자에게는 보이지 않으며 일반적으로 페이지 정보의 이름, 키워드, 작성자 등을 정의하는 데 사용됩니다. HTML 페이지에서 메타 태그에는 메타 콘텐츠가 포함되며 HTML 헤더 페이지에는 여러 개의 메타 요소가 있을 수 있습니다.

메타 태그 속성에는 페이지 설명 속성(이름)과 http 제목 정보(http-equiv)의 두 가지 유형이 있습니다.

name 속성

name 속성은 주로 웹페이지의 내용을 설명하는 데 사용되며, 검색엔진 최적화에 반드시 숙달되어야 합니다. 검색 엔진(Google, Baidu 등)의 검색 로봇이 일반적으로 자동으로 메타 값을 찾아 웹 페이지를 분류할 수 있도록 이름 속성을 올바르게 설정합니다. name 값은

<1>keywords입니다. 즉, 키워드는 웹 페이지에 포함된 키워드 및 기타 정보를 설명하는 데 사용되며, 이를 통해 검색 엔진에 의해 검색될 확률이 높아집니다. 작성 형식은 이며, content 속성의 값은 사용자가 설정한 특정 키워드입니다. (일반적으로 여러 개의 키워드를 영문 반각 쉼표로 구분하여 설정할 수 있습니다. 검색 엔진에서는 키워드 수를 제한하므로 키워드 내용은 간결하고 간결해야 합니다.)

<2>설명. 중국어로 '설명'을 의미하며 웹페이지의 주요 내용, 주제 등을 설명하는 데 사용됩니다. 합리적인 설정은 검색 엔진에서 검색될 확률도 높일 수 있습니다. 형식은 입니다. content 속성 값은 사용자가 설정한 페이지에 대한 구체적인 설명으로 최대 1024자까지 수용할 수 있지만 검색 시에는 엔진은 페이지의 전반부만 표시합니다.

<3>저자. 작성자(Author)는 웹사이트 작성자의 이름을 설정하는 데 사용되며 보다 전문적인 웹사이트에서 자주 사용됩니다. 형식은

<4>generator입니다. 웹사이트 편집 도구의 이름을 설정하는 데 사용되는 생성기는 보다 전문적인 웹사이트 페이지에서 자주 사용됩니다. 형식

<5>로봇. 페이지 검색 방법을 제한하는 데 사용되는 봇. 검색 엔진의 검색 로봇은 지속적으로 정보를 검색하고 웹 페이지의 링크(예: http 및 src 링크)를 따라 자체 데이터베이스를 구축합니다. 이 메타 태그는 검색 엔진에서 일부 콘텐츠를 감지하는 것을 제한하고 일부 정보의 공개를 줄일 수 있습니다. 쓰기 형식은 입니다. 이 속성의 값에는 index, noindex, follow, nofollow 4가지 명령이 포함되어 있으며 배열 및 조합에 따라 4가지 조합이 있습니다. Index와 Follow를 합친 것을 all이라고 할 수도 있고, noindex와 nofollow를 none이라고도 할 수 있습니다.

http-equiv 속성

http-equiv 속성의 값은 다음과 같습니다.

<1>content-type, content Category , 설정 페이지에 대한 카테고리 및 언어 문자 세트를 사용하십시오. 쓰기 형식 , content 속성의 값은 페이지가 HTML 코드로 출력됨을 나타내고 문자는 set은 gb2312 (Simplified Chinese) 이며, 국제적인 웹사이트 개발 시 문자 통일을 위해 utf-8 사용을 권장합니다.

<2>refresh charset. 새로 고침은 웹 페이지가 자동으로 새로 고쳐지는 시간을 설정하는 데 사용됩니다. 또는 일정 시간 내에 자동으로 다른 페이지로 이동합니다. 첫 번째 쓰기 형식 두 번째 쓰기 형식은 입니다. 이는 페이지가 30초 후에 자동으로 www.google로 이동함을 의미합니다. .com 웹사이트

<3>expires,中文意思为“到期”,用于设置页面到期时间。一旦网页过期,必须到服务器上重新调用网页。第一种编写格式为,content值代表网页过期的时间,必须使用GMT时间格式。第二种编写格式为,表示多少秒后过期。

<4>cache-control,缓存控制。用于禁止在缓存中调用网页,编写格式为,no-cache代表不允许缓存。

<5>set-cookie,设置cookie,用于设置本页面cookie多久过期,编写格式为,代表到这个时间,cookie将被删除。


知识点三:头部信息实现与CSS及JavaScript混编

CSS负责HTML网页的样式,JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。
<1>加入CSS只需在头部信息中加入标签对。范例代码如下

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
</head> 
<body> 
</body> 
</html>
로그인 후 복사

<2>加入JavaScript只需要在头部信息中加入标签对。范例代码如下:

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
<script type=“text/javascript”> 
JavaScript具体内容 
</script> 
</head> 
<body> 
</body> 
</html>
로그인 후 복사

知识点四:常用头部信息功能推荐

<1>页面切换特效,其中一种特效的编写格式如下:

代码如下:

<meta http-equiv=“page-enter” content=“blendtrans(duration=0.5)”/>
로그인 후 복사

http-equiv属性的值为page-enter时表进入该页面时启用特效,http-equiv属性的值为page-exit时代表退出(离开)该页面时启用特效。

Content属性的值代表特效的种类,这种特效也叫动态滤镜。滤镜种类很多,比如blendtrans就是很常见得一种,效果为淡入淡出,duration值表示效果持续的时间(单位为秒)。

另一种滤镜特效编写格式如下:

代码如下:

<meta http-equiv=“page-enter” content=“revealTrans(duration=6)”/>
로그인 후 복사

动态滤镜revealTrans也可用于页面进入与退出效果。Duration表示滤镜特效持续时间(单位为秒),Transition是滤镜类型,表示想使用哪种特效,取值为0~23。

<2>强制页面在当前窗口以独立页面显示,可以防止网页被其他网站框架,编写格式如下:

代码如下:

<meta http-equiv="window-target" content=“_top">
로그인 후 복사

<3>页面图标设置,编写格式如下:

代码如下:

<link rel="Shortcut Icon" href="/myicon.ico">
로그인 후 복사

href属性的值是ico图标文件的路径,这里采用的是相对根目录路径

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿