本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。
系列文章目录
HTML-1.1 文本字体样式-字体设置、分割线、段落标签、段内回车以及特殊符号
HTML-2.1 文本字体样式之加粗、斜体、回车、下划线、上标标签、下标标签以及字号变小和变大
目录
前言
小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！
一、何以笙箫默-百度百科介绍
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>
如果对代码结构有不理解的部分可以翻看前面的目录，每个部分都有讲解，熟悉完知识点，再跟着做这个简易的百度百科简介。
总结
以上就是今天要讲的内容，本文简单记录了实战项目之 百度百科（影视剧介绍），仅作为一份简单的笔记使用，大家根据注释理解