全棧之前端 | 2.HTML根部頭部主體標簽元素學習篇

設為「?? 星標」帶你從基礎入門 到 全棧實踐 再到 放棄學習！
涉及 網絡安全運維、應用開發、物聯網IOT、學習路徑、個人感悟 等知識分享。

希望各位看友多多支持【關注、點贊、評論、收藏、投幣】，助力每一個夢想。

【WeiyiGeek Blog's - 花開堪折直須折，莫待無花空折枝 】
作者主頁: 【 https://weiyigeek.top 】
博客地址: 【 https://blog.weiyigeek.top 】
作者答疑學習交流群：歡迎各位志同道合的朋友一起學習交流【點擊 ?? 加入交流群】, 或者關注公眾號回復【學習交流群】。

0x00 Html 標簽元素
0x01 Head 標簽元素
0x02 Body 標簽元素

首發地址: https://mp.weixin.qq.com/s/TVnsKKyW06g0zhMeQDSSmQ

0x00 Html 標簽元素

描述: HTML html 元素表示一個 HTML 文檔的根（頂級元素），所以它也被稱為根元素，所有其他元素必須是此元素的后代。

屬性:

lang : 設置有效 IETF 標識語言標記后有助于屏幕閱讀技術確定要陳述的正確語言，若沒有設置通常使用操作系統默認語言。參考地址 (https://www.ietf.org/rfc/bcp/bcp47.txt)
xmlns : 指派文檔的 XML 命名空間。默認的值是"http://www.w3.org/1999/xhtml"
manifest 已棄用: 指定一個資源清單的 URI，指示應在本地緩存的資源。
version 已棄用: 指定控制當前文檔的 HTML 版本文檔類型定義 (en-US) 。

示例:

<!DOCTYPE html>
<html lang="zh">
  <head>...</head>
  <body>...</body>
</html>

0x01 Head 標簽元素

head 標簽

描述： HTML <head> 元素包含了所有的頭部標簽元素,通常我們可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>等 HTML 元數據信息.

<head> : 定義了文檔的信息
<title> : 定義了文檔的標題
<base> : 定義了頁面鏈接標簽的默認鏈接地圳
<link> : 定義了一個文檔和外部資源之間的關系
<meta> : 定義了HTML文檔中的元數據
<script> : 定義了客戶端的js腳本文件
<noscript> ：定義了客戶端不支持或者禁用js時執行的替代內容
<style> : 定義了HTML文檔的樣式文件

溫馨提示: HTML <head> 元素與 <body> 元素不同，它的內容不會在瀏覽器中顯示，它的作用是保存頁面的一些元數據。
溫馨提示：如果在文檔中忽略了 <head> 標簽，則大部分瀏覽器會自動創建一個 <head> 元素。

Q:head 頭部元素里有什么?

答: 在頁面加載完成的時候，head 標簽里的內容，是不會在頁面中顯示出來的。
它包含了諸如頁面的 <title>（標題）、指向 CSS 的鏈接（如果你選擇用 CSS 來為 HTML 內容添加樣式）、指向自定義圖標的鏈接和其它的元數據（描述 HTML 的數據，比如，作者和描述文檔的重要關鍵詞）等信息。

title 標簽

描述：HTML <title> 元素定義文檔的標題, 顯示在瀏覽器的標題欄或標簽頁上。它只應該包含文本，若是包含有標簽，則它包含的任何標簽都將被忽略, 且一個 <head> 元素只能包含一個 <title> 元素。

作用:

1）定義了瀏覽器工具欄的標題
2）當網頁添加到收藏夾時，顯示在收藏夾中的標題
3）顯示在搜索引擎結果頁面的標題

示例： <title>HTML頭部標簽元素介紹實踐-唯一極客-博客文章專欄</title>

補充： 頁面標題的內容可能對搜索引擎優化（SEO）具有重要意義，下面羅列了一些準則與技巧。

1.避免使用一兩個單詞的標題, 請使用描述性短語或術語。
2.搜索引擎通常顯示頁面標題的前 55 至 60 個字符。
3.不要使用“關鍵字集合”。
4.嘗試確保您的標題在您自己的網站中盡可能唯一。

參考地址：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/title

base 標簽

描述: 設置基本的鏈接地址(鏈接目標),該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:（類似）相對地址的相對地址。

屬性:

href : 用于文檔中相對 URL 地址的基礎 URL
target : 默認瀏覽上下文的關鍵字或作者定義的名稱，當沒有明確目標的鏈接 <a> 或表單 <form> 導致導航被激活時顯示其結果.

_self: 載入結果到當前瀏覽上下文中。（該值是元素的默認值）。
_blank: 載入結果到一個新的未命名的瀏覽上下文。
_parent: 載入結果到父級瀏覽上下文（如果當前頁是內聯框）。如果沒有父級結構，該選項的行為和_self一樣。
_top: 載入結果到頂級瀏覽上下文（該瀏覽上下文是當前上下文的最頂級上下文）。如果沒有父級，該選項的行為和_self 一樣。

示例

<!-- 示例1.圖片路徑與窗口打開方式 -->
<head>
  <base  target="_blank">
</head>
<img src="logo.png"> - 注意這里我們設置了圖片的相對地址，它還是能正常顯示是因為我們在 head 部分設置了 base 標簽，該標簽指定了頁面上所有鏈接的默認 URL，所以該圖片的訪問地址為 "https://www.weiyigeek.top/img/images/logo.png"
<br><br>
<a >前端篇-HTML學習</a> - 注意這個鏈接會在新窗口打開，即便它沒有 target="_blank" 屬性。因為在 base 標簽里我們已經設置了 target 屬性的值為 "_blank"。

<!-- 示例2.頁內錨指向文檔中某個片段的鏈接 -->
<!-- 例如 <a href="#some-id"> 用 <base> 解析，觸發對帶有附加片段的基本 URL 的 HTTP 請求。 -->
<!--點擊 `#anchor` 鏈接指向 https://example.com/#anchor -->

<base >
<a href="#anchor">Anker</a>

溫馨提示: 如果指定了多個 <base> 元素，只會使用第一個 href 和 target 值，其余都會被忽略。

meta 元素

描述: HTML <meta> 元素表示那些不能由其它 HTML 元相關（meta-related）元素表示的元數據信息，通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據，元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎和更新頻度的描述和關鍵詞，或其他Web服務，其一般放置與head標簽中。

該元素定義的元數據的類型一覽：

如果設置了 name 屬性，<meta> 元素提供的是文檔級別（document-level）的元數據，應用于整個頁面。
如果設置了 charset 屬性，<meta> 元素是一個字符集聲明，告訴文檔使用哪種字符編碼。
如果設置了 itemprop 屬性，<meta> 元素提供用戶定義的元數據。
如果設置了 http-equiv 屬性，<meta> 元素則是編譯指令，提供的信息與類似命名的 HTTP 頭部相同。

屬性

charset : 該屬性聲明了文檔的字符編碼。
content : 此屬性包含http-equiv 或name 屬性的值，具體取決于所使用的值。
name : 該屬性可以和content 屬性一起使用，以名 - 值對的方式給文檔提供元數據，其中 name 作為元數據的名稱，content 作為元數據的值。
http-equiv : 此屬性定義了一個編譯指示指令，例如

content-security-policy : 它允許頁面作者定義當前頁的內容策略 (en-US), 防止跨站點腳本攻擊。
content-type : 設置文檔MIME type類型以及編碼格式，例如 "text/html; charset=utf-8"
refresh : 指定頁面重新載入頁面的時間間隔 (秒)以及當跟著字符串 '3;url=https://weiyigeek.top' 則進行跳轉到指定網頁站點
default-style : 設置默認 CSS 樣式表組的名稱。
x-ua-compatible : 如果指定則 content 屬性必須具有值 "IE=edge"。

示例:

<!-- 示例1.頁面文檔類型及文檔字符編碼 -->
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<!-- 示例2.Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://weiyigeek.top">
<p>對不起。我們已經搬家了,您的 URL 是 <a >https://blog.weiyigeek.top</a></p>
<p>您將在 5 秒內被重定向到新的地址。</p>
<p>如果超過 5 秒后您仍然看到本消息，請點擊上面的鏈接。</p>

<!-- 示例3.自定義元數據,如下定義網頁作者，修訂與編輯軟件 -->
<meta name="author" content="WeiyiGeek" />
<meta name="revised" content="WeiyiGeeker,8/1/07">   <!--經過修訂（或校正）的-->
<meta name="generator" content="VScode">  <!--編輯的軟件-->

<!-- 示例4.用于指定用戶是否可以縮放Web頁面及針對移動設備進行了優化 
-- width和height指令分別指定視區的邏輯寬度和高度。
-- user-scalable指令指定用戶是否可以縮放視區。
-- initial-scale指令用于設置Web頁面的初始縮放比例，設為1.0則將顯示未經縮放的Web文檔。
-- maximum-scale和minimum-scale指令用于設置用戶對Web頁面縮放比例的限制。
-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- 示例5.網站SEO常用的keywords與description元數據,非常注意關鍵字與描述長度 -->
<meta name="keywords" content="WeiyiGeek、唯一極客、IT知識、網絡技術、網絡安全、安全測試、安全運維、系統運維、Web程序開發、手機/移動開發、IOT物聯網開發、數據庫學習、系統管理和監控、插件和擴展、開源軟件、企業實踐、分享學習知識">
<meta name="description" content="WeiyiGeek-唯一極客博客站點,關注于網絡安全運維,Web安全開發,IOT物聯網安全開發,應用開發,分享技術學習知識與入坑解決,提升網絡安全技術與自身技術能力,立志維護大眾網絡安全為己任,做一個對國家有用的人,為實現中華民族偉大復興的中國夢不懈奮斗">

擴展說明：

revised：英 [r?'va?zd] 美 [r?'va?zd]：v. 修改；校訂；復習（revise的過去分詞形式），adj. 改進的
expires：英 [?k'spa??z] 美 [ek- ?k'spa??z]：n. 到期；有效期：v. 期滿；斷氣（expire的三單形式）

link 標簽

描述: 外部資源鏈接元素 (<link>) 規定了當前文檔與外部資源的關系。該元素最常用于鏈接樣式表，此外也可以被用來創建站點圖標 (比如 PC 端的“favicon”圖標和移動設備上用以顯示在主屏幕的圖標) ，在CSS我們也會講到。

屬性

rel ：此屬性命名鏈接文檔與當前文檔的關系，其中常用的是stylesheet與icon。
href : 此屬性指定被鏈接資源的URL。
hreflang : 此屬性指明了被鏈接資源的語言
disabled : 僅對于rel="stylesheet" ，disabled 的 Boolean 屬性指示是否應加載所描述的樣式表并將其應用于文檔。
media : 屬性規定了外部資源適用的媒體類型, 例如：all、print、screen、aural、braille
sizes : 屬性定義了包含相應資源的可視化媒體中的 icons 的大小, 例如 "72x72"
type : 屬性被用于定義鏈接的內容的類型。這個屬性的值應該是像 text/html，text/css 等 MIME 類型

as : 該屬性僅在<link>元素設置了 rel="preload" 或者 rel="prefetch" 時才能使用。它規定了<link>元素加載的內容的類型，對于內容的優先級、請求匹配、正確的內容安全策略的選擇以及正確的 Accept請求頭的設置，這個屬性是必需的。

值	應用于
audio	`audio` 元素
document	`iframe` 和 `frame` 元素
embed	`embed` 元素
fetch	fetch，XHRT該值還需要＜link＞來包含交叉起源屬性。
font	CSS @font-face
image	具有srcset或imageset屬性的＜img＞和＜picture＞元素、SVG＜image＞元素、CSS*-image規則
object	`object` elements
script	`script` elements, Worker `importScripts`
style	`<link rel=stylesheet>` elements, CSS `@import`
track	`track` elements
video	`video` elements
worker	Worker, SharedWorker

crossorigin : 此枚舉屬性指定在加載相關資源時是否必須使用 CORS,啟用 CORS 的圖片可以在 <canvas> 元素中重復使用，并避免其被污染. 可取的值如下：

"anonymous" : 會發起一個跨域請求 (即包含 Origin: HTTP 頭).

"use-credentials" : 會發起一個帶有認證信息 (發送 cookie, X.509 證書和 HTTP 基本認證信息) 的跨域請求 (即包含 Origin: HTTP 頭).

importance 實驗性: 指示資源的相對重要性，只有存在 rel=“preload”或 rel=“prefetch”時,可選屬性 auto、high、low（向瀏覽器指示資源的優先級較低）。
integrity 實驗性: 包含行內元數據，它是一個你用瀏覽器獲取的資源文件的哈希值，以 base64 編碼的方式加的密, 從而使用它驗證一個獲取到的資源，在傳送時未被非法篡改。
referrerpolicy 實驗性：一個字符串，指示在獲取資源時使用哪個引薦來源網址：

示例

<head>
  <!-- 示例1.設置網站圖標的鏈接以及表示不同移動平臺上特殊的圖標類型 -->
  <link rel="icon" href="favicon.ico">
  <link rel="shortcut icon" href="/img/favicon.ico">
  <link rel="apple-touch-icon-precomposed" sizes="114x114"
        href="apple-icon-114.png" type="image/png">

  <!-- 示例2.標簽通常用于鏈接到一個樣式表css文件 -->
  <link href="mobile.css" rel="stylesheet" media="all">
  <link href="mobile.css" type="text/css"  rel="stylesheet"  media="screen and (max-width: 600px)">
  <link href="highres.css" rel="stylesheet" media="screen and (min-resolution: 300dpi)">
  <link  href="/staic/css/mystyle.css" type="text/css" rel="stylesheet"  media="print">

  <!-- 示例3.加入了一些新的有意思的性能和安全特性 -->
  <link rel="preload" href="myFont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
   
  <!-- 示例4.表示當前文檔的可替換樣式表，也是需要提前下載的。 -->
  <link rel="stylesheet" type="text/css" href="out.css">			<!--作為默認樣式表-->
  <link rel="alternate" type="text/css" href="out.css">	      <!--作為可替換樣式表-->
  <link rel="alternate" href="/atom.xml" title="WeiyiGeek Blog" type="application/atom+xml">

  <!-- 示例5.利用樣式表加載事件 -->
  <script>
  function sheetLoaded() {
    // Do something interesting; the sheet has been loaded
    alert("網頁資源加載!");
  }
  function sheetError() {
    alert("An error occurred loading the stylesheet!");
  }
  </script>
  <link rel="stylesheet" href="mystylesheet.css" onload="sheetLoaded()" onerror="sheetError()">
  
  <!-- 示例6.權威站點便于收錄 -->
  <link rel="canonical"  />
</head>

補充

WebTV 支持rel使用next值，用于在一個 document series 中預加載下一頁。

style 標簽

描述: <style> 標簽元素包含文檔的樣式信息或者文檔的部分內容，在后續的CSS學習中會講到。

屬性:

type: 該屬性以 MIME 類型（不應該指定字符集）定義樣式語言。如果該屬性未指定，則默認為 text/css。
media: 該屬性規定該樣式適用于哪個媒體, 可能的運算符 and not ,，以及設備和值如下。

all 默認。適應所有設備。
aural 語音合成器。
braille 盲人用點字法反饋設備。
handheld 手持設備（小屏幕、有限的帶寬）。
projection 放映機。
print 打印預覽模式 / 打印頁。
screen 計算機屏幕（默認值）。
tty 電傳打字機以及使用等寬字符網格的類似媒介。
tv 電視類型設備（低分辨率、有限的屏幕翻滾能力）。

nonce: 一種加密的隨機數（一次使用的數字），用于在style-src Content-Security-Policy (en-US)中將內聯樣式列入白名單。
title: 指定可選的樣式表

示例: 在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:

<head>
<!-- 簡單的樣式表 -->
<style type="text/css">
  body {background-color:yellow}
  p {color:blue; background-color: blue;padding: 5px; border: 1px solid black;}
</style>

<!-- 多種樣式元素 -->
<style>
  p {
    color: blue;
    background-color: yellow;
  }
</style>

<!-- 包含媒體 (media) 選擇，視圖寬度小于 500px 時生效 -->
<style media="all and (max-width: 500px)">
  p {
    color: blue;
    background-color: yellow;
  }
</style>
</head>
<body>
  <p>This is my blog site.</p>
</body>

<!-- 針對兩種不同媒介類型（屏幕和打印）的兩個不同的樣式表 -->
<style type="text/css" media="print">
h1 {color:#000000;}
</style>

溫馨提示:

值	描述
width	規定目標顯示區域的寬度。可使用 "min-" 和 "max-" 前綴。例子：media="screen and (min-width:500px)"
height	規定目標顯示區域的高度。可使用 "min-" 和 "max-" 前綴。例子：media="screen and (max-height:700px)"
device-width	規定目標顯示器/紙張的寬度。可使用 "min-" 和 "max-" 前綴。例子：media="screen and (device-width:500px)"
device-height	規定目標顯示器/紙張的高度。可使用 "min-" 和 "max-" 前綴。例子：media="screen and (device-height:500px)"
orientation	規定目標顯示器/紙張的方向。可能的值："portrait" or "landscape(`橫向`)" 例子：media="all and (orientation: landscape)"
aspect-ratio	規定目標顯示區域的寬度/高度比可使用 "min-" 和 "max-" 前綴。例子：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio	規定目標顯示器/紙張的 device-width/device-height 比率可使用 "min-" 和 "max-" 前綴。例子：media="screen and (device-aspect-ratio:16/9)"
color	規定目標顯示器的 bits/color 可使用 "min-" 和 "max-" 前綴。例子：media="screen and (color:3)"
color-index	規定目標顯示器可以處理的顏色數。可使用 "min-" 和 "max-" 前綴。例子：media="screen and (min-color-index:256)"
monochrome	規定單色幀緩沖中的 bits/pixel。可使用 "min-" 和 "max-" 前綴。例子：media="screen and (monochrome:2)"
resolution	規定目標顯示器/紙張的像素密度 (dpi 或 dpcm)。可使用 "min-" 和 "max-" 前綴。例子：media="print and (resolution:300dpi)"
scan	規定 tv 顯示器的掃描方式。可能的值："progressive" 和 "interlace"。例子：media="tv and (scan:interlace)"
grid	規定輸出設備是否是網格或位圖。可能的值："1" 為網格，否則為 "0"。例子：media="handheld and (grid:1)"

溫馨提示：在網頁中使用CSS樣式通常有內聯、內部、外部三種方式，其優先級依次遞減。

內聯樣式，又稱行內樣式，在標簽內部通過style屬性來設置元素的樣式。
內部樣式, 把樣式寫到head里的style標簽中。
外部樣式, 編寫一個外部的css文件，在html內通過link標簽引入它。

script 標簽

描述: HTML <script> 元素用于嵌入或引用可執行腳本。這通常用作嵌入或者指向 JavaScript 代碼。<script> 元素也能在其他語言中使用，比如 WebGL 的 GLSL 著色器語言。

屬性:

src : 屬性定義引用外部腳本的 URI，這可以用來代替直接在文檔中嵌入腳本。
type : 屬性定義 script 元素包含或src引用的腳本語言。屬性的值為 MIME 類型; 支持的 MIME 類型包括text/javascript, text/ecmascript, application/javascript, 和application/ecmascript。
text : 屬性與textContent 屬性類似，用于設置元素的文本內容。
async : 對于普通腳本，那么普通腳本會被并行請求，對于模塊腳本，那么腳本及其所有依賴都會在延緩隊列中執行，因此它們會被并行請求，并盡快解析和執行。
defer : 此屬性被設定用來通知瀏覽器該腳本將在文檔完成解析渲染后，觸發 DOMContentLoaded 事件前執行。
crossorigin : 那些沒有通過標準CORS (en-US)檢查的正常script 元素傳遞最少的信息到 window.onerror, 可以使用本屬性來使那些將靜態資源放在另外一個域名的站點打印錯誤信息。
- anonymous : 請求使用了 CORS 標頭，且證書標志被設置為 'same-origin'。沒有通過 cookies、客戶端 SSL 證書或 HTTP 認證交換用戶憑據，除非目的地是同一來源。
- use-credentials : 請求使用了 CORS 標頭，且證書標志被設置為 'include'。總是包含用戶憑據。
integrity : 包含用戶代理可用于驗證已提取資源是否已無意外操作的內聯元數據.
nomodule : 此布爾屬性被設置來標明這個腳本在支持 ES2015 modules 的瀏覽器中不執行。
nonce : 腳本 src Content Security Policy（en-US）中白名單內聯腳本的密碼隨機數（使用一次）。
referrerpolicy : 指示提取腳本或腳本提取的資源時要發送的引用者：
- no-referrer: The Referer header will not be sent.
- no-referrer-when-downgrade (default): The Referer header will not be sent to origins without TLS (HTTPS).
- origin: The sent referrer will be limited to the origin of the referring page: its scheme, host, and port (en-US).
- origin-when-cross-origin: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
- same-origin: A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
- strict-origin: Only send the origin of the document as the referrer when the protocol security level stays the same (e.g. HTTPS→HTTPS), but don't send it to a less secure destination (e.g. HTTPS→HTTP).
- strict-origin-when-cross-origin: Send a full URL when performing a same-origin request, but only send the origin when the protocol security level stays the same (e.g.HTTPS→HTTPS), and send no header to a less secure destination (e.g. HTTPS→HTTP).
- unsafe-url: The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe

示例:

<!-- 示例1.HTML4 and (x)HTML  -->
<script src="/static/js/index.js" type="text/javascript"></script>

<!-- 示例2.常規script標簽，此處HTML5可省略type屬性
由于 html 代碼是同步按順序執行的，意味著必須把所有的 script 加載解析執行完成后，再繼續渲染頁面。
在多文件時，頁面可能出現長白屏時間的問題。
-->
<script src="blog.js"></script>

<!-- 示例3.使用 defer 屬性的script標簽（推遲執行腳本）
如果標簽帶有 defer 屬性，瀏覽器會另外開辟一個進程來加載 js 資源，而不會阻塞 html 加載
注：帶有 defer 屬性的 script 資源加載完成后不會立即執行，而是等待 html 渲染完成后執行.
-->
<script src="https://weiyigeek.top/test1.js" defer></script>

<!-- 示例4.使用 async 屬性的script標簽（異步執行腳本） 
如果標簽帶有 async 屬性，瀏覽器會另外開辟一個進程來加載 js 資源，資源加載完成后會暫停 html 渲染，并執行 script 腳本
-->
<script src="https://weiyigeek.top/test1.js" async></script>

<!-- 示例5.外部資源 CORS 源設置，請求不包含用戶憑據。 -->
<script src="" crossorigin="anonymous"></script>
<script
  src="https://example.com/example-framework.js"
  crossorigin="anonymous"></script>

溫馨提示:

1.defer 和 async 腳本只適用于外部腳本，都會立即并行加載 script 資源，不同的是，defer 將 script 腳本的運行放到了最后，而 async 則是加載完后立即暫停 html 渲染，等待 script 執行完成后再繼續。

2.多個帶有 defer 或 async 的 script 標簽，由于每個 script 標簽的加載都是單獨另外開辟的進程，位置靠后的 script 資源可能先于完成，因此無法保證每個標簽是按照代碼位置順序執行的，

WeiyiGeek.常規JS與defer 和 async 腳本執行順序圖

3.與樣式表CSS一樣，JS也分為三種行內js、內部js、外部js三種方式，其優先級依次遞減

行內js: 在標簽中使用事件屬性，不單獨寫出，并且只能該標簽使用，例如 οnclick="javascript:alert('我是行內js')"

內部js: 將js寫在html頁面中的script標簽內部，整個頁面都可以使用。

外部js：通過script標簽的src引入外部js文件，整個頁面都可以使用。注意: 寫在head標簽中不能操作未生成的doucment文檔。

noscript 標簽

描述: 如果頁面上的腳本類型不受支持或者當前在瀏覽器中關閉了腳本，則在 HTML <noscript> 元素中定義腳本未被執行時的替代內容。

示例:

<noscript>
  <noscript>抱歉，你的瀏覽器不支持 JavaScript 或者被禁用!</noscript>
  <a >點擊返回主頁.</a>
</noscript>
<p>若沒有被禁用則正常顯示，此節!</p>

0x02 Body 標簽元素

body 標簽

描述: HTML body 元素表示文檔的內容, document.body 屬性提供了可以輕松訪問文檔的 body 元素的腳本。

屬性:

示例:

<!-- 示例1.常規使用 -->
<body>
  <p>This is a paragraph</p>
</body>

<!-- 示例2.背景（Backgrounds）將背景設置為圖像，屬性值為圖像的URL。
如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制。 
-->
<body background="clouds.png">
<body background="http://www.weiyigeek.top/img/clouds.gif">

<!-- 示例3.背景顏色（Bgcolor）-屬性將背景設置為某種顏色。
屬性值可以是十六進制數、RGB 值或顏色名
例如，頁面背景色全為黑色。 
-->
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

<!-- 示例4.文本（text）-也可以設置顏色： -->
<body bgcolor="#ffffff" text="green">

溫馨提示:

body 標簽中雖然支持背景顏色（bgcolor）、圖片背景（background）和文本（text）屬性，但在最新的 HTML 標準（HTML5、HTML4 和 XHTML）中不符合規范, 我們應該使用層疊樣式表（CSS）來定義 HTML 元素的布局和顯示屬性。
body 標簽中可以包含許多其他標簽，由他們相互嵌套使用，便組合成網頁頁面結構，我會在后續按照功能進行對應標簽學習實踐。

h1 to h6 標簽

描述： <h1> - <h6>標簽被用來定義 HTML 標題，其中 <h1> 定義重要等級最高的標題,<h6> 定義重要等級最低的標題。

溫馨提示: 該標簽建議只用在標題，如果其他文字需要加粗、加大建議使用CSS.

示例:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
請僅僅把標題標簽用于標題文本, 不要僅僅為了產生粗體文本而使用它們, 請使用其它標簽或 CSS 代替。

擴展:
HTML 與 XHTML 之間的差異？

在 HTML 4.01 中，h1 - h6 元素的 "align" 屬性不被推薦使用(結盟，對齊排列)
在 XHTML 1.0 Strict DTD 中，h1 - h6 元素的 "align" 屬性不被支持

<!-- 注意：HTML5 不支持 align 屬性。 -->
<h1 align="justify">這是兩端對齊<h1>
<h2 align="left">左端對齊<h2>
<h3 align="right">右端對齊</h3>
<h4 align="center">居中對齊</h4>

p 標簽

描述: <p> 元素（或者說 HTML 段落元素）表示文本的一個段落。該元素通常表現為一整塊與相鄰文本分離的文本，或以垂直的空白隔離或以首行縮進, 另外p標簽是塊級元素。

示例:

<!-- 示例1. -->
<p>這是第一個段落。這是第一個段落。
   這是第一個段落。這是第一個段落。</p>
<p>這是第二個段落。這是第二個段落。
  段落的行數依賴于瀏覽器窗口的大小。如果調節瀏覽器窗口的大小，將改變段落中的行數。</p>

<!-- 示例2.html中的p標簽里面的空格會被自動消除 -->
<p align="center">     
這個段落
在源代碼       中
包含   許多行
但是      瀏覽器
忽略了  它們。
</p>

溫馨提示: p 元素的 align 屬性已被棄用，建議不要使用。

span 標簽

描述：該元素是短語內容的通用行內容器，并沒有任何特殊語義，與 CSS 一同使用時 <span> 元素可用于為部分文本設置樣式屬性。

注釋：span 標簽沒有固定的格式表現，當對它應用樣式時，它才會產生視覺上的變化。

示例:

<!-- 示例1.span標簽使用外聯樣式 -->
<style>
p.tip,span{
  font-weight:bold;
  color:#ff9955;
}
</style>
<p class="tip"><span>溫馨提示：</span>歡迎訪問 WeiyiGeek 博主網站!</p>

<!-- 示例2.span標簽使用內聯樣式 -->
<p>我的母親有 <span style="color:blue;font-weight:bold">藍色</span> 的眼睛，我得父親有 <span style="color:darkolivegreen;font-weight:bold">碧綠色</span> 的眼睛。</p>

br 標簽

描述: <br /> 元素在文本中生成一個換行（回車）符號, 由于對于 HTML 您無法通過在 HTML 代碼中添加額外的空格或換行來改變輸出的效果，所以此元素在寫詩和地址時需要換行時很有用,

示例：

Author is WeiyiGeek <br/>
My Blog is https://blog.weiyigeek.top <br/>
<p>This is<br />a para<br />graph with line breaks</p>
<br> 還是 <br />，您也許發現 <br> 與 <br /> 很相似

溫馨提示: 不要用 <br /> 來增加文本之間的行間隔, 應使用 CSS margin 屬性或 <p> 元素。

hr 標簽

描述: <hr> 元素建水平線，水平分隔線（horizontal rule）可以在視覺上將文檔分隔成各個部分。
通常用于表示段落級元素之間的主題轉換（例如，一個故事中的場景的改變，或一個章節的主題的改變）。

示例：

<!-- style -->
hr {
  border: none;
  border-top: 3px double #333;
  color: #333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr:after {
  background: #fff;
  content: '§';
  padding: 0 4px;
  position: relative;
  top: -13px;
}

<!-- body -->
Author is WeiyiGeek <hr/>
My Blog is https://blog.weiyigeek.top

綜合實踐：
示例文件: https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/01.index.html
網頁效果：
WeiyiGeek.網頁 Hello-World 圖