可视化-模块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元素内容（截图展示）