@linux1s1s
2017-04-07T09:13:01.000000Z
字数 3207
阅读 1853
Base
H5
2017-01
<!--指定布局-->
<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,你可以在同一个浏览器窗口中显示不止一个页面。
栗子
<body>
<iframe src="http://www.runoob.com/html/html-iframes.html" width="600" height="400"></iframe>
<p>一些旧的浏览器不支持 iframe。</p>
<p>如果浏览器不支持 iframes 则不会显示。</p>
</body>
效果
颜色对照表可以参考栗子
<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都是静态的,想让页面具有更强的动态和交互性,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>
附录:快速查表