课三：HTML基本标签（一） - 网页设计与制作实操手册

一、HTML标签基础概念

HTML标签是HTML语言的基本组成单位，用于描述网页的结构和内容。标签分为双闭合标签（有开始和结束标签）和单闭合标签（自闭合标签）。

核心规则： 1. 双闭合标签格式：<标签名>内容</标签名>
2. 单闭合标签格式：<标签名 />（H5中可省略斜杠）
3. 标签名不区分大小写，但推荐使用小写
4. 标签可嵌套，但不能交叉嵌套

<!-- 双闭合标签 -->
<h1>这是标题标签</h1>
<p>这是段落标签</p>
<a href="https://www.baidu.com">这是链接标签</a>

<!-- 单闭合标签 -->
<img src="image.jpg" alt="图片标签">
<meta charset="utf-8">
<br> <!-- 换行标签 -->
<hr> <!-- 水平线标签 -->

二、头部标签（<head>内标签）

头部标签用于定义网页的元数据、标题、样式、外部资源引用等，不直接显示在网页内容区域。

2.1 常用头部标签

标签	作用	示例
<title>	定义网页标题（显示在浏览器标题栏）	<title>我的网页</title>
<meta>	定义网页元数据（编码、关键词、描述等）	<meta name="keywords" content="HTML, CSS">
<link>	引用外部资源（如CSS文件）	<link rel="stylesheet" href="style.css">
<style>	定义内部CSS样式	<style>p { color: red; }</style>
<script>	引入JavaScript脚本	<script src="script.js"></script>
<base>	定义页面中所有链接的基准URL	<base href="https://www.example.com" target="_blank">

实训实例：创建完整的头部标签结构

实现步骤：

启动VS Code，创建文件夹"html-head-demo"
创建"head-tag.html"文件
编写完整的HTML结构，包含所有常用头部标签
保存文件并在浏览器中预览，观察浏览器标题栏和页面效果

<!DOCTYPE html>
<html>
<head>
    <!-- 字符编码设置 -->
    <meta charset="utf-8">
    <!-- 网页关键词（用于搜索引擎） -->
    <meta name="keywords" content="HTML, 头部标签, 网页设计">
    <!-- 网页描述 -->
    <meta name="description" content="这是HTML头部标签的实训案例">
    <!-- 网页作者 -->
    <meta name="author" content="张三">
    <!-- 30秒自动刷新页面 -->
    <meta http-equiv="refresh" content="30">
    <!-- 网页标题 -->
    <title>HTML头部标签示例</title>
    <!-- 基准链接设置（所有链接默认打开方式为新窗口） -->
    <base href="" target="_blank">
    <!-- 内部CSS样式 -->
    <style type="text/css">
        body { background-color: #f5f5f5; }
        h1 { color: #2980b9; text-align: center; }
    </style>
    <!-- 引入外部CSS文件（假设存在style.css文件） -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入JavaScript文件（假设存在script.js文件） -->
    <script src="script.js"></script>
</head>
<body>
    <h1>头部标签实训案例</h1>
    <p>查看浏览器标题栏，验证<title>标签效果</p>
    <a href="/s?wd=HTML头部标签">百度搜索HTML头部标签</a>
</body>
</html>

三、文本标签

文本标签用于定义网页中的文本内容，包括标题、段落、换行、水平线、文本格式等。

3.1 标题标签（<h1>-<h6>）

标题标签用于定义不同级别的标题，<h1>级别最高（最大最粗），<h6>级别最低（最小）。

<!-- 标题标签示例 -->
<h1>1级标题（页面主标题）</h1>
<h2>2级标题（章节标题）</h2>
<h3>3级标题（小节标题）</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

3.2 段落与换行标签

<p>：定义段落，段落之间会自动添加空白间距
<br>：强制换行，无空白间距
<hr>：定义水平线，用于分隔内容

<!-- 段落与换行标签示例 -->
<p>这是第一个段落。段落标签会自动在前后添加空白间距，使页面结构更清晰。</p>
<p>这是第二个段落。<br>使用br标签可以强制换行，在段落内部实现换行效果。</p>
<hr> <!-- 水平线分隔 -->
<p>这是第三个段落，与上面的内容用水平线分隔。</p>

3.3 文本格式标签

标签	作用	示例
<b>	粗体文本（仅样式）	<b>粗体文本</b>
<strong>	粗体文本（强调语义）	<strong>重要文本</strong>
<i>	斜体文本（仅样式）	<i>斜体文本</i>
<em>	斜体文本（强调语义）	<em>强调文本</em>
<small>	小号文本	<small>小号文本</small>
<ins>	插入文本（下划线）	<ins>插入的文本</ins>
<del>	删除文本（删除线）	<del>删除的文本</del>

实训实例：创建带格式的文章页面

实现步骤：

创建"text-format.html"文件
使用标题标签定义文章标题和小节标题
使用段落标签组织文章内容
使用文本格式标签美化重点内容
使用水平线标签分隔不同小节

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>带格式的文章页面</title>
</head>
<body>
    <h1>HTML文本标签应用示例</h1>
    <hr>
    <h2>1. 文章简介</h2>
    <p>本文主要介绍HTML文本标签的使用方法，包括<strong>标题标签</strong>、<em>段落标签</em>、<b>文本格式标签</b>等核心标签的应用场景和语法规则。</p>
    
    <h2>2. 核心知识点</h2>
    <p>HTML文本标签是网页内容组织的基础，以下是重点内容：</p>
    <ul>
        <li><h1>-<h6>：用于定义不同级别的标题，<small>建议一个页面只使用一个<h1>标签</small></li>
        <li><p>：用于定义段落，<ins>自动添加段落间距</ins></li>
        <li><strong>和<em>：不仅是样式标签，还具有<del>强调语义</del>（帮助搜索引擎理解内容重要性）</li>
    </ul>
    
    <h2>3. 注意事项</h2>
    <p>使用文本标签时，应遵循以下原则：</p>
    <p>1. 语义优先：优先使用具有语义的标签（如<strong>而非<b>），提高网页可访问性</p>
    <p>2. 结构清晰：合理使用标题层级，避免跳过标题级别（如直接从<h1>到<h3>）</p>
    <p>3. 适度美化：文本格式标签仅用于简单美化，复杂样式建议使用CSS</p>
</body>
</html>

四、多媒体标签

多媒体标签用于在网页中插入图片、音频、视频等多媒体内容，丰富网页表现力。

4.1 图片标签（<img>）

图片标签是单闭合标签，核心属性如下：

src：图片路径（必需属性）
alt：图片替代文本（图片无法显示时显示，提高可访问性）
width：图片宽度（单位：px或百分比）
height：图片高度（单位：px或百分比）
title：鼠标悬停时显示的提示文本

<!-- 图片标签示例 -->
<!-- 基本用法 -->
<img src="image.jpg" alt="示例图片" title="这是一张示例图片">

<!-- 设置尺寸 -->
<img src="logo.png" alt="网站logo" width="200" height="100">

<!-- 百分比尺寸（相对于父元素） -->
<img src="banner.jpg" alt="网页横幅" width="100%" height="auto">

<!-- 图片失效时的替代文本 -->
<img src="error.jpg" alt="这是一张无法显示的图片">

4.2 音频标签（<audio>）

音频标签用于在网页中嵌入音频文件，支持MP3、WAV、OGG等格式。

<!-- 音频标签示例 -->
<!-- 基本用法 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.ogg" type="audio/ogg">
    您的浏览器不支持音频播放功能，请升级浏览器。
</audio>

<!-- 自动播放（需谨慎使用） -->
<audio controls autoplay loop>
    <source src="background.mp3" type="audio/mpeg">
</audio>
<!-- controls：显示播放控制按钮 -->
<!-- autoplay：页面加载完成后自动播放 -->
<!-- loop：循环播放 -->

4.3 视频标签（<video>）

视频标签用于在网页中嵌入视频文件，支持MP4、WebM、OGG等格式。

<!-- 视频标签示例 -->
<video controls width="600">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放功能，请升级浏览器。
</video>

<!-- 带封面图的视频 -->
<video controls width="600" poster="cover.jpg">
    <source src="demo.mp4" type="video/mp4">
</video>
<!-- poster：视频播放前显示的封面图片 -->

实训实例：创建多媒体展示页面

实现步骤：

创建文件夹"multimedia-demo"，在文件夹中创建"images"子文件夹存放图片
准备一张图片（如"nature.jpg"）、一个音频文件（如"music.mp3"）、一个视频文件（如"video.mp4"）
创建"multimedia.html"文件，编写HTML结构
插入图片、音频、视频元素，设置合适的属性
在浏览器中预览效果，测试多媒体文件是否能正常播放

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多媒体展示页面</title>
</head>
<body>
    <h1>多媒体标签实训</h1>
    <hr>
    
    <h2>1. 图片展示</h2>
    <img src="images/nature.jpg" alt="自然风光" width="800" height="450" title="点击查看大图">
    <p>这是一张自然风光图片，使用img标签插入并设置了宽度和高度。</p>
    
    <hr>
    
    <h2>2. 音频播放</h2>
    <audio controls width="800">
        <source src="music.mp3" type="audio/mpeg">
        您的浏览器不支持音频播放，请升级浏览器。
    </audio>
    <p>这是一段背景音乐，支持播放、暂停和音量调节。</p>
    
    <hr>
    
    <h2>3. 视频播放</h2>
    <video controls width="800" poster="images/cover.jpg">
        <source src="video.mp4" type="video/mp4">
        您的浏览器不支持视频播放，请升级浏览器。
    </video>
    <p>这是一段演示视频，带封面图和播放控制功能。</p>
</body>
</html>

五、链接标签（<a>）

链接标签用于创建超链接，实现网页间的跳转、锚点跳转、邮件发送等功能，是网页导航的核心标签。

5.1 核心属性

href：链接目标地址（必需属性）
target：链接打开方式（_self：当前窗口打开，_blank：新窗口打开，_parent：父框架打开，_top：顶层框架打开）
title：鼠标悬停时显示的提示文本

5.2 链接类型及用法

<!-- 1. 外部链接（跳转到其他网站） -->
<a href="https://www.baidu.com" target="_blank" title="访问百度搜索">百度搜索</a>

<!-- 2. 内部链接（跳转到本站其他页面） -->
<a href="about.html" title="查看关于我们页面">关于我们</a>

<!-- 3. 锚点链接（跳转到当前页面指定位置） -->
<!-- 定义锚点 -->
<h2 id="section1">1. 第一部分内容</h2>
<h2 id="section2">2. 第二部分内容</h2>
<!-- 链接到锚点 -->
<a href="#section1">跳转到第一部分</a>
<a href="#section2">跳转到第二部分</a>

<!-- 4. 邮件链接（打开邮件客户端） -->
<a href="mailto:example@163.com" title="发送邮件">联系我们（邮件）</a>

<!-- 5. 电话链接（移动端可直接拨打） -->
<a href="tel:13800138000" title="拨打咨询电话">咨询电话：13800138000</a>

<!-- 6. 下载链接（下载文件） -->
<a href="document.pdf" download="用户手册.pdf" title="下载用户手册">下载用户手册</a>
<!-- download属性：指定下载文件的名称 -->

实训实例：创建导航链接页面

实现步骤：

创建文件夹"link-demo"，创建"index.html"、"news.html"、"contact.html"三个文件
在"index.html"中创建导航栏，包含外部链接、内部链接、锚点链接、邮件链接
在页面中定义锚点，实现页面内跳转
创建简单的"news.html"和"contact.html"页面作为内部链接目标
测试所有链接是否能正常跳转

<!-- index.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>链接标签实训</title>
</head>
<body>
    <h1>网站导航示例</h1>
    <!-- 导航栏 -->
    <div style="background: #f5f5f5; padding: 10px; margin-bottom: 20px;">
        <a href="index.html" title="首页">首页</a> |
        <a href="news.html" title="新闻动态">新闻动态</a> |
        <a href="contact.html" title="联系我们">联系我们</a> |
        <a href="https://www.baidu.com" target="_blank" title="访问百度">百度搜索</a> |
        <a href="mailto:contact@example.com" title="发送邮件">邮件联系</a>
    </div>

    <!-- 锚点链接目标 -->
    <h2 id="section1">1. 网站介绍</h2>
    <p style="height: 300px;">这是网站介绍部分的内容...（此处为了演示锚点跳转效果，增加内容高度）</p>
    
    <h2 id="section2">2. 产品展示</h2>
    <p style="height: 300px;">这是产品展示部分的内容...</p>
    
    <h2 id="section3">3. 服务支持</h2>
    <p style="height: 300px;">这是服务支持部分的内容...</p>

    <!-- 锚点链接 -->
    <div style="position: fixed; bottom: 20px; right: 20px; background: #2980b9; padding: 10px; border-radius: 4px;">
        <a href="#section1" style="color: white; text-decoration: none; margin-right: 10px;">第一部分</a>
        <a href="#section2" style="color: white; text-decoration: none; margin-right: 10px;">第二部分</a>
        <a href="#section3" style="color: white; text-decoration: none;">第三部分</a>
    </div>
</body>
</html>

<!-- news.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>新闻动态</title>
</head>
<body>
    <h1>新闻动态</h1>
    <a href="index.html" title="返回首页">返回首页</a>
    <hr>
    <h2>最新新闻标题</h2>
    <p>新闻内容...（内部链接测试页面）</p>
</body>
</html>

<!-- contact.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>联系我们</title>
</head>
<body>
    <h1>联系我们</h1>
    <a href="index.html" title="返回首页">返回首页</a>
    <hr>
    <p>电话：<a href="tel:13800138000">13800138000</a></p>
    <p>邮件：<a href="mailto:contact@example.com">contact@example.com</a></p>
</body>
</html>

六、综合实训任务：创建个人简介网页

实训要求：综合运用头部标签、文本标签、多媒体标签、链接标签，创建一个完整的个人简介网页

实现步骤：

创建项目文件夹"personal-profile"，包含以下子文件夹和文件：
- images/：存放个人照片、背景图等
- media/：存放音频/视频文件（可选）
- index.html：主页面
编写HTML头部标签，设置网页标题、编码、关键词等元数据
使用标题标签和段落标签组织个人基本信息
插入个人照片，设置合适的尺寸和替代文本
添加兴趣爱好、技能特长等板块，使用文本格式标签美化重点内容
添加外部链接（如个人博客、社交媒体）、锚点链接（页面内导航）
（可选）添加背景音乐或个人介绍视频
保存文件并在浏览器中预览，调试样式和链接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="个人简介, HTML实训, 网页设计">
    <meta name="description" content="这是使用HTML基本标签制作的个人简介网页">
    <title>我的个人简介 | HTML实训</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.8;
        }
        .header {
            text-align: center;
            border-bottom: 2px solid #eee;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 8px;
        }
        .nav {
            text-align: center;
            margin: 20px 0;
        }
        .nav a {
            margin: 0 10px;
            text-decoration: none;
            color: #3498db;
        }
        .nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的个人简介</h1>
        <img src="images/avatar.jpg" alt="个人头像" width="200" height="200" style="border-radius: 50%;">
    </div>

    <!-- 页面内导航锚点 -->
    <div class="nav">
        <a href="#basic">基本信息</a>
        <a href="#skills">技能特长</a>
        <a href="#hobbies">兴趣爱好</a>
        <a href="#contact">联系方式</a>
    </div>

    <!-- 基本信息 -->
    <div class="section" id="basic">
        <h2>基本信息</h2>
        <p><strong>姓名：</strong>张三</p>
        <p><strong>性别：</strong>男</p>
        <p><strong>年龄：</strong>16岁</p>
        <p><strong>专业：</strong>计算机网络应用</p>
        <p><strong>学历：</strong>中专</p>
        <p><em>个人格言：</em>学无止境，持续进步</p>
    </div>

    <!-- 技能特长 -->
    <div class="section" id="skills">
        <h2>技能特长</h2>
        <p><strong>计算机技能：</strong></p>
        <ul>
            <li>HTML/CSS基础（<ins>正在学习中</ins>）</li>
            <li>Office办公软件熟练使用</li>
            <li>Python基础编程</li>
            <li>网络设备配置与维护</li>
        </ul>
        <p><strong>语言能力：</strong></p>
        <ul>
            <li>普通话：流利</li>
            <li>英语：CET-4（<small>分数：450</small>）</li>
        </ul>
    </div>

    <!-- 兴趣爱好 -->
    <div class="section" id="hobbies">
        <h2>兴趣爱好</h2>
        <p>我喜欢<span style="color: #e74c3c; font-weight: bold;">编程</span>、<span style="color: #2ecc71; font-weight: bold;">阅读</span>、<span style="color: #f39c12; font-weight: bold;">运动</span>和<span style="color: #9b59b6; font-weight: bold;">旅行</span>。</p>
        <p>编程方面，主要学习网页设计与制作，喜欢通过代码实现创意；</p>
        <p>阅读方面，偏爱计算机技术书籍和文学作品；</p>
        <p>运动方面，擅长篮球和跑步；</p>
        <p>旅行方面，喜欢探索不同城市的文化和风景。</p>
        
        <!-- 音频示例（可选） -->
        <p><strong>我的背景音乐：</strong></p>
        <audio controls style="width: 100%;">
            <source src="media/music.mp3" type="audio/mpeg">
            您的浏览器不支持音频播放
        </audio>
    </div>

    <!-- 联系方式 -->
    <div class="section" id="contact">
        <h2>联系方式</h2>
        <p><strong>电话：</strong><a href="tel:13800138000">13800138000</a></p>
        <p><strong>邮箱：</strong><a href="mailto:zhangsan@example.com">zhangsan@example.com</a></p>
        <p><strong>个人博客：</strong><a href="https://blog.example.com" target="_blank">https://blog.example.com</a></p>
        <p><strong>GitHub：</strong><a href="https://github.com/zhangsan" target="_blank">https://github.com/zhangsan</a></p>
    </div>

    <hr>
    <div style="text-align: center; color: #666;">
        <p>© 2025 张三的个人简介 | 使用HTML基本标签制作</p>
        <p><a href="#">返回顶部</a></p>
    </div>
</body>
</html>