目录
1、综合案例（前一天关于路径和超链接的综合案例）
2、表格标签
①基本使用
②表头单元格标签
③表格属性
④课堂案例-小说排行榜
⑤表格结构标签
⑥合并单元格
3、列表标签
①作用
②列表分为三大类
③无序列表（重点）
④有序列表（理解）
⑤自定义列表
1、综合案例（前一天关于路径和超链接的综合案例）
<body><h1>鹤冲天·黄金榜上</h1><h2>目录</h2>1 <a href="#1">作品原文</a><br>2 <a href="#2">译文</a><br>3 <a href="#3">注释</a><br>4 <a href="#4">赏析</a><br>5 <a href="#5">创作背景</a><br><h2 id="1">1 作品原文</h2><img src="images/img2.jpg" width="650"><p><h3>鹤冲天·黄金榜上</h3><a href="liuyong.html" target="">柳永</a> 〔宋代〕<br>黄金榜上，偶失龙头望。明代暂遗贤，如何向。未遂风云便，争不恣狂荡。何须论得丧？才子词人，自是白衣卿相。<br>烟花巷陌，依约丹青屏障。幸有意中人，堪寻访。且恁偎红倚翠，风流事、平生畅。青春都一饷。忍把浮名，换了浅斟低唱！<br></p><h2 id="2">2 译文</h2><p> 在黄金榜上，我只不过是偶然失去皇帝的题名。圣明的时代失去了如我一般的贤能之士，未来又会走向何处？既然没有得到好的机遇，为什么不随心所欲地游乐呢！何必为功名患得患失？做一个风流才子为歌姬谱写词章，即使身着白衣，也不亚于公卿将相。在歌姬居住的街巷里，有摆放着丹青画屏的绣房。幸运的是那里住着我的意中人，值得我细细地追求寻访。与她们依偎，享受这风流的生活，才是我平生最大的欢乐。青春不过是片刻时间，我宁愿把功名，换成手中浅浅的一杯酒和耳畔低徊婉转的歌唱。</p><h2 id="3">3 注释</h2>鹤冲天：词牌名。柳永大作，调见柳永《乐章集》。双调八十四字，仄韵格。另有词牌《喜迁莺》、《风光好》的别名也叫鹤冲天，“黄金榜上”词注“正宫”。<br>黄金榜：指录取进士的金字题名榜。<br>龙头：旧时称状元为龙头。<br>明代：圣明的时代。一作“千古”。<br>遗贤：抛弃了贤能之士，指自己为仕途所弃。<br>如何向：向何处。<br>风云：际会风云，指得到好的遭遇。<br>争不：怎不。<br>恣：放纵，随心所欲。<br>得丧：得失。<br>白衣卿相：指自己才华出众，虽不入仕途，也有卿相一般尊贵。<br>白衣：古代未仕之士著白衣。<br>烟花：指妓女。巷陌：指街巷。<br>丹青屏障：彩绘的屏风。<br>丹青：绘画的颜料，这里借指画。<br>堪：能，可以。<br>恁：如此。偎红倚翠：指狎妓。宋陶谷《清异录·释族》载，南唐后主李煜微行娼家，自题为“浅斟低唱，偎红倚翠大师，鸳鸯寺主”。<br>平生：一生。<br>饷：片刻，极言青年时期的短暂。<br>忍：忍心，狠心。<br>浮名：指功名。<h2 id="4">4 赏析</h2><p> 这首词反映了柳永的反叛性格，也带来了他人生路上一大波折。据传说，柳永善作俗词，而宋仁宗颇好雅词。有一次，宋真宗临轩放榜时想起柳永这首词中那句“忍把浮名，换了浅斟低唱”，就说道：“且去浅斟低唱，何要浮名”，就这样黜落了他。从此，柳永便自称“奉旨填词柳三变”而长期地流连于坊曲之间、花柳丛中寻找生活的方向、精神的寄托。</p><p> “黄金榜上，偶失龙头望”，考科举求功名，他并不满足于登进士第，而是把夺取殿试头名状元作为目标。落榜只认为“偶然”，“见遗”只说是“暂”，由此可见柳永狂傲自负的性格。他自称“明代遗贤”是讽刺仁宗朝号称清明盛世，却不能做到“野无遗贤”。但既然已落第，下一步该怎么办呢？“风云际会”，施展抱负是封建时代士子的奋斗目标，既然“未遂风云便”，理想落空了，于是他就转向了另一个极端，“争不恣狂荡”，表示要无拘无束地过那种为一般封建士人所不齿的流连坊曲的狂荡生活。“偎红倚翠”、“浅斟低唱”，是对“狂荡”的具体说明。柳永这样写，是恃才负气的表现，也是表示抗争的一种方式。科举落第，使他产生了一种逆反心理，只有以极端对极端才能求得平衡。所以，他故意要造成惊世骇俗的效果以保持自己心理上的优势。柳永的“狂荡”之中仍然有着严肃的一面，狂荡以傲世，严肃以自律，这才是“才子词人”、“白衣卿相”的真面目。柳永把他内心深处的矛盾想法抒写出来，说明落第这件事情给他带来了多么深重的苦恼和多么烦杂的困扰，也说明他为了摆脱这种苦恼和困扰曾经进行了多么痛苦的挣扎。写到最后，柳永得出结论：“青春都一饷。忍把浮名，换了浅斟低唱！”谓青春短暂，怎忍虚掷，为“浮名”而牺牲赏心乐事。所以，只要快乐就行，“浮名”算不了什么。</p><p> 这首词是柳永进士科考落第之后的一纸“牢骚言”，在宋元时代有着重大的意义和反响。它正面鼓吹文人士者与统治者分离，而与歌妓等下层人民接近，有一定的思想进步性。</p><h2 id="5">5 创作背景</h2><p> 这首词是柳永早期的作品，是他初次参与进士科考落第之后，抒发牢骚感慨之作，它表现了作者的思想性格，也关系到作者的生活道路，是一篇重要的作品。</p><p><img src="images/img1.png" width="150"><br> 柳永，（约984年—约1053年）北宋著名词人，婉约派代表人物。汉族，崇安（今福建武夷山）人，原名三变，字景庄，后改名永，字耆卿，排行第七，又称柳七。宋真宗朝进士，官至屯田员外郎，故世称柳屯田。他自称“奉旨填词柳三变”，以毕生精力作词，并以“白衣卿相”自诩。其词多描绘城市风光和歌妓生活，尤长于抒写羁旅行役之情，创作慢词独多。铺叙刻画，情景交融，语言通俗，音律谐婉，在当时流传极其广泛，人称“凡有井水饮处，皆能歌柳词”，婉约派最具代表性的人物之一，对宋词的发展有重大影响，代表作 《雨霖铃》《八声甘州》。</p><h5>更多内容请前往<a href="">百度</a>。<h5></body>
2、表格标签
①基本使用
用于显示和展示数据的，展示的更加规整，可读性好；语法：<table><tr><td>...</td><td>...</td><td>...</td>...</tr><tr><td>...</td><td>...</td><td>...</td>...</tr>...</table>
table标签是一个表，tr是一行，td是一个单元格（没有列的概念），td嵌套在tr中，tr嵌套在table中；
②表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文字内容加粗居中显示；<th>标签表示html表格的表头部分；语法：<table><tr><th>...</th><th>...</th><th>...</th>...<tr>...</table>
应用：
<body><table><tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr><tr><td>aaa</td> <td>女</td> <td>18</td></tr><tr><td>bbb</td> <td>男</td> <td>18</td></tr></table></body>
③表格属性
（表格标签的属性在实际开发中不常用，一般通过CSS来设置，但html中相关的单词与CSS相同，可以熟悉一下）
align：规定表格相对周围元素的对齐方式，属性值：left,center,right；border：规定表格单元是否拥有边框，默认为""，表示没有边框，属性值：1或""；cellpadding：规定单元边沿与其内容之间的空白，默认1像素，属性值：像素值；cellspacing：规定单元格之间的控股白，默认2像素，属性值：像素值；width：规定表格的宽度，属性值：像素值或百分比。height：规定表格的高度，属性值：像素值或百分比。表格属性写在table标签里面去。
④课堂案例-小说排行榜
代码：<body><table align="center" width="500" height="250" border="1" cellspacing="0"><thead><tr><th>排名</th> <th>关键词</th> <th>趋势</th> <th>今日搜索</th> <th>最近七日</th> <th>相关贴吧</th></tr></thead><tbody><tr><td>1</td> <td>鬼吹灯</td> <td><img src="images/down.png" width="20"></td> <td>345</td> <td>123</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>2</td> <td>盗墓笔记</td> <td><img src="images/down.png" width="20"></td> <td>124</td> <td>675432</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>3</td> <td>西游记</td> <td><img src="images/up.png" width="20"></td> <td>212</td> <td>7654</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>4</td> <td>东游记</td> <td><img src="images/up.png" width="20"></td> <td>23</td> <td>75645</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>5</td> <td>甄嬛传</td> <td><img src="images/down.png" width="20"></td> <td>121</td> <td>7676</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>6</td> <td>水浒传</td> <td><img src="images/up.png" width="20"></td> <td>576576</td> <td>1231421</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>7</td> <td>三国演义</td> <td><img src="images/up.png" width="20"></td> <td>234</td> <td>7686</td> <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr></tbody></table></body>
⑤表格结构标签
因为表格可能很长，可以将表格分割成表格头部和表格主体两大部分；<thead>表格头部区域，<tbody>表格主体区域；thead内部必须拥有tr标签；thead和tbody都要放在table中。⑥合并单元格
合并单元格方式： 跨行合并：rowspan="合并单元格的个数"跨列合并：colspan="合并单元格的个数"目标单元格：（合并代码写在目标单元格上） 跨行：最上侧单元格为目标单元格，写合并代码跨列：最左侧单元格为目标单元格，写合并代码合并的步骤： 先确定跨行还是跨列；找到目标单元格，写上合并方式=合并的单元格数量，如<td clospan="2"></td>；删除多余单元格。应用：<body><table border="1" cellspacing="0" width="500" height="250"><tr><td></td> <td colspan="2"></td></tr><tr><td rowspan="2"></td> <td></td> <td></td></tr><tr><td></td> <td></td></tr></table></body>
3、列表标签
①作用
列表是用来布局的，整洁自由方便；②列表分为三大类
无序列表、有序列表和自定义列表；③无序列表（重点）
ul标签表示无序列表，列表项使用li标签定义；语法：<ul><li>列表1</li><li>列表2</li><li>列表3</li>...</ul>
应用：
<body>菜单：<ul><li>水煮牛肉</li><li>炒三丝</li><li>鱼香肉丝</li></ul></body>
无序列表的各列表项之间没有先后之分；ul标签中只能放li标签，也不能直接书写文字；li标签里可以放任何标签和文字；无序列表带有自己的样式属性（就是前面的小圆点），但在实际使用中，我们会用CSS来设置。
④有序列表（理解）
其中的各个列表项会按照一定顺序排列定义；ol标签表示有序列表，列表项使用li标签定义；语法：<ol><li>列表1</li><li>列表2</li><li>列表3</li>...</ol>
应用：
<body>菜品排行榜：<ol><li>水煮牛肉 5000</li><li>炒三丝 4000</li><li>鱼香肉丝 3000</li></ol></body>
ol标签中只能放li标签，也不能直接书写文字；li标签里可以放任何标签和文字；有序列表带有自己的样式属性（就是前面的序号），但在实际使用中，我们会用CSS来设置。
⑤自定义列表
常用于对于术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号；语法：<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...</dl>
应用：
<body><dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd></dl></body>
dl标签内只能包含dt和dd；dt和dd个数没有限制，经常一个dt对应多个dd；dt和dd是兄弟关系。
