HTML——文本标签

HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础骨架 ，它的核心作用是定义网页的结构和内容，而非实现交互或样式（这部分由 CSS 和 JavaScript 负责）。

一、基础介绍

1、VS Code中有一个标准的HTML5基础模板

操作：在空白.html文件中，输入**!** （英文感叹号），然后按下 Tab 键 或 Enter 键。

html 复制代码

<!DOCTYPE html> <!--告诉浏览器这是一个HTML5页面-->
<html lang="en"> <!--网页最外层容器-->
<head> <!--头部：存放网页信息-->
    <meta charset="UTF-8"> <!--确保中文不乱码-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 移动端视口适配完整配置：
     width=device-width：视口宽度适配设备屏幕宽度
     initial-scale=1.0：初始缩放比例100%
     maximum-scale=1.0：最大缩放比例100%（禁止用户放大）
     user-scalable=no：禁止用户手动缩放页面
     作用：保证移动端页面固定尺寸，避免用户缩放导致布局错乱 -->
    <title>Document</title> <!--网页标题（可更改）-->
</head>
<body> <!--身体：存放网页显示内容-->
    
</body>
</html>

注：* * 这是注释标签(不显示在页面)，可以使用快捷键"Ctrl+/"

2、如何在VS Code中运行html

在代码区域空白处点击鼠标右键，弹出上下文菜单，点击Open Default Browers （默认浏览器打开）选项，或者使用快捷键是Alt+B。

二、标签语法

标签成对出现，中间包裹内容

<>里面放标签名

结束标签比开始标签多/（如：开始标签"<h1>",结束标签"</h2>"）

标签分类：单标签：成对出现的标签

双标签：只有开始标签，没有结束标签（<br>、<hr>）

三、标题标签

标签名：h1~h6（双标签）

显示特点：文字加粗、字号逐渐减小、独占一行（自动换行）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
</body>
</html>

四、段落标签

标签名：p（双标签）

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签</title>
</head>
<body>
    <p>1930 年，克莱德・汤博根据洛厄尔等人的预测发现了冥王星。随后，英国 11 岁的维尼蒂亚・伯尼建议将其命名为 Pluto，源自罗马冥界之神。</p>
    <p>冥王星有五颗卫星，分别为卡戎、尼克斯、许德拉、科波若斯和斯提克斯。其中卡戎是最大的卫星，直径约为冥王星的一半，两者常被视为双行星系统。</p>
</body>
</html>

五、换行与水平线标签

换行：<br>（单标签）

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行与水平线标签</title>
</head>
<body>
    <hr>
    太阳系
    <br>
    冥王星Pluto
</body>
</html>

注：因为浏览器无法识别换行符，所以在body中直接使用回车进行换行，无法在网页中实现换行效果（如下图所示）

六、文本格式化标签

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

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <strong>加粗</strong>
    <em>倾斜</em>
    <ins>下划线</ins>
    <del>删除线</del>
</body>
</html>

七、综合使用

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pluto</title> 
</head>
<body>
    <h1><ins><em>冥王星Pluto</em></ins></h1> <!--标题1及斜体--> 
    <del>矮行星</del> <!--删除线--> 
    <br><br>
    <p><strong>基本信息：</strong>1930 年，克莱德・汤博根据洛厄尔等人的预测发现了冥王星。随后，英国 11 岁的维尼蒂亚・伯尼建议将其命名为 Pluto，源自罗马冥界之神。</p> <!--段落1及加粗--> 
    <p><strong>卫星：</strong>冥王星有五颗卫星，分别为卡戎、尼克斯、许德拉、科波若斯和斯提克斯。其中卡戎是最大的卫星，直径约为冥王星的一半，两者常被视为双行星系统。</p> <!--段落2及加粗--> 
</body>
</html>