Collection
Collection
html标签是整个web页面开发的基础，掌握标签的使用可以是页面布局变得更加熟练轻松，本篇将对常见的html标签的使用方法及特点进行总结
一、标题和段落
<!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>html常用标签</title> </head> <body> <!-- 标题与段落 --> <div> <h1>标题的七个型号</h1> <h2>标题的七个型号</h2> <h3>标题的七个型号</h3> <h4>标题的七个型号</h4> <h5>标题的七个型号</h5> <h6>标题的七个型号</h6> <h7>标题的七个型号</h7> <p>这是一个段落</p> </div> <!-- 水平分割线 --> <hr />
点击 "运行实例" 按钮查看在线实例
二、文本修饰
<!-- 文本修饰 --> <div> <p>素胚<strong>勾勒</strong>出<font style="color:aquamarine">青花</font> </p> <p><em style="color:cornflowerblue">笔锋</em>浓转淡</p> </div> <hr />
点击 "运行实例" 按钮查看在线实例
三、三种不同的列表
<h3>奥特曼</h3> <ul> <li>奥特之父 85吨 是所有奥特曼的爸爸</li> <li>泰罗 78吨 第六个奥特之子 </li> <li>赛文 68吨 住在M78星云</li> </ul> <!-- 有序列表 带有序号的列表 --> <ol> <li>奥特之父 85吨 是所有奥特曼的爸爸</li> <li>泰罗 78吨 第六个奥特之子 </li> <li>赛文 68吨 住在M78星云</li> </ol> <!-- 定义列表 类似于名词解释 常用于友情链接--> <dl> <dt>吴彦祖</dt> <dd>全栈工程师</dd> <dt>彭于晏</dt> <dd>前端工程师</dd> <dt>鹿城辉</dt> <dd>php攻城狮</dd> </dl> <hr>
点击 "运行实例" 按钮查看在线实例
四、表格元素大全
<!-- 表格元素大全 --> <table border="1px" cellpadding="25px" cellspacing="0px"> <!-- caption表示表格标题 --> <caption>奥特曼大全</caption> <!-- thead表示表头 --> <thead> <tr bgcolor="#ccc"> <th>名称</th> <th>体重</th> <th>说明</th> </tr> </thead> <!-- tbody表示表内容 --> <tbody> <tr align="center"> <td>奥特之父</td> <td>85吨</td> <td>是所有奥特曼的爸爸</td> </tr> <tr align="center"> <td>泰罗</td> <td>78吨</td> <td>第六个奥特之子</td> </tr> <tr align="center"> <td>赛文</td> <td>68吨</td> <td>住在M78星云</td> </tr> </tbody> </table>
点击 "运行实例" 按钮查看在线实例
五、表单元素集合
<!-- 表单元素（控件）集合 --> <form action="" method="POST"> <!-- input框 文本 --> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" placeholder="请输入用户名" /> </div> <!-- input框 密码 --> <div> <label for="password">密码： <input type="password" name="password" placeholder="密码" size="30" /> </label> </div> <!-- 单选按钮 --> <div> 请选择性别：<input type="radio" value="man" name="sex" checked id="man" /><label for="man">男</label> <input type="radio" value="woman" name="sex" id="woman" /><label for="woman">女</label> </div> <!-- 复选框 --> <div> <input type="checkbox" name="hobby[]" id="hip-hop"><label for="hip-hop">嘻哈</label> <input type="checkbox" name="hobby[]" id="R&b"><label for="R&b">R&B</label> <input type="checkbox" name="hobby[]" id="blue"><label for="">蓝调</label> <input type="checkbox" name="hobby[]" id="pop"><label for="pop">波普</label> </div> <!-- 下拉选择框 --> <div> <select name="teachers"> <option value="1">热狗</option> <option value="2">潘玮柏</option> <option value="3">那英</option> <option value="4">李健</option> </select> </div> <!-- 文本域 --> <textarea name="content" id="content" cols="30" rows="10" placeholder="请描述你的梦想"></textarea> <!-- 提交和重置按钮 --> <input type="submit" value="提交"> <input type="reset" value="重置"> </form>
点击 "运行实例" 按钮查看在线实例
六、图片和媒体标签
<!-- 图片和媒体 --> <img src="http://img1.imgtn.bdimg.com/it/u=3501276081,4095749234&fm=11&gp=0.jpg" alt="杨超越"> <video src="blob:https://www.bilibili.com/f47375c3-b3cc-45d3-84d7-20dc60d394a0" controls="controls"></video>
点击 "运行实例" 按钮查看在线实例
细节总结：1，有序列表会自带一个序号。2，label标签for必须和解释内容id绑定或者是将内容直接放入标签内部时才算绑定成功 。3，复选框提交的值将是一组值，所以必须在name值后加【】。
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
