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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
