可視化-模塊1-HTML-01

1-軟件下載：

軟件名稱：HBuilderX

官網地址：

https://www.dcloud.io/hbuilderx.html

下載文佳-解壓縮-打開exe文件

創建快捷方式至桌面

2-創建項目

【普通項目】-【基本HTML項目】-【項目名：week1-1】

【index】輸入：week1-1！

右上角【預覽】

3-什么是HTML，HTML的作用是什么

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

4-index.html的作用

index.html 是網站默認的首頁文件

具體表現：（以下兩個網址的展示效果是一樣的）

http://127.0.0.1:8848/week1-1/

http://127.0.0.1:8848/week1-1/index.html

5-什么HTML5，與HTML的區別是什么

HTML5 = HTML 的 最新一代標準，它在原來 HTML 的基礎上新增了大量功能并放寬/簡化了一些語法規則，讓網頁能直接做以前需要插件或復雜腳本才能做的事。

HTML5 并不是一種“全新語言”，而是 HTML 的升級包，讓前端開發更簡潔、更強大。

6-HTML的注釋，添加注釋【姓名-學號】并預覽

7-逐行解釋默認代碼文檔

<!DOCTYPE html>      <!-- 聲明文檔類型 -->
<html>               <!-- Html文件的開始 --><head><meta charset="utf-8" /><title></title></head><body>week1-1!</body>
</html>              <!-- Html文件的結尾 -->

逐行解釋如下：

1. <!DOCTYPE html>
? ?告訴瀏覽器“這是一份 HTML5 文檔”，必須寫在文件最頂部，保證瀏覽器以標準模式渲染頁面。

2. <html>
? ?整個 HTML 文檔的根元素（開始標簽）。所有可見與不可見的內容都必須放在 <html> 和 </html>之間。

3. <head>
? ?文檔的“頭部”開始標簽。里面放的是不會直接顯示在頁面但對瀏覽器和搜索引擎有用的元數據。

4. <meta charset="utf-8" />`?
? ?指定字符編碼為 UTF-8，確保頁面能正確顯示中文、emoji 等各種字符。??
? ?`/>` 是 XHTML 風格的自閉合寫法，HTML5 里也合法。

5. <title></title>
? ?設置瀏覽器標簽頁標題（目前為空，所以標簽頁會顯示空白或網址）。

6. </head>
? ?頭部結束標簽，表示元數據部分到此為止。

7. <body>
? ?文檔的“主體”開始標簽。頁面真正要展示給用戶看的內容都寫在這里。

8. week1-1!
? ?純文本內容，瀏覽器會把它直接渲染到頁面上，顯示一行字：`week1-1!`

9. </body>
? ?主體結束標簽。

10. </html>?
? ? 整個 HTML 文檔的結束標簽，表示文件到此完結。

8-head標簽中的元數據是什么

“元數據”就是**“關于數據的數據”**——它們本身不會直接顯示在網頁里，卻告訴瀏覽器、搜索引擎或社交平臺“這份文檔是誰寫的、該怎么解析、該怎么展示”。

<head> 里的元數據就是“寫給機器看的說明書”，決定頁面編碼、標題、摘要、移動端適配、SEO、社交分享卡片、圖標等所有“看不見卻很重要”的信息。

8-2-head中通常包含哪幾類數據

在 <head> 標簽里，常見的元數據分 4 類：1-字符與兼容性
<meta charset="utf-8">              <!-- 文檔編碼 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- 強制 IE 用最新渲染引擎 -->2-SEO & 社交摘要
<title>頁面標題（瀏覽器標簽、搜索結果主標題）</title>
<meta name="description" content="150 字以內的頁面簡介">
<meta name="keywords" content="HTML, 前端, 教程">
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 移動端適配 -->
<meta name="robots" content="index,follow">  <!-- 允許搜索引擎抓取 -->
<!-- Open Graph / Twitter Card -->
<meta property="og:title" content="HTML 教程">
<meta property="og:image" content="https://site.com/cover.jpg">3-樣式與腳本
<link rel="stylesheet" href="style.css">  <!-- 外部樣式 -->
<script src="app.js" defer></script>      <!-- 外部腳本 -->
<style> /* 內嵌樣式 */ </style>4-資源提示 & PWA
<link rel="icon" href="favicon.ico">      <!-- 站點圖標 -->
<link rel="canonical" href="https://site.com/page">  <!-- 防重復內容 -->
<link rel="manifest" href="manifest.json"> <!-- PWA 配置文件 -->

8-3-meta標簽

<meta> 就是“寫給機器的配置項”：

告訴瀏覽器怎么解析、怎么縮放；

告訴搜索引擎怎么收錄、展示摘要；

告訴社交平臺分享時用什么標題和縮略圖；

還能做跳轉、刷新、主題色等各種“小動作”。

9-如何查看head中的元素

打開網頁 → 按 F12（或右鍵空白處 → “檢查/Inspect”）。

頂部選 Elements（元素）標簽。

在 DOM 樹里找到并點擊 <head> 左側的 ?/▼，即可展開所有 <meta>、<title>、<link>、<script> 等元數據。

點擊其中任意一行，右側面板會顯示該元素的屬性、樣式、事件監聽等詳情。

10-utf-8

UTF-8 是一種 字符編碼方式（character encoding）。
它的核心作用：把人類能看懂的字符（如漢字“中”、emoji “😊”、英文字母 “A”）轉換成計算機能夠存儲和傳輸的二進制 0/1，并且還能再原樣還原回來。

任務書：

任務1-本節課安裝的軟件名稱是什么任務2-軟件的安裝地址是什么任務3-簡述軟件的安裝步驟任務4-簡述創建一個HTML項目的步驟任務5-完成以下實操任務：在index.html的網頁中輸入自己的姓名，學號并通過預覽功能展示出效果（截圖展示）任務6-完成以下實操任務：使用HTML的注釋對index網頁中的所有標簽進行解釋說明（上傳編輯好的代碼）任務7-完成以下實操任務：查看淘寶網的head元素內容（截圖展示）

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/96618.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/96618.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/96618.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！