溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html5頭部內(nèi)容通常包括什么內(nèi)容

發(fā)布時間:2021-12-17 17:35:59 來源:億速云 閱讀:307 作者:小新 欄目:web開發(fā)

這篇文章主要介紹html5頭部內(nèi)容通常包括什么內(nèi)容,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

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

本教程操作環(huán)境:windows7系統(tǒng)、HTML5版、Dell G3電腦。

根據(jù)我們的需求,可以在 HTML 頭部定義大量的元數(shù)據(jù),也可以定義很少或者根本就不定義。雖然頭部標簽是 HTML 文檔的一部分,但其中的內(nèi)容并不會顯示在瀏覽器中。

html5頭部內(nèi)容

1、網(wǎng)頁標題--<title> 標簽

<title> 標簽用來定義 HTML 文檔的標題,只有包含 <title> 標簽的文檔才算是一個有效的 HTML 文檔。另外,一個 HTML 文檔中僅允許存在一個 <title> 標簽,并且 <title> 標簽必須放置在 <head> 標簽中。

注意,在 <title> 標簽內(nèi)部僅允許包含純文本內(nèi)容,不能包含其他 HTML 標簽。

示例:

<head>
    <title>億速云</title>
</head>

2、Favicon

網(wǎng)頁標題左邊的小圖標,指定他的路徑,如果沒有指定,瀏覽器會在根目錄下尋找

<link rel="icon" href="/favicon.ico" type="image/x-icon" />

3、編碼方式

編碼方式的規(guī)范是放在head的最前面,如果不指定,瀏覽器也會根據(jù)服務器的header進行判定,但是不一定準確。

<head>
    <meta charset="UTF-8">
</head>

<meta> 標簽用于提供有關 HTML 文檔的元數(shù)據(jù),例如頁面有效期、頁面作者、關鍵字列表、頁面描述等信息。<meta> 標簽定義的數(shù)據(jù)并不會顯示在頁面上,但卻會被瀏覽器解析。

charset 屬性用來指定 HTML 文檔的字符編碼,上面的示例中,我們將文檔的字符編碼設置為了“UTF-8”。

4、網(wǎng)站描述

<meta name="description" content="這里是對網(wǎng)站的描述">

定義頁面的描述信息有利于搜索引擎的搜索。

5、頁面關鍵字

<meta name="keywords" content="HTML, HTML教程, HTML入門">

關鍵字用于為搜索引擎提供與頁面有關的信息。

6、頁面作者

<meta name="author" content="作者名">

通過某些內(nèi)容管理系統(tǒng)可以自動提取作者信息。

7、Viewport(移動端適配)

這個就很常見了,viewport一般是做移動端適配,將頁面放在一個虛擬的窗口中-viewport中,如果網(wǎng)頁沒有用viewport就會出現(xiàn)我們在手機瀏覽器打開時很小,而且還可以移動縮放,low爆了,viewport就是讓網(wǎng)頁開發(fā)者通過其大小,動態(tài)的設置其網(wǎng)頁內(nèi)容中控件元素的大小,從而使得在瀏覽器上實現(xiàn)和web網(wǎng)頁中相同的效果(比例縮小)。,用來更好支持響應式網(wǎng)站。

 <meta name="viewport" content="width=device-width, initial-scale=1">
  • width:控制viewport的大小,一般情況下指定為device-width(單位為縮放為100%的CSS像素),也可以指定一個固定的值例如600.

  • height:和width相應,指定高度。

  • initial-scal:初始縮放比例,頁面第一次load的時候的縮放比例。

  • maximum-scale:允許用戶縮放到的最大比例。

  • minimum-scale:允許用戶縮放到的最小比例。

  • user-scalable:用戶是否可以手動縮放。

8、內(nèi)嵌CSS樣式--<style>標簽

使用 <style> 標簽可以在 HTML 文檔中嵌入 CSS 樣式,需要注意的是在 <style> 標簽中定義的樣式僅對當前 HTML 文檔有效。示例代碼如下:

<head>
    <title>此處書寫標題</title>
    <style>
        body { background-color: YellowGreen; }
        h2 { color: red; }
        p { color: green; }
    </style>
</head>

注意:對于文檔中的唯一樣式可以使用 <style> 標簽,但對于在多個文檔中通用的樣式,使用外部樣式表更為合適。

9、外部css樣式表--<link> 標簽

<link> 標簽經(jīng)常用于引用外部 CSS 樣式表,<link> 標簽中包含兩個主要的屬性,分別是 rel 和 href。rel 屬性用來指示引用文件的類型,href 屬性用來設置外部文件的路徑。示例代碼如下:

<head>
    <title>此處書寫標題</title>
    <link rel="stylesheet" href="common.css">
</head>

HTML <head> 標簽中可以包含任意數(shù)量的 <link> 標簽。

10、JavaScript 腳本

通過script標簽嵌入JavaScript 腳本代碼或鏈入腳本文件

<head>
    <script>
        document.write("億速云")
    </script>
</head>
<head>
    <script src="js/test.js"></script>
</head>

以上是“html5頭部內(nèi)容通常包括什么內(nèi)容”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關知識,歡迎關注億速云行業(yè)資訊頻道!

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI