黑马程序员web前端：简单HTML页面实现

最新推荐文章于 2025-09-08 18:45:43 发布

天不生邹子

最新推荐文章于 2025-09-08 18:45:43 发布

阅读量956

点赞数 26

CC 4.0 BY-SA版权

分类专栏： skills 文章标签： css 前端

本文链接：https://blog.csdn.net/TBSZZ/article/details/151292596

skills 专栏收录该内容

2 篇文章

订阅专栏

一.通过HTML的标签及CSS样式，完成如下企业简介html页面的制作。

实现效果：

关键词书写

反思：大部分代码依靠通义灵码完成，主要在于关键词的书写：

你是一名前端开发工程师，现需要制作一个HTML页面，具体需求如下：
1. 内容：标题：企业简介；位于最左侧。企业简介下是一个灰色实线，接下来是正文：

传智教育(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司......

正文下面还有一个灰色实线，接下来是小字版权所属地：

江苏传智播客教育科技股份有限公司

2. 布局：标题加黑加粗，居左展示。正文中传智教育加粗变红，“为中华民族伟大复兴而讲课，为千万学生少走弯路而著书”加粗，“探索教育本源，开辟教育新生态”加粗，版权字体变小变浅，且居中显示。
请帮我生成这个html页面。

当然AI生成的还可能不符合预期，需要根据标签定义和属性进行修改。

二.通过HTML的表格、超链接、音频标签，完成如下页面制作

效果说明：

点击歌手名字，会打开新的标签页，在新的标签页中展示歌手的个人简介。
点击播放控件，开始播放对应的歌曲。

以下为我给AI的指令（我提前在E盘下放了mp3音频）：

你是一个前端开发工程师，现在需要制作一个表格，表头为编号，标题，歌手，时长，播放。其中播放下面放置播放组件。音频为E:\web\web前端\Day01\mp3下的四个mp3音频，表格内容需填写完整，且要求：1. 点击歌手名字，会打开新的标签页，在新的标签页中展示歌手的个人简介。2. 点击播放控件，开始播放对应的歌曲。表格中歌手对应的个人简介地址如下：覃沐曦：覃沐曦_百度百科周深：周深（中国内地男歌手、音乐制作人、青年歌唱家）_百度百科田馥甄：田馥甄_百度百科成驰洋：成驰洋_百度百科

那么第一个问题来了：

AI无法根据提供的mp3地址找到对应的音频，所生成的音频不对，需要手动找到对应的地址粘贴复制。

此处介绍下地址的写法：

绝对路径：又分为绝对磁盘路径和绝对网络路径。前者："E:\01.png"；后者："https://xxx.png"
相对路径：又分为当前目录和上一级目录。前者：./(可省略)；后者：../

第二个问题也来了：

显示出来的表格宽度不对，即标题，歌手，时长，表格太长，播放组件显示不全。

解决方法：

设置表格布局：使用 table-layout: fixed 让表格列宽由CSS控制，而不是内容。
指定列宽：通过设置各列的宽度来分配空间。

具体部分实现代码如下：

table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            /* 关键：固定表格布局 */
            table-layout: fixed;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            /* 控制文本溢出 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* 为特定的列设置宽度 */
        th:nth-child(1), td:nth-child(1) { width: 5%; }  /* 编号 */
        th:nth-child(2), td:nth-child(2) { width: 20%; } /* 标题 */
        th:nth-child(3), td:nth-child(3) { width: 15%; } /* 歌手 */
        th:nth-child(4), td:nth-child(4) { width: 10%; } /* 时长 */
        th:nth-child(5), td:nth-child(5) { width: 50%; } /* 播放 (剩余空间) */

效果展示：

其中：

th:nth-child(1), td:nth-child(1) { width: 5%; } /* 编号 */这行代码：

th:nth-child(1)：选择表格中表头（<th>）里的第 1 个单元格。
td:nth-child(1)：选择表格中数据行（<td>）里的第 1 个单元格。
width: 5%;：将这一列（“编号” 列）的宽度设置为表格总宽度的 5%。
注释 /* 编号 */ 说明这一列对应的是 “编号” 内容。

意思为设置：第一列表头（编号）及数据行（1，2，3，4）宽度设置为表格总宽度的5%

如何做到点击歌手名字，会打开新的标签页，在新的标签页中展示歌手的个人简介：

在 HTML 中，<a> 标签用于创建超链接。通过设置 target="_blank" 属性，可以指定链接在新的浏览器标签页或窗口中打开。

href:
- 指定要跳转的 URL 地址。
- 例如：href="https://baike.baidu.com/item/%E5%91%A8%E6%B7%B1/15089196?fr=aladdin" 会链接到周深的百度百科页面。
target="_blank":
- 这是关键属性，它指示浏览器在新的标签页（或窗口）中打开链接。
- 如果没有这个属性，链接会在当前页面打开，用户会离开当前的音乐列表页面。