一：网页基本标签元素
HTML常用标签(HTML不是一种编程语言，而是一种标记语言）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
文档内容......
</body>
</html>
|   | 特殊符号（空格） |
| <p> | 段落标签 |
| <br/> | 换行标签 |
| <hr/> | 水平线标签 |
| <strong> | 粗体标签 |
| <h1> | 标题标签 |
| <em> | 斜体标签 |
| > | 大于号> |
| < | 小于号< |
| " | 引号“ |
| © | 版权符号@ |
| <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>
版权声明：本文为Purple_night_原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。