html5 헤더 콘텐츠에는 일반적으로 다음이 포함됩니다. 1. 제목 태그로 정의된 웹 페이지 제목 2. 파비콘(작은 웹사이트 아이콘) 4. 웹사이트 설명 6. 페이지 작성자; (모바일 단말기 적응) 8. CSS 스타일 시트 9. JavaScript 스크립트.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
필요에 따라 HTML 헤더에 많은 양의 메타데이터를 정의할 수도 있고, 메타데이터를 거의 또는 전혀 정의하지 않을 수도 있습니다. head 태그는 HTML 문서의 일부이지만 해당 내용은 브라우저에 표시되지 않습니다.
html5 헤더 콘텐츠
1. 웹 페이지 제목-- 태그
태그는 HTML 문서의 제목을 정의하는 데 사용됩니다. ; 태그는 유효한 HTML 문서로 간주됩니다. 또한 HTML 문서에는 하나의 <title> 태그만 허용되며 태그 안에는 <title> 태그가 있어야 합니다. <p> </p>
<title> 태그 안에는 일반 텍스트 콘텐츠만 허용되며 다른 HTML 태그는 허용되지 않습니다. <p>예: <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>PHP中文网</title>
</head></pre><div class="contentsignin">로그인 후 복사</div></div><p><img src="https://img.php.cn/upload/image/665/168/925/1639731780475326.png" title="1639731780475326.png" alt="html5 헤더 내용에는 일반적으로 무엇이 포함됩니까?"/></p><p><strong>2. Favicon</strong></p><p> 경로를 지정하지 않으면 브라우저는 루트에서 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre><div class="contentsignin">로그인 후 복사</div></div><p><strong>3을 찾습니다. </strong></p><p>인코딩 방법 지정은 헤더 앞쪽에 있습니다. 지정하지 않으면 브라우저도 서버의 헤더를 기준으로 결정하지만 정확하지 않을 수 있습니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<meta charset="UTF-8">
</head></pre><div class="contentsignin">로그인 후 복사</div></div><blockquote><p><meta> 태그는 페이지 유효 기간, 페이지 작성자, 키워드 목록, 페이지 설명 등과 같은 HTML 문서에 대한 메타데이터를 제공하는 데 사용됩니다. <meta> 태그로 정의된 데이터는 페이지에 표시되지 않지만 브라우저에서 구문 분석됩니다. </p></blockquote><p>charset 속성은 HTML 문서의 문자 인코딩을 지정하는 데 사용됩니다. 위 예에서는 문서의 문자 인코딩을 "UTF-8"로 설정합니다. </p><p><strong>4. 웹사이트 설명</strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><div class="contentsignin">로그인 후 복사</div></div><p> 페이지의 설명 정보를 정의하면 검색 엔진에 도움이 됩니다. </p><p><strong>5, <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">Page</span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">Keywords</span></strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre><div class="contentsignin">로그인 후 복사</div></div><p>키워드는 검색 엔진에 페이지에 대한 정보를 제공하는 데 사용됩니다. </p><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">6, </span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">페이지 작성자</span></strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><div class="contentsignin">로그인 후 복사</div></div><p> 일부 콘텐츠 관리 시스템을 통해 작성자 정보가 자동으로 추출될 수 있습니다. </p><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">7. </span>뷰포트(모바일 적응) </strong></p><p>이것은 일반적으로 모바일 적응에 사용됩니다. 페이지는 뷰포트를 사용하지 않는 경우 나타납니다. 모바일 브라우저를 열면 매우 작으며 이동 및 확대/축소도 가능합니다. 뷰포트를 사용하면 웹 개발자가 크기를 통해 웹 콘텐츠의 제어 요소 크기를 동적으로 설정할 수 있습니다. 브라우저 웹 페이지와 동일한 효과(크기 감소)가 달성됩니다. , 반응형 웹사이트를 더 효과적으로 지원하는 데 사용됩니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre><div class="contentsignin">로그인 후 복사</div></div><ul style="list-style-type: disc;"><li><p>width: 뷰포트의 크기를 제어합니다. 일반적으로 장치 너비(단위는 100%로 조정된 CSS 픽셀)로 지정됩니다. 600과 같은 고정 값을 지정할 수도 있습니다. height: 및 width 그에 따라 높이를 지정합니다. </p></li><li><p>initial-scal: 초기 크기 조정 비율, 페이지가 처음 로드될 때의 크기 조정 비율. </p></li><li><p>maximum-scale: 사용자가 확대/축소할 수 있는 최대 비율입니다. </p></li><li><p>minimum-scale: 사용자가 확대/축소할 수 있는 최소 비율입니다. </p></li><li><p>user-scalable: 사용자가 수동으로 확대/축소할 수 있는지 여부입니다. </p></li><li><p></p></li>8. 내장된 CSS 스타일--<style><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<style>
body { background-color: YellowGreen; }
h1 { color: red; }
p { color: green; }
</style>
</head></pre><div class="contentsignin">로그인 후 복사</div></div><blockquote><p>注意：对于文档中的唯一样式可以使用 <style> 标签，但对于在多个文档中通用的样式，使用外部样式表更为合适。</p></blockquote><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">9、外部css样式表--<link> 标签</span></strong></p><p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<link rel="stylesheet" href="common.css">
</head></pre><div class="contentsignin">로그인 후 복사</div></div><blockquote><p>HTML <head> 标签中可以包含任意数量的 <link> 标签。</p></blockquote><p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">10、JavaScript 脚本</span></strong><br/></p><p><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">通过script标签嵌入JavaScript 脚本代码或链入脚本文件</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head>
<script>
document.write("PHP中文网")
</script>
</head></pre><div class="contentsignin">로그인 후 복사</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head>
<script src="js/test.js"></script>
</head></pre><div class="contentsignin">로그인 후 복사</div></div><p>相关推荐：《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>
위 내용은 html5 헤더 내용에는 일반적으로 무엇이 포함됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
