HTML5标签变化 -- 笔记 - 图2review0429-1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>review0429-1</title>
  5.     <meta charset="utf-8">
  6.     <style type="text/css">
  7.         footer{
  8.             height: 50px;
  9.             background: #abcdef;
  10.             line-height: 50px;
  11.             text-align: center;
  12.             font-size: 24px;
  13.             font-weight: bold;
  14.             color: #696969;
  15.         }
  16.         header{
  17.             height: 50px;
  18.             background: #abcdef;
  19.             line-height: 50px;
  20.             text-align: center;
  21.             font-size: 24px;
  22.             font-weight: bold;
  23.             color: #696969;
  24.         }
  25.         .section1{
  26.             background-image: url("cat.jpg");
  27.             background-repeat: no-repeat;
  28.             background-size: 100% 100%;
  29.         }
  30.         p{
  31.             text-indent: 2em;
  32.             font-family: 楷体;
  33.         }
  34.         figure{
  35.             border-style: solid;
  36.             border-color: yellow;
  37.             border-width: 1px;
  38.             background-color: yellow;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <header>
  44.         <div>LOGO</div>
  45.         <nav>
  46.             <a href="#">首页</a>
  47.             <a href="#">介绍</a>
  48.             <a href="#">案例</a>
  49.             <a href="#">链接</a>
  50.             <a href="#">关于</a>
  51.             <a href="review0429-2.html" target="_blank">review0429-2</a>
  52.         </nav>
  53.     </header>
  55.     <section class="section1"> <!-- 开头 -->
  56.         <aside>
  57.             <a href="#se1">section one</a>
  58.             <a href="#se2">section two</a>
  59.             <a href="#se3">section three</a>
  60.         </aside>
  61.         <article>
  62.             <hgroup>
  63.                 <h1>树下的猫</h1>
  64.                 <h3>文/爱米</h3>
  65.                 <h4>佛说：人世间的一千次回眸，才换来今生的相逢。也许我就是那佛前的一只猫，为了和你相逢，我在佛前求了500年，因为我许的诺言是一生一世……</h4>
  66.             </hgroup>
  68.             <a name="se1">Section ONE</a>
  69.             <p>
  70.             我是一只坐在树下的貓，每天我都坐在树下，看花花世界，人海茫茫……
  71.             我每天都会做相同的梦，梦里看到一位公子，身患重病，危在旦夕。公子身边有一名女子，她的眼里尽是关切和深深的依恋。梦里，她喂药给他，他流着泪拉着她的手对他说：“谢谢你，下辈子我一定好好待你，来世还要娶你……” 
  72.             每当这时，一切混沌，出现一位老者对我说着同样的话：“三世情缘，切忌把握！”每次我还想问一些什么，梦就醒了。
  73.             后来我终于明白，那个女子就是我，那个梦是我的前世，那位公子是我前世的丈夫。我不知道是不是猫都有记忆，也不知道是不是猫都会做梦。我只知道，那个梦越来越真实，我甚至可以感觉到他的心跳，他的痛苦。梦中醒来，泪流满面，滴在地上，久而久之，地上便出现了一个坑。坑里，我的眼泪像血一般殷红……
  74.             这辈子，我是一只猫，坐在树下，因为无家可归。在漆黑的夜里，抬头望天，对着星星说话，对着天空祈祷……
  75.             每天都坐在树下等，希望有一天可以见到我的前世今生。我想，如果一切都是真的，我一定可以认出他。
  76.             不曾遗忘那盘古洪荒是与你的诺言，千万岁月只在弹指一挥间，等你将我的似水年华烙上爱的印记，然后我们相依相偎，地老天荒……
  77.             </p>
  78.             <a name="se2">Section TWO</a>
  79.             <p>
  80.             最近总是看见一个高大帅气的男孩。每天他经过身旁，都会停下来抚摸我的头，很大很温暖的手，我总是闭上眼睛很乖的享受。他走的时候，总会给我说再见，眼眸相对，我看到了前世的记忆。
  81.             我拼命叫他，他总是温柔的对我笑笑，然后转身离去，留给我一个美好的背影……
  82.             他不知道，我有好多话想要告诉他，却忘了我是猫，我的话他听不懂。
  83.             每日必经之路，一棵树下，总是看见一直猫，全身白色，眼睛却天空般蔚蓝。看到它，我总是不由自主去到它身边，抚摸它的头，喜欢它闭上眼睛静静地很乖地享受的样子。一瞬间，总有一种熟悉的感觉，放佛已经相识千年。每次走的时候，它总是不停地叫，看着它变得忧伤的眼神，总是觉得很心疼。
  84.             日子就这样一天天过去，我几乎忘了老者的话，以为只要哪天他愿意带我回家，每天可以看见他，每天享受他的温暖，只做猫我也无怨无悔。
  85.             那是个慵懒的下午，天空很蓝，太阳很暖。见他走来，却看到身边一张陌生而又熟悉的脸。脸上一对和他一样美丽的眼睛，看他的眼神特别温柔。我大脑一片空白，天空也变成了灰色。
  86.             “走吧，刮风了……”
  87.             熟悉的声音，我忽然全想起来了……
  88.             …………
  89.             那时我还没有轮回转世，因为我前世的善行感动上苍，所以不用受地狱之刑。于是我整日闲逛于地府，等待轮回。三年一轮回，我也迎来了自己的三年。轮回门前一共有五个，其中一个女孩和我名字相同，孟婆婆叫我的时候她也站了出来。她站在我的右边，孟婆婆笑着说：“怎么你们两个名字相同，长得也挺像。呆会可要仔细听好了别弄错了。”
  90.             我们面前出現了兩扇門，她在右边的那扇。
  91.             婆婆說你們站好啦別亂動，說完婆婆就去那口大鐵鍋裏舀湯了，我看見那個女孩向我招手叫我過去，我走了過去，她對我說：你知道嗎？待会我們只要一喝那碗孟婆湯我們就会失去所有的記憶。
  92.             孟婆婆教我们站好别乱动，说完就去舀汤。那个女孩叫我过去，对我说：“你知道吗？孟婆婆舀的孟婆汤，我们喝了就会失去所有的记忆。”
  93.             “失去所有的记忆？”
  94.             “对！”
  95.             “不可以，我绝对不可以失去所有的记忆。”我的眼前出现了他流泪的脸，“他说她要娶我的。” 
  96.             我的眼泪滴了下來，心痛……
  97.             “没关系，我有办法可以帮你。”
  98.             “真的吗？”
  99.             “呆会我先喝，轮到你的时候你和我对换一下位置就好。”
  100.             “那你不是一下子喝了两碗，什么都不记得了吗？”
  101.             “没关系，你记得我就好。”
  102.             感激的不知道说什么才好，我只顾一个劲地说谢谢。
  103.             我们终于骗过了孟婆婆，看她从左边的门走出，临别的时候还对我笑了笑……
  104.             后来我才知道，从左边门走出去的是人，右边的是动物……
  105.             …………
  106.             看着他们转身离去，我像发了疯似的叫喊。我好想告诉他，站在他身边的应该是我。可是不论我怎么呼喊，他毅然和她一起转身离去。我开始崩溃，眼泪如水。又一次忘了我是猫，我的话，他听不懂……
  107.             那天，他说要带我去一个地方，一棵普通的树，树下有一只猫，很美。他说他每次看见它都会好心疼，好想给它温暖。我听后很好奇，也见到了它。可是那双蔚蓝色的瞳孔中尽是怨恨，让我有些怕。我急忙拉着他走开，走得时候听到它更加凄惨的叫声。我的心为之一震，只好把他拉的更紧……
  108.             那天晚上，我选择离开。不知道继续呆在这里的意义，也恨自己当初相信了她。我知道这一切已经无力挽回，看着他现在幸福的样子，也许我应该学会忘记，忘记一切的一切，学会只做一只普通的猫，去寻找属于猫的幸福。回头望了一眼那棵树，还有那个盛着我的眼泪的坑，他那温柔的脸又一次浮现。想起他曾经给我的短暂的幸福，我心如刀割，眼里却没有了眼泪。我差点忘了猫的眼泪是有限的，而我却已经流尽了一生的泪水……
  109.             我是一只坐在树下的猫，跌落红尘，却未曾蒙尘。千年前，一句承诺，千年后，一片痴心……
  110.             </p>
  111.             <a name="se3">Section THERE</a>
  112.             <p>
  113.             华灯初上，人流涌动，我就这样漫无目的的走着。
  114.             前面的路口不知为何围了好多人，和我无关，我也无心去看。路过的时候，听到一个熟悉的声音。是他，抱着浑身是血的她。
  115.             围观的人议论纷纷，也听出事故来龙去脉。原来，她手链掉路中央，他去给她捡。背后货车疾驰而来，她跑去推开他，自己却被撞了。
  116.             他的眼泪滑落于她脸上，每一滴好似献血。突然一阵心痛，却不知如何帮他，只有在人群中发了疯的大喊，希望有人可以听见，有人可以帮他。然而，任凭我喊破嗓子，没人理我。又一次，我忘了我是猫，我的话，没人会懂。
  117.             女孩的魂魄走了出来，暗处走出两个鬼差，要带她走。见她回头望他，眼里尽是不舍。我急忙跑过去，对那两个鬼差说：“求你们了，求你们让她回去吧。”
  118.             “走开，哪来的猫。”
  119.             我使劲地抱着一名鬼差的腿说：“求你们了，求你。”
  120.             梦中的老者不知什么时候出现在我面前，我急忙跑过去对他说：“我求你，求你让他回去吧，如果你们非要带一个人走的话就带我走吧。”
  121.             “你别忘了，是她抢走了你的幸福啊，那幸福本来就是属于你的。现在我们要把她带走，她应该接受惩罚。我现在就帮你做回你自己，从此以后你就好好的享受幸福吧。”
  122.             “请等一等，让我跟她说几句话可以吗？”
  123.             老者点点头。
  124.             走到她身边，她满脸泪痕。
  125.             “你一定很爱他吧？我知道，你并不想走。可以答应我一个请求吗？拜托你好好珍惜他，可以吗？
  126.             其实……其实我，已经习惯做猫了，真的。“
  127.             “谢谢你，我想我恐怕没办法答应你了。其实我应该跟你说对不起，是我一时贪恋骗了你。
  128.             我以为我可以和他幸福到老，我以为这辈子不会遇到你。可是我错了，你们才是命中注定的恋人。
  129.             告诉你一个秘密。其实，他没有忘记你，从来没有。他其实不用每天都经过那棵树的，他只是想去看你。我们现在终于可以做回自己了，我祝你们幸福。”
  130.             …………
  131.             三年后，我和他在全市最大的礼堂举行婚礼。
  132.             婚礼那天，教堂边一棵树下，两只黑色的猫映入眼帘。其中一只眼睛很蓝，正盯着我微笑。
  133.             我知道，她也找到了幸福，属于她自己的幸福……
  134.             叮咚敲着礼堂的钟声，望着身边高大帅气的他，看着他的笑脸，忽然觉得这样真好……
  135.             </p>
  136.         </article>
  137.     </section>
  139.     <section> <!-- 视频，音频 -->
  140.         <figure>
  141.             <figcaption>树下的猫咪是怎么生活的？</figcaption>
  142.             <div class="video">...</div>
  143.         </figure>
  144.     </section>
  146.     <section> <!-- 评论 -->
  147.         <dialog>
  148.             <dt>张三：嗯，写的还不错！</dt>
  149.             <dd>李四：还好吧，一般般吧！</dd>
  150.             <dt>张三：我觉得已经很不错了！</dt>
  151.             <dd>李四：有待提高啊！</dd>
  152.             <dt>张三：嗯，写的还不错！</dt>
  153.             <dd>李四：还好吧，一般般吧！</dd>
  154.             <dt>张三：我觉得已经很不错了！</dt>
  155.             <dd>李四：有待提高啊！</dd>
  156.         </dialog>
  157.     </section>
  159.     <footer> <!-- 结尾 -->
  160.         CopyRight&copy;https://blog.csdn.net/gegejiawei
  161.     </footer>
  162. </body>
  163. </html>

review0429-2

<!DOCTYPE html>
<html>
<head>
    <title>review0429-2</title>
    <meta charset="utf-8">
</head>
<body>
    <audio src="../Source/passion.mp3" autoplay="autoplay" controls loop="-1">您可以换个浏览器了！</audio>
    <hr>

    <audio autoplay="autoplay" controls="controls">
        <!-- type表示转码，mp3转码格式是mpeg -->
        <source src="../Source/passion.mp3" type="audio/mpeg">
    </audio>
    <hr>

    <video controls="controls" width="1024" height="768">
        <source src="../Source/flower.webm" type="video/mp4">
    </video>
    <hr>

    <embed src="../Source/helloworld.swf" width="1024" height="768">
</body>
</html>

review0430

<!DOCTYPE html>
<html>
<head>
    <title>review0430</title>
    <meta charset="utf-8">
</head>
<body>
    <!-- Meter  状态标签（实时状态显示） 气温，气压   定义度量衡   磁盘使用情况   查询结果 -->
    <meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
    <!-- 如果不设置最大最小值，那么value形式以百分比展现，0.1：10% 0：0% 1：100% -->
    <meter value="1"></meter>
    <hr>

    <!-- Progress  状态标签（任务过程：安装，下载） -->
    <progress value="30" max="100"></progress>
    <progress max="100"></progress>
    <!-- 这两组标签代码会默认为一组标签使用，value是共享的 -->
    <hr>

    <form action="#">
        <input placeholder="请选择你喜欢的数字" list="List">
            <datalist id="List">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </datalist>
        <input type="submit" value="提交新数字" name="">
    </form>
    <hr>

    <details open>
        <summary>树下的猫</summary>
        <p>
            最近总是看见一个高大帅气的男孩。每天他经过身旁，都会停下来抚摸我的头，很大很温暖的手，我总是闭上眼睛很乖的享受。他走的时候，总会给我说再见，眼眸相对，我看到了前世的记忆。
            我拼命叫他，他总是温柔的对我笑笑，然后转身离去，留给我一个美好的背影……
            他不知道，我有好多话想要告诉他，却忘了我是猫，我的话他听不懂。
            每日必经之路，一棵树下，总是看见一直猫，全身白色，眼睛却天空般蔚蓝。看到它，我总是不由自主去到它身边，抚摸它的头，喜欢它闭上眼睛静静地很乖地享受的样子。一瞬间，总有一种熟悉的感觉，放佛已经相识千年。每次走的时候，它总是不停地叫，看着它变得忧伤的眼神，总是觉得很心疼。
            日子就这样一天天过去，我几乎忘了老者的话，以为只要哪天他愿意带我回家，每天可以看见他，每天享受他的温暖，只做猫我也无怨无悔。
            那是个慵懒的下午，天空很蓝，太阳很暖。见他走来，却看到身边一张陌生而又熟悉的脸。脸上一对和他一样美丽的眼睛，看他的眼神特别温柔。我大脑一片空白，天空也变成了灰色。
            “走吧，刮风了……”
            熟悉的声音，我忽然全想起来了……
        </p>
    </details>
    <hr>

    <p>
        我们来<ruby>侃<rp><rt>kan</rt></ruby>一个话题！
    </p>
    <hr>

    <p>
        妈妈让我带一盒<mark>牛奶</mark>回来！
    </p>
    <hr>

    <!-- oninput试试监听文本框的输入边框 -->
    <form action="#" oninput="totalprice.value=parseInt(price.value)*parseInt(number.value)">
        <input type="range" id="price" value="5000">
        *<input type="number" id="number" value="1">
        =<output name="totalprice" for="price number"></output>
    </form>
</body>
</html>