<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今天学布局</title>
</head>
<body>
<div id="container" style="width: 500px">
<div id="header" style="background-color: blueviolet">
<h1 style="margin-bottom: 0;">主要网页标题</h1></div>
<div id="menu" style="background-color: cornsilk;height: 200px;width: 100px;float: left;">
<b>菜单</b><br>
html <br>
css <br>
javascript
</div>
<div id="contert" style="background-color: darkgoldenrod;height: 200px;width: 400px;float: left;">正文内容</div>
<div id="footer" style="background-color: grey;clear: both;text-align: center;">版权</div>
</div>
</body>
<br>
<br><br><br>
<table width=“500” border="0">
<tr>
<td colspan="2" style="background-color: khaki">
<h1>主要的网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#ffd700;width: 100px;vertical-align: top;">
<b>菜单</b><br>
html <br>
css <br>
javascript
</td>
<td style="background-color: chartreuse; height: 200px;width: 400px;vertical-align: top"></td>
</tr>
<tr>
<td colspan="2" style="background-color: cyan;text-align: center;">
版权@runoob.com</td>
</tr>
</table>
<br><br><br>
<div>
<form action="">
first name: <input type="text" name="firstname"><br><br>
last name: <input type="text" name="lastname">
</form>
<p><b>注意</b>表单本身是不可见的。并且注意一个文本段的默认宽度是20个字符。</p>
</div>
<br>
<form action="">
<input type="radio"name="sex" value="male">male <br>
<input type="radio"name="sex" value="female">female
</form>
<br>
<form action="">
<input type="checkbox" name="vehicle" value="bike">i have a bike <br>
<input type="checkbox" name="vehicle" value="car">i have a car
</form>
<br>
<form action="">
<select name="cars">
<option value="volvo">volvo</option>
<option value="saab">saab</option>
<option value="fiat">fiat</option>
<option value="audi">audi</option>
</select>
</form>
<br>
<body>
<textarea name="" id="" cols="30" rows="10">我是一个文本框</textarea>
<form action="">
<input type="button" value="提交">
</form>
<form action="">
<input type="button" value="hello world!">
</form>
<form action="">
<fieldset>
<legend>personal information</legend>
name: <input type="text" size="30"><br>
e-mail: <input type="text" size="30"><br>
date of birth: <input type="text" size="10">
</fieldset>
</form>
<br><br><br>
<form action="demo-form.php">
first name: <input type="text" name="firstname" value="maicky"> <br>
last name: <input type="text" name="lastname" value="mouse"><br>
<input type="submit" value="提交">
<p>点击"提交"按钮,表单数据将被发送到服务器上的“demo-form.php”。</p>
</form>
<form action="demo-form.php" method="GET">
<input type="checkbox" name="vehicle[]" value="bike">我有一个车 <br>
<input type="checkbox" name="vehicle[]" value="car" checked="checked">我有一个小汽车<br>
<input type="submit" value="提交">
</form>
<!--复选框-->
<form action="demo-form.php" method="GET">
<input type="radio" name="sex" value="male">male <br>
<input type="radio" name="sex" value="female" checked="checked">female
<input type="submit" value="提交">
</form>
<form action="mailto:someone@example.com" method="POST" enctype="text/plain">name: <br>
<input type="text" name="name" value="your name"><br>
e-mail: <br>
<input type="text" name="mail" value="your email"> <br>
comment: <br>
<input type="text" name="comment" value="your comment" size="50"><br> <br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
<iframe src="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height_width" width="800" height="200"></iframe>
<iframe src="https://www.runoob.com/try/try.php?filename=tryhtml_iframe_height_width" width="800" height="200" frameborder="0"></iframe>
<p>您的浏览器不支持iframe标签</p>
<iframe src="https://www.baidu.com/" name="iframe_a"></iframe>
<p> <a href="www.runoob.com" target="iframe_a">点我奥</a></p>
<p><b>注意</b>因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。</p>
</p>
<p style="background-color: #ffff00">通过十六进制颜色设置图片背景颜色</p>
<p style="background-color: rgb(255,255,0)">通过RGB值设置背景颜色</p>
<p style="background-color: yellow">通过颜色来规定背景</p>
<p style="background-color: rgba(255,255,0,0.2)">通过RGB值设置背景颜色</p>
<p>
javascript能够直接写入html 输出溜中
</p>
<script>
document.write("<h1>这是一个标题</h1>")
document.write("<p>这是一个段落.</p>")
</script>
<p>您智能在HTML输出流中使用<b>document.write"</b>.如果您在文档中已经加载后使用它,(比如函数中)会覆盖整个文档</document></b></p>
</body>
</html>