实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
tbody tr:hover {
background-color: darkgray;
}
</style>
</head>
<body>
<h2>有序列表</h2>
<ol>
<li>多喝水</li>
<li>多运动</li>
<li>多补充能量</li>
<li>多学习</li>
</ol>
<h2>无序列表</h2>
<ul>
<li>少玩手机</li>
<li>少玩游戏</li>
<li>少做无意义的事</li>
<li>少浪费时间</li>
</ul>
<hr>
<h2>定义列表</h2>
<dl>
<dt>关于我们</dt>
<dd>联系我们</dd>
<dd>公司实力</dd>
</dl>
<hr>
<a href="http://www.baidu.com/" target="_blank">我的网站</a>
<a href="www.baidu.com">非正规写法</a>
<!-- 相对路径 -->
<a href="./markdown.md">第一天的作业 markdown简单写法</a>
<hr>
<!-- 多媒体标签 -->
<h2>图片标签</h2>
<img src="./images/jiankou.webp" alt="五一爬箭扣" title="五一游玩爬箭扣" width="500px">
<h2>视频标签</h2>
<video src="./vidio/video.mp4" controls="controls" height="500px" poster="./images/u.webp"></video>
<h2>进度标签</h2>
<progress min="1" max="100" value="50"></progress>
<h2>meter标签</h2>
<meter value="3" min="0" max="10">密码强度</meter>
<meter value="20" min="0" max="100" low="30" high="80" optimum="100"></meter>>
<h2>表格标签</h2>
<table border="1" width="800px" align="center" cellspacing="0" cellpadding="10">
<caption>
<h3>自我介绍</h3>
</caption>
<tr>
<td width="15%">姓名</td>
<td width="25%" align="center">陈桥驿</td>
<td width="10%">性别</td>
<td width="30%" align="right">男</td>
<td width=" 20% " rowspan="2 "><img src="./images/jiankou.webp " alt=" " width="80px "></td>
</tr>
<tr>
<td>电话</td>
<td></td>
<td>年龄</td>
<td></td>
<!-- <td>照片</td> -->
</tr>
<tr>
<td>自我介绍</td>
<td colspan="4 " bgcolor="blue"></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td>项目介绍</td>
<td colspan="4 "></td>
<!-- <td></td>
<td></td>
<td></td> -->
</tr>
</table>
<hr>
<table border="1" width="800px" align="center" cellspacing="0">
<caption>
<h3>会员表</h3>
</caption>
<thead>
<tr>
<th>编号</th>
<th>会员名称</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>陈桥驿</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>陈桥驿</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>陈桥驿</td>
<td>男</td>
</tr>
<tr>
<td>1</td>
<td>陈桥驿</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">
<a href="#">首页 </a>
<a href="#">上一页 </a>
<a href="#">下一页 </a>
<a href="#">末页</a>
</td>
<!-- <td></td>
<td>1</td> -->
</tr>
</tfoot>
</table>
<hr>
<h2>表单</h2>
<form action="" method="get">
用户名：
<input type="text" name="username" placeholder="请输入用户名" au ><br> 密码：
<input type="password" name="password" placeholder="数字+字组组合"><br>
<input type="radio" name="sex" value="nan" id="nan" checked><label for="nan">男</label>
<input type="radio" name="sex" value="nv" id="nv"><label for="nv">女</label>
<input type="radio" name="sex" value="baomi" id="baomi"><label for="baomi">保密</label>
<br>
<input type="checkbox" name="xingqu[kanshu]" value="" id="kanshu"><label for="kanshu">看书</label>
<input type="checkbox" name="xingqu[play]" value="" id="play"><label for="play">玩游戏</label>
<input type="checkbox" name="xingqu[zi]" value="" id="zi"><label for="zi">码字</label>
<input type="checkbox" name="xingqu[yundong]" value="" id="yundong" checked><label for="yundong">健身运动</label>
<br>
<input type="file" name="file">
<br>
<input type="reset" name="" value="重置按钮">
<input type="button" name="" value="按钮">
<button>提交按钮</button>
<button type="submit">提交按钮</button>
<button type="button">提交按钮</button>
<input type="submit" value="提交">
<hr>
<textarea name="jianyi" id="" cols="60" rows="10"></textarea><br>
<select name="" id="">
<option value="">初中</option>
<option value="">高中</option>
<option value="">技校</option>
<option value="" selected>大专</option>
<option value="">本科</option>
</select>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例