前端学习—HTML基础语法（1）

一、HTML定义

HTML超文本（连接）标记（标签，带尖括号的文本）语言，使用标记标签来描述网页。

HTML 文档：包含了HTML标签及文本内容，也叫做web 页面。

二、标签

<开始标签/开放标签 >内容</结束标签/闭合标签>

1.双标签：成对出现

2.单标签：只有开始标签，没有结束标签

tips:标签对大小写不敏感，<P> 等同于 <p>，推荐使用小写

<br>：换行

<hr>：水平线

HTML标签和元素之间关系：

一个 HTML 元素包含了开始标签与结束标签，例如<p>你好</p>

三、Web浏览器

用于读取HTML文件，作为页面显示，使用标签来决定如何展现HTML页面的内容给用户。

四、基本骨架（网页模板）

**<!DOCTYPE html>**声明为 HTML5 文档

<html>： 整个网页（元素是 HTML 页面的根元素）
<head>： 网页头部，存放给浏览器看的代码，例如CSS;元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8 。
<body>： 网页主体，存放给用户看的代码，例如图片、文字
**<title>：**网页标题

tips:

1.VS Code快速生成骨架：!（英文）配合Enter/Tab键

2.在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看wu到组成标签

五、HTML AL编程助手

具体教程参考：HTML AI 编程助手 | 菜鸟教程

六、标签的关系

父子关系（嵌套关系）

兄弟关系（并列关系）

举例：html和head、body是父子关系，而head和body是兄弟关系（默认是左对齐）

七、注释

tips：快速注释ctrl+/（消除也是）

八、标签分类

1.标题标签

新闻标题、文章标题、网页区域名称、产品名称等等。

标签名：h1~h6（双标签）【一级标题到六级标题】

显示特点：

文字加粗、字号逐渐减小、独占一行（换行）

注：h1在一个网页中只能用一次（放新闻标题、网页logo）

2.段落标签

标签名：p（双标签）

显示特点：独占一行，段落之间存在间隙

3.换行与水平线标签

纯换行：<br>（单标签）

段落内换行：<p>这个<br>段落<br>演示了分行的效果</p>

水平线：<hr>（单标签）

tips：对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。

4.文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

|----------|-------------------|
| 标签名 | 效果 |
| strong/b | 加粗 |
| em/i | 倾斜 |
| ins/u | ++下划线（ins定义插入字）++ |
| del/s | 删除线 |
| small | 小号字 |
| sub | 下标字（比如一些公式下标） |
| sup | 上标字 |

tips：strong和b区别、em和i区别再视觉上是一样的，但是b是定义加重语气，而em是定义着重文字，是给浏览器、搜索引擎、屏幕阅读器（视障人士使用的工具）看的，告诉它们 "这段文字在内容逻辑上很重要"。

5.图像标签

作用：在网页中插入图片。

<img src="图片的URL" 属性>（tips:路径URL例如：./cat.jpg）

src用于指定图像的位置和名称，是<img>的必须属性。

属性：属性名="属性值"（tips:注意标签名和属性之间用空格隔开，不区分先后顺序）

|--------|-------|------------------|----------------|
| 属性 | 作用 | 说明 | 例子 |
| alt | 替换文本 | 图片无法显示的时候显示的文字 | alt="这是一只小狗" |
| title | 提示文字 | 鼠标悬停在图片上面的时候显示文字 | title="这是一只小狗" |
| width | 图片的宽度 | 值为数字，没有单位 | width="100" |
| height | 图片的宽度 | 值为数字，没有单位 | height="100" |

6.链接标签

<a href="指定链接的地址">这是一个链接</a>

6.1打开方式（target）

|---------|--------------------|
| 方式（属性） | 说明 |
| _blank | 在新窗口或新标签页中打开链接 |
| _self | 在当前窗口或标签页中打开链接（默认） |
| _parent | 在父框架中打开链接 |
| _top | 在整个窗口中打开链接，取消任何框架 |

6.2链接与目标页面的关系（rel）

**nofollow:**表示搜索引擎不应跟踪该链接，常用于外部链接。

noopener 和**noreferrer:**防止在新标签中打开链接时的安全问题，尤其是使用 target="_blank" 时。

|---------------------|------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|
| 属性值 | 核心功能 | 适用场景 |
| noopener | 防止新的浏览上下文（页面）访问window.opener属性和open方法（告诉搜索引擎 "不要跟踪这个链接"）【避免搜索引擎权重传递给外部链接】 | 所有外部链接（比如广告、第三方链接） |
| noreferrer | 不发送referer header（即不告诉目标网站你从哪里来的）【解决target="_blank"的安全漏洞】 | 所有用target="_blank"打开的链接 |
| noopener noreferrer | 同时使用noopener和noreferrer。例子: <a href="https://www.example.com" rel="noopener noreferrer">安全链接</a>（不向目标网站发送 "来源页面" 信息）【保护用户 / 网站的来源隐私】 | 需要隐藏 "从哪里跳转过来" 的场景 |

6.3download

提示浏览器下载链接目标而不是导航到该目标

如果指定了文件名，浏览器会提示下载并保存为指定文件名。

6.4title

定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示

<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>

6.5id

用于链接锚点，通常在同一页面中跳转到某个特定位置

6.6hreflang

指定链接的目标URL的语言

<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>

6.7type

指定链接资源的MIME类型

6.8class

用于指定元素的类名（CSS中定义）

6.9style

直接在元素上定义CSS样式

6.10链接分类

**文本链接：**最常见的链接类型是文本链接，它使用 <a> 元素将一段文本转化为可点击的链接，例如：<a href="https://www.example.com">访问示例网站</a>

**图像链接：**您还可以使用图像作为链接。在这种情况下，<a> 元素包围着 <img> 元素。例如：<a href="https://www.example.com"> <img src="example.jpg" alt="示例图片"> </a>

**锚点链接：**除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：<a href="#section2">跳转到第二部分</a>  <a name="section2"></a>

**下载链接：**如果您希望链接用于下载文件而不是导航到另一个网页，可以使用 download 属性。例如：<a href="document.pdf" download>下载文档</a>

6.11空连接

以下是常见的几种设置空链接的方法，以及它们之间的区别：

方法	作用	是否会跳转	场景适用性
`href="#"`	导航到页面顶部	是	占位符，捕获点击事件
`href="javascript:void(0)"`	阻止默认行为，不刷新页面	否	阻止跳转，配合 JS 使用
`href=""`	刷新当前页面	是	需要页面刷新时
`href="about:blank"`	打开空白页面	是	新窗口打开空白页面
`role="button"`	链接表现为按钮，无默认行为	否	配合 JS 实现按钮功能，无跳转

tips：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

7."计算机输出" 标签

|------|---------------------|
| 标签 | 描述 |
| code | 定义计算机代码 |
| kbd | 定义键盘码 |
| samp | 定义计算机代码样本 |
| var | 定义变量(用于一些数学公式) |
| pre | 定义预格式文本（保留一些空格、Tab） |

html 复制代码

<p>要输出"Hello World"，可以用JavaScript代码：<code>console.log("Hello World");</code></p>
<p>保存文件可以按下 <kbd>Ctrl</kbd> + <kbd>S</kbd> 组合键。</p>
<p>执行命令后，终端返回：<samp>Success: 文件已成功保存</samp></p>
<p>圆的面积公式：S = π × <var>r</var><sup>2</sup>（其中<var>r</var>是圆的半径）</p>
<pre>
function sayHello() {
  console.log("Hello");
  console.log("World");
}

8.引文, 引用, 及标签定义

|------------|----------|---------------------------------------|
| 标签 | 描述 | 效果 |
| abbr | 定义缩写 | 标记缩写词，鼠标 hover 时会显示完整含义（需配合title属性） |
| address | 定义地址 | 标记联系地址、作者信息等，默认样式是斜体 |
| bdo | 定义文字方向 | 强制改变文字的阅读方向（dir="rtl"表示从右到左） |
| blockquote | 定义长的引用 | 标记大段引用内容，默认会缩进显示（区分正文） |
| q | 定义短的引用语 | 标记短句引用，默认会自动添加引号 |
| cite | 定义引用、引证 | 标记引用的作品名称（如书籍、文章、电影名），默认样式是斜体 |
| dfn | 定义一个定义项目 | 标记术语的 "定义"，默认样式是斜体，用于突出 "被解释的术语" |

html 复制代码

<p>我正在学习<abbr title="HyperText Markup Language">HTML</abbr>，它是网页的基础语言。</p>
<address>
  作者：豆包<br>
  联系邮箱：example@doubao.com<br>
  地址：北京市海淀区
</address>
<p>正常文字：Hello World</p>
<p>反向文字：<bdo dir="rtl">Hello World</bdo></p>
<p>我很喜欢这句话：</p>
<!--引用内容会整体缩进，cite属性用于标记引用来源（浏览器不会显示，但对语义有用）-->
<blockquote cite="https://example.com">
  编程不是关于代码，而是关于解决问题的思路。好的代码是逻辑清晰、易于维护的，而不是堆砌复杂的语法。
</blockquote>
<p>古人云：<q>三人行，必有我师焉</q>，这句话一直提醒我保持学习的心态。</p>
<p>我最近在读<cite>HTML从入门到精通</cite>，这本书对新手很友好。</p>
<p><dfn>前端开发</dfn>是指构建网页用户界面的技术，主要包括HTML、CSS和JavaScript。</p>
</pre>

九、属性

作用：用于定义元素的行为、样式、内容或其他特性。

特点：

1.可以在元素中添加附加信息

2.一般描述于开始标签

3.总是以名称/值对的形式出现，比如：name="value"。

1.全局属性

全局属性是所有 HTML 元素都可以使用的属性。

|---------|-------------------------------------|----------------------------------------------------------------------------------|
| 属性 | 说明 | 例子 |
| id | 为元素指定唯一的标识符 | <div id="header">This is the header</div> |
| class | 为元素指定一个或多个类名，用于 CSS 或 JavaScript 选择 | <p class="text highlight">This is a highlighted text.</p> |
| style | 用于直接在元素上应用 CSS 样式 | <p style="color: blue; font-size: 14px;">This is a styled paragraph.</p> |
| title | 为元素提供额外的提示信息，通常在鼠标悬停时显示 | <abbr title="HyperText Markup Language">HTML</abbr> |
| data-* | 用于存储自定义数据，通常通过 JavaScript 访问 | <div data-user-id="12345">User Info</div> |

2.特定元素的属性

某些属性仅适用于特定的 HTML 元素。

|---------------|-------------------------------------------------------|----------------------|
| 属性 | 适用范围 | 说明 |
| href | 用于 <a> 和 <link> 元素 | 指定链接的目标 URL |
| <a href="https://www.example.com">Visit Example</a> |||
| src | 用于 <img>, <script>, <iframe> 等元素 | 指定外部资源的 URL |
| <img src="image.jpg" alt="An example image"> |||
| alt | 用于 <img> 元素 | 为图像提供替代文本，当图像无法显示时显示 |
| <img src="image.jpg" alt="An example image"> |||
| type | 用于 <input> 和 <button> 元素 | 指定输入控件的类型 |
| <input type="text" placeholder="Enter your name"> |||
| value | 用于 <input>, <button>, <option> 等元素 | 指定元素的初始值 |
| <input type="text" value="Default Value"> |||
| disabled | 用于表单元素 | 禁用元素，使其不可交互 |
| <input type="text" disabled> 是文本框，被禁用不能交互，不能输入文字 |||
| checked | 用于 <input type="checkbox"> 和 <input type="radio"> | 指定复选框或单选按钮是否被选中 |
| <input type="checkbox" checked> |||
| placeholder | 用于 <input> 和 <textarea> 元素 | 在输入框中显示提示文本 |
| <input type="text" placeholder="Enter your email"> |||
| target | 用于 <a> 和 <form> 元素 | 指定链接或表单提交的目标窗口或框架 |
| <a href="https://www.example.com" target="_blank">Open in new tab</a> 在新标签页打开 |||

2.1表单概念

表单（<form>）就是网页上用来收集用户信息，并将这些信息传递给后台服务器的 "信息收集与提交工具"。

2.2type常见取值

2.2.1文本 / 字符输入类（收集文字、字符信息）

type 取值	作用说明	示例效果
`text`	单行普通文本输入（默认值，不指定 type 时就是这个），可输入任意字符	姓名、昵称输入框
`password`	密码输入框，输入内容会被隐藏（显示为圆点 / 星号），保护敏感信息	登录密码、支付密码输入框
`tel`	电话号码输入框，移动端会弹出数字键盘（桌面端和 text 类似，自带简单手机号格式提示）	手机号输入框
`email`	邮箱地址输入框，提交时会自动验证是否符合邮箱格式（含 @、域名等）	注册时的邮箱输入框
`search`	搜索框，部分浏览器会自带 "输入后显示清除按钮""圆角样式" 等搜索专属样式	网页顶部的搜索输入框
`url`	网址输入框，提交时验证是否符合网址格式（以 http:///https:// 开头等）	个人主页、链接填写框

2.2.2选择类（无需手动输入，从选项中选择）

type 取值	作用说明	注意事项
`radio`	单选按钮，一组同名（`name`属性相同）的 radio 只能选中一个	必须给同一组 radio 设置相同的`name`，否则无法实现单选
`checkbox`	复选框，可同时选中多个选项，同名的 checkbox 为一组	选中后会传递`value`值给后台，未选中则不传递
`file`	文件上传控件，允许用户选择本地文件上传（图片、文档等）	可通过`multiple`属性实现多文件上传

2.2.3按钮类（触发交互操作，现在更多用<button>标签替代）

type 取值	作用说明	备注
`button`	普通按钮，无默认功能，需配合 JavaScript 实现点击事件（如 "重置表单""弹出提示"）	功能完全自定义
`submit`	表单提交按钮，点击后会自动提交`<form>`表单中的所有有效数据到后台	无需手动写 JS，自带提交功能
`reset`	表单重置按钮，点击后会将表单中所有输入控件恢复到默认值（清空已填写内容）	现在使用频率较低，多为自定义重置逻辑

2.2.4 数字 / 日期时间类（收集数字、时间相关信息，自带格式约束）

type 取值	作用说明	示例场景
`number`	数字输入框，移动端弹出数字键盘，桌面端会显示 "增减数字的上下箭头"，可通过`min`/`max`限制数字范围	年龄、数量、身高（数字）输入框
`range`	滑块输入控件，通过拖动滑块选择数字（视觉化选择，不显示具体数字，可通过`value`获取）	音量调节、评分筛选、亮度调节滑块
`date`	日期选择器，弹出日历面板选择 "年 - 月 - 日"，兼容性较好	生日、下单日期选择框
`time`	时间选择器，选择 "时：分"，部分浏览器支持秒数选择	预约时间、上班打卡时间选择框
`datetime-local`	本地日期时间选择器，选择 "年 - 月 - 日时：分"，无需考虑时区	活动开始时间、会议时间选择框
`month`	月份选择器，选择 "年 - 月"	账单月份、统计月份选择框
`week`	周选择器，选择 "年 - 第 X 周"	考勤周、项目周期选择框

2.2.5特殊功能类（较少见，针对性使用）

type 取值	作用说明	使用场景
`hidden`	隐藏输入框，页面上不可见，用于传递后台需要但用户无需查看 / 修改的隐藏数据（如用户 ID、表单标识）	提交表单时附带用户唯一标识，无需用户操作
`color`	颜色选择器，点击后弹出颜色面板，选择颜色后返回十六进制颜色值（如 #ff0000）	主题颜色设置、字体颜色选择框

实例：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>input type示例</title>
</head>
<body>
    <form>
        <!-- 文本输入类 -->
        <div>姓名：<input type="text" placeholder="请输入姓名"></div>
        <br>
        <div>密码：<input type="password" placeholder="请输入密码"></div>
        <br>
        <div>手机号：<input type="tel" placeholder="请输入手机号"></div>
        <br>
        <div>邮箱：<input type="email" placeholder="请输入邮箱"></div>
        <br>
        <!-- 选择类 -->
        <div>性别：
            <input type="radio" name="gender" value="male"> 男
            <input type="radio" name="gender" value="female"> 女
        </div>
        <br>
        <div>爱好：
            <input type="checkbox" name="hobby" value="reading"> 阅读
            <input type="checkbox" name="hobby" value="sports"> 运动
            <input type="checkbox" name="hobby" value="music"> 音乐
        </div>
        <br>
        <div>上传头像：<input type="file"></div>
        <br>
        <!-- 数字/日期类 -->
        <div>年龄：<input type="number" min="1" max="120"></div>
        <br>
        <div>音量：<input type="range" min="0" max="100" value="50"></div>
        <br>
        <div>生日：<input type="date"></div>
        <br>
        <!-- 按钮类 -->
        <input type="submit" value="提交">
        <input type="reset" value="重置">
        <input type="button" value="普通按钮" onclick="alert('点击了普通按钮')">
    </form>
</body>
</html>

2.3target常见取值

html 复制代码

    <p>测试超链接在不同标签页打开方式</p>
    <!--默认值，在当前标签页打开（覆盖原有页面）-->
    <a href="https://www.baidu.com/" target="_self">Open in new tab1</a>
    <p>
    <!--     在新标签页打开 -->
    <a href="https://www.baidu.com/" target="_blank">Open in new tab2</a>
    </p>
    <p
    <!--     在父标签页打开 -->
    <a href="https://www.baidu.com/" target="_parent">Open in new tab2</a>
    </p>
    <!--     在整个窗口打开 -->
    <a href="https://www.baidu.com/" target="_top">Open in new tab</a>

3.布尔属性

布尔属性是指不需要值的属性，它们的存在即表示 true，不存在则表示 false。（即写了该属性就是生效，不写就是不生效）。

|----------|--------------------------------------|----------------------------------------------|
| 属性 | 说明 | 例子 |
| disabled | 禁用元素 | <input type="text" disabled> |
| readonly | 使输入框只读 | <input type="text" readonly> |
| required | 指定输入字段为必填项 | <input type="text" required> |
| autoplay | （用于 <audio> 和 <video> 元素）：自动播放媒体 | <video src="video.mp4" autoplay></video> |

4.自定义属性

HTML5 引入了 data-* 属性，允许开发者自定义属性来存储额外的数据。

data-*：用于存储自定义数据，通常通过 JavaScript 访问。

html 复制代码

<div data-user-id="12345" data-role="admin">User Info</div>

5.事件处理属性

HTML 元素可以通过事件处理属性来响应特定的事件，如点击、鼠标悬停等。

|-------------|-----------------|-------------------------------------------------------------------------------------------------------------------------------------|
| 属性 | 说明 | 例子 |
| onclick | 当用户点击元素时触发 | <button οnclick="alert('Button clicked!')">Click Me</button> tips： alert() 是 JavaScript 内置的弹窗函数，核心作用是在浏览器中弹出一个包含指定文本的提示窗口 |
| onmouseover | 当用户将鼠标悬停在元素上时触发 | <div οnmοuseοver= "this.style.backgroundColor ='yellow'">Hover over me</div> |
| onchange | 当元素的值发生变化时触发 | <input type="text" οnchange="alert('Value changed!')"> |

十、路径

路径指的是查找文件时，从起点到终点经历的路线。

路径分类：
**1.相对路径：**从当前文件位置出发查找目标文件（推荐）

适用场景：找本地文件
2.绝对路径： 从盘符（计算机里给磁盘分区分配的标识符号 ，最常见的形式就是 C: 、D: 、E: 这类带冒号的字母）出发查找目标文件

应用场景：友情链接【A 网站在自己页面里放一个能跳转到 B 网站的链接，B 网站也放 A 网站的链接，目的是互相引流（让自己的访客能点过去看对方的内容）】

.当前文件所在文件夹（./）

..当前文件上一级文件夹(../)

/进入某个文件夹里面(/)

十一、中文编码

目前在大部分浏览器中，有不同的编码，直接输出中文会出现中文乱码的情况，这时候我们就需要统一编码，一般是在头部将字符声明为 UTF-8 或 GBK。

十二、<head>

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

1. <title>

作用：

定义了浏览器工具栏的标题

当网页添加到收藏夹时，显示在收藏夹中的标题【如果你没写<title>，收藏夹里可能只会显示网址，你以后根本记不清这个收藏项是干嘛的】

显示在搜索引擎结果页面的标题【搜索引擎抓取你的网页时，会优先读取<title>标签的内容，把它作为 "搜索结果标题" 显示在页面上，用户通过这个标题就能快速知道网页的核心内容。】

2.<base>

标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

**作用：**为网页中所有相对路径链接设置统一基础地址 / 默认打开方式，减少重复代码和后续维护成本。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>我的博客</title>
  <base href="https://www.myblog.com/" target="_blank">
</head>
<body>
  <!-- 这些链接都不用写target="_blank"，会默认在新标签页打开 -->
  <a href="about.html">关于我</a>
  <a href="contact.html">联系我</a>
  <a href="https://www.baidu.com">百度（绝对路径也受target影响）</a>
</body>
</html>

3.<link>

**作用：**标签定义了文档与外部资源之间的关系，通常用于链接到样式表。

使用场景：用 <link> 链接 CSS 样式表，美化网页

mystyle.css：

css 复制代码

/* 给网页设置背景色 */
body {
  background-color: #f0f8ff;
}

/* 给标题设置样式 */
h1 {
  color: blue;
  text-align: center;
  font-size: 30px;
}

/* 给段落设置样式 */
p {
  font-size: 18px;
  line-height: 1.5;
  color: #333;
}

index.html：

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>link标签示例</title>
  <!-- 用<link>链接外部CSS样式表 -->
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一段普通的文本，会应用mystyle.css里的样式。</p>
  <p>通过<link>标签，HTML和CSS文件关联起来，网页就能变好看啦！</p>
</body>
</html>

如果没有 <link> 标签：网页会是浏览器默认样式（白底、黑字、默认字体），加上 <link> 标签后：浏览器会自动加载 mystyle.css 文件，把 CSS 里的样式应用到 HTML 元素上（背景变浅蓝、标题变蓝且居中、段落文字变大等）。

rel="stylesheet"：告诉浏览器 "这个外部资源是样式表"；
type="text/css"：说明资源的类型是 CSS 文件；
href="mystyle.css"：指定 CSS 文件的路径（这里和 HTML 在同一文件夹，所以直接写文件名）。

4.<style>

**作用：**给网页 "加样式"（比如改颜色、调字体、排布局），可以直接在标签里写 CSS 代码，不用单独链接外部样式文件。

缺点： 重复代码多（每个<p>都要写style），改样式时要逐个改，很麻烦。

html 复制代码

<head>
  <style type="text/css">
    body {
      background-color:yellow;  /* 给整个网页背景设为黄色 */
    }
    p {
      color:blue  /* 给所有<p>标签的文字设为蓝色 */
    }
  </style>
</head>

5. <meta>

HTML 里的 "隐形信息员"------ 它不会在网页上显示任何内容，但会给浏览器、搜索引擎等 "后台工具" 传递关键信息。

特点：

位置：必须放在<head>里
作用：传递 "元数据"（描述网页本身的信息）
表现：用户看不到，只有程序能读取

核心应用场景：

场景 1：设置网页字符编码，避免文字乱码

告诉浏览器用哪种编码格式解析网页内容，UTF-8是目前通用编码，支持所有语言（中文、英文、特殊符号等），不设置大概率会出现中文乱码。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <!-- 必须放在<head>靠前位置，优先声明编码 -->
  <meta charset="UTF-8">
  <title>避免乱码示例</title>
</head>
<body>
  <p>这是一段中文内容，不会出现问号或乱码</p>
</body>
</html>

注意：HTML5 中只需写charset="UTF-8"，无需额外属性，这是必加的元标签之一。

场景 2：配置移动端视口，让网页自适应手机屏幕

解决网页在手机上显示过大 / 过小、需要左右滑动的问题，让网页适配手机屏幕宽度，实现 "移动端友好显示"。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- viewport配置：宽度适配设备屏幕，初始缩放比例1.0 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>移动端自适应示例</title>
</head>
<body>
  <p>在手机上打开此网页，会自适应屏幕宽度，无需左右滑动</p>
</body>
</html>

参数说明 ：
- width=device-width：网页宽度等于手机屏幕宽度
- initial-scale=1.0：打开网页时的初始缩放比例（1.0 = 不缩放）
- maximum-scale=1.0：禁止用户放大网页
- user-scalable=no：禁止用户手动缩放网页（可选，根据需求设置）

场景 3：为搜索引擎提供网页关键词

向百度、谷歌等搜索引擎传递网页的核心主题词，帮助搜索引擎识别网页内容方向，早期对搜索排名影响较大，现在权重有所降低，但仍是基础优化项。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 关键词用英文逗号分隔，核心词在前，避免堆砌无关词汇 -->
  <meta name="keywords" content="Python教程,零基础学Python,Python语法,Python入门">
  <title>Python零基础入门教程</title>
</head>
<body>
  <h1>Python零基础入门教程</h1>
  <p>本文讲解Python变量、循环、函数等基础语法...</p>
</body>
</html>

注意：关键词需与网页内容相关，数量控制在 5-10 个为宜，过多堆砌会被搜索引擎判定为作弊.

场景 4：为搜索引擎提供网页描述

设置网页的摘要信息，会直接显示在搜索引擎结果页的标题下方（灰色文字），帮助用户快速了解网页内容，直接影响用户是否点击你的网页，对搜索优化（SEO）至关重要。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Python教程,零基础学Python,Python语法,Python入门">
  <!-- 描述控制在100-150字，突出核心价值，吸引用户点击 -->
  <meta name="description" content="Python零基础入门教程，免费讲解变量、循环、函数等核心语法，搭配实战案例，适合新手快速入门编程，无需任何基础。">
  <title>Python零基础入门教程</title>
</head>
<body>
  <h1>Python零基础入门教程</h1>
  <p>本文讲解Python变量、循环、函数等基础语法...</p>
</body>
</html>

场景 5：标注网页作者，用于版权 / 溯源

记录网页的创作主体（个人、团队、企业），属于网页的基础元数据，便于版权标识、内容溯源，部分建站工具或版权平台会读取该信息。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Python教程,零基础学Python,Python语法,Python入门">
  <meta name="description" content="Python零基础入门教程，免费讲解变量、循环、函数等核心语法，搭配实战案例，适合新手快速入门编程，无需任何基础。">
  <!-- 标注作者/创作团队 -->
  <meta name="author" content="豆包编程助手团队">
  <title>Python零基础入门教程</title>
</head>
<body>
  <h1>Python零基础入门教程</h1>
  <p>本文讲解Python变量、循环、函数等基础语法...</p>
</body>
</html>

场景 6：设置页面自动刷新 / 跳转

指令浏览器定时刷新当前页面，或定时跳转到指定网页，适用于需要实时更新内容的场景（如监控页、数据统计页），或页面迁移后的引导跳转。

子场景 1：仅自动刷新当前页面

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- content="30" 表示每隔30秒刷新一次页面 -->
  <meta http-equiv="refresh" content="30">
  <title>实时数据监控页</title>
</head>
<body>
  <h1>服务器运行状态监控</h1>
  <p>CPU使用率：25%（30秒后自动刷新最新数据）</p>
</body>
</html>

子场景 2：定时跳转到指定网页

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- content="5; url=目标地址" 表示5秒后跳转到百度 -->
  <meta http-equiv="refresh" content="5; url=https://www.baidu.com">
  <title>页面即将跳转</title>
</head>
<body>
  <p>该页面已迁移，5秒后自动跳转到百度首页，若未跳转请<a href="https://www.baidu.com">点击这里</a></p>
</body>
</html>

注意：跳转场景需给用户提示，避免用户困惑；刷新间隔不宜过短（建议 10 秒以上），减少服务器压力。

6. <script>

HTML 中用来嵌入或引入脚本代码（最常用的是 JavaScript）的标签，作用是给网页添加交互功能（比如点击按钮、弹窗、动态更新内容等）。

核心作用

引入外部脚本文件（比如单独的.js文件）；
直接在 HTML 中写脚本代码；
既可以直接写代码，也可以引入外部文件（推荐后者，方便维护）；
让网页实现 "动态交互"（区别于静态的 HTML/CSS）。没有<script>的网页是 "静态的"，有了它才能实现点击、动态更新等功能。

场景 1：直接在 HTML 中写 JavaScript 代码

在<script>标签内写 JS 代码，实现简单交互：

html 复制代码

<!DOCTYPE html>
<html>
<body>
  <h1>点击按钮看效果</h1>
  <button onclick="showMsg()">点我</button>

  <!-- 内嵌JS代码：定义点击按钮时的函数 -->
  <script>
    function showMsg() {
      alert("你点击了按钮！"); // 弹窗提示
    }
  </script>
</body>
</html>

效果：点击按钮后，会弹出 "你点击了按钮！" 的提示框。

场景 2：引入外部 JavaScript 文件

把 JS 代码写在单独的.js文件中（比如myScript.js），再通过<script>的src属性引入：

先创建myScript.js文件，内容为：

javascript 复制代码

function changeColor() {
  document.body.style.backgroundColor = "lightblue"; // 把网页背景改成浅蓝色
}

在 HTML 中引入这个文件：

html 复制代码

<!DOCTYPE html>
<html>
<body>
  <button onclick="changeColor()">点击改变背景色</button>

  <!-- 引入外部JS文件 -->
  <script src="myScript.js"></script>
</body>
</html>

效果：点击按钮后，网页背景会变成浅蓝色。

场景 3：控制脚本加载时机（可选）

通过defer或async属性，控制脚本在网页加载过程中的执行时机（避免阻塞页面渲染）：

html 复制代码

<!-- defer：等HTML加载完再执行脚本 -->
<script src="myScript.js" defer></script>

<!-- async：脚本加载完成后立即执行（不等待HTML） -->
<script src="myScript.js" async></script>