Document

《前端技术基础》第01章 HTML基础【合集】

2025-01-11
dfer
5
html 前端教学 css html.js CSDN

超文本标记语言（HyperText Markup Language，简称 HTML）是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同，负责搭建网页“骨架”，用标签组织内容，像标题、段落、图片等元素，通过起始与结束标签（部分可单用，如`<img>`）界定层级与布局，将信息有序整合。标签含特定语义，向浏览器传达展示方式，为网页准确呈现及后续美化、交互筑牢根基。

第一节 HTML的基本结构

HTML（HyperText Markup Language）作为构建网页的基础语言，其基本结构有着明确的组成部分，每个部分各司其职，共同搭建起网页的 “骨架”，以下为您详细介绍：

1.1 文档类型声明（DOCTYPE Declaration）

位于 HTML 文档开头的 <!DOCTYPE html> 是 HTML5 的标准声明，它如同精准的领航标，引导浏览器采用 HTML5 规范来解读后续代码，确保浏览器以既定模式渲染页面，使得页面元素的样式与布局能精准呈现，遵循统一标准有序展现。

示例1-1：

<!DOCTYPE html>

1.2 根元素（Root Element）：`<html>`

<html> 为页面根基，包裹其他元素，lang 属性（如 lang="zh"）助力搜索引擎识别、辅助屏幕阅读器适配中文，保障页面信息有效传递，且规范内部元素层级，确保结构稳固。

示例1-2：

<!DOCTYPE html>
<html lang="zh">
</html>

1.3 头部元素（Head Element）：`<head>`

<head> 像网页 “智能中枢”，不展示视觉内容，却掌控关键元信息。<meta charset="UTF-8" 确保字符准确显示，<title> 设定醒目标题，提升搜索吸引力，还可按需引入 viewport 等元标签优化移动端浏览。

示例1-3：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>精彩示例之头部</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</html>

运行结果：

1.4 主体元素（Body Element）：`<body>`

<body> 是网页 “主角”，承载可见内容。<p> 组织文本，<h1> - <h6> 突出标题层级，<ul>、<ol> 梳理列表，<img> 等多媒体添活力，表单、按钮、链接实现交互，满足用户多元需求。

示例1-4：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>精彩示例之头部</title>
</head>

<body>
    <h1>欢迎来到我的网页</h>
        </td>
        <p>介绍网页知识的文本。</p>
        <ul>
            <li>列表项 1</li>
            <li>列表项 2</li>
            <li>列表项 3</li>
        </tr>
        <img src="./html.png" alt="示例图片">
</body>

</html>

运行结果：

第二节行内标签

在 HTML 世界里，行内标签是一类独具特色的元素，它们在构建网页内容、丰富页面呈现方面发挥着关键作用，与其他标签相互配合，共同编织出绚丽多彩的网页画卷。

2.1 行内标签的特性

行内标签正如其名，在网页布局中不会独占一行，能灵活融入文本，与其他元素并肩排列，随文本自然流向分布，适应父元素宽度，维持页面连贯美观，精细修饰文本。

2.2 常见行内标签介绍

`2.2.1 <span>`

<span> 标签堪称行内标签家族中的 “万能百搭”，它自身并没有预设的样式，却拥有无限可能。开发者可以借助 CSS 样式规则，随心所欲地为其包裹的文本定制个性化外观，无论是改变字体颜色、大小，还是添加背景装饰等，都能轻松实现。

示例2-2：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Span 标签示例</title>
    <style>
       .highlight {
            color: purple;  /* 改变字体颜色为紫色 */
            font-size: 18px;  /* 增大字体尺寸为 18 像素 */
            background-color: lightyellow;  /* 添加浅黄色背景 */
            padding: 5px;  /* 设置内边距，让文本与背景有一定间距 */
            border-radius: 3px;  /* 为背景添加圆角效果，使其更美观 */
        }
    </style>
</head>
<body>
    这是一段普通的文本，而 <span class="highlight">这个被 span 包裹的部分</span> 则通过 CSS 展现出了独特的样式。
</body>
</html>

运行结果：

`2.2.2 <a>`

<a> 标签即超链接，是网页 “时空导航员”。它能够打破页面的边界限制，为用户开启通往其他网页、文件甚至同一页面特定位置的便捷通道。通过设置 href 属性，指定目标 URL，点击可跳转至其他网页、文件或同页特定位置，增强互联互通。

示例2-3：

<!DOCTYPE html>
<html>

<body>

    <p>点击下面的链接会跳转到百度首页：</p>
    <a href="https://www.baidu.com/" target="_blank">百度一下，你就知道</a>

</body>

</html>

运行结果：

`2.2.3 <strong>与<em>`

<strong> 和 <em> 标签虽功能相近，却各有千秋，<strong> 语义强强调，文本默认加粗，突出核心；<em> 重情感强调，文本通常斜体，用于辅助说明。

示例 2-4：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <p>这款手机有两大亮点：</br><strong>超强续航</strong>，一次充电可使用三天，<em>满足重度用户需求；</em></br><strong>超高清摄像</strong>，拍摄夜景画面细腻，<em>为摄影爱好者提供更多可能。</em>
    </p>
</body>

</html>

运行结果：

第三节块级标签

在 HTML 构建网页的奇妙世界里，块级标签仿若坚实厚重的 “建筑砖块”，它们凭借独特的布局特性与强大功能，为网页搭建起稳固且规整的架构，让页面从杂乱无章的信息堆砌，摇身一变成为层次分明、井然有序的视觉盛宴。

3.1 块级标签的特性

块级标签默认独占一行，宽度与父元素等同，天然划分内容区域。还能借助 CSS 定制高度、边距、背景、边框等，适配多样设计。

3.2 常见块级标签介绍

`3.2.1 <div>`

<div> 像个空箱子，能容纳各类元素。配合 CSS，可变身承载内容、划分区域、包裹组件的多样模块，构建灵活布局。

示例 3-1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        .box {
            border: 1px solid gray;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- div 作为容器包裹文本和图片 -->
    <div class="box">
        <h2>我的爱好</h2>
        <p>我喜欢阅读，在书的海洋里畅游，汲取知识。</p>
        <img src="book.png" alt="一本打开的书" width="150">
    </div>
</body>

</html>

运行结果：

`3.2.2 <p>`

<p> 标签可自动为段落添上下间距，文字排列整齐，阅读舒适，确保多段文本清晰独立，助力信息流畅传达。

示例 3-2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <p>春天来了，花儿开了，红的像火，粉的像霞，白的像雪。</p>
    <p>小鸟在枝头欢快地唱歌，仿佛在庆祝春天的到来。</p>
    <p>人们纷纷走出家门，去公园踏青，享受这美好的春光。</p>
</body>

</html>

运行结果：

`3.2.3 <h1>` - `<h6>`

<h1> 到 <h6> 是文章 “纲目”，依重要性、层级排序。<h1> 字体醒目粗大，宣告主题；数字递增，字体变小变细，引导用户抓重点、理脉络，提升浏览效率。

示例 3-3：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <h1>我的旅游日记</h1>
    <p>今年夏天，我开启了一段难忘的旅程。</p>
    <h2>第一站：海边</h2>
    <p>阳光、沙滩、海浪，美极了。我在海边漫步，捡贝壳，踏浪花。</p>
    <h3>海边的日出</h3>
    <p>清晨，看着太阳从海平面缓缓升起，橙红色的光染透天际，太震撼了。</p>
    <h2>第二站：山区</h2>
    <p>走进大山，呼吸着清新空气，聆听鸟儿鸣叫，感受大自然的宁静。</p>
    <h3>爬山趣事</h3>
    <p>爬山途中，偶遇一只小松鼠，它机灵地看着我，逗趣极了。</p>
</body>

</html>

运行结果：

`3.2.4 <ul>与<ol>`

<ul>（无序列表）用圆点标非顺序项，展示购物清单清晰直观；<ol>（有序列表）靠数字序号排顺序内容，呈现操作步骤严谨有序

示例 3-4：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>列表示例</title>
</head>
<body>
    <h2>今日待办</h2>
    <ul>
        <li>买生活用品</li>
        <li>读书</li>
        <li>锻炼</li>
    </ul>
    <h2>网页制作步骤</h2>
    <ol>
        <li>规划布局</li>
        <li>写 HTML 代码</li>
        <li>设计 CSS 样式</li>
        <li>添交互功能</li>
    </ol>
</body>
</html>

运行结果：

第四节语义化标签

在 HTML 的知识版图里，语义化标签恰似一位位身负特殊使命的 “信息使者”，为网页注入了精准表意与结构明晰的强大力量，让代码不仅仅是机器可读懂的指令集，更成为人类易于理解的内容蓝图。它们凭借自身蕴含的丰富语义，在提升网页开发效率、优化搜索引擎理解以及助力无障碍访问等诸多领域，发挥着不可小觑的关键效用。

4.1 语义化标签的特性

语义化标签突破传统，融入内容含义、逻辑与功能考量，自带表意属性，精准传达所包裹内容特征，如文章结构、导航、时间标注等，让网页像条理分明的书籍。

4.2 常见语义化标签介绍

`4.2.1 <header>`

<header> 是网页 “门面”，汇聚页面顶部关键引导元素，像 logo、导航菜单、标题区等，规整页面起始布局，助用户开启浏览，让代码阅读者明晰架构开端。

示例 4-1：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>
        <header> 示例
    </title>
    <style>
        header {
            background-color: #333;
            color: white;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav ul li {
            margin-right: 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <header>
        <img src="logo.png" alt="网站 logo">
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="products.html">产品</a></li>
            </ul>
        </nav>
    </header>
</body>

</html>

运行结果：

`4.2.2 <footer>`

示例 4-2：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title><footer> 示例</title>
    <style>
        footer {
            background-color: #f5f5f5;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!-- 页面主体内容 -->
    <footer>
        <p>© 2023 某网站版权所有</p>
        <p>联系我们：info@example.com | 电话：123 - 456 - 7890</p>
        <p>友情链接：<a href="http://www.linked-site1.com">站点 1</a> | <a href="http://www.linked-site2.com">站点 2</a></p>
    </footer>
</body>
</html>

运行结果：

`4.2.3 <section>`

<section> 是 “精细分区大师”，依主题、功能等细分网页内容，如在线课程页分介绍、评价、作业区，使页面层次分明、用户按需获取信息，提升浏览效率。

示例 4-4：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>
        <section> 示例
    </title>
    <style>
        section {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <section>
        <h2>网页设计课介绍</h2>
        <p>课程面向零基础，涵盖……</p>
    </section>
    <section>
        <h2>学员评价</h2>
        <p>学员 A：课很棒……</p>
        <p>学员 B：实用……</p>
    </section>
    <section>
        <h2>课后作业</h2>
        <p>设计博客首页布局……</p>
    </section>
</body>

</html>

运行结果：

第五节多媒体标签

在绚丽多彩的网页世界中，多媒体标签宛如神奇的 “魔法师”，打破了静态页面的沉闷，将图像、音频、视频等缤纷元素巧妙地融入其中，为用户带来一场场震撼感官的交互盛宴，让网页瞬间鲜活起来，绽放出无限魅力。它们是连接虚拟与现实视听体验的桥梁，极大地丰富了网页所能承载与传递的信息维度。

5.1 多媒体标签的特性

多媒体标签具备强大的包容性，能无缝对接不同格式的媒体文件，无论是常见的 JPEG、PNG 图像，还是 MP3、WAV 音频，亦或是 MP4、WebM 视频等，都能轻松驾驭。它们以简洁直观的语法，在 HTML 文档中开辟出专属展示区域，使得多媒体资源得以精准就位，同时兼顾网页加载性能与流畅播放需求，确保用户获得优质体验。

5.2 常见多媒体标签介绍

`5.2.1 <img>`

<img>是网页图像展示的标签，通过 “src” 属性精准指向图像文件的存储路径，无论是本地图片资源还是网络图片链接，都能迅速抓取并呈现。“alt” 属性对图片进行描述说明，当图片因网络故障、加载缓慢或屏幕阅读器辅助浏览等情况无法正常显示时，以简洁文字描述图片内容，保障信息传递不中断，

示例5-1：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title><img> 示例</title>
</head>

<body>
    <img src="beautiful-landscape.pn" alt="山水风景画">
</body>

</html>

运行结果：

`5.2.2 <audio>`

<audio>用于播放音频，借助 “src” 属性链接音频文件，为网页注入声音活力。同时，还配备了一系列实用的控制属性，如 “controls”，自动生成播放、暂停、音量调节等操控按钮，让用户随心掌控音频播放进程；“autoplay” 可使音频在页面加载完成瞬间开启，不过为避免突兀，需谨慎使用，确保用户体验不受干扰。

示例 5-2：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title><audio> 示例</title>
</head>

<body>
    <audio src="relaxing-music.mp3" controls autoplay>
        您的浏览器不支持 audio 标签。
    </audio>
</body>

</html>

运行结果：

`5.2.3 <video>`

<video> 是呈现视频的标签，它的功能丰富强大，不仅能用 “src” 引入各类视频文件，还能结合 “width” 与 “height” 属性自由定制视频播放窗口大小，适配不同布局需求。和 <audio> 标签类似，“controls” 带来便捷操控体验，“autoplay” 按需决定视频是否自动播放。此外，“poster” 属性可指定视频封面图，在播放前吸引用户目光，提前营造氛围感。

示例 5-3：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title><video> 示例</title>
</head>

<body>
    <video src="exciting-trailer.mp4" width="640" height="360" controls poster="video-cover.jpg">
        您的浏览器不支持 video 标签。
    </video>
</body>

</html>

运行结果：

第六节表单标签

在交互性极强的网页领域，表单标签仿若一位位贴心的 “信息收集员”，搭建起用户与网页之间沟通的关键桥梁。它们使得用户能够便捷地输入各类数据，如个人信息、搜索内容、意见反馈等，为动态、个性化的网页体验筑牢根基，让网页不再仅仅是信息的单向输出口，而是转变为双向互动的活跃平台。

6.1 表单标签的特性

表单标签具有极高的灵活性与实用性，能够容纳多种类型的输入控件，以适应丰富多样的用户数据采集需求。无论是简短的文本输入、复杂的密码设置、精准的日期选择，还是多元化的选项勾选、文件上传等操作，都能在表单框架内轻松实现。其严谨的结构设计，确保用户输入的数据能被准确收集、整理，并按照既定规则传输给服务器端进行后续处理，保障交互流程的顺畅无误。

6.2 常见表单标签介绍

`6.2.1 <form>`

<form>作为表单的 “总指挥官”，<form>标签划定了表单的整体范围，它犹如一个无形的容器，将各类输入组件有序整合。通过 “action” 属性指定数据提交的目标 URL，明确数据传输的方向，而 “method” 属性则抉择提交数据的方式，常见的有 “GET”（适合简单、少量数据查询，数据会显示在 URL 中）和 “POST”（适用于敏感、大量数据提交，数据隐式传输），以此掌控数据交互流程的关键环节。

示例 6-1：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form action="send_message.php" method="POST">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>
        <br>
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>
        <br>
        <label for="message">留言：</label>
        <br>
        <textarea id="message" name="message" rows="4" cols="30" required></textarea>
        <br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

运行结果：

`6.2.2 <input>`

<input>依据 “type” 属性的不同变换多种形态。当 “type” 为 “text” 时，变身文本输入框，供用户自由录入文字信息；设为 “password”，则立即成为密码框，输入字符自动以星号或圆点隐藏，守护隐私安全；若为 “checkbox”，化作可勾选的复选框，支持多项选择，满足多元需求；而 “radio” 类型下，是排他性单选按钮组，确保同一组内仅能选中一个选项，精准收集用户抉择。

示例 6-2：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title><input> 示例</title>
</head>

<body>
    <form action="submit.php" method="POST">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
        <br>
        <label>兴趣爱好：</label>
        <input type="checkbox" id="reading" name="hobby" value="reading">
        <label for="reading">阅读</label>
        <input type="checkbox" id="sports" name="hobby" value="sports">
        <label for="sports">运动</label>
        <input type="checkbox" id="travel" name="hobby" value="travel">
        <label for="travel">旅行</label>
        <br>
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
        <br>
        <input type="submit" value="提交">
    </form>
</body>

</html>

运行结果：

`6.2.3 <textarea>`

<textarea> 标签在表单中主要用于接收用户输入的多行文本内容。它为用户提供了一个相对较大的文本输入区域，适合诸如撰写留言、发表评论、描述详细信息等场景。可以通过 “rows” 和 “cols” 属性来初步设定文本框显示的行数和列数，但这并不会限制用户输入的实际长度，当输入的文本超出预设范围时，文本框会自动出现滚动条以显示全部内容，确保用户能完整输入自己想要表达的内容。它有 “name” 属性，用于在表单提交时标识该文本区域输入的数据，方便服务器端接收和处理对应的数据。

示例6-3：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title><textarea> 示例</title>
</head>
<body>
    <form action="process_data.php" method="POST">
        <label for="feedback">请留下您的反馈意见：</label>
        <textarea id="feedback" name="feedback" rows="6" cols="50"></textarea>
        <input type="submit" value="提交反馈">
    </form>
</body>
</html>

运行结果：

`6.2.4 <button>`

<button> 标签用于创建一个可点击的按钮元素，它在表单中有多种用途。常见的类型有 “submit”（用于提交表单数据）、“reset”（用于重置表单内容，恢复到初始状态）以及 “button”（可通过添加 JavaScript 事件来实现自定义的交互功能）。相较于其他类似的可点击元素（如 <input type="submit"> 等），<button> 标签的内容包容性更强，可以在按钮内部放置文本、图片甚至是其他 HTML 元素，方便开发者打造出更具个性化、美观且功能丰富的按钮样式。

示例6-4:

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title><button> 示例</title>
</head>
<body>
    <form action="submit_info.php" method="POST">
        <input type="text" id="user_comment" name="user_comment" placeholder="请输入您的评论">
        <button type="submit">提交评论</button>
        <button type="reset">重置输入框</button>
        <button type="button" onclick="alert('这是一个自定义提示！')">点击提示</button>
    </form>
</body>
</html>

运行结果：

`6.2.5 <select>`

<select> 标签创建的是一个下拉列表框，它在有限的页面空间内提供了多个选项供用户选择，是一种比较节省页面空间的选择方式。用户点击下拉箭头展开列表后从中选择一项内容。其内部通过 <option> 标签来定义具体的可选项，每个 <option> 都有 “value” 属性，用于指定该选项被选中时提交给服务器的值，同时 <select> 标签自身有 “name” 属性，用于标识这个下拉列表对应的字段名称，方便服务器识别和处理用户选择的数据。

示例2-4：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>下拉列表示例</title>
</head>
<body>
    <form action="save_choice.php" method="POST">
        <label for="grade">请选择您所在的年级：</label>
        <select id="grade" name="grade">
            <option value="一年级">一年级</option>
            <option value="二年级">二年级</option>
            <option value="三年级">三年级</option>
        </select>
        <input type="submit" value="提交选择">
    </form>
</body>
</html>

运行结果：

第七节图文排版

在精彩纷呈的网页设计天地里，图文排版恰似一位匠心独运的 “视觉设计师”，它精心雕琢着文字与图像之间的和谐共生关系，将信息以最具吸引力、最易理解的方式呈现给用户，让网页从一堆零散元素蜕变成为一个有机整体，提升用户浏览体验，使其沉浸于知识与美感交织的信息海洋。

7.1 图文排版的重要性

合理的图文排版是提升网页可读性与视觉冲击力的关键。恰当布局图文，能引导用户视线自然流动，突出核心内容，如产品介绍页面，精美产品图搭配精准文字描述，可瞬间抓住用户兴趣，促使用户深入了解详情；在新闻资讯类网页，适时插入相关配图，既能缓解文字阅读疲劳，又能增强信息可信度与感染力，使枯燥文字变得鲜活生动，让用户更愿意驻足阅读，进而延长页面停留时间，降低跳出率。

7.2 图文排版的原则

7.2.1 内容相关性

图文务必紧密关联，图像应精准阐释文字内涵，文字则为图像提供深度解读。例如介绍历史事件，选用同时期历史图片，配合详细事件背景、过程阐述，图文相互印证，帮助用户快速构建知识体系，避免图文 “两张皮” 现象，让信息传递一气呵成。

7.2.2 视觉平衡

要兼顾画面整体的稳定与和谐。避免图片过大或文字过密造成视觉重心偏移，可通过调整图文大小、间距、颜色对比度等实现平衡。如简约风格网页，多采用小清新配图，搭配简洁、疏朗文字排版，以清爽视觉感受吸引用户；而在艺术、时尚类网页，适当运用夸张对比手法，以大幅个性图片搭配富有设计感的文字排版，营造强烈视觉冲击，牢牢锁住用户目光。

7.2.3 适配性

充分考虑不同设备屏幕尺寸与分辨率差异，确保图文排版在桌面端、移动端等各类终端都能完美呈现。采用响应式设计理念，图片设置合理自适应属性，文字灵活调整字号、行距，如电商网站购物详情页，移动端访问时图片自动缩放，文字排版紧凑有序，保证用户便捷浏览选购，不因设备切换影响购物体验。

7.3 常见图文排版技巧

7.3.1 图文混排

利用 CSS 样式实现文字环绕图片效果，营造丰富层次感。例如在博客文章中，作者照片或配图置于段落起始，设置文字环绕，让页面布局灵动多变，增加阅读趣味性，代码示例如下：

示例 7-1：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>图文混排示例</title>
    <style>
        img {
            float: left;
            margin-right: 10px;
            width: 150px;
            height: 150px;
        }
        p {
            text-align: justify;
        }
    </style>
</head>

<body>
    <img src="author-photo.jpg" alt="作者照片">
    <p>这是一段关于某主题的精彩论述，文字围绕着图片进行排列，看起来更加生动有趣。当图片置于此处时，读者的视线会首先被吸引过来，然后自然地过渡到文字内容上，大大提高了阅读的趣味性和吸引力。在实际的网页设计中，图文混排是一种非常实用的技巧，可以让页面更加丰富多彩。</p>
</body>

</html>

运行结果：

7.3.2 图片对齐方式

除了文字环绕，统一图片在容器或页面中的对齐方式至关重要。常见有居中对齐、左对齐、右对齐，适配不同场景需求。如企业官网团队介绍页面，成员照片统一居中对齐，下方配文字说明，显得庄重专业；个人作品集网页，作品图片多采用左对齐或右对齐，搭配参差不齐的文字描述，展现出随性创意风格，代码示例展示居中对齐：

示例 7-2：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>图片居中对齐示例</title>
    <style>
        img {
            display: block;
            margin: 0 auto;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="product-image.jpg" alt="产品图片">
    <p>这是关于该产品的一些详细介绍文字，图片居中放置在上方，能很好地吸引用户的注意力，下方文字围绕产品展开描述，让用户更全面地了解产品信息。在网页设计中，这种布局方式经常被用于突出重点内容。</p>
</body>

</html>

运行结果：

7.3.3 图片裁剪与优化

依据排版需求裁剪图片，去除冗余信息，突出关键元素，同时运用图像编辑工具优化图片质量、压缩文件大小，兼顾视觉效果与加载速度。如电商产品图，裁剪为统一规格正方形或长方形，聚焦产品主体，去除背景杂物，经适度压缩后上传，确保页面快速加载，提升用户购物效率，避免因图片过大、过杂导致加载卡顿，用户流失。图文排版通过巧妙构思与精细操作，赋予网页灵魂与魅力，是打造优质网页体验不可或缺的一环。

在这里插入图片描述

上一篇： html如何关联cs

下一篇： PSR-PHP 中的

Document

《前端技术基础》第01章 HTML基础【合集】

第一节 HTML的基本结构

1.1 文档类型声明（DOCTYPE Declaration）

1.2 根元素（Root Element）：<html>

1.3 头部元素（Head Element）：<head>

1.4 主体元素（Body Element）：<body>

第二节 行内标签

2.1 行内标签的特性

2.2 常见行内标签介绍

2.2.1 <span>

2.2.2 <a>

2.2.3 <strong>与<em>

第三节 块级标签

3.1 块级标签的特性

3.2 常见块级标签介绍

3.2.1 <div>

3.2.2 <p>

3.2.3 <h1> - <h6>

3.2.4 <ul>与<ol>

第四节 语义化标签

4.1 语义化标签的特性

4.2 常见语义化标签介绍

4.2.1 <header>

4.2.2 <footer>

4.2.3 <section>

第五节 多媒体标签

5.1 多媒体标签的特性

5.2 常见多媒体标签介绍

5.2.1 <img>

5.2.2 <audio>

5.2.3 <video>

第六节 表单标签

6.1 表单标签的特性

6.2 常见表单标签介绍

6.2.1 <form>

6.2.2 <input>

6.2.3 <textarea>

6.2.4 <button>

6.2.5 <select>

第七节 图文排版

7.1 图文排版的重要性

7.2 图文排版的原则

7.2.1 内容相关性

7.2.2 视觉平衡

7.2.3 适配性

7.3 常见图文排版技巧

7.3.1 图文混排

7.3.2 图片对齐方式

7.3.3 图片裁剪与优化

1.2 根元素（Root Element）：`<html>`

1.3 头部元素（Head Element）：`<head>`

1.4 主体元素（Body Element）：`<body>`

第二节行内标签

`2.2.1 <span>`

`2.2.2 <a>`

`2.2.3 <strong>与<em>`

第三节块级标签

`3.2.1 <div>`

`3.2.2 <p>`

`3.2.3 <h1>` - `<h6>`

`3.2.4 <ul>与<ol>`

第四节语义化标签

`4.2.1 <header>`

`4.2.2 <footer>`

`4.2.3 <section>`

第五节多媒体标签

`5.2.1 <img>`

`5.2.2 <audio>`

`5.2.3 <video>`

第六节表单标签

`6.2.1 <form>`

`6.2.2 <input>`

`6.2.3 <textarea>`

`6.2.4 <button>`

`6.2.5 <select>`

第七节图文排版