一：网页基本标签元素

HTML常用标签(HTML不是一种编程语言，而是一种标记语言）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head><body>
文档内容......
</body></html>

&nbsp	特殊符号（空格）
<p>	段落标签
<br/>	换行标签
<hr/>	水平线标签
<strong>	粗体标签
<h1>	标题标签
<em>	斜体标签
&gt	大于号>
&lt	小于号<
&quot	引号“
&copy	版权符号@
<a>	超链接
href	跳转到那个页面
target	选择是新开页面还是初始页面

二：图像标签

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 图片标签 --><img src="Demo02/TransB.png"alt="没有加载出来" title="这是我家的小提琴" width="400px"/></body>
</html>

三：HTML列表

有序列表

		<ol><li>北京</li><li>上海</li><li>杭州</li><li>深圳</li></ol>

无序列表

		<!-- 无序列表 --><ul><li>北京</li><li>上海</li><li>杭州</li><li>深圳</li></ul>

定义列表

		<!-- 定义列表 --><dl><dt>吉林省</dt><dd>长春市</dd><dd>吉林市</dd><dd>四平市</dd><dt>辽宁省</dt><dd>沈阳市</dd><dd>盘锦市</dd></dl>

四：表单

type	功能
text	单行文本输入
password	密码
radio	单选
checkbox	多选
reset	重置表单数据
file	文件上传
submit	提交表单数据
hidden	隐藏域
button	普通按钮

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- 表单标签 --><form action="" method="">名字：<input type="text" size="12"/><br  />姓氏：<input type="text" size="12" /><br />登录名：<input type="text" size="12" />(可包含a-z，0-9)<br />密码：<input type="password" size="12" />(至少包含6个字符)<br />再次输入密码：<input type="password" size="12" /><br />电子邮箱：<input type="text" size="12" /><br />性别：<input name="sex" type="radio" />男<input name="sex" type="radio" />女<br />爱好：<input name="hobby" type="checkbox" />运动<input name="hobby" type="checkbox" />聊天<input name="hobby" type="checkbox" />玩游戏<br /><!-- 下拉列表 -->户籍地：<select><option>吉林省</option><option>辽宁省</option><option>黑龙江省</option></select><br />自我介绍：<textarea rows="5" cols="10"></textarea><br />选择文件：<input type="file" /><br /><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body>
</html>

其他表单元素


<select name="指定列表名称" size="显示的行数">
<option value="选项" selected="selceted"></option>
</select>
<textarea name="..." cols="列宽" rows="行宽">
文本内容
</textarea>

表单的高级用法：

<label for="关联元素ID">
</label>

只读属性

readonly:希望某个框内的内容只允许用户看，不能修改

禁用属性

disabled:因没达到使用条件，限制用户使用

五：表格：

cellspacing 单元格之间的距离
cellpadding 字和边框之间距离

属性名	功能
width/height	表格的宽/高,单位可以为像素（px）或%
border	默认为表格边框为0（无边框），可设置数值
cellspacing	控制单元格之间的间距，可设置为数值
cellpadding	控制单元格边框和其内容的间距，可设置为初值
align	设置文本的水平对齐方式，left，right,center
valign	设置文本的竖直对其方式，top，middle，bottom
bgcolor	设置颜色

表格高级标签：

<th>	表头
<caption>	表格标题
<thead>	页眉
<tbody>	数据主题
<tfoot>	页脚

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table width="300px" border="1" cellpadding="0" cellspacing="0"><tr><!-- 标题 --><caption>年终数据报表</caption><!-- 表头 --><thead bgcolor="aqua"><tr><td>月份</td><td>收入</td></tr></thead><!-- 表体，放数据的 --><tbody bgcolor="chartreuse"><tr><td>1月份</td><td>100</td></tr><tr><td>2月份</td><td>80</td></tr><tr><td>3月份</td><td>300</td></tr><!-- 表脚 --><tfoot><tr><td>平均月收入</td><td>197.6</td></tr><tr><td>总计</td><td>1180</td></tr></tfoot></tbody></tr></table></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table width="300px" cellpadding="0" cellspacing="0" border="1"><tr><td colspan="3" align="center">学生成绩</td><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr></tr><tr><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><h2>这是一个小狗的iframe框架</h2><!-- 动态面板 --><iframe  frameborder="1" src="Demo02/TransB.png" scrolling="auto" height="300px"></iframe></body>
</html>