首頁 >web前端 >前端問答 >html5頭部內容通常包括哪些

html5頭部內容通常包括哪些

青灯夜游
青灯夜游原創
2021-12-17 17:17:396200瀏覽

html5頭部內容通常包括:1、title標籤定義的網頁標題;2、Favicon(網站小圖示);3、編碼方式;4、網站描述;5、頁面關鍵字;6、頁面作者;7、Viewport(行動端適配);8、CSS樣式表;9、JavaScript腳本。

html5頭部內容通常包括哪些

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

根據我們的需求,可以在 HTML 頭部定義大量的元數據,也可以定義很少或根本不定義。雖然頭部標籤是 HTML 文件的一部分,但其中的內容並不會顯示在瀏覽器中。

html5頭部內容

#1、網頁標題-- 標籤

標籤用來定義HTML 文件的標題,只有包含<title> 標籤的文件才算是有效的HTML 文件。另外,一個 HTML 文件中僅允許存在一個 <title> 標籤,且 <title> 標籤必須放置在 標籤中。 <p>注意,在 </p> <title> 標籤內部僅允許包含純文字內容,不能包含其他 HTML 標籤。 <p>範例:<br></p><pre class="brush:html;toolbar:false"><head> <title>PHP中文网</title> </head></pre><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><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre><p><strong>3、編碼方式</strong></p> <p>編碼方式的規範是放在head的最前面,如果不指定,瀏覽器也會根據伺服器的header進行判定,但是不一定準確。 </p><pre class="brush:html;toolbar:false"><head> <meta charset="UTF-8"> </head></pre><blockquote><p><meta> 標籤用於提供有關 HTML 文件的元數據,例如頁面有效期、頁面作者、關鍵字列表、頁面描述等資訊。 <meta> 標籤定義的資料並不會顯示在頁面上,但卻會被瀏覽器解析。 </p></blockquote> <p>charset 屬性用來指定 HTML 文件的字元編碼,在上面的範例中,我們將文件的字元編碼設定為了「UTF-8」。 </p> <p><strong>4、網站描述</strong></p><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><p>定義頁面的描述資訊有利於搜尋引擎的搜尋。 </p> <p><strong>5、<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>頁面</span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>關鍵字</span></strong></p><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre><p>關鍵字用於為搜尋引擎提供與頁面相關的資訊。 </p> <p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>6、</span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>頁面作者</span></strong></p><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><p>透過某些內容管理系統可以自動擷取作者資訊。 </p> <p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>7、</span>Viewport(行動端適配)</strong></p> <p>這就很常見了,viewport一般是做行動端適配,將頁面放在一個虛擬的視窗中-viewport中,如果網頁沒有用viewport就會出現我們在手機瀏覽器打開時很小,而且還可以移動縮放,low爆了,viewport就是讓網頁開發者通過其大小,動態的設定其網頁內容中控制項元素的大小,從而使得在瀏覽器上實現和web網頁中相同的效果(比例縮小)。 ,用來更好支援響應式網站。 </p><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre><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 yahei arial sans-serif>8、內嵌CSS樣式--<style>標籤</style></span></strong></p>#<p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式,需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下:</style></p><pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <style> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head></pre><blockquote><p>注意:对于文档中的唯一样式可以使用 <style> 标签,但对于在多个文档中通用的样式,使用外部样式表更为合适。</style></p></blockquote> <p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>9、外部css样式表--<link> 标签</span></strong></p> <p><link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:</p><pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <link rel="stylesheet" href="common.css"> </head></pre><blockquote> <p>HTML </p> 标签中可以包含任意数量的 <link> 标签。</blockquote> <p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei 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 yahei arial sans-serif>通过script标签嵌入JavaScript 脚本代码或链入脚本文件</span></p><pre class="brush:js;toolbar:false"><head> <script> document.write("PHP中文网") </script> </head></pre><pre class="brush:js;toolbar:false"><head> <script src="js/test.js"></script> </head></pre><p>相关推荐:《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>

以上是html5頭部內容通常包括哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn