HTML实验一
- 👨💻作者简介: 大家好,我是小火车~~,在校大二学生一枚
- 🛳️个人主页: 嘟嘟嘟的小火车的博客
- 📗系列专栏: 本文写在《HTML5》专栏
- ✉️如果文章知识点有错误的地方,请指正! 和大家一起学习一起进步🎈
- 🔥如果觉得博主的文章还不错的话,请👍三连支持👍一下博主哦
提示: 本文知识点对应文章HTML(一)⬅️
HTML实验一
-
- 1. 练习一:制作清平乐页面
- 2. 练习二:制作京东读书新闻资讯页面
- 3.练习三:热门活动
- 4.练习四:制作音乐排行榜
- 其他专栏
1. 练习一:制作清平乐页面
需求说明：
标题用
标签，文字用
标签，标题与正文之间的分隔线使用
标签，词结束后使用
标签换行。
效果图如图所示:
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作清平乐页面</title></head><body><h2>清平乐</h2><hr/><p> 年年雪里，常插梅花醉，挼尽梅花无好<br/> 意，赢得满衣清泪！<br/> 今年海角天涯，萧萧两鬓生华。<br/> 看取晚来风势，故应难看梅花。<br/></p></body></html>2. 练习二:制作京东读书新闻资讯页面
需求说明：
使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作京东读书新闻资讯页面，主标题使用一级标题标签，副标题使用二级标题标签，二级标题与图片之间使用水平线分隔。
效果图如图所示:
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>京东读书新闻资讯页面</title></head><body> <h1>看不见的完美硬币 ：细节的负担</h1> <h2>创新公司皮克斯的启示</h2> <hr> <img alt="" src="..\images\book.jpg"> <p> <em>细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。</em><br> <em>但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。</em><br> <em>怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。</em><br> </p> <strong>看不见的完美硬币：细节的负担</strong> <p> 在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。 人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。 这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。 </p> <p> 皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币（the perfect coin）”，这个词指代的是皮克斯制作人员对细节的精益求精。 有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节，也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。 凯瑟琳是《怪兽电力公司》一片的制作人员，影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。 在这幕戏 </p></body></html>3.练习三:热门活动
需求说明：
使用无序列表制作热门活动。
效果图如图所示:
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>热门活动</title></head><body> <h2>热门活动 更多</h2> <ul> <li> <img src="../images/img1.png" alt=""> </li> <p>推荐活动|原创音乐现金榜T榜</p> <li> <img src="../images/img2.png" alt=""> </li> <p>推荐节目|《TAImusic》爆笑来袭</p> <li> <img src="../images/img3.png" alt=""> </li> <p>推荐歌单|继续宠爱张国荣</p> <li> <img src="../images/img4.png" alt=""> </li> <p>推荐活动|330金属音乐巡演 成都小酒馆音乐空间</p> </ul></body></html>4.练习四:制作音乐排行榜
需求说明：
使用有序列表制作音乐排行榜。
效果图如图所示:
代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作音乐排行榜</title></head><body> <h2>音乐排行榜</h2> <ol> <li> <a href="#"><ins>潇洒走一回</ins> <img src="../images/pic1.png" alt=""></a> </li> <li> <a href="#"><ins>偏偏喜欢你</ins> <img src="../images/pic1.png" alt=""></a> </li> <li> <a href="#"><ins>酒干倘卖无</ins> <img src="../images/pic1.png" alt=""></a> </li> <li> <a href="#"><ins>不说再见</ins> <img src="../images/pic1.png" alt=""></a> </li> <li> <a href="#"><ins>舍不得你</ins> <img src="../images/pic1.png" alt=""></a> </li> <li> <a href="#"><ins>请跟我来</ins> <img src="../images/pic1.png" alt=""></a> </ol></body></html>其他专栏
❤️《编程相关技能》专栏
🧡《HTML5》专栏
💛《CSS3》专栏
💚《java从0到1》专栏
💙《英语语法》专栏
