HTML-实战之 百度百科（影视剧介绍）
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
系列文章目录
HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号
HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大
HTML-2.2 列表--无序列表、有序列表、定义列表
HTML-2.3 超链接-外部链接，内部链接，书签链接
HTML-2.4 滚动字幕marquee
HTML-3.1 表格table
HTML-3.2 表格的跨行跨列（课表制作实例）
HTML中应用CSS样式的三种常见方法
HTML-3.3 表格布局（学校官网简易布局实例）
HTML-3.4 表单form
HTML-实战之 百度百科（影视剧介绍）
目录
系列文章目录
前言
一、何以笙箫默-百度百科介绍
1、代码运行
2、代码
总结
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、何以笙箫默-百度百科介绍
1、代码运行
2、代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>何以简介</title><strong><style type="text/css">body{background-color:palevioletred;background-image: url(../img/主页背景.jpg);background-size:cover;}</style></strong></head><body><table border="0px" align="center" width="850px"><tr><td><font size="200" color="maroo" face="楷体">何以笙箫默</font></td><td><a href="http://www.baidu.com" target="_blank " title="baiduyixia"><img src="../img/搜索一下.png" width="150px"></a></td><td rowspan="2"><img src="../img/何以插图1.jpg" height="300px" width="200px" ></td></tr><tr><td colspan="2"><a href="https://baike.baidu.com/item/%E4%BD%95%E4%BB%A5%E7%AC%99%E7%AE%AB%E9%BB%98/13878975?fr=aladdin">《何以笙箫默》</a>是上海剧酷文化传播有限公司出品的都市情感剧，由刘俊杰执导，<a href="https://baike.baidu.com/item/%E9%A1%BE%E6%BC%AB/1780706?fr=aladdin">顾漫</a>、墨宝非宝联合编剧，钟汉良、唐嫣领衔主演。
该剧改编自顾漫同名小说，主要讲述<a href="https://baike.baidu.com/item/%E4%BD%95%E4%BB%A5%E7%90%9B/8483451?fr=aladdin">何以琛</a>和<a href="https://baike.baidu.com/item/%E8%B5%B5%E9%BB%98%E7%AC%99/1101365">赵默笙</a>一段年少时的爱恋牵出一生的情缘，一个执着于等待和相爱的故事。该剧于2015年1月10日在江
苏卫视、东方卫视首播，安徽卫视跟播，为江苏卫视2015年度收视冠军，是首部单日网络播放量突破三亿的电视剧，百度指数最高达320万，并登上
韩国三大电视台之一的MBC，入选<a href="https://baike.baidu.com/item/2015%E4%B8%AD%E5%9B%BD%E7%94%B5%E8%A7%86%E5%89%A7%E9%80%89%E9%9B%86">国家广播电视总局2015电视剧选集。</a></td></tr></table><hr border="1px" align="center" width="850px"><table border="0px" align="center" width="850px"><tr><td width="140px"><font size="4" color="brown" face="楷体">主演</font><br><font size="4" color="black" face="楷体"><a href="https://baike.baidu.com/item/%E5%94%90%E5%AB%A3/10390217?fr=aladdin">唐嫣</a>：赵默笙</font><br><img src="../img/赵默笙.jpg" width="120px" height="180px"></td><td width="140px"><font size="4" color="brown" face="楷体">主演</font><br><font size="4" color="black" face="楷体"><a href="https://baike.baidu.com/item/%E9%92%9F%E6%B1%89%E8%89%AF/135954?fr=aladdin">钟汉良</a>：何以琛</font><br><img src="../img/何以琛.jpg" width="120px" height="180px"></td><td width="140px"><font size="4" color="brown" face="楷体">主演</font><br><font size="4" color="black" face="楷体"><a href="https://baike.baidu.com/item/%E8%8F%85%E7%BA%AB%E5%A7%BF/19860343?fr=aladdin">菅纫姿</a>:何以玫</font><br><img src="../img/何以玫.jpg" width="120px" height="180px"></td><td width="140px"><font size="4" color="brown" face="楷体">主演</font><br><font size="4" color="black" face="楷体"><a href="https://baike.baidu.com/item/%E8%B0%AD%E5%87%AF/4112791">谭凯</a>：应晖</font><br><img src="../img/应晖.jpg" width="100px" height="180px"></td><td width="140px"><font size="4" color="brown" face="楷体">主演</font><br><font size="4" color="black" face="楷体"><a href="https://baike.baidu.com/item/%E6%9D%A8%E7%8E%8F">杨玏</a>：路远风</font><br><img src="../img/路远风.jpg" width="120px" height="180px"></td><td width="140px"><font size="4" color="brown" face="楷体">主演</font><br><font size="4" color="black" face="楷体"><a href="https://baike.baidu.com/item/%E7%B1%B3%E9%9C%B2/45795">米露</a>：萧筱</font><br><img src="../img/萧筱.jpg" width="120px" height="180px"></td></tr></table></table><hr border="2px" align="center" width="850px"><table border="0px" align="center" width="850px"><tr><td rowspan="5"><font size="5" color="brown" face="楷体">经典语句</font></td></tr><tr><td ><font size="4" color="darkred" face="楷体" >向来情深,奈何缘浅</font></td></tr><tr><td ><font size="4" color="darkred" face="楷体" >如果世界上曾经有那个人出现过,其他人都会变成将就</font></td></tr><tr><td ><font size="4" color="darkred" face="楷体" >不是没想过放弃,只是始终没办法数到一千</font></td></tr><tr><td ><font size="4" color="darkred" face="楷体" >我的父母给我十年,我要默笙一辈子,我屈从于现实的温暖</font></td></tr></table><hr border="2px" align="center" width="850px"><table border="0px" align="center" width="850px"><tr><td width=""><font size="4" color="dimgray" face="楷体" >类型</font></td><td width=""><b><font size="4" color="black" face="楷体" >都市感情类</font></b></td><td width=""><font size="4" color="dimgray" face="楷体" >编剧</font></td><td width=""><b><font size="4" color="black" face="楷体" >墨宝非宝</font></b></td><td rowspan="5"><b><font size="4" color="dimgray" face="楷体" >剧照</font></b><a href="https://baike.baidu.com/pic/%E4%BD%95%E4%BB%A5%E7%AC%99%E7%AE%AB%E9%BB%98/13878975/2390104096/eaf81a4c510fd9f93a153cb9202dd42a2934a4e4?fr=lemma&ct=cover#aid=2390104096&pic=d1160924ab18972ba2365074e3cd7b899e510a7b"><img src="../img/剧照集.jpg" width="200px" ></a></td></tr><tr><td width=""><font size="4" color="dimgray" face="楷体" >出品公司</font></td><td width=""><b><font size="4" color="black" face="楷体" >上海剧酷文化传播有限公司</font></b></td><td width=""><font size="4" color="dimgray" face="楷体" >制片地区</font></td><td width=""><b><font size="4" color="black" face="楷体" >中国内地</font></b></td></tr><td width=""><font size="4" color="dimgray" face="楷体" >首播时间</font></td><td width=""><b><font size="4" color="black" face="楷体" >2015年1月10日</font></b></td><td width=""><font size="4" color="dimgray" face="楷体" >拍摄时间</font></td><td width=""><b><font size="4" color="black" face="楷体" >2014年6月20日 至 2014年9月14日</font></b></td></table><hr border="2px" align="center" width="850px"> <table border="0px" align="center" width="850px"><tr><td width=""><b><font size="4" color="black" face="楷体" >电视剧原声曲</font></b></td><td width=""><b><font size="4" color="black" face="楷体" >演唱者</font></b></td><td width=""><b><font size="4" color="black" face="楷体" >作曲</font></b></td><td width=""><b><font size="4" color="black" face="楷体" >备注</font></b></td></tr><tr><td width=""><font size="4" color="black" face="楷体" ><a href="https://baike.baidu.com/item/My%20Sunshine/15855736">My Sunshine</a></font></td><td width=""><font size="4" color="black" face="楷体" >张杰</font></td><td width=""><font size="4" color="black" face="楷体" >谭旋</font></td><td width=""><font size="4" color="black" face="楷体" >主题曲</font></td></tr><tr><td width=""><font size="4" color="black" face="楷体" ><a href="https://baike.baidu.com/item/%E4%BD%95%E4%BB%A5%E7%88%B1%E6%83%85/16514397">何以爱情</a></font></td><td width=""><font size="4" color="black" face="楷体" >钟汉良</font></td><td width=""><font size="4" color="black" face="楷体" >谭旋</font></td><td width=""><font size="4" color="black" face="楷体" >片尾曲</font></td></tr><tr><td width=""><font size="4" color="black" face="楷体" ><a href="https://baike.baidu.com/item/%E5%A5%BD%E4%B9%85%E4%B8%8D%E8%A7%81/19452296">好久不见</a></font></td><td width=""><font size="4" color="black" face="楷体" >唐嫣</font></td><td width=""><font size="4" color="black" face="楷体" >施立</font></td><td width=""><font size="4" color="black" face="楷体" >插曲</font></td></tr><tr><td width=""><font size="4" color="black" face="楷体" ><a href="https://baike.baidu.com/item/%E5%AD%A4%E7%8B%AC%E7%9A%84%E6%80%BB%E5%92%8C/16594184">孤独的总和</a></font></td><td width=""><font size="4" color="black" face="楷体" >吴汶芳</font></td><td width=""><font size="4" color="black" face="楷体" >吴汶芳</font></td><td width=""><font size="4" color="black" face="楷体" >插曲</font></td></tr></table><hr border="2px" align="center" width="850px"> <table border="0px" align="center" width="850px" ><tr><td rowspan="2"><font size="5" color="brown" face="楷体">影视点播</font></td><td rowspan="2"><a href="https://www.iqiyi.com/v_19rrnx1j40.html?vfm=2008_aldbd&fv=p_02_01"><img src="../img/剧集.gif" height="300px" width="500px"></a></td></td><td><a href="https://www.iqiyi.com/v_19rrnx1j40.html?vfm=2008_aldbd&fv=p_02_01"><img src="../img/剧集2.gif" height="150px" ></a></td></tr> <tr><td><a href="https://www.iqiyi.com/v_19rrnx1j40.html?vfm=2008_aldbd&fv=p_02_01"><img src="../img/剧集3.gif" height="150px"></a></td></tr></table><hr border="2px" align="center" width="850px"> </body>
</html>
如果对代码结构有不理解的部分可以翻看前面的目录，每个部分都有讲解，熟悉完知识点，再跟着做这个简易的百度百科简介。
总结
以上就是今天要讲的内容，本文简单记录了实战项目之 百度百科（影视剧介绍），仅作为一份简单的笔记使用，大家根据注释理解
相关文章：
HTML-实战之 百度百科（影视剧介绍）
本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 系列文章目录 HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号 HTML…...
了解光学影像
本文来源 ： 腾讯元宝 光学影像是一种通过光学技术捕捉、记录和处理图像的技术，广泛应用于医学、工业、安防、科研等多个领域。以下是关于光学影像的详细介绍： 1. 基本原理 光学影像基于光的传播、反射、折射和散射等物理现象。通过…...
计算机视觉---目标追踪（Object Tracking）概览
一、核心定义与基础概念 1. 目标追踪的定义 定义：在视频序列或连续图像中，对一个或多个感兴趣目标（如人、车辆、物体等）的位置、运动轨迹进行持续估计的过程。核心任务：跨帧关联目标，解决“同一目标在不同…...
Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】
漏洞概述： Weblogic中存在一个SSRF漏洞，利用该漏洞可以发送任意HTTP请求，进而攻击内网中redis、fastcgi等脆弱组件。 漏洞形成原因： WebLogic Server 的 UDDI 组件（uddiexplorer.war）中的 SearchPublicR…...
fakeroot 在没有超级用户权限的情况下模拟文件系统的超级用户行为
fakeroot 是一个在 Linux 环境中使用的工具，它允许用户在没有超级用户权限的情况下模拟文件系统的超级用户行为。它是一个在 Linux 环境中广泛使用的工具，通常包含在大多数 Linux 发行版的软件仓库中。 主要功能 模拟 root 权限：fake…...
AI大模型应用：17个实用场景解锁未来
任何新技术的普及都需要经历一段漫长的过程，人工智能大模型也不例外。 尽管某些行业的从业者已经开始将大模型融入日常工作，但其普及程度仍远未达到“人手必备”的地步。 那么，究竟是什么限制了它的广泛应用？普通人如何才能用好…...
激光雷达点云畸变消除：MCU vs CPU 方案详解
在移动机器人、自动驾驶等场景中，激光雷达（LiDAR）用于获取高精度的空间点云数据。然而，当雷达在运动中扫描时，不同点的采集时刻对应的位置不同，就会出现“运动畸变（Motion Distortion࿰…...
java17
1.常见API之BigDecimal 底层存储方式： 2.如何分辨过时代码： 有横线的代码表示该代码已过时 3.正则表达式之字符串匹配 注意：如果X不是单一字符，需要加[]中括号 注意：1.想要表达正则表达式里面的.需要\\. 2.想要表…...
深度学习中的提示词优化：梯度下降全解析
深度学习中的提示词优化：梯度下降全解析 在您的代码中，提示词的更新方向是通过梯度下降算法确定的，这是深度学习中最基本的优化方法。 一、梯度下降与更新方向 1. 核心公式 对于可训练参数 θ \theta θ（这里是提示词嵌入向量），梯度下降的更新公式为：...
多智能体Multi-Agent应用实战与原理分析
一：Agent 与传统工具调用的对比 在当今的开发环境中，Agent 的出现极大地简化了工作流程。其底层主要基于提示词、模型和工具。用户只需向 Agent 输入需求，Agent 便会自动分析需求，并利用工具获取最终答案。而传统方式下，若没有 Agent，我们则需要手动编码来执行工具，还要…...
C++算法（22）：二维数组参数传递，从内存模型到高效实践
引言 在C程序设计中，二维数组的参数传递是许多开发者面临的棘手问题。不同于一维数组的相对简单性，二维数组在内存结构、类型系统和参数传递机制上都存在独特特性。本文将深入探讨静态数组、动态数组以及STL容器三种实现方式，通过底层原理分…...
ProceedingJoinPoint的认识
ProceedingJoinPoint 是 Spring AOP（面向切面编程） 中的核心接口，用于在 环绕通知（Around） 中拦截方法调用并控制其执行流程。以下是对其功能和用法的详细解释： 核心作用 拦截目标方法 在方法执行前后插…...
鸿蒙OSUniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp
使用 UniApp 制作动态加载的瀑布流布局 前言 最近在开发一个小程序项目时，遇到了需要实现瀑布流布局的需求。众所周知，瀑布流布局在展示不规则尺寸内容（如图片、商品卡片等）时非常美观和实用。但在实际开发过程中，我…...
Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器
一、软件介绍 文末提供程序和源码下载 Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器； Javascript execution Javascript 执行Support of Web APIs (partial, WIP)支持 Web API（部分、WIP）Compatible with Pla…...
技术文档不完善，如何促进知识传承
建立统一的技术文档规范、引入文档自动化工具、将文档写作融入开发流程、建设团队知识共享文化 是促进知识传承的关键策略。在其中，尤应重视建立统一的技术文档规范，通过标准化文档结构、命名、版本管理等方式，提升文档质量和可维护性&#x…...
LLMs之MCP：2025年5月2日，Anthropic 宣布 Claude 重大更新：集成功能上线，研究能力大幅提升
LLMs之MCP：2025年5月2日，Anthropic 宣布 Claude 重大更新：集成功能上线，研究能力大幅提升 导读：2025年5月2日，Anthropic 宣布 Claude 推出 Integrations 集成功能和增强型高级研究功能。Integrations 基于 …...
Linux基础 -- 在内存中使用chroot修复eMMC
Linux基础 – 在内存中使用chroot修复eMMC 概述 本教程将介绍如何在Linux系统中，使用chroot在内存中构建一个临时系统，并在不依赖原有系统的情况下修复eMMC（如/dev/mmcblk2）磁盘。该方法适用于嵌入式系统修复、磁盘清理以及离线…...
Windows平台OpenManus部署及WebUI远程访问实现
前言：继DeepSeek引发行业震动后，Monica.im团队最新推出的Manus AI 产品正席卷科技圈。这款具备自主思维能力的全能型AI代理，不仅能精准解析复杂指令并直接产出成果，更颠覆了传统人机交互模式。尽管目前仍处于封闭测试阶段…...
位运算题目：找到最接近目标值的函数值
文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题：找到最接近目标值的函数值 出处：1521. 找到最接近目标值的函数值 难度 8 级 题目描述 要求 Winston 构造了一个如上所示的函数 func \…...
哲学物理：太极图和莫比乌斯环有什么关系？
太极图 是中国传统文化中的经典符号，由阴阳两部分组成，黑白两色相互环绕，中间有两点表示阴中有阳，阳中有阴。太极图象征着对立统一、相互依存和动态平衡，是道家哲学的核心思想之一。 
机器学习笔记1
一、 机器学习介绍与定义 1. 机器学习定义 机器学习（Machine Learning）本质上就是让计算机自己在数据中学习规律，并根据所得到的规律对未来数据进行预测。 机器学习包括如聚类、分类、决策树、贝叶斯、神经网络、深度学习（Deep…...
JVM中的安全点是什么，作用又是什么？
JVM中的安全点（Safepoint） 是Java虚拟机设计中的一个关键机制，主要用于协调所有线程的执行状态，以便进行全局操作（如垃圾回收、代码反优化等）。它的核心目标是确保在需要暂停所有线程时，每个线程…...
关于github使用总结
文章目录 一、本地使用git（一）创建一个新的本地Git库首先在本地创建一个新的git仓库然后进行一次初始提交提交过后就可以查看提交记录 （二）在本地仓库进行版本恢复先执行 git log 查看项目提交历史使用 git checkout 恢复版本 二、…...
基于Qt6 + MuPDF在 Arm IMX6ULL运行的PDF浏览器——MuPDF Adapter文档
项目地址：总项目Charliechen114514/CCIMXDesktop: This is a Qt Written Desktop with base GUI Utilities 本子项目地址：CCIMXDesktop/extern_app/pdfReader at main Charliechen114514/CCIMXDesktop 前言 这个部分说的是Mupdf_adaper下的文档的工…...
google-Chrome常用插件
google-Chrome常用插件 1. json格式化展示插件 github下载jsonview-for-chrome插件 通过离线安装方式 拓展程序-》管理拓展程序-》打开开发者模式-》加载已解压的拓展程序-》选择拓展程序解压的位置 2. 翻译插件 插件下载地址：Immersive Translate - Bilingual …...
2024年9月电子学会等级考试五级第三题——整数分解
题目 3、整数分解 正整数 N 的 K-P 分解是指将 N 写成 K 个正整数的 P 次方的和。本题就请你对任意给定的正整数 N、K、P，写出 N 的 K-P 分解。 时间限制：8000 内存限制：262144 输入 输入在一行给出 3 个正整数 N (≤ 400)、K (≤ N)、P (1 …...
毕设设计 | 管理系统图例
文章目录 环素1. 登录、注册2. 菜单管理 环素 1. 登录、注册 2. 菜单管理 公告通知 订单管理 会员管理 奖品管理 新增、编辑模块...
u3d 定义列表详细过程
层级结构 - Canvas - Scroll View - Viewport - Content (Vertical Layout Group) - Item1 (Prefab) - Item2 (Prefab) ... 详细设置步骤 1. 创建 Canvas 2. 添加 Scroll View 组件 3. 在 Scroll View 下创建 Content 子对象 4. 添加 …...
使用 `perf` 和火焰图（Flame Graph）进行性能分析
在现代软件开发中，性能优化是提升应用程序响应速度和资源利用率的关键步骤。当一个进程的 CPU 占用率异常高时，识别并优化性能瓶颈显得尤为重要。本文将详细介绍如何使用 Linux 下强大的性能分析工具 perf 以及火焰图（Flame Graph）…...
什么情况会导致JVM退出？
大家好，我是锋哥。今天分享关于【什么情况会导致JVM退出？】面试题。希望对大家有帮助； 什么情况会导致JVM退出？ 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 JVM（Java虚拟机）退出的情况通常是…...