以下为自己在学习HTML时对于常用的标签写的一个html文档，拷贝出来复制到一个html文件中，使用网页打开，可以看到示例演示的结果。
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>My first html!</title>
</head>
<body>
<!--一级标题-->
<h1>这是一个一级标题</h1>
<h2 id='biaoti02'>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
Welcome!
<p>这是段落标签。显示一段落的文字。
HTML学习，加油加油！网页显示是没有换行的。
实现空格，这是一个空格，想多个，则写多个 。</p>
<p>如果在网页中想要换行，则使用br标签，<br/>
强制换行。多个空格使用多个 有些麻烦。可以使用样式。<br/>
要显示大于号‘>’，则使用>，如5>3<br/>
要显示小于号‘<’，则使用<，如3<5</p>
<div>div标签块元素，表示一块内容，没有具体的意义。<span>span标签</span>
行内元素，表示一行中的一小段内容，没有具体意义。
<em>em标签</em>表示语气中的强调词</div>
<div><strong>strong标签，行内元素，表示非常重要的内容。</strong></div>
<!--绝对路径引用图片-->
<img src="E:\工作有关\python\pythontest\images\img1.jpg" alt='me'/>
<!--相对路径引用图片-->
<img src="images\img1.jpg" alt='me'/>
<br/>
<!--a标签实现链接网页-->
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="提示跳转到百度">百度</a>
<!--target属性加上_blank，点击链接新开一个窗口-->
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="新开窗口到百度" target="_blank" >百度</a>
<!--对图片做链接，使用a标签包起img标签-->
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" title="提示跳转到百度">
<img src="images\img1.jpg" alt='me'/>
</a>
<br/>
<a href="#" target="_blank" rel="external nofollow" >当不确定链接时，可以先写一个#号，缺省功能是链接到页面顶部</a>
<!--在页面内跳转,先在标题中定义id,再在某处使用a标签，使用#+id号-->
<h1 id='biaoti01'>标题一</h1>
<a href="#biaoti01" target="_blank" rel="external nofollow" >标题一</a>
<br/>
<a href="#biaoti02" target="_blank" rel="external nofollow" >标题二</a>
<!--列表-->
<h3>有序列表</h3>
<ol>
<li>学习HTML</li>
<li>学习css</li>
<li>学习Python</li>
</ol>
<h3>无序列表，用的最多</h3>
<ul>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >新闻标题一</a></li>
<li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >新闻标题二</a></li>
</ul>
<h3>定义列表，例如做问答题上面一行，下面一行缩进可以用</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>JavaScript</dt>
<dd>负责页面的行为</dd>
</dl>
<!--表格，table标签，声明一个表格；tr标签,表示一行；td标签表示一行中的一单元格;th标签定义表头单元格信息-->
<!--表格table的属性：--
border定义边框宽度；
align 定义水平对齐方式；
valign定义垂直对齐方式；
rowspan设置单元格垂直合并；
colspan设置单元格水平合并；
cellpadding定义单元格内容与边框的距离
cellspacing定义单元格之间的距离
-->
<h3>产品列表</h3>
<table 300' height='100'>
<tr>
<th valign='top'>序号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>产品数量</th>
</tr>
<tr>
<td align='center'>1</td>
<td>苹果</td>
<td>￥5.00</td>
<td>100</td>
</tr>
<tr>
<td align='center'>2</td>
<td>橘子</td>
<td>￥3.00</td>
<td>400</td>
</tr>
</table>
<h3>个人简历表</h3>
<!--rowspan设置单元格垂直合并；
colspan设置单元格水平合并；-->
<table width='1000' height='300'>
<tr>
<th colspan='5'>基本情况</th>
</tr>
<tr>
<td width='18%'>姓名</td>
<td width='18%'></td>
<td width='18%'>性别</td>
<td width='18%'></td>
<td rowspan='4' width='18%'><img src='images\img1.jpg'/></td>
</tr>
<tr>
<td>名族</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h3>传统表格布局</h3>
<!--1、border、cellpadding、cellspacing都为0；--
2、单元格里面嵌套表格
3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
4、通过属性或css样式设置单元格中元素的样式-->
<table width='800' height='800' cellpadding='0' cellspacing='0' align='center'>
<tr>
<td width='260' valign='top' bgcolor='#f2f2f2'>
<table width='260' >
<tr>
<td height='100'></td>
<td></td>
</tr>
<tr>
<td width='230' align='right'><img src='images\img2.jpg'/>
</td>
<td width='30'></td>
</tr>
<tr>
<td align='right'>张三</td>
<td></td>
</tr>
<tr>
<td align='right'>123456789</td>
<td></td>
</tr>
<tr>
<td align='right'>[email protected]</td>
<td></td>
</tr>
</table>
</td>
<td width='30'></td>
<td width='480'>
<table width='480' height='30'>
<tr height='10'>
<td></td>
<td></td>
</tr>
</table>
<!--hr标签画一条线-->
<hr/>
<table width='480'>
<tr>
<td height='30'></td>
</tr>
<tr>
<th colspan='5' align='left'>基本情况</th>
</tr>
<tr>
<td width='25%'>姓名</td>
<td width='25%'></td>
<td width='25%'>性别</td>
<td width='25%'></td>
</tr>
<tr>
<td>名族</td>
<td></td>
<td>学校</td>
<td></td>
</tr>
<tr>
<td>政治面貌</td>
<td></td>
<td>学历</td>
<td></td>
</tr>
<tr>
<td>籍贯</td>
<td></td>
<td>电子邮箱</td>
<td></td>
</tr>
</table>
</td>
<td width='30'></td>
</tr>
</table>
<h2>表单</h2>
<h3>用户注册</h3>
<!--表单，使用form-->
<!--action定义提交的地址。method定义提交时以什么方式提交，get方式时在地址栏中提交。post方式是在http报文中提交-->
<form action="http://www.itcast.cn" method='post'>
<div>
<!--for属性，当点用户名这几个字时激活编辑框和直接点击对话框一样-->
<label for='username'>用户名</label>
<input type="text" name="username" id="username"/>
</div>
<br/>
<div>
<label>密码</label>
<input type="password" name="pwd"/>
</div>
<br/>
<div>
<label>性别</label>
<!--radio单选，name中要写一样的，否则不能实现单选-->
<input type="radio" name="gender" id='male' value='0'/><label for='male'>男</label>
<input type="radio" name="gender" id='female'value='1'/></><label for='female'>女</label>
</div>
<br/>
<div>
<label>爱好</label>
<!--checkbox多选，当提交时，所选中的以value中的值显示，name指示哪一表单选项如like=game-->
<input type="checkbox" name="like" value='game'/>游戏
<input type="checkbox" name="like" value='shopping'/>逛街
<input type="checkbox" name="like" value='sleep'/>睡觉
</div>
<br/>
<div>
<label>籍贯</label>
<!--select定义下拉框，其中的每个选项用option定义-->
<select>
<option value='0'>北京</option>
<option value='1'>上海</option>
<option value='2'>深圳</option>
<option value='3'>广州</option>
</select>
</div>
<br/>
<div>
<label>照片:</label>
<!--file可以上传文件-->
<input type="file" name='image'>
</div>
<br/>
<div>
<label>描述:</label>
<!--textarea定义多行文本-->
<textarea name='info'></textarea>
</div>
<!--当点击提交按钮时，就跳转到action中设置的网址中，提交的信息在地址栏中提交-->
<input type="submit" name='' value="提交">
<input type="reset" name='' value="重置">
<!--单纯的做一个按钮-->
<input type="button" name='' value="这是一个按钮">
<!--用来存储值使用，不在页面上显示,但会提交数据，如从数据库中读出数据，但不要显示，当上传时需要上传的数据-->
<input type="hidden" name='hid' value='1000'>
<!--按钮以图片显示，点击图片来提交，最好不要用这个提交，因为这种方式可能会提交两次-->
<input type='image' name='' src="images\img2.jpg" value="提交">
</form>
<h2>内嵌框架</h2>
<!--iframe标签与a标签配合使用。target属性指出当单击此链接时，网页在哪个框架显示-->
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target='myframe'>百度网</a>
<a href="http://www.itcast.com" target="_blank" rel="external nofollow" target='myframe'>传智播客</a>
<a href="http://www.qq.com" target="_blank" rel="external nofollow" target='myframe'>腾讯网</a>
<br/>
<!--src后也可以加上本地的html文件，scrolling设置是否有滚动条-->
<iframe src="http://baidu.com" width='900' height='900' frame scrolling='no' name='myframe'></iframe>
</body>
</html>
![web前端布局练手项目[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)