ASCII码 ASCII码

有序列表、无序列表、定义列表、a标签、图片标签、视频标签、表格标签、表单标签

发布于:2022-05-06 01:31:26  栏目:技术文档

实例

<!DOCTYPEhtml>
<htmllang="en">

<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
tbodytr: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>
<ahref="http://www.baidu.com/"target="_blank">我的网站</a>
<ahref="www.baidu.com">非正规写法</a>
<!--相对路径-->
<ahref="./markdown.md">第一天的作业markdown简单写法</a>
<hr>
<!--多媒体标签-->
<h2>图片标签</h2>
<imgsrc="./images/jiankou.webp"alt="五一爬箭扣"title="五一游玩爬箭扣"width="500px">
<h2>视频标签</h2>
<videosrc="./vidio/video.mp4"controls="controls"height="500px"poster="./images/u.webp"></video>
<h2>进度标签</h2>
<progressmin="1"max="100"value="50"></progress>
<h2>meter标签</h2>
<metervalue="3"min="0"max="10">密码强度</meter>
<metervalue="20"min="0"max="100"low="30"high="80"optimum="100"></meter>>
<h2>表格标签</h2>
<tableborder="1"width="800px"align="center"cellspacing="0"cellpadding="10">
<caption>
<h3>自我介绍</h3>
</caption>
<tr>
<tdwidth="15%">姓名</td>
<tdwidth="25%"align="center">陈桥驿</td>
<tdwidth="10%">性别</td>
<tdwidth="30%"align="right">男</td>
<tdwidth="20%"rowspan="2"><imgsrc="./images/jiankou.webp"alt=""width="80px"></td>
</tr>
<tr>
<td>电话</td>
<td></td>
<td>年龄</td>
<td></td>
<!--<td>照片</td>-->
</tr>
<tr>
<td>自我介绍</td>
<tdcolspan="4"bgcolor="blue"></td>
<!--<td></td>
<td></td>
<td></td>-->
</tr>
<tr>
<td>项目介绍</td>
<tdcolspan="4"></td>
<!--<td></td>
<td></td>
<td></td>-->
</tr>
</table>
<hr>
<tableborder="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>
<tdcolspan="3"align="right">
<ahref="#">首页</a>
<ahref="#">上一页</a>
<ahref="#">下一页</a>
<ahref="#">末页</a>
</td>
<!--<td></td>
<td>1</td>-->
</tr>
</tfoot>


</table>

<hr>
<h2>表单</h2>
<formaction=""method="get">
用户名:
<inputtype="text"name="username"placeholder="请输入用户名"au><br>密码:
<inputtype="password"name="password"placeholder="数字+字组组合"><br>
<inputtype="radio"name="sex"value="nan"id="nan"checked><labelfor="nan">男</label>
<inputtype="radio"name="sex"value="nv"id="nv"><labelfor="nv">女</label>
<inputtype="radio"name="sex"value="baomi"id="baomi"><labelfor="baomi">保密</label>
<br>

<inputtype="checkbox"name="xingqu[kanshu]"value=""id="kanshu"><labelfor="kanshu">看书</label>
<inputtype="checkbox"name="xingqu[play]"value=""id="play"><labelfor="play">玩游戏</label>
<inputtype="checkbox"name="xingqu[zi]"value=""id="zi"><labelfor="zi">码字</label>
<inputtype="checkbox"name="xingqu[yundong]"value=""id="yundong"checked><labelfor="yundong">健身运动</label>


<br>
<inputtype="file"name="file">
<br>
<inputtype="reset"name=""value="重置按钮">
<inputtype="button"name=""value="按钮">
<button>提交按钮</button>
<buttontype="submit">提交按钮</button>
<buttontype="button">提交按钮</button>

<inputtype="submit"value="提交">
<hr>
<textareaname="jianyi"id=""cols="60"rows="10"></textarea><br>
<selectname=""id="">
<optionvalue="">初中</option>
<optionvalue="">高中</option>
<optionvalue="">技校</option>
<optionvalue=""selected>大专</option>
<optionvalue="">本科</option>
</select>
</form>
</body>

</html>
运行实例 »

点击 "运行实例" 按钮查看在线实例

相关推荐
阅读 +