HTML-练习

目录

一、练习

1、词作

2、人物简介

3、图书制作

4、跳转链接


一、练习

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>&copy;超级钊所著。</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>

实例

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愚人钊呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值