第十六章:HTML-以小米SU7 Ultra为例，手把手教你构建网页

最新推荐文章于 2025-04-26 22:09:53 发布
最新推荐文章于 2025-04-26 22:09:53 发布
阅读量1.2k 收藏 25
点赞数 25
分类专栏： Python HTML 网页开发 文章标签： html 前端 python chrome 信息可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2302_80961196/article/details/146764749
版权

前言

    HTML（HyperText Markup Language，超文本标记语言）是构建网页的基础语言，它就像盖房子的砖瓦，用来搭建网页的骨架。无论是简单的个人博客，还是复杂的电商平台，背后都离不开HTML的支持。

在本篇文章中，我将通过一个具体的案例——小米SU7 Ultra的网页展示，带你从零开始学习HTML的语法和应用。文章会从HTML的基本概念讲起，然后逐步深入到语法细节，并通过代码示例和表格总结，帮助你快速掌握HTML的核心知识。资源绑定附上完整资源供读者参考学习!

HTML是什么？

    HTML是一种标记语言，用来定义网页的结构和内容。它通过一系列的标签（Tags）来告诉浏览器如何展示网页内容。例如，<h1>标签表示标题，<p>标签表示段落，<img>标签用来插入图片。

HTML本身并不执行计算或逻辑操作，它的主要任务是描述内容的结构，而不是内容决定的外观。网页的外观通常由CSS（层叠样式表）来控制，而HTML负责提供内容的基础框架。

HTML的应用场景

HTML的应用场景非常广泛，以下是一些常见的例子：

  1. 网页开发：所有网页的核心都是HTML，无论是静态页面还是动态页面，HTML都是不可或缺的。

  2. 博客和文章：像CSDN、知乎这样的平台，文章内容通常用HTML来组织。

  3. 电商网站：商品展示、详情页、购物车等功能都依赖HTML来构建。

  4. 移动应用的网页部分：许多应用的网页视图（WebView）也使用HTML来渲染内容。

  5. 数据可视化：HTML可以结合JavaScript和图表库（如ECharts）来展示动态数据。

HTML的基本结构

一个完整的HTML文档通常包含以下几个部分：

HTML（文件后缀是.HTML不是.py）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>主标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

效果展示:

预览

  • <!DOCTYPE html>：声明文档类型，告诉浏览器这是一个HTML5文档。

  • <html>：HTML文档的根元素，所有内容都包含标签在这个内。

  • <head>：包含网页的元信息，如字符编码、标题等。

  • <body>：包含网页的可见内容，如标题、段落、图片等。

HTML的语法详解

接下来，我们将通过一个具体的案例——小米SU7 Ultra的网页展示，来学习HTML的语法。

1. 标题标签（<h1>到<h6>）

标题标签用来定义网页的标题层次，<h1>是最高级别的标题，<h6>是最低级别的标题。

HTML示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
<h1>小米SU7 Ultra：重新定义智能电动车</h1>
<h2>性能与科技的完美结合</h2>
<h3>核心参数</h3>

    <h1>主标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

效果展示

2. 段落标签（<p>）

段落标签用来定义一段文字内容。

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>小米SU7 Ultra：重新定义智能电动车</h1>
<h2>性能与科技的完美结合</h2>
<h3>核心参数</h3>
<p>小米SU7 Ultra是小米公司推出的全新智能电动车，搭载最新的自动驾驶技术和高性能电池系统。</p>

</body>
</html>

效果展示

3. 图片标签（<img>）

图片标签用来在网页中插入图片，src属性表示图片的路径，alt属性表示图片的替代文本。

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>小米SU7 Ultra：重新定义智能电动车</h1>
<h2>性能与科技的完美结合</h2>
<h3>核心参数</h3>
<p>小米SU7 Ultra是小米公司推出的全新智能电动车，搭载最新的自动驾驶技术和高性能电池系统。</p>
<img src="Xiaomi%20Su7%20Ultra-3.jpg" alt="小米SU7 Ultra外观图">

</body>
</html>

效果展示

4. 链接标签（<a>）

链接标签用来创建超链接，href属性表示链接的目标地址。

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>小米SU7 Ultra：重新定义智能电动车</h1>
<h2>性能与科技的完美结合</h2>
<h3>核心参数</h3>
<p>小米SU7 Ultra是小米公司推出的全新智能电动车，搭载最新的自动驾驶技术和高性能电池系统。</p>
<img src="Xiaomi%20Su7%20Ultra-3.jpg" alt="小米SU7 Ultra外观图">
<a href="https://www.xiaomiev.com/ultra">小米SU7 Ultra的链接</a>


</body>
</html>

效果展示

5. 列表标签（<ul>和<ol>）

列表标签用来创建无序列表（<ul>）和有序列表（<ol>）。

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>主要特点</h3>
<ul>
    <li>800公里超长续航</li>
    <li>3秒破百加速性能</li>
    <li>全场景自动驾驶</li>
    <li>智能座舱系统</li>
</ul>

<h3>购买方式</h3>
<ol>
    <li>访问小米官网</li>
    <li>选择配置</li>
    <li>在线支付</li>
    <li>等待配送</li>
</ol>

<img src="Xiaomi%20Su7%20Ultra-5.jpg" alt="小米SU7 Ultra外观图">
</body>
</html>

效果展示

6. 表格标签（<table>）

表格标签用来创建表格，<tr>表示表格行，<th>表示表头单元格，<td>表示普通单元格。

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米威武</title>
</head>
<body>

<h3>性能参数对比</h3>
<table border="1">
    <tr>
        <th>参数</th>
        <th>小米SU7 Ultra</th>
        <th>特斯拉Model S</th>
    </tr>
    <tr>
        <td>续航里程</td>
        <td>800公里</td>
        <td>650公里</td>
    </tr>
    <tr>
        <td>0-100km/h加速</td>
        <td>3秒</td>
        <td>3.2秒</td>
    </tr>
</table>

<img src="Xiaomi%20Su7%20Ultra-6.jpg" alt="小米SU7 Ultra外观图">
</body>
</html>

效果展示

7. 视频标签（<video>）

视频标签用来嵌入视频内容，src属性表示视频的路径，controls属性表示显示播放控件。

HTML示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>友商是**</title>
</head>
<body>

<video src="纽北先导片.mp4" controls width="600">
    您的浏览器不支持视频播放
</video>


</body>
</html>

效果展示

HTML语法总结

为了方便大家快速查阅，我将HTML的常用语法整理成了以下表格：

标签用途示例代码
<h1>-<h6>定义标题，级别从高到低<h1>主标题</h1>
<p>定义段落<p>这是一个段落。</p>
<img>插入图片<img src="image.jpg" alt="图片描述">
<a>创建超链接<a href="https://example.com">链接</a>
<ul>无序列表<ul><li>项1</li><li>项2</li></ul>
<ol>有序列表<ol><li>项1</li><li>项2</li></ol>
<table>创建表格<table><tr><td>单元格</td></tr></table>
<video>嵌入视频<video src="video.mp4" controls></video>

综合应用：构建小米SU7 Ultra完整网页

接下来，我们将综合应用前面学到的HTML语法，构建一个完整的小米SU7 Ultra网页。这个网页将包含以下内容：

  1. 网页头部（Header）

  2. 横幅（Banner）

  3. 产品介绍

  4. 核心参数

  5. 视频展示

  6. 购买链接

  7. 页脚（Footer）

以下是完整的HTML代码：

HTML源代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小米SU7 Ultra - 重新定义智能电动车</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        header {
            background-color: #000;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .banner {
            background-image: url('Xiaomi Su7 Ultra-2.jpg');
            background-size: cover;
            height: 700px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: red;
            text-align: center;
        }
        .banner-content h1 {
            font-size: 3em;
            margin-bottom: 20px;
        }
        .intro {
            background-color: white;
            padding: 30px;
            margin: 30px 0;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .specs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin: 30px 0;
        }
        .spec-item {
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .video-section {
            background-color: #000;
            padding: 30px;
            margin: 30px 0;
            text-align: center;
        }
        .cta {
            text-align: center;
            margin: 30px 0;
        }
        .cta a {
            display: inline-block;
            background-color: #ff6700;
            color: white;
            padding: 15px 30px;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
            transition: background-color 0.3s;
        }
        .cta a:hover {
            background-color: #ff4500;
        }
        footer {
            background-color: #333;
            color: red;
            text-align: center;
            padding: 100px 0;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <header>
        <h1>小米SU7 Ultra</h1>
        <p>重新定义智能电动车</p>
    </header>

    <div class="banner">
        <div class="banner-content">
            <h1>小米SU7 Ultra</h1>
            <p>性能与科技的完美结合</p>
        </div>
    </div>

    <div class="container">
        <section class="intro">
            <h2>重新定义智能电动车</h2>
            <p>小米SU7 Ultra是小米公司推出的全新智能电动车，搭载最新的自动驾驶技术和高性能电池系统。它不仅拥有800公里的超长续航，还具备3秒破百的强劲加速性能，为用户带来前所未有的驾驶体验。</p>
            <img src="Xiaomi%20Su7%20Ultra-3.jpg" alt="小米SU7 Ultra外观图" style="width: 100%; max-width: 800px; border-radius: 10px; margin-top: 20px;">
        </section>

        <section class="specs">
            <div class="spec-item">
                <h3>核心参数</h3>
                <ul>
                    <li>续航里程：800公里</li>
                    <li>0-100km/h加速：3秒</li>
                    <li>最大功率：400kW</li>
                    <li>电池容量：120kWh</li>
                </ul>
            </div>
            <div class="spec-item">
                <h3>智能科技</h3>
                <ul>
                    <li>全场景自动驾驶</li>
                    <li>智能座舱系统</li>
                    <li>语音控制</li>
                    <li>OTA远程升级</li>
                </ul>
            </div>
        </section>

        <section class="video-section">
            <h2>纽北赛道先导片</h2>
            <video src="纽北先导片.mp4" controls width="800">
                您的浏览器不支持视频播放
            </video>
        </section>

        <section class="cta">
            <a href="https://www.xiaomiev.com/ultra">立即购买小米SU7 Ultra</a>
        </section>
    </div>

    <footer>
        <p>&copy; 2025 小米SU7 Ultra. 保留所有权利。</p>
    </footer>
</body>
</html>

效果展示

总结

    通过本篇文章，我们学习了HTML的基本概念、应用场景以及常用语法。通过小米SU7 Ultra的网页示例，我们还掌握了如何用HTML构建一个完整的网页。

HTML是前端开发的基础，掌握了HTML后，可以进一步学习CSS来美化网页，或者学习JavaScript来实现交互功能。希望大家通过这篇文章，能够对HTML有一个清晰的认识，并开始尝试构建自己的网页！

动手实践

为了更好地掌握HTML，建议你按照以下步骤进行实践：

  1. 复制代码：将上面的完整网页代码复制到一个文本编辑器中（如Notepad++、VS Code）。

  2. 保存文件：将文件保存为su7-ultra.html。

  3. 打开网页：用浏览器打开这个HTML文件，查看效果。

  4. 修改内容：尝试修改网页中的文字、图片路径、颜色等，观察网页的变化。

  5. 扩展功能：尝试添加更多内容，如更多图片、视频、列表等。

通过不断的实践和探索，你将逐渐掌握HTML的精髓，并能够独立构建出精美的网页！资源绑定附上完整资源供读者参考学习!

centos7离线部署trwebocr
qq_34960590的博客
01-29 622
1.制作trwebocr镜像,找一个已安装trwebocr的docker镜像;打包trwebocr。由于客户环境是内网，无法连接外网安装依赖，所以下面都是使用内网进行安装；4.将docker注册为service服务；注意此步骤在已有外网环境中安装。3.移到 /usr/bin；2.上传内网服务器，加载镜像。5. 启动docker。
用html和css制作静态小米网页（二）
qq_48802281的博客
07-07 504
用html和css制作静态小米网页
shell编程----常用命令
weixin_43384009的博客
02-14 434
目录标题1. diff和patch命令2. cut命令3. sort命令4. uniq命令5. seq命令6. join命令7. tr命令7. xargs命令 1. diff和patch命令 diff通常比较文件的内容，patch常用来打补丁 < 表示第一个文件中的内容 > 表示第二个文件中的内容 a—表示添加add c—表示更改change d—表示删除delete 使用方法： d...
从关键新闻和最新技术看AI行业发展（第三十六期2024.11.11-11.24） |【WeThinkIn老实人报】
欢迎大家关注我
11-24 669
【三年面试五年模拟】将陪伴大家度过整个AI行业职业生涯。
从关键新闻和最新技术看AI行业发展（2024.3.25-4.7第二十期） |【WeThinkIn老实人报】
欢迎大家关注我
04-28 1516
阅读【WeThinkIn老实人报】，掌握最新AI行业资讯，提升个人基本面。
WebRTC基于网页的视频会议，手写WebRTC流程（html）
桃花岛主的博客
04-26 345
WebRTC实现了基于网页的语音对话或视频通话技术，目的是无插件实现Web端的实时通信的能力，WebRTC提供了视频会议的核心技术，包括音视频的采集、编码、网络传输、展示功能，并且还支持跨平台，包括linux、windows、mac、android，以上为一个服务器，用来放置应用程序，以下为两个服务器，一个web服务器，一个媒体服务器，用来美颜’特效之类，进行混流。
Java实现HTML转PDF(deepSeekAi-＞html-＞pdf)
牧风人的博客
04-25 454
Java实现HTML转PDF,主要为了解决将ai返回的html文本数据转为PDF文件方便用户下载查看。
PHP标签+注释+html混写+变量
Java_fenxiang的博客
04-25 929
5. **数组(Array)**：用于存储多个值，可以是不同类型的数据，例如 `$array = [1, "two", 3.3];在PHP中，变量的类型是动态的，也就是说，同一个变量可以根据需要存储不同类型的数据。6. **对象(Object)**：用于存储对象类型的数据，例如 `$object = new StdClass();7. **资源(Resource)**：特殊类型的变量，用于表示外部资源，例如数据库连接、文件句柄等。8. **NULL**：特殊的类型，表示变量没有值或不存在。
html css js网页制作成品——HTML+CSS+js美甲店网页设计（5页）附源码
卡拉米
04-26 879
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
js 的call 和apply方法用处
Bigbullwang的博客
04-24 318
在这里，changeStyle函数将被box对象调用，this指向了box对象，如果不用call的话，程序报错，因为window对象中没有style属性。例子：function changeStyle(attr, value){现在 window对象 “box” 这个div 的高 直接变成200px了，等价于 box.style.height=”200px”；与宿主环境（文档对象。
4.23-4.26学习总结 HTML—CSS常见标签和样式
最新发布
2402_88130280的博客
04-26 476
（25行是设置点击按钮）
websheet 之 HTML使用入门
火柴盒
04-25 414
websheet基于HTML5的CANVAS和JAVASCRIPT开发的纯前端xlsx文件展示控件，该控件着重的页面展示，主要完成了文件导入、导出、文本展示、格式化文本、合并单元格、边框、底色、设置行列宽度高度，行列隐藏、视图锁定、基础表格、撤销、重做、快捷键、公式的解析和计算等功能。支持自定义函数，单元格展示编辑和右击菜单定制开发。
HTML与安全性：XSS、防御与最佳实践
欢迎来到我的博客，希望你能有所收获！
04-26 905
XSS、防御与最佳实践
56、如何快速让⼀个盒⼦⽔平垂直居中
qq_45600165的博客
04-18 386
flex布局+外边距（margin）实现：给⽗级设置为display: flex；绝对定位+外边距（margin）+C3的转换transform 中的translate实现：：绝对定位元素，利⽤。绝对定位+外边距（margin）实现：：绝对定位的元素将上下左右都设置为O，再设置margin:auto 即。纯flex布局实现：：给元素设置flex布局，添加flex的alignltems:center垂直居。中,justifycontent:center⽔平居中，实现居中效果；就可以实现⽔平垂直居中显⽰；
CSS3 基础（边框效果）
分享我的点点滴滴，在成长路上与你同行！
04-23 606
CSS3 基础（边框效果）
前端面试之吊打面试官 HTML篇
Frankabcdefgh的博客
04-26 311
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，是用来告诉浏览器的解析器，该用什么样的方式去加载识别文档。iframe通常用来加载外部链接，不会影响网页内容的加载。src和href都是用来加载外部资源，区别如下。根据内容来选择合适的标签。
一道有趣的xxe过滤题(html实体化绕过)
2303_80867263的博客
04-24 491
经过测试得知过滤了system,file,//,那就找编码绕过,试了下都不行,看了wp才知道要用html实体化,涨知识了。要利用参数实体,在里面整一个实体调用file函数然后查找flag,本题提示了/api/login进入这个接口。然后把括号里面的进行html实体化,看到上面有个xml,试试xml,既然有xml,那就试试xxe,
【高频考点精讲】实现垂直居中的多种CSS方法比较与最佳实践
全栈老李的博客
04-26 613
今天咱们聊聊前端开发中最让人头疼的问题之一——垂直居中。不知道你们有没有遇到过这种情况：明明设置了水平居中了，垂直方向怎么折腾都不对劲。全栈老李当年刚入行时，为了一个div居中能折腾一晚上，现在想想真是血泪史啊。
小米SU7：高性能电动汽车的标杆
资源摘要信息:"小米汽车SU7简介说明" 小米汽车SU7作为小米集团进军汽车行业的首款产品，承载着小米在智能硬件领域的丰富经验和技术积累。该车型自发布以来，凭借其出色的性能指标，引起市场和消费者的高度关注。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值