HTML-练习
目录
一、练习
1、词作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>李清照--清平乐</title>
</head>
<body>
<h2>清平乐</h2>
<hr />
<br />
<p>
年年雪里。常插梅花醉。挼尽梅花无好意。赢得满衣清泪! <br />
今年海角天涯。萧萧两鬓生华。<br />
看取晚来风势，故应难看梅花。
</p>
<br />
</body>
</html>
2、人物简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>李清照简介</title>
</head>
<body>
<h1>人物简介</h1>
<p>
<strong>李清照</strong>
<em>(1084年3月13日—1155年)</em>
,
宋代女词人，号易安居士，婉约词派代表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词，留有诗集《易安居士文集》、《易安词》等。
</p>
<hr />
<p>©超级钊所著。</p>
</body>
</html>
3、图书制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东读书新闻资讯页面</title>
</head>
<body>
<h1>看不见的完美硬币 ：细节的负担</h1>
<h2>创新公司皮克斯的启示</h2>
<hr />
<img src="images/book.jpg" title="书" />
<br />
<p>
<em>
细节从来都是个好东西，完美的细节往往给我们赢得商业上的胜利。<br />
<p>
但是，在皮克斯，这一家满是完美主义设计师的企业里，细节竟然成了负担。<br />
</p>
<p>
怎么打造完美的细节？又怎么赢得商业上的利益。皮克斯总裁艾德·卡特姆为我们解答。<br />
</p>
</em>
</p>
<p><strong>看不见的完美硬币：细节的负担</strong></p>
<p>
在皮克斯，每一部电影都是商业与艺术的双赢。不管这些电影是艺术作品，还是商品，细节都是至关重要的，是决定成败的关键。人们似乎也听过许多关于细节的胜利的故事，但是在皮克斯，设计师们一个个都是完美主义者，细节显然成了皮克斯的负担。这样的太过于重视细节，往往会伤害到企业该有的效率，最终伤害企业的根本。在完美细节和企业应有的效率面前，艾德·卡特姆做出了明智的决策。
</p>
<p>
皮克斯有一个现象，被我们的制片人叫作“看不见的完美硬币(the
perfectcoin)”，这个词指代的是皮克斯制作人员对细节的精益求精。有时候，被我们的制片人凯瑟琳?萨拉菲安称为“床头柜上一枚没人会注意到的硬币”这样的细节,也会引得我们的工作人员花上几天甚至数周的时间悉心打磨。凯瑟琳是《怪兽电力公司》一片的制作人员,影片中有一幕戏可以形象地向我们阐释到底什么是“看不见的完美硬币”。在这幕戏中,好奇的小布第一次来到麦克和萨里的公寓,还在蹒跚学步的小婴儿四处探索起来。两个怪物想要制止,而她还是一步步走到了两摞高高堆起的CD旁,“别乱动!”麦克大喊起来,可是小女孩还是从90多张CD盒摞成的“高塔”底部抽出一张,
CD全部倒塌散落在了地板上。麦克抱怨道:“哎,那些CD都是按字母顺序排列好的!”小女孩摇摇摆摆地走开了。这幕场景前后不到3秒钟,观众们只能够看到几个CD盒而已,但皮克斯的制作人员不仅为每一个CD盒制作了封面,还使用了可计算物体在运动时渲染效果变化的着色器。
“你能看到所有CD盒吗?看不到。”萨拉菲安接着说,“把所有CD盒全部设计一遍,这工作有意思吗?其实挺有意思的。我们还真有几位工作人员觉得观众能在近镜头里把每张CD都看得一清二楚,所以就任劳任怨地把每张CD都雕琢了一番。也许,这其中的乐趣只有当事人才能体会吧。”
</p>
</body>
</html>
4、跳转链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>京东快速购物导航</title>
<style></style>
</head>
<body>
<div>
<a href="#F1">开始游戏</a>
<a href="#F2">游戏简介</a>
<a href="#F3">游戏特色</a>
<a href="#F4">游戏口碑</a>
</div>
<div>
<a name="F1">开始游戏</a>
<br />
<img src="images/game01.jpg" alt="开始游戏" title="开始游戏" />
<hr />
</div>
<div>
<a name="F2">游戏简介</a>
<br />
<img
src="images/game02.jpg"
width="500"
height="400"
alt="游戏简介"
title="游戏简介"
/>
<hr />
</div>
<div>
<a name="F3">游戏特色</a>
<br />
<img
src="images/game03.jpg"
width="500"
height="400"
alt="游戏特色"
title="游戏特色"
/>
<hr />
</div>
<div>
<a name="F4">游戏口碑</a>
<br />
<img
src="images/game04.jpg"
width="500"
height="400"
alt="游戏口碑"
title="游戏口碑"
/>
<hr />
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！