<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body background="img/cao.jpeg">//background设置背景图片
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>
段落标签 ppppppppppppppp<br/>
</p>// 表示空格，<br/>表示换行
<div>divdivdiv</div>//块标签无实意，独占一行
<div>divdivdiv</div>
<span>span</span>//不独占一行
<span>span</span>
<strong>strong</strong>//不独占一行，粗体显示
<b>bbbb</b>//不独占一行，粗体显示
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body background="img/cao.jpeg">
<h1 id="01">一级标题</h1>
</br>
<img src="img/OIP-C.jpeg" alt="山水图" title="美丽山水">//alt：图片未显示时的文字，title：鼠标放在图片上时显示的文字．
</br>
<img src="img/OIP-C.jpeg" border="3" width="100">//border：加一个边框，宽度是３ width：将图片的宽改为１００，高度自适应
</br>
<a href="http://www.baidu.com">去百度</a>//超链接，跳转到百度
</br>
<a href="http://www.baidu.com"><img src="img/OIP-C.jpeg"></a>//点击图片跳转到百度
</br>
<a href="hello.html">bendi</a>//跳转到本页面
</br>
<a href="#">fake link</a>
</br>
<a href="####">fake link</a>
</br>
<a href="http://www.baidu.com" target="_blank"><img src="img/OIP-C.jpeg"></a>//target="_blank"：新开一个窗口
</br>
<a href="#01">01</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>//表示一个列表
<dt>html:</dt>//标题
<dd>负责页面的结构</dd>//对标题的解释
<dt>css:</dt>
<dd>负责页面的表现</dd>
</dl>
<h3>有序列表</h3>
<ol type="A">
<li>学习ｈｔｍｌ</li>
<li>学习ｈｔｍｌ</li>
<li>学习ｈｔｍｌ</li>
</ol>
<h3>无序列表</h3>
<ul type="square">
<li>学习ｈｔｍｌ</li>
<li>学习ｈｔｍｌ</li>
<li>学习ｈｔｍｌ</li>
</ul>
<h3>表格1</h3>
<table border="1" cellpadding="20" cellspacing="20">//cellpadding="20"单元格内容离边框的距离;cellspacing="20"单元格之间的距离
<tr>//表示一行
<td>00</td>//表示此行中的一列
<td>01</td>
<td>02</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>20</td>
<td>21</td>
<td>22</td>
</tr>
</table>
<h3>表格1</h3>
<table border="1" width="500" height="300">
<thead>//表头
<tr>
<th>序号</th>//表示此行的列，内容为粗体
<th>名称</th>
<th>价格</th>
<th>数量</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" valign="middle">T0.5</td>//align="center"单元格内容水平居中;valign="middle"单元格内容垂直居中
<td>苹果</td>
<td>３２</td>
<td>１００</td>
</tr>
<tr>
<td>T1.5</td>
<td>葡萄</td>
<td>３２</td>
<td>１００</td>
</tr>
<tr>
<td>T2.5</td>
<td>西瓜</td>
<td>３２</td>
<td>１００</td>
</tr>
</tbody>
</table>
<h3>个人简历表</h3>
<table border="1">
<tr>
<th colspan="5">基本情况</th>//colspan="5"该行５列合并
</tr>
<tr>
<td width="18%">姓名</td>//占该行总长度的１８％
<td width="18%"></td>
<td width="18%">性别</td>
<td width="18%"></td>
<td rowspan="5">//rowspan="5"整个表的这一列合并５行
<img src="img/OIP-C.jpeg">
</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>
<tr>
<td>政治面貌</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
