[关闭]
@linux1s1s 2017-04-07T09:13:01.000000Z 字数 3207 阅读 1853

Base Time-H5

Base H5 2017-01


HTML 实例

请参考W3School的HTML实例

HTML 标签全称

此处输入图片的描述

此处输入图片的描述

此处输入图片的描述

此处输入图片的描述

HTML 页面基本结构

此处输入图片的描述

HTML 全局属性

此处输入图片的描述

HTML局部属性

窗口事件属性(Window Event Attributes)
表单事件(Form Events)
键盘事件(Keyboard Events)
鼠标事件(Mouse Events)
多媒体事件(Media Events)

HTML标签参考手册

此处输入图片的描述

HTML head 元素

此处输入图片的描述

HTML 布局

  1. <!--指定布局-->
  2. <div id="container" style="width:500px">
  3. <div id="header" style="background-color:#FFA500;">
  4. <h1 style="margin-bottom:0;">主要的网页标题</h1>
  5. </div>
  6. <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
  7. <b>菜单</b><br>
  8. HTML<br>
  9. CSS<br>
  10. JavaScript
  11. </div>
  12. <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
  13. 内容在这里
  14. </div>
  15. <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
  16. 版权 © runoob.com
  17. </div>
  18. </div>

效果
此处输入图片的描述

HTML 表单标签

此处输入图片的描述

对于上面的详细解释栗子

HTML Iframe

通过使用Iframe,你可以在同一个浏览器窗口中显示不止一个页面。
栗子

  1. <body>
  2. <iframe src="http://www.runoob.com/html/html-iframes.html" width="600" height="400"></iframe>
  3. <p>一些旧的浏览器不支持 iframe。</p>
  4. <p>如果浏览器不支持 iframes 则不会显示。</p>
  5. </body>

效果
此处输入图片的描述

HTML 颜色值

颜色对照表可以参考栗子

HTML 文本格式化

  1. <b>粗体文本</b>
  2. <code>计算机代码</code>
  3. <em>强调文本</em>
  4. <i>斜体文本</i>
  5. <kbd>键盘输入</kbd>
  6. <pre>预格式化文本</pre>
  7. <small>更小的文本</small>
  8. <strong>重要的文本</strong>
  9. <abbr> (缩写)
  10. <address> (联系信息)
  11. <bdo> (文字方向)
  12. <blockquote> (从另一个源引用的部分)
  13. <cite> (工作的名称)
  14. <del> (删除的文本)
  15. <ins> (插入的文本)
  16. <sub> (下标文本)
  17. <sup> (上标文本)

HTML 标签

HTML都是静态的,想让页面具有更强的动态和交互性,JavaScript就派上用场了。

栗子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. <script>
  7. function displayDate(){
  8. document.getElementById("demo").innerHTML=Date();
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <h1>我的第一个 JavaScript 程序</h1>
  14. <p id="demo">这是一个段落</p>
  15. <button type="button" onclick="displayDate()">显示日期</button>
  16. </body>
  17. </html>

小结

上面的基本知识点,有些体现在下面的代码中,可以备平时复查

  1. <!--声明DOC TYPE,比如Html的版本等-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <!--HTML分为两大主体,分别是Head和Body-->
  5. <head>
  6. <!--一些中文需要该编码格式-->
  7. <meta charset="UTF-8">
  8. <!--每隔30s刷新一次-->
  9. <!--<meta http-equiv="refresh" content="3">-->
  10. <!--HTML页面Title-->
  11. <title>This is a test Page</title>
  12. <!--提供动态功能,脚本语句-->
  13. <script>
  14. function displayDate(){
  15. document.getElementById("demo").innerHTML=Date();
  16. }
  17. </script>
  18. </head>
  19. <body>
  20. <!--指定一级到六级主题-->
  21. <h1> This is a H1</h1>
  22. <h2> This is a H1</h2>
  23. <h3> This is a H1</h3>
  24. <h4> This is a H1</h4>
  25. <h5> This is a H1</h5>
  26. <h6> This is a H1</h6>
  27. <!--转行-->
  28. <br/>
  29. <!--指定段落名称-->
  30. <p> This is a P</p>
  31. <!--指定链接-->
  32. <a href="https://www.zybuluo.com/linux1s1s/note/88522">个人博客</a>
  33. <!--指定水平线-->
  34. <hr>
  35. <!--指定图像-->
  36. <img src="http://7xinl9.com1.z0.glb.clouddn.com/observer.jpg" width="574" height="375">
  37. <!--指定CSS样式-->
  38. <div style="color:#40B3DF;">Colors
  39. <span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
  40. </div>
  41. <!--指定布局-->
  42. <div id="container" style="width:500px">
  43. <div id="header" style="background-color:#FFA500;">
  44. <h1 style="margin-bottom:0;">主要的网页标题</h1>
  45. </div>
  46. <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
  47. <b>菜单</b><br>
  48. HTML<br>
  49. CSS<br>
  50. JavaScript
  51. </div>
  52. <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
  53. 内容在这里
  54. </div>
  55. <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
  56. 版权 © runoob.com
  57. </div>
  58. </div>
  59. <!--使用Iframe可以在一个页面中嵌套指定的页面-->
  60. <iframe src="http://www.runoob.com/html/html-iframes.html" width="600" height="400"></iframe>
  61. <p>一些旧的浏览器不支持 iframe。</p>
  62. <p>如果浏览器不支持 iframes 则不会显示。</p>
  63. <!--动态替换demo指定的ID-->
  64. <h1>我的第一个 JavaScript 程序</h1>
  65. <p id="demo">这是一个段落</p>
  66. <button type="button" onclick="displayDate()">显示日期</button>
  67. </body>
  68. </html>

附录:快速查表

参考:
HTML 教程- (HTML5 标准)
HTML标签对应英文全称及简单描述

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注