HTML常用标签
标题 <h1>~<h6>
段落 <p>
链接<a href="" target="">
图像<img src="" alt="">
列表<ul> + <li> ; <ol> + <li> ; <dl><dt><dd>
表格<table><thead><tbody><tr><td>
表单<form><label><input><button>
框架<iframe src ="" width="" height="">
通用<div><span>
容器<header><nav><main><article><section><footer>
实例
<!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> <div> <!-- 无序列表 --> <ul> <li>1.橡皮 5块 1元/块 </li> <li>2.铅笔 5支 2元/支</li> <li>3.尺子 5个 3元/个</li> </ul> <!-- 有序列表 --> <ol> <li>1.高级橡皮 4块 1元/块 </li> <li>2.高级铅笔 5支 2元/支</li> <li>3.高级尺子 6个 3元/个</li> </ol> <!-- dl dt dd 描述列表--> <dl> <dt>橡皮</dt> <dd>擦去记忆</dd> <dt>铅笔</dt> <dd>描绘美好</dd> </dl> </div> <hr> <h3>用户注册</h3> <form action="login.php" method="post"> <p> <label for="username">账号</label> <input type="text" id="username" name="username" placeholder="不能超过8个字"> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="必须6-12位"> </p> <p> <label for="age">年龄</label> <input type="number" id="age" name="age" min="16" max="48"> </p> <p> <label for="">课程</label> <select name="noh" id=""> <optgroup label="前端" > <option value="">html</option> <option value="">css3</option> <option value="" >js</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">爱好</label> <input type="checkbox" name="like[]" value="game" id="game" checked><label for="game">玩游戏</label> <input type="checkbox" name="like[]" value="book" id="book"><label for="game">看书</label> <input type="checkbox" name="like[]" value="cards" id="cards"><label for="game">打牌</label> </p> <p> <label for="">性别：</label> <input type="radio" name="gender[]" id="male" value="male" checked><label for="male">男生</label> <input type="radio" name="gender[]" id="female" value="female"><label for="female">女生</label> </p> <p> <input type="submit" name="" value="提交"> <input type="reset" name="" value="复位"> <input type="button" name="" value="提交"> </p> </form> <table width="50%" border="1" cellpadding="5" style="border-collapse:collapse;"> <caption>库存</caption> <thead> <tr> <td>品类名</td> <td>价格</td> <td>数量</td> <td>合计</td> </tr> </thead> <tbody> <tr> <td>铅笔</td> <td rowspan="2">2</td> <td>2</td> <td>4</td> </tr> <tr> <td>橡皮</td> <td>4</td> <td>8</td> </tr> <tr> <td>钢笔</td> <td>8</td> <td>8</td> <td>64</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">总计</td> <td>76</td> </tr> </tfoot> </table> </body> </html>
点击 "运行实例" 按钮查看在线实例
