实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <body> <!--块标签，始终占据一行--> <div>我爱编程</div> <!--段落标签--> <p> <!--标题标签--> <h1>朱自清散文 匆匆</h1> <!--字体加粗标签--> <strong style="background-color:black;color:blueviolet;">燕子去了，有再来的时候；</strong> <!--字体倾斜标签--> <em style="background-color:blueviolet;color:burlywood;">杨柳枯了，有再青的时候；桃花谢了，有再开的时候。</em> <div>但是，聪明的，你告诉我，我们的日子为什么一去不复返呢？ ——是有人偷了他们罢：那是谁？又藏在何处呢？是他们自己逃走了：现在又到了哪里呢？</div> </p> <h2>我的爱好</h2> <!--无序列表标签--> <ul> <li>游泳</li> <li>健身</li> <li>音乐</li> </ul> <h2>星期</h2> <!--有序列表标签--> <ol> <li>星期一</li> <li>星期二</li> <li>星期三</li> </ol> <!--自定义列表--> <dl> <dt>动物</dt> <dd>鸡鸭鹅</dd> <dt>植物</dt> <dd>花草树</dd> </dl> <!--表格标签--> <table border="1px" cellpadding="5" cellspacing="0" width="300"> <caption style="font: size 1.2rem;margin-bottom: 10px;">购物车</caption> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>用途</th> </tr> </thead> <tbody align="center"> <tr> <td>1</td> <td>苹果</td> <td>6元</td> <td>吃</td> </tr> <tr> <td>2</td> <td>玩具</td> <td>16元</td> <td>玩</td> </tr> <tr> <td>1</td> <td>书</td> <td>20元</td> <td>看</td> </tr> </tbody> </table> <!--表单标签--> <h2>用户注册</h2> <form action="" method="GET"> <div> <lable for="username">用户名：</lable> <input type="text" id="username" value="" placeholder="用户名不能少于6位"> </div> <div> <label>密码：<input type="password" name="password" placeholder="密码必须包括数字和字母" size="30"></label> </div> <div> <input type="radio" name="gender" value="male" id="male"><label for="male">男</label> </lable><input type="radio" name="gender" value="female" id="female"><label for="female"></label>女</lable> </div> <div> <!--复选框--> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label> <input type="checkbox" name="hobby[]" value="programe" id="programe" checked><label for="编程">编程</label> </div> <div> <label for="edu">你的学历：</label> <select name="edu" id="edu"> <option value="1">幼儿园</option> <option value="2">小学生</option> <option value="3">大学生</option> </select> </div> <div> <label id="common">留言</label> <textarea name="common" id="common" cols="30" rows="10" placeholder="请您留言"></textarea> </div> <input type="submit" value="注册"> <input type="reset" value="重置"> </form> <!--照片--> <img src="static/images/1.jpg" alt="帅哥" width="100"> <!--视频--> <video src="static/images/Q.mp4" controls="controls" width="100"></video> </body> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例