<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>标题：title</h1>
<p>段落：paragraph</p>
<hr><!--水平线：horizontal -->
<br><!--换行-->
<b>加粗文本：bold</b><br>
<i>斜体文本：italics</i><br>
<sub>下标：subscript</sub> <br>
<sup> 上标：superscript</sup><br>
<ins>插入：insert</ins><br>
<del>删除：delete</del><br>
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm"><!--可点击区域。shap规定区域的形状-->
<small>小号字体：small</small><br>
<a href="http://www.wo-com.club;">链接：link</a><br>
<img src="/images/logo.png" width="258" height="39" alt="没图片时显示文字"/><br><!--图片：image-->
<form action="demo_form.php" method="post/get">
<input type="button" value="按钮"><!--按钮-->
<input type="text" name="email"><!--文本框-->
<input type="password"><!--密码框-->
<input type="checkbox" checked="checked" name="b"> <!--复选 预选-->
<input type="checkbox" name="b"> <!--复选-->
<input type="radio" checked="checked" name="a"> <!--单选-->
<input type="radio" name="a"> <!--单选-->
<input type="submit" value="发送"> <!--发送按钮-->
<input type="reset" value="重置"> <!--重置-->
<input type="hidden"> <!--隐藏域-->
<p hidden="hidden">这是一段隐藏的段落。</p>
加密: <keygen name="security">
<p>http://www.runoob.com/html/html5-webstorage.html 记录点击次数</p>
<select><!--文本域-->
<option>苹果</option>
<option selected="selected">香蕉</option>
<option selected>樱桃</option><!--预选-->
</select>
<br>
<textarea name="comment" rows="3" cols="20"></textarea><!--文本域-->
</form>
<p>HTML 区块元素 块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例:<!-- <h1>, <p>, <ul>, <table>, <div>容器--></p>
<p>HTML 内联元素 在显示时通常不会以新行开始实例: <!--<b>, <td>, <a>, <img>,<span>容器--></p>
<p style="background-color:#FFaa00">通过十六进制设置背景颜色</p>
<p style="background-color:rgb(255,255,0)">通过 rbg 值设置背景颜色</p>
<p style="background-color:yellow">通过颜色名设置背景颜色</p>
<video width="200" height="180" controls><!--视频-->
<source src="movie.mp4" type="video/mp4">
</object>
</video>
<br>
<audio controls><!--音频-->
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
您的浏览器不支持该音频格式。
</audio>
<br>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #f29;">
画布
</canvas><br>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-5;fill-rule:evenodd;">
</svg><!--矢量图形-->
<br>
<iframe src="demo_iframe.htm" width="200" height="50">框架 内部网页</iframe>
<table border="1">
<caption>表格标题</caption>
<tr>
<th>表头：heading</th>
<th>表头</th>
<td rowspan="2">跨列</td>
</tr>
<tr>
<td>表格</td>
<td>表格：table</td>
</tr>
<tr>
<th bgcolor="blue" align="left" >Name</th><!--表格背景颜色 对齐-->
<th colspan="2">跨行</th>
</tr>
</table>
<!--无序列表-->
<ul style="list-style-type:disc"><!--实心圆-->
<ul style="list-style-type:circle"><!--空心圆-->
<ul style="list-style-type:square"><!--方形圆-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol start="20"><!--有序列表任意值开始-->
<ol type="I"><!--不同类型 i-->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<dl><!--自定义列表-->
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>