html文档中常用的标签
1. 标题与段落
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hellow world</title> </head> <body> <div> <h1>不同大小h1~h6测试</h1> <!--标题标签--> <h1>h1 size</h1> <h2>h2 size</h2> <h3>h3 size</h3> <h4>h4 size</h4> <h5>h5 size</h5> <h6>h6 size</h6> <hr /> <p>段落</p> <p>标签定义段落。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。</p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 文本修饰
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background-color: dodgerblue"> <p style="font-size: 1.5rem;color: lawngreen;">php.cn</p> </div> <hr /> <p>大家一起<strong style="background-color: black;color: white;font-size: 1.5rem;">过新年</strong></p> <hr /> <p>斜体标签<xmp><em></em></xmp></p> <p>加粗显示</p><xmp><strong></strong></xmp> <p>style样式</p><xmp>backgroud-color;文字背景色</xmp> <xmp>color;文字颜色</xmp> <xmp>font-size;文字大小</xmp> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 列表
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 4. 表格 --> <!--表格是最重要的格式化数据的工具 其实上面的列表内容,非常适合用表格来展示 经过分析, 上面列表加上表头需要一个四行四列的表格进行展示 完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td 表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) 表格中的各个标签支持一些属性设置,不过推荐用css去设置,这里咱们先了解一下这些原生属性--> <table border="1" cellspacing="0" cellpadding="5" width="500px" height="300px"> <tr> <th>名称</th> <th>价格</th> <th>颜色</th> </tr> <tr> <td>暖手宝</td> <td>30元</td> <td style="background-color:blue;">蓝色</td> </tr> <tr> <td>暖水瓶</td> <td>20元</td> <td style="background-color: green;">绿色</td> </tr> </table> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
4. 表格
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!-- 4. 表格 --> <!--表格是最重要的格式化数据的工具 其实上面的列表内容,非常适合用表格来展示 经过分析, 上面列表加上表头需要一个四行四列的表格进行展示 完整表格,涉及标签: table,caption, thead,tbody,tfoot,tr,th,td 表格至少涉及三个标签: table(表格), tr(行), th/td(单元格) 表格中的各个标签支持一些属性设置,不过推荐用css去设置,这里咱们先了解一下这些原生属性--> <table border="1" cellspacing="0" cellpadding="5"> <tr> <th>名称</th> <th>价格</th> <th>颜色</th> </tr> <tr> <td>暖手宝</td> <td>30元</td> <td style="background-color:blue;">蓝色</td> </tr> <tr> <td>暖水瓶</td> <td>20元</td> <td style="background-color: green;">绿色</td> </tr> </table> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
5. 表单
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username" value="admin" placeholder="请输入用户名"/> </div> <div> <label for="password">密码：<input type="password" name="password" id="password" value=""/><label for="password"></label></label> </div> <hr /> <div> <label for="pw">pw<input type="pw" name="" id="pw" value="" placeholder="密码"/><label for=""></label></label> <label for="ppp"><input type="checkbox" name="ck" id="ck" value=""placeholder=""/><label for="ck"></label></label> </div> <hr /> <div> <input type="radio" name="gender" id="male" value="male" checked="checked"/><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"/><label for="female">女</label> </div> <hr /> <div> <input type="checkbox" name="box[]" id="apple" value="apple" / checked><label for="apple">苹果</label> <input type="checkbox" name="box[]" id="banana" value="banana" /><label for="banana">香蕉</label> </div> <hr /> <div> <label for="ABC">aaabbbccc</label> <select name="ABC"> <option value="a">aaa</option> <option value="b">bbb</option> <option value="c">ccc</option> <option value="d">ddd</option> </select> </div> <hr /> <div> <label for="common">textarea</label> <textarea name="common" rows="10" cols="30" placeholder="请勿超过100字" maxlength="10" ></textarea> </div> <hr /> <div> <input type="submit" name="" id="" value="提交" /> <input type="reset" name="" id="" value="重置" /> </div> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6. 图片与媒体
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="https://www.baidu.com/img/bd_logo1.png" alt="图片错误" height="100"/> <video src="http://www.w3school.com.cn/i/movie.ogg" controls="controls" width="40%"></video> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7. 布局标签
8. 其它...