HTMl常用标签一般分为以下这几类
1. 标题与段落
例如：h1，p
2. 文本修饰
例如：em，strong
3. 列表
例如：ul>li (无序) ， ol>li （有序） ,dl>li （定义）
4. 表格
例如：table>tr>td
5. 表单
例如：from>label>input
6. 图片与媒体
例如：img , vedio
7. 布局标签
8. 其它...
实例
<!DOCTYPE html> <html lang="en"> <!-- HTML头部标签 --> <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>HTML常用标签总结</title> </head> <body> <!-- HTML常用的标签 1. 标题与段落 <h1><h2><h3><h4><h5><h6>常用于修饰标题 <p>段落标签，块级元素 2. 文本修饰 3. 列表 4. 表格 5. 表单 6. 图片与媒体 7. 布局标签 8. 其它... --> <div> <h1>我是H1标签</h1> <h2>我是H2标签</h2> <h3>我是H3标签</h3> <h4>我是H4标签</h4> <h5>我是H5标签</h5> <h6>我是H6标签</h6> <p>我是段落P标签</p> </div> <div> <hr> hr标签是单标签，一条水平线 <hr> </div> <div> <p><strong>我是文本加粗标签strong</strong></p> <p><em>我是斜体标签em</em></p> </div> <hr> <!-- 列表 --> <div> <!-- 无序列表 --> <h3>无序列表</h3> <ul> <li>我是无序列表的第一行</li> <li>我是无序列表的第二行</li> <li>我是无序列表的第三行</li> </ul> <!-- 有序列表 --> <ol> <li>我是有序列表的第一行</li> <li>我是有序列表的第三行</li> <li>我是有序列表的第二行</li> </ol> <!-- 定义列表 --> <dl> <dt>我是定义列表的dt标签</dt> <dd>我是定义列表的dd标签</dd> </dl> </div> <hr> <!-- 4. 表格 --> <table border="1" cellpadding="0" cellspacing="0" width="500" height="150"> <caption>购物车</caption><!-- table里的标签 --> <!-- 表头 --> <thead> <tr bgcolor="lightblue"> <th>序号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>用途</th> </tr> </thead> <tr> <td align="center">1</td> <td align="center">暖手宝一个</td> <td align="center">30</td> <td align="center">1</td> <td align="center">被窝太冷</td> </tr> <!-- align="center"可以用到tr上再加方便 --> <tr align="center"> <td>2</td> <td>笔记本电脑一台</td> <td>5000</td> <td>1</td> <td>学php编程</td> </tr> <tr align="center"> <td>3</td> <td>充气娃娃一个(波波款)</td> <td>2000</td> <td>1</td> <td>孤枕难眠</td> </tr> </table> <hr> <!-- 5. 表单 --> <h2>用户注册</h2> <form action="" method="GET"> <!-- action为传值的URl method为传值方式（GET/POST） --> <div> <!-- 用户名: --> <label for="username">用户名:</label> <!-- name和value属性应该成对出现,将用户数据以名值对的形式提交到服务器上指定脚本处理 --> <!-- placeholder: 用户于设置文本框的提示文本 --> <input type="text" id="username" name="username" value="" placeholder="不少于6位"> </div> <div> <!-- 可以将input控件写在label里，可以不用做for，id绑定 --> <label> <!-- password类型,输入的内容以*号占位符代替 --> 密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <label> 确认密码: <input type="password" name="password" value="" placeholder="必须包括字母数字大小写" size="30"> </label> </div> <div> <!-- 单选按钮,每一组的name属性值必须相同,才会只返回唯一值,并自动设置它的checked属性 --> <!-- 可以事先用checked属性设置默认选中值, 标签文本与value值不必相同,value才是提交到后端的数据 --> <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> </div> <div> <!-- 复选框 --> <!-- 将提示文本全部放在label标签中,确保点击标签文本,也可以选中对应的复选框 --> <!-- 一组复选框的name属性必须是相同的, 应该使用数组的语法,因为可以同时选择多个 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="smoke" id="smoke"><label for="smoke">抽烟</label> <!-- 同样也是使用checked设置默认值,可同时设置多个 --> <input type="checkbox" name="hobby[]" value="programme" id="programme" checked><label for="programme">撸代码</label> </div> <div> <!-- 下拉列表,name固定,但value是动态的,select中的value根据内部的option选中状态变化 --> <label for="edu">您的学历:</label> <select name="" id="edu" value=""> <option value="1">幼儿园算吗?</option> <!-- selected设置默认项 --> <option value="2" selected>小学没毕业</option> <option value="3">不好意思,博士后</option> </select> </div> <!-- 文本域,其实就是多行文本框 --> <div> <label for="common">请留言:</label> <textarea name="" id="common" cols="30" rows="10" placeholder="不超过100字" value=""></textarea> </div> <!-- 按钮 --> <input type="submit" value="提交"> <!-- 重置功能极少用到,推荐不要再使用,而是通过其它方式 --> <input type="reset" value="重置"> <!-- 推荐使用语义化的button标签 --> <!-- button默认类型为提交submit,通常是修改为button类型,最后通过ajax异步提交表单 --> <button type="button">注册</button> </form> <!-- 6. 图片与媒体 --> <div> <!-- 图片标签是单标签,引入的是外部的资源 src="图片地址", 支持本地和网络url地址 alt="提示文本", 当图片不能显示或被用户禁用时显示它,seo优化也会用到它 --> <img src="static/images/zly.jpg" alt="颖***" width="200"> <!-- 播放视频:controls显示播放控件, 支持宽度设置 --> <video src="static/images/demo.mp4" controls="controls" width="400"></video> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码中设计的知识点总结：
1.HTML中的标签类别
2.HTML中各种单双标签的使用示例
