基础代码
<html>
<!-- 设置中文编码-->
<meta charset="utf-8">
<head>
<title>今天第一个网页</title>
</head>
<body>
hfdksj ds dsj dsfkjdhsdh dfdsfsdhh rsfhefei h reifhkefhusha reuhfnwealfjjr efhewfvhvgei wefuehfjfn eifhbe qe fewew
<!-- 标题系列-->
<h1>This is Title</h1>
<h2>This is Title</h2>
<h3>This is Title</h3>
<h4>This is Title</h4>
<h5>This is Title</h5>
<h6>This is Title</h6>
<!-- 段落-->
<p style="color:green;font-size:5em">段落</p>
<p>段落</p>
<p>段落</p>
<!-- 引用文本-->
<blockquote>
hfdksj ds dsj dsfkjdhsdh dfdsfsdhh rsfhefei h reifhkefhusha reuhfnwealfjjr efhewfvhvgei wefuehfjfn eifhbe qe fewew
</blockquote>
<!-- 有序列表-->
<ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol>
<!-- 无序列表-->
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul>
<!-- 自定义列表-->
<dl>
<dt style="color:red"; id="m">自——定义一</dt>
<dt>自 定<义>二</dt>
<dt>©自定&义三®</dt>
</dl>
<!-- 预编排-->
<pre>
1
+2
---
3
</pre>
<!-- alt在图片无法显示时显示-->
<img src="img/t0147d76946f48bf4ec.jpg" alt="已经尽最大努力帮您弄图片了"/>
Hello Web
<!-- 超链接,写#跳转到本身网页，网址前加http://-->
<a href="http://www.baidu.com">超链接</a>
<!-- 超链接锚点-->
<a href="#m">锚点</a>
<!-- 插入Flash-->
<object type="application/x-shockwave-flash" data="img/testswf.swf" width="300em" height="80em"></object>
</body>
</html>
效果图
表格的代码
<html>
<meta charset="utf-8"/>
<head>
<title>登陆</title>
<style type="text/css">
*{
font-family: '黑体';
}
</style>
</head>
<body>
<table border="1">
<tr>
<td style="height:140px;width:1350px"></td>
</tr>
<tr>
<td style="height:380px;background-color:firebrick">
<table border="1">
<td style="width:900px;height:280px"></td> <!-- style设置宽（width）高（height） -->
<td style="width:340px;background-color:aliceblue">
<form action="#" method="post">
<table>
<tr>
<td style="width:30px;height:30px"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="height:35px">用户名：</td>
<td><input type="text" value="请输入用户名"/></td>
<td></td>
</tr>
<tr>
<td></td>
<td style="height:35px">密 码：</td>
<td><input type="password"/></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="height:35px">
<select>
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>成都</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<table borborder="1">
<tr>
<td style="width:70px"><input type="button" value="登陆"/></td>
<td><input type="button" value="取消"/></td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
</form>
</td>
</table>
</td>
</tr>
<tr>
<td style="height:140px"></td>
</tr>
</table>
</body>
</html>
为了容易分辨出是表格的布局，<table>里面设置了边框border=“1”，想好看一些可以去掉这个设置
效果图
基础表格和表单代码
<html>
<meta charset="utf-8"/>
<head>
<title>表格、表单网页</title>
</head>
<body>
<!--表格-->
<table border="1">
<!--表格的行-->
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<!--每一行的列 -->
<td>1,1的格子</td>
<td>1,2的格子</td>
<td>1,3的格子</td>
</tr>
<tr>
<!--每一行的列 -->
<td colspan="2" rowspan="2">2,1的格子</td>
<td>2,3的格子</td>
</tr>
<tr>
<!--每一行的列 -->
<td> </td>
</tr>
</table>
<!--表单-->
<form action="http://www.baidu.com" method="post" accept-charset="utf-8">
<fieldset>
<legend>用户登录</legend>
<p>用户名： <input name="myUser" type="text" value="请输入用户名" size="20" maxlength="8" readonly /> </p> <!--文本框-->
<p>密 码： <input name="myPwd" type="password" value="请输入密码" disabled /> </p> <!--密码框-->
<input type="button" value="我是按钮" disabled /> <!--普通按钮-->
<!--提交按钮-->
<input type="submit"/>
<!--重置按钮-->
<input type="reset"/>
<!--下拉列表-->
<select><!-- multiple size="3"> -->
<option>主城区三环内</option> <!--一个选项-->
<option>北京</option> <!--一个选项-->
<option selected="selected">上海</option> <!--一个选项-->
<option>广州</option> <!--一个选项-->
<option>东莞</option> <!--一个选项-->
</select>
<!--文本域，多行文本-->
<textarea cols="30" rows="20">我是默认文本</textarea>
<p></p>
<!--单选按钮-->
<label>男<input name="myradio" type="radio" checked="checked" value="male" /></label>
<label>女<input name="myradio" type="radio"
checked="checked" value
="female"/></label>
<label>春哥<input name="myradio" type="radio" checked="checked" value="brotherChun" /></label>
<!--复选框-->
<label>北京<input name="myCheckBox" type="checkbox" checked="checked" value="beijing" /></label>
<label>上海<input name="myCheckBox" type="checkbox" checked="checked" value="beijing" /></label>
<label>广州<input name="myCheckBox" type="checkbox" checked="checked" value="beijing" /></label>
<!--文件上传组件-->
<input type="file"/>
<!--隐藏字段-->
<input name="myHidden" type="hidden" value="123@163.com" />
<!--图片提交-->
<!-- <input type="image" src="image/test.jpg"/>-->
<p style="background-color:yellow">段落</p>
<label style="background-color:blue">我是标签</label>
<label>我是标签1</label>
</fieldset>
</form>
</body>
</html>
效果图
扫一扫
242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
