index.html 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <!-- HTML注释 -->
  2. <!-- 1. 标签 - 承载内容 -->
  3. <!-- 2. 层叠样式表 - 渲染页面 -->
  4. <!-- 3. JavaScript - 交互式行为 -->
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="utf-8">
  9. <title>骆昊的技术专栏</title>
  10. <!-- css - cascading style sheet -->
  11. <style>
  12. h1 {
  13. color: purple; /* 颜色 */
  14. font-size: 2cm; /* 字体大小 */
  15. font-family: "华文宋体"; /* 字体 */
  16. }
  17. p {
  18. font-size: 1cm;
  19. }
  20. p:first-letter {
  21. font-size: 1.5cm;
  22. color: blue;
  23. }
  24. .a {
  25. color: green;
  26. }
  27. .b {
  28. color: red;
  29. }
  30. a {
  31. color: red;
  32. text-decoration: none;
  33. }
  34. a:hover {
  35. color: green;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <!-- http://shang.qq.com -->
  41. <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=957658&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:957658:53" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
  42. <a name="shit"></a>
  43. <a href="example_of_anchor.html#foo">革命理想</a>
  44. <a href="example_of_anchor.html#bar">坚持马克思</a>
  45. <h1>&lt;jackfrued&gt;的博客 - H<sub>2</sub>O</h1>
  46. <hr>
  47. <h2>骆昊喜欢的网站</h2>
  48. <ul>
  49. <!-- anchor -->
  50. <!-- 1. 页面链接 -->
  51. <!-- 2. 锚点链接 -->
  52. <!-- 3. 功能链接 -->
  53. <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
  54. <li><a href="http://www.jd.com" target="_self">京东</a></li>
  55. <li>
  56. 视频网站
  57. <ol>
  58. <li><a href="http://www.youku.com">优酷</a></li>
  59. <li><a href="hello.html">爱奇艺</a></li>
  60. <li>腾讯视频</li>
  61. </ol>
  62. </li>
  63. </ul>
  64. <dl>
  65. <dt>
  66. <p><img title="千锋教育" src="images/logo-1.gif" align="center" alt="图片加载失败">Python</p>
  67. </dt>
  68. <dd>
  69. <dl>
  70. <dt>面向对象的编程语言</dt>
  71. <dd>基本概念:类、对象</dd>
  72. <dd>三大支柱:封装、继承、多态</dd>
  73. </dl>
  74. </dd>
  75. <dd>动态弱类型语言,需要Python解释器才能执行</dd>
  76. </dl>
  77. <p class="a">床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;前<del>明月光</del><sup>1</sup></p>
  78. <p class="b"><ins>疑似</ins>地上霜&copy;</p>
  79. <p>举头&trade;望<strong>明月</strong><sup>2</sup></p>
  80. <p>低头<strong><em>思</em></strong>故乡</p>
  81. <button onclick="showWriter()">确定</button>
  82. <button onclick="shutdown()">关闭</button>
  83. <div>
  84. <a href="#shit">回顶部</a>
  85. <a href="mailto:jackfrued@126.com">联系站长</a>
  86. </div>
  87. <script>
  88. function shutdown() {
  89. if (window.confirm('确定要关闭吗?')) {
  90. window.close()
  91. }
  92. }
  93. // 驼峰命名法 - Camel Notation
  94. function showWriter() {
  95. for (var i = 1; i <= 3; i += 1) {
  96. window.alert('作者:李白')
  97. }
  98. }
  99. </script>
  100. </body>
  101. </html>