HTML5權威指南-第七章-HTML文件-筆記

阿新 • • 發佈：2021-07-10

HTML文件

問題	解決方案
表示文件包含的是HTML5內容	使用DOCTYPE元素
表示文件中HTML標記的開始	使用html元素
表示HTML文件中元資料部分的開始	使用head元素
表示HTML文件中內容部分的開始	使用body元素
設定HTML文件的標題	使用title元素
設定HTML文件中相對URL的基礎URL	使用base元素
新增對於HTML文件所含資料的宣告	使用meta元素
宣告HTML文件的字元編碼	使用帶charset屬性的meta元素
設定HTML文件的預設樣式表或週期性的重新整理頁面內容	使用帶http-equiv屬性的meta元素
定義文件內嵌樣式	使用style元素
載入樣式表文件和網站標誌	使用link元素
預先載入預計馬上會用到的資源	使用rel屬性值為prefetch的link元素
定義文件內嵌指令碼	使用script元素
載入外部指令碼檔案	使用帶src屬性的script元素
控制指令碼的執行時機和方式	使用帶async或defer的script元素
瀏覽器不支援javascript指令碼所顯示的內容	使用noscript元素

<!-- 宣告文件包含的是html5內容 -->
<!DOCTYPE HTML>
<!-- 文件的根元素 -->
<html>
	<!-- 包含文件的元資料 -->
    <head>
        <title>html標題</title>
        <base href="" />
        <meta name="author" content="A simple example"/>
        <!-- 讓瀏覽器每隔五秒就載入此頁面 -->
        <meta http-equiv="refresh" content="5"/>
        <!-- 載入外部樣式檔案 -->
        <link rel="stylesheet" type="text/css" href="styles.css"/>
        <!-- 網站標誌 如果網站標誌檔案位於/favicon.ico（即Web伺服器的根目錄），那就不必用到link元素。大多數瀏覽器在載入頁面時都會自動請求這個檔案，就算沒有link元素也是如此。-->
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
        <!-- 預載入資源 -->
        <link rel="prefetch" href="/page2.html"/>
        <!-- 定義文件內嵌樣式 -->
        <style></style>
		<!-- 定義文件內嵌指令碼 -->
        <script>
        	console.log("hello");
        </script>
        <!-- 載入外部指令碼檔案，預設情況下，瀏覽器一遇到script元素就會暫停處理HTML文件，轉而載入指令碼檔案並執行其中的指令碼。有個顯而易見的解決辦法是將script元素放到文件最後 -->
        <script src="jsvascript.js"></script>
        <!-- 在HTML5中可以用defer屬性達到同樣的目的。瀏覽器在遇到帶有defer屬性的script元素時，會將指令碼的載入和執行推遲到HTML文件中所有元素都已得到解析之後。defer屬性只能用於外部指令碼檔案，它對文件內嵌指令碼不起作用。 -->
        <script defer src="jsvascript.js"></script>
        <!-- 使用了async屬性後，瀏覽器將在繼續解析HTML文件中其他元素（包括其他script元素）的同時非同步載入和執行指令碼。-->
        <script async src="jsvascript.js"></script>
        <!-- noscript元素可以用來向禁用了JavaScript或瀏覽器不支援JavaScript的使用者顯示一些內容。 -->
        <noscript>
            <h1>Javascript is required!</h1>
            <p>You cannot use this page without Javascript</p>
        </noscript>
        <!-- 技巧：在瀏覽器不支援JavaScript時將其引至另一個URL。這需要在noscript元素中加入一個meta元素 -->
        <noscript>
            <meta http-equiv="refresh" content="0; http://www.apress.com"/>
        </noscript>
    </head>
    <!-- 文件的內容 -->
    <body>
        <!-- 載入外部指令碼檔案，預設情況下，瀏覽器一遇到script元素就會暫停處理HTML文件，轉而載入指令碼檔案並執行其中的指令碼。有個顯而易見的解決辦法是將script元素放到文件最後 -->
        <script src="simple2.js"></script>
    </body>
</html>