html5頭部內容通常包括：1、title標籤定義的網頁標題；2、Favicon（網站小圖示）；3、編碼方式；4、網站描述；5、頁面關鍵字；6、頁面作者；7、Viewport（行動端適配）；8、CSS樣式表；9、JavaScript腳本。
本教學操作環境：windows7系統、HTML5版、Dell G3電腦。
根據我們的需求，可以在 HTML 頭部定義大量的元數據，也可以定義很少或根本不定義。雖然頭部標籤是 HTML 文件的一部分，但其中的內容並不會顯示在瀏覽器中。
html5頭部內容
#1、網頁標題-- 標籤
標籤用來定義HTML 文件的標題，只有包含<title> 標籤的文件才算是有效的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>編碼方式的規範是放在head的最前面，如果不指定，瀏覽器也會根據伺服器的header進行判定，但是不一定準確。 </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;">頁面</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: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>Viewport（行動端適配）</strong></p><p>這就很常見了，viewport一般是做行動端適配，將頁面放在一個虛擬的視窗中-viewport中，如果網頁沒有用viewport就會出現我們在手機瀏覽器打開時很小，而且還可以移動縮放，low爆了，viewport就是讓網頁開發者通過其大小,動態的設定其網頁內容中控制項元素的大小,從而使得在瀏覽器上實現和web網頁中相同的效果(比例縮小)。 ，用來更好支援響應式網站。 </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:控制viewport的大小，一般情況下指定為device-width(單位為縮放為100%的CSS像素),也可以指定一個固定的值例如600. </p></li><li><p>height:和width對應,指定高度。 </p></li><li><p>initial-scal:初始縮放比例,頁面第一次load的時候的縮放比例。 </p></li><li><p>maximum-scale:允許使用者縮放到的最大比例。 </p></li><li><p>minimum-scale:允許使用者縮放到的最小比例。 </p></li><li><p>user-scalable:使用者是否可以手動縮放。 </p></li></ul><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;">8、內嵌CSS樣式--<style>標籤</span></strong></p>#<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="//m.sbmmt.com/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>
以上是html5頭部內容通常包括哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
