HTML-实战之 百度百科（影视剧介绍）

news2025/5/16 11:55:48

本系列可作为前端学习系列的笔记，代码的运行环境是在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>

如果对代码结构有不理解的部分可以翻看前面的目录，每个部分都有讲解，熟悉完知识点，再跟着做这个简易的百度百科简介。

总结

以上就是今天要讲的内容，本文简单记录了实战项目之 百度百科（影视剧介绍），仅作为一份简单的笔记使用，大家根据注释理解

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2376826.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机视觉---目标追踪（Object Tracking）概览

计算机视觉---目标追踪（Object Tracking）概览

一、核心定义与基础概念 1. 目标追踪的定义 定义&#xff1a;在视频序列或连续图像中&#xff0c;对一个或多个感兴趣目标&#xff08;如人、车辆、物体等&#xff09;的位置、运动轨迹进行持续估计的过程。核心任务&#xff1a;跨帧关联目标&#xff0c;解决“同一目标在不同…
阅读更多...
Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】

Weblogic SSRF漏洞复现（CVE-2014-4210）【vulhub靶场】

漏洞概述&#xff1a; Weblogic中存在一个SSRF漏洞&#xff0c;利用该漏洞可以发送任意HTTP请求&#xff0c;进而攻击内网中redis、fastcgi等脆弱组件。 漏洞形成原因&#xff1a; WebLogic Server 的 UDDI 组件&#xff08;uddiexplorer.war&#xff09;中的 SearchPublicR…
阅读更多...
AI大模型应用：17个实用场景解锁未来

AI大模型应用：17个实用场景解锁未来

任何新技术的普及都需要经历一段漫长的过程&#xff0c;人工智能大模型也不例外。 尽管某些行业的从业者已经开始将大模型融入日常工作&#xff0c;但其普及程度仍远未达到“人手必备”的地步。 那么&#xff0c;究竟是什么限制了它的广泛应用&#xff1f;普通人如何才能用好…
阅读更多...
java17

java17

1.常见API之BigDecimal 底层存储方式&#xff1a; 2.如何分辨过时代码&#xff1a; 有横线的代码表示该代码已过时 3.正则表达式之字符串匹配 注意&#xff1a;如果X不是单一字符&#xff0c;需要加[]中括号 注意&#xff1a;1.想要表达正则表达式里面的.需要\\. 2.想要表…
阅读更多...
C++算法（22）：二维数组参数传递，从内存模型到高效实践

C++算法（22）：二维数组参数传递，从内存模型到高效实践

引言 在C程序设计中&#xff0c;二维数组的参数传递是许多开发者面临的棘手问题。不同于一维数组的相对简单性&#xff0c;二维数组在内存结构、类型系统和参数传递机制上都存在独特特性。本文将深入探讨静态数组、动态数组以及STL容器三种实现方式&#xff0c;通过底层原理分…
阅读更多...
Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器

Lightpanda开源浏览器：专为 AI 和自动化而设计的无界面浏览器

​一、软件介绍 文末提供程序和源码下载 Lightpanda开源浏览器&#xff1a;专为 AI 和自动化而设计的无界面浏览器&#xff1b; Javascript execution Javascript 执行Support of Web APIs (partial, WIP)支持 Web API&#xff08;部分、WIP&#xff09;Compatible with Pla…
阅读更多...
技术文档不完善，如何促进知识传承

技术文档不完善，如何促进知识传承

建立统一的技术文档规范、引入文档自动化工具、将文档写作融入开发流程、建设团队知识共享文化 是促进知识传承的关键策略。在其中&#xff0c;尤应重视建立统一的技术文档规范&#xff0c;通过标准化文档结构、命名、版本管理等方式&#xff0c;提升文档质量和可维护性&#x…
阅读更多...
Windows平台OpenManus部署及WebUI远程访问实现

Windows平台OpenManus部署及WebUI远程访问实现

前言&#xff1a;继DeepSeek引发行业震动后&#xff0c;Monica.im团队最新推出的Manus AI 产品正席卷科技圈。这款具备自主思维能力的全能型AI代理&#xff0c;不仅能精准解析复杂指令并直接产出成果&#xff0c;更颠覆了传统人机交互模式。尽管目前仍处于封闭测试阶段&#xf…
阅读更多...
位运算题目：找到最接近目标值的函数值

位运算题目：找到最接近目标值的函数值

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;找到最接近目标值的函数值 出处&#xff1a;1521. 找到最接近目标值的函数值 难度 8 级 题目描述 要求 Winston 构造了一个如上所示的函数 func \…
阅读更多...
哲学物理：太极图和莫比乌斯环有什么关系？

哲学物理：太极图和莫比乌斯环有什么关系？

太极图 是中国传统文化中的经典符号，由阴阳两部分组成，黑白两色相互环绕，中间有两点表示阴中有阳，阳中有阴。太极图象征着对立统一、相互依存和动态平衡，是道家哲学的核心思想之一。 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/477e67d70c2b4383bac3e12c8a6…
阅读更多...
机器学习笔记1

机器学习笔记1

一、 机器学习介绍与定义 1. 机器学习定义 机器学习&#xff08;Machine Learning&#xff09;本质上就是让计算机自己在数据中学习规律&#xff0c;并根据所得到的规律对未来数据进行预测。 机器学习包括如聚类、分类、决策树、贝叶斯、神经网络、深度学习&#xff08;Deep…
阅读更多...
JVM中的安全点是什么，作用又是什么？

JVM中的安全点是什么，作用又是什么？

JVM中的安全点&#xff08;Safepoint&#xff09; 是Java虚拟机设计中的一个关键机制&#xff0c;主要用于协调所有线程的执行状态&#xff0c;以便进行全局操作&#xff08;如垃圾回收、代码反优化等&#xff09;。它的核心目标是确保在需要暂停所有线程时&#xff0c;每个线程…
阅读更多...
关于github使用总结

关于github使用总结

文章目录 一、本地使用git&#xff08;一&#xff09;创建一个新的本地Git库首先在本地创建一个新的git仓库然后进行一次初始提交提交过后就可以查看提交记录 &#xff08;二&#xff09;在本地仓库进行版本恢复先执行 git log 查看项目提交历史使用 git checkout 恢复版本 二、…
阅读更多...
2024年9月电子学会等级考试五级第三题——整数分解

2024年9月电子学会等级考试五级第三题——整数分解

题目 3、整数分解 正整数 N 的 K-P 分解是指将 N 写成 K 个正整数的 P 次方的和。本题就请你对任意给定的正整数 N、K、P&#xff0c;写出 N 的 K-P 分解。 时间限制&#xff1a;8000 内存限制&#xff1a;262144 输入 输入在一行给出 3 个正整数 N (≤ 400)、K (≤ N)、P (1 …
阅读更多...
毕设设计 | 管理系统图例

毕设设计 | 管理系统图例

文章目录 环素1. 登录、注册2. 菜单管理 环素 1. 登录、注册 2. 菜单管理 公告通知 订单管理 会员管理 奖品管理 新增、编辑模块
阅读更多...
什么情况会导致JVM退出？

什么情况会导致JVM退出？

大家好&#xff0c;我是锋哥。今天分享关于【什么情况会导致JVM退出&#xff1f;】面试题。希望对大家有帮助&#xff1b; 什么情况会导致JVM退出&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 JVM&#xff08;Java虚拟机&#xff09;退出的情况通常是…
阅读更多...
实验6 电子邮件

实验6 电子邮件

实验6 电子邮件 1、实验目的 理解电子邮件系统基本结构 理解客户端和服务器端&#xff0c;以及服务器之间的通信 分析理解SMTP&#xff0c;POP3协议 2、实验环境 硬件要求&#xff1a;阿里云云主机ECS 一台。 软件要求&#xff1a;Linux/ Windows 操作系统 3、实验内容…
阅读更多...
深入理解浏览器渲染引擎：底层机制与性能优化实战

深入理解浏览器渲染引擎：底层机制与性能优化实战

现代浏览器背后是一个庞大而复杂的系统工程&#xff0c;渲染引擎作为核心模块之一&#xff0c;承担着从解析 HTML/CSS 到最终绘制页面的关键职责。本文将从底层机制出发&#xff0c;系统梳理渲染引擎&#xff08;如 Blink&#xff09;工作原理、V8 与渲染流程的协作方式&#x…
阅读更多...
大模型浪潮下，黑芝麻智能高性能芯片助力汽车辅助驾驶变革

大模型浪潮下，黑芝麻智能高性能芯片助力汽车辅助驾驶变革

在全球汽车产业向智能化、网联化加速转型的浪潮中&#xff0c;大模型技术的崛起为汽车领域带来了前所未有的变革机遇。黑芝麻智能在高性能芯片和基础软件架构领域的持续创新&#xff0c;正全力推动汽车智能化的发展&#xff0c;为行业注入新的活力。 大模型全面助力辅助驾驶迈…
阅读更多...
康谋分享 | 自动驾驶仿真进入“标准时代”：aiSim全面对接ASAM OpenX

康谋分享 | 自动驾驶仿真进入“标准时代”：aiSim全面对接ASAM OpenX

目录 一、OpenDRIVE&#xff1a;兼容多版本地图标准 &#xff08;1&#xff09;Atlas 工作流 &#xff08;2&#xff09;UE Plugin 工作流 二、OpenSCENARIO&#xff1a;标准化动态行为建模 三、OpenCRG&#xff1a;还原毫米级路面细节 四、OpenMATERIAL&#xff1a;更真…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023