@linux1s1s
2017-04-07T09:13:01.000000Z
字数 3207
阅读 1870
Base Time-H5
Base H5 2017-01
HTML 实例
HTML 标签全称
HTML 页面基本结构
HTML 全局属性
HTML局部属性
HTML标签参考手册
HTML head 元素
HTML 布局
<!--指定布局--><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div></div>
效果
HTML 表单标签
对于上面的详细解释栗子
HTML Iframe
通过使用Iframe，你可以在同一个浏览器窗口中显示不止一个页面。
栗子
<body><iframe src="http://www.runoob.com/html/html-iframes.html" width="600" height="400"></iframe><p>一些旧的浏览器不支持 iframe。</p><p>如果浏览器不支持 iframes 则不会显示。</p></body>
效果
HTML 颜色值
颜色对照表可以参考栗子
HTML 文本格式化
<b>粗体文本</b><code>计算机代码</code><em>强调文本</em><i>斜体文本</i><kbd>键盘输入</kbd><pre>预格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong><abbr> （缩写）<address> （联系信息）<bdo> （文字方向）<blockquote> （从另一个源引用的部分）<cite> （工作的名称）<del> （删除的文本）<ins> （插入的文本）<sub> （下标文本）<sup> （上标文本）
HTML 标签
HTML都是静态的，想让页面具有更强的动态和交互性，JavaScript就派上用场了。
栗子
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title><script>function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></head><body><h1>我的第一个 JavaScript 程序</h1><p id="demo">这是一个段落</p><button type="button" onclick="displayDate()">显示日期</button></body></html>
小结
上面的基本知识点，有些体现在下面的代码中，可以备平时复查
<!--声明DOC TYPE，比如Html的版本等--><!DOCTYPE html><html lang="en"><!--HTML分为两大主体，分别是Head和Body--><head><!--一些中文需要该编码格式--><meta charset="UTF-8"><!--每隔30s刷新一次--><!--<meta http-equiv="refresh" content="3">--><!--HTML页面Title--><title>This is a test Page</title><!--提供动态功能，脚本语句--><script>function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></head><body><!--指定一级到六级主题--><h1> This is a H1</h1><h2> This is a H1</h2><h3> This is a H1</h3><h4> This is a H1</h4><h5> This is a H1</h5><h6> This is a H1</h6><!--转行--><br/><!--指定段落名称--><p> This is a P</p><!--指定链接--><a href="https://www.zybuluo.com/linux1s1s/note/88522">个人博客</a><!--指定水平线--><hr><!--指定图像--><img src="http://7xinl9.com1.z0.glb.clouddn.com/observer.jpg" width="574" height="375"><!--指定CSS样式--><div style="color:#40B3DF;">Colors<span style="background-color:#B4009E;color:#ffffff;">Boxes</span></div><!--指定布局--><div id="container" style="width:500px"><div id="header" style="background-color:#FFA500;"><h1 style="margin-bottom:0;">主要的网页标题</h1></div><div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"><b>菜单</b><br>HTML<br>CSS<br>JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">版权 © runoob.com</div></div><!--使用Iframe可以在一个页面中嵌套指定的页面--><iframe src="http://www.runoob.com/html/html-iframes.html" width="600" height="400"></iframe><p>一些旧的浏览器不支持 iframe。</p><p>如果浏览器不支持 iframes 则不会显示。</p><!--动态替换demo指定的ID--><h1>我的第一个 JavaScript 程序</h1><p id="demo">这是一个段落</p><button type="button" onclick="displayDate()">显示日期</button></body></html>
附录：快速查表
