今天开始，我们进入正式的前端页面开发，将昨天数据库的增删改查操作打通前端页面，从而实现整体业务闭环。
1.前端知识回顾
1.工程创建
信任当前文件夹、作者
2.创建文件
创建的文件，后缀一定要是html：01-新浪新闻-标题-排版.html
输入英文!，然后回车即可
修改一下标题，然后做一个测试
跳转到浏览器，看一下效果
3.引入图片
● 在线引入
<!DOCTYPE html>
● 相对路径
○ 创建文件夹
○ 文件路径如下
○ 拷贝本地同步的资料，到工程目录文件夹下
拷贝之后，路径如下
代码如下
<!DOCTYPE html>
● 绝对路径：当前需要的文件存在磁盘的具体位置
<!DOCTYPE html>
4.完成新浪新闻-标题-排版
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
2025年8年29日 17:02 央视网
5.完成新浪新闻-标题-样式
● 行内样式：在当前标签这一行追加：style="color:red"，只作用于当前这一行
● 内部样式：在当前文件的head标签里面写一个style标签，在这个标签里声明样式
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审111
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
● 内部样式是作用于所有的声明标签，如上就是丢所有
h1 标签生效
● 如果内部样式和行内样式同时存在，则
○ 行内 > 内部
● 外部样式：单独定义一个css文件，在这个文件里声明指定标签的样式，然后在需要的文件里引入即可
○ 注意路径尽量保持一致，后缀必须保持一致[即文件一定是css结尾]
css文件内容如下
h1 {
color: aliceblue;
}
在原有的html基础上引入文件
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审111
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
当行内、内部、外部同时存在：行内>内部>外部
谁离我近，谁优先级高
我们可以依次删除行内、内部来验证
● 验证内部>外部
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审111
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
● 验证外部样式生效
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审111
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
6.完成新浪新闻-标题-优化
● 修改执行标签的样式
○ 元素选择器：对指定的元素声明他的样式
■ 作用范围：当前文件内所有同名标签，如下就是对当前文件内所有span标签生效
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审111
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
● 类选择器：在你想要的标签里面，追加class=' '的描述，然后再style里声明你的CSS样式
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审111
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
注意：当元素选择器和类选择器同时存在时，类选择器优先级 大于 元素选择器
● id选择器：在你想要的标签里面，追加id=''的描述，然后再style里声明你的CSS样式
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审222
2025年8年29日 17:02 央视网
注意：当元素选择器和类选择器、id选择器同时存在时，
● id选择器 ＞ 类选择器优先级 ＞ 元素选择器
● 练习案例：将h1标签的前半部分改成绿色、后半部分改成红色
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
2025年8年29日 17:02 央视网
7.完成新浪新闻-页脚-超链接
借助于a标签实现
● href：目标跳转地址
● taeget标识当前跳转的行文
○ self：当前页面打开
○ blank：新页面打开
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
2025年8年29日 17:02
央视网
8.完成新浪新闻-正文-视频
记得提前将素材拷贝到工程路径下
● video标签实现
○ src：视频的路径；依然有三种声明方式
■ 在线资源： https://www.bilibili.com/17294dwqd
■ 相对路径：推荐
■ 绝对路径
○ controls：添加这个之后就会有播放按钮、倍速按钮、声音按钮等等（播放控件）
○ width：视频宽度
○ height：视频高度
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
2025年8年29日 17:02
央视网
9.完成新浪新闻-正文-段落
段落标签是借助：
实现，里面可以声明多个属性
● 加粗：
● 下划线：
● 倾斜：
● 删除线：
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
全球贸易体系的动荡仍在持续。从8月29日起，美国暂停对价值800美元及以下进口包裹的免税待遇，这项原本便利和惠及跨境电商、美国消费者的安排，被“一刀切”取消，成为美国关税政策新一轮升级的重要标志。20多国邮政服务机构已暂停邮寄前往美国的包裹，欧洲公共邮政运营商协会称关税征收与协作机制“缺乏明确信息”，总部设在美国的全球物流公司ePost Global的高管也明确表示该举措“再次让消费者震惊”。联合国机构万国邮政联盟（UPU）已致函美国国务卿，转达成员国对可能出现运营中断的关切。
2025年8年29日 17:02
央视网
继续完善剩余的，多追加几段p标签和img标签
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
全球贸易体系的动荡仍在持续。从8月29日起，美国暂停对价值800美元及以下进口包裹的免税待遇，这项原本便利和惠及跨境电商、美国消费者的安排，被“一刀切”取消，成为美国关税政策新一轮升级的重要标志。20多国邮政服务机构已暂停邮寄前往美国的包裹，欧洲公共邮政运营商协会称关税征收与协作机制“缺乏明确信息”，总部设在美国的全球物流公司ePost Global的高管也明确表示该举措“再次让消费者震惊”。联合国机构万国邮政联盟（UPU）已致函美国国务卿，转达成员国对可能出现运营中断的关切。
美方违背规律、破坏规则的诸多关税政策正在招致越来越多的反弹。近期，法国方面呼吁评估针对美国数字企业的反制选项。印度也采取限制性措施等方式对美国关税政策表示反对。据媒体报道，巴西政府也开始考虑对美国采取报复性贸易措施。美方越是滥施关税，在全球范围内遭遇的反弹和抵制就将越多。英国《卫报》称，美国的关税政策不仅是经济手段，更是地缘政治武器，它打乱了传统联盟，推动了全球南方国家寻求自主路径。
事实一再证明，国际贸易的本质是互利互惠，你来我往才能造就共同繁荣。“多国停运对美包裹”就是一面镜子，折射出单边主义和保护主义是如何害人害己的。世界经贸格局是在多年磨合中形成的紧密合作网，往来密切的货物流通与要素配置、互相受益的贸易成果，共同织密了这张网，也造就了国际产供链的稳定。小额包裹在美国的巨大数量，本身就是经济全球化的结果。不管是畸高的关税，还是其他“小院高墙”的保护主义政策，都改变不了贸易伙伴之间业已形成的需求，损害全球供应链的同时也伤及自身。
世界需要的是合作桥梁，而不是“小院高墙”。稳定的国际经贸环境是全球增长和发展的前提，也是美国自身繁荣的基础。“多国停运对美包裹”及近期各国对美国关税政策的反应是一堂生动的实践课，华盛顿如果真想实现美国的再次伟大，就应与各国一道维护国际经贸秩序，创造全球发展机遇。（本文系《环球时报》社评，原题为：华盛顿应从“多国停运对美包裹”中领悟什么）
2025年8年29日 17:02
央视网
10.盒子模型
● 一行只显示一个（独占一行）
● 宽度默认是父元素的宽度，高度默认由内容撑开
● 可以设置宽高（width、height）
标签：
● 一行可以显示多个
● 宽度和高度默认由内容撑开
● 不可以设置宽高（width、height）
<!DOCTYPE html>
美方违背规律、
美方违背规律、破坏规则的诸多关税政策正在招致越来越多的反弹。
11.修改新浪新闻-追加div标签
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
全球贸易体系的动荡仍在持续。从8月29日起，美国暂停对价值800美元及以下进口包裹的免税待遇，这项原本便利和惠及跨境电商、美国消费者的安排，被“一刀切”取消，成为美国关税政策新一轮升级的重要标志。20多国邮政服务机构已暂停邮寄前往美国的包裹，欧洲公共邮政运营商协会称关税征收与协作机制“缺乏明确信息”，总部设在美国的全球物流公司ePost Global的高管也明确表示该举措“再次让消费者震惊”。联合国机构万国邮政联盟（UPU）已致函美国国务卿，转达成员国对可能出现运营中断的关切。
美方违背规律、破坏规则的诸多关税政策正在招致越来越多的反弹。近期，法国方面呼吁评估针对美国数字企业的反制选项。印度也采取限制性措施等方式对美国关税政策表示反对。据媒体报道，巴西政府也开始考虑对美国采取报复性贸易措施。美方越是滥施关税，在全球范围内遭遇的反弹和抵制就将越多。英国《卫报》称，美国的关税政策不仅是经济手段，更是地缘政治武器，它打乱了传统联盟，推动了全球南方国家寻求自主路径。
事实一再证明，国际贸易的本质是互利互惠，你来我往才能造就共同繁荣。“多国停运对美包裹”就是一面镜子，折射出单边主义和保护主义是如何害人害己的。世界经贸格局是在多年磨合中形成的紧密合作网，往来密切的货物流通与要素配置、互相受益的贸易成果，共同织密了这张网，也造就了国际产供链的稳定。小额包裹在美国的巨大数量，本身就是经济全球化的结果。不管是畸高的关税，还是其他“小院高墙”的保护主义政策，都改变不了贸易伙伴之间业已形成的需求，损害全球供应链的同时也伤及自身。
世界需要的是合作桥梁，而不是“小院高墙”。稳定的国际经贸环境是全球增长和发展的前提，也是美国自身繁荣的基础。“多国停运对美包裹”及近期各国对美国关税政策的反应是一堂生动的实践课，华盛顿如果真想实现美国的再次伟大，就应与各国一道维护国际经贸秩序，创造全球发展机遇。（本文系《环球时报》社评，原题为：华盛顿应从“多国停运对美包裹”中领悟什么）
2025年8年29日 17:02
央视网
12.调整段落行间距和字体
<!DOCTYPE html>
新浪政务>正文
“韩国宪政史上首次”！韩媒：前总统夫妇将同时在羁押状态下受审
全球贸易体系的动荡仍在持续。从8月29日起，美国暂停对价值800美元及以下进口包裹的免税待遇，这项原本便利和惠及跨境电商、美国消费者的安排，被“一刀切”取消，成为美国关税政策新一轮升级的重要标志。20多国邮政服务机构已暂停邮寄前往美国的包裹，欧洲公共邮政运营商协会称关税征收与协作机制“缺乏明确信息”，总部设在美国的全球物流公司ePost Global的高管也明确表示该举措“再次让消费者震惊”。联合国机构万国邮政联盟（UPU）已致函美国国务卿，转达成员国对可能出现运营中断的关切。
美方违背规律、破坏规则的诸多关税政策正在招致越来越多的反弹。近期，法国方面呼吁评估针对美国数字企业的反制选项。印度也采取限制性措施等方式对美国关税政策表示反对。据媒体报道，巴西政府也开始考虑对美国采取报复性贸易措施。美方越是滥施关税，在全球范围内遭遇的反弹和抵制就将越多。英国《卫报》称，美国的关税政策不仅是经济手段，更是地缘政治武器，它打乱了传统联盟，推动了全球南方国家寻求自主路径。
事实一再证明，国际贸易的本质是互利互惠，你来我往才能造就共同繁荣。“多国停运对美包裹”就是一面镜子，折射出单边主义和保护主义是如何害人害己的。世界经贸格局是在多年磨合中形成的紧密合作网，往来密切的货物流通与要素配置、互相受益的贸易成果，共同织密了这张网，也造就了国际产供链的稳定。小额包裹在美国的巨大数量，本身就是经济全球化的结果。不管是畸高的关税，还是其他“小院高墙”的保护主义政策，都改变不了贸易伙伴之间业已形成的需求，损害全球供应链的同时也伤及自身。
世界需要的是合作桥梁，而不是“小院高墙”。稳定的国际经贸环境是全球增长和发展的前提，也是美国自身繁荣的基础。“多国停运对美包裹”及近期各国对美国关税政策的反应是一堂生动的实践课，华盛顿如果真想实现美国的再次伟大，就应与各国一道维护国际经贸秩序，创造全球发展机遇。（本文系《环球时报》社评，原题为：华盛顿应从“多国停运对美包裹”中领悟什么）
2025年8年29日 17:02
央视网
13.AI工具生成
使用阿里云账号进行登录
如果没有账号，先注册一个就行，然后登录
当出现这个弹窗，就说明登录成功
此时，我们需要回到VsCode做二次确认
登陆成功之后，在输入框输入提示词(Prompt)
请参照这个新浪新闻，帮我实现一个基于：：html、css、javascript的网页，需要什么图片。音频。视频你自动导入即可：https://news.sina.com.cn/c/2025-08-30/doc-infnsueu5530407.shtml
大概效果如下
2.首页搭建
接下来工程目录结构如下
● css：存储页面样式
● js：负责页面交互的逻辑处理
● index.html：首页样式
这里我们关注核心的index.html，css和js文件，初始版本我们直接CV
● css：
● js：
● 图标：
<!DOCTYPE html>
无畏契约手游交易平台
¥输入最低
¥输入限高
执行命令，运行项目
首次执行需要
npm install
执行运行项目
node server.js
访问地址栏，就可以访问到如下界面
3.首页优化
整体看起来还行，但是对照官网首页还是差点意思，我们以侧边栏为例做优化：
我们预期效果如下
改造的代码如下：
<!DOCTYPE html>
无畏契约手游交易平台
¥输入最低
¥输入限高
剩下的js、css和图标我们依然是替换，解读一下修改项
// 存储筛选选项数据
let filterOptionsData = {};
// 从后端获取筛选选项
async function loadFilterOptions() {
try {
const response = await fetch('/api/filter-options');
const result = await response.json();
if (result.success) { filterOptionsData = result.data; renderFilterOptions(); } else { console.error('获取筛选选项失败:', result.message); } } catch (error) { console.error('加载筛选选项时出错:', error); }
}
// 渲染筛选选项到页面
function renderFilterOptions() {
// 渲染外观选项
renderOptions('appearance-options', filterOptionsData.appearance || [], 'appearance');
// 渲染类别选项 renderOptions('category-options', filterOptionsData.category || [], 'category'); // 渲染品质选项 renderOptions('quality-options', filterOptionsData.quality || [], 'quality'); // 渲染收藏品选项 renderOptions('collectibles-options', filterOptionsData.collectibles || [], 'collectibles');
}
// 渲染单个筛选类型的选项
function renderOptions(containerId, options, filterType) {
const container = document.getElementById(containerId);
if (!container) return;
container.innerHTML = ''; options.forEach(option => { const optionElement = document.createElement('div'); optionElement.className = 'filter-option'; const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.id = `${filterType}-${option.value}`; checkbox.value = option.value; checkbox.dataset.filterType = filterType; const label = document.createElement('label'); label.htmlFor = `${filterType}-${option.value}`; label.textContent = option.label; optionElement.appendChild(checkbox); optionElement.appendChild(label); container.appendChild(optionElement); });
}
// 获取当前选中的筛选值
function getSelectedFilters(filterType) {
const checkboxes = document.querySelectorAll(input[data-filter-type="${filterType}"]:checked);
return Array.from(checkboxes).map(cb => cb.value);
}
// 标签页切换功能
document.addEventListener('DOMContentLoaded', function() {
// 首先加载筛选选项
loadFilterOptions();
// 初始化左右两侧的广告轮播 setTimeout(() => { initAdCarousel('.sidebar-left'); initAdCarousel('.sidebar-right'); }, 100); const tabs = document.querySelectorAll('.tab'); const filterSections = document.querySelectorAll('.filter-section'); tabs.forEach(tab => { tab.addEventListener('click', function() { const tabName = this.getAttribute('data-tab'); // 移除所有活动状态 tabs.forEach(t => t.classList.remove('active')); filterSections.forEach(section => section.classList.add('hidden')); // 添加当前活动状态 this.classList.add('active'); const targetSection = document.getElementById(`${tabName}-filter`); if (targetSection) { targetSection.classList.remove('hidden'); } }); }); // 价格过滤按钮功能 const priceFilterBtn = document.getElementById('filter-btn'); if (priceFilterBtn) { priceFilterBtn.addEventListener('click', function() { const minPrice = document.getElementById('min-price').value; const maxPrice = document.getElementById('max-price').value; const filters = { price: { min: minPrice ? parseFloat(minPrice) : null, max: maxPrice ? parseFloat(maxPrice) : null } }; console.log('价格筛选:', filters); applyFilters(filters); }); } // 其他筛选类型的应用按钮 document.querySelectorAll('.filter-btn[data-filter-type]').forEach(btn => { btn.addEventListener('click', function() { const filterType = this.getAttribute('data-filter-type'); const selectedValues = getSelectedFilters(filterType); const filters = { [filterType]: selectedValues }; console.log(`${filterType}筛选:`, filters); applyFilters(filters); }); });
});
// 应用筛选（可以在这里调用API或过滤商品列表）
function applyFilters(filters) {
console.log('应用筛选条件:', filters);
// TODO: 在这里实现实际的筛选逻辑
// 例如：调用后端API获取筛选后的商品列表
}
// 广告轮播功能
function initAdCarousel(sidebarSelector) {
const sidebar = document.querySelector(sidebarSelector);
if (!sidebar) return;
const adItems = sidebar.querySelectorAll('.ad-item'); const indicators = sidebar.querySelectorAll('.indicator'); let currentIndex = 0; let carouselInterval; // 切换到指定索引的广告 function switchAd(index) { // 移除所有活动状态 adItems.forEach(item => item.classList.remove('active')); indicators.forEach(indicator => indicator.classList.remove('active')); // 添加新的活动状态 if (adItems[index]) { adItems[index].classList.add('active'); } if (indicators[index]) { indicators[index].classList.add('active'); } currentIndex = index; } // 切换到下一张广告 function nextAd() { const nextIndex = (currentIndex + 1) % adItems.length; switchAd(nextIndex); } // 启动自动轮播 function startCarousel() { carouselInterval = setInterval(nextAd, 5000); // 每5秒切换一次 } // 停止自动轮播 function stopCarousel() { if (carouselInterval) { clearInterval(carouselInterval); } } // 为指示器添加点击事件 indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { switchAd(index); stopCarousel(); startCarousel(); // 重新开始计时 }); }); // 鼠标悬停时暂停轮播 sidebar.addEventListener('mouseenter', stopCarousel); sidebar.addEventListener('mouseleave', startCarousel); // 启动自动轮播 startCarousel();
}
● css文件就不用关注了，直接替换即可：
● 需要的图片素材，截至目前如下：
参考代码（优先自己实现）
3.今日作业
● 在阿里云创作平台完成博客发布
○ 首先注册阿里云账号
○ 然后在乘风者计划里面发布
■ https://developer.aliyun.com/topic/bloggers?survey_id=136805×tamp=1678841468552&sign=McqGXq0iGq7DYuXopvMn4UwG8GrmpeTYEarG8HhjLSQ%3D
● 完善无畏契约项目前端页面，达到预期效果
