语义化的文本元素, 连接元素, 列表元素, 图像元素, 表格元素
实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <!-- p标签: 标记一个段落,会独占文档的一行 --> <p>This is a "p" tag</p> <hr> <!-- pre标签: 预格式化的文本, 对空格,tab 有效 --> <pre>演示pre标签 <-可以隔空</pre> <hr> <!-- time标签: 定义时间日期 --> <time>2020-04-03</time><br> <hr> <!-- abbr标签: 标记缩写的单词 --> <abbr title="Hyper Text Markup Language">HTML</abbr> <hr> <!-- address标签: 用于定义文档/文章作者联系信息 --> <address> 作者: Tom <br> 访问我们: tom@qq.com<br> USA </address> <hr> <!-- code标签: 用于定义计算机代码文本 --> <code>一段计算机代码内容</code> <div style="height: 20px;background: #ccc;text-align: center;">分割线</div> <!-- a标签: 跳转到某个网站连接(url) _blank在新选卡打开, _self在当前选项卡打开会覆盖--> <a href="http://www.baidu.com" target="_blank">百度一下</a> <hr> <!-- ul和li标签: 无序列表 --> <ul> <li>苹果</li> <li>雪梨</li> <li>芒果</li> </ul> <hr> <!-- ol和li标签: 有序列表 定义start属性从3开始,默认是从1开始 --> <ol start="3"> <li>牛奶</li> <li>面包</li> <li>饼干</li> </ol> <hr> <!-- dl,dt,dd标签: 项目描述列表 --> <dl> <dt>厨房</dt> <dd>冰箱</dd> <dd>微波炉</dd> <dt>客厅</dt> <dd>电视机</dd> <dd>空调</dd> </dl> <hr> <!-- img标签: 插入图像 src属性:图片的路径或者url --> <img src="" alt="图片描述"> <hr> <!-- table tr th td therd tbody tfoot caption colgroup->col 表格 --> <table width="500" align="center" border="1" cellpadding="5" cellspacing="0"> <caption>课程信息表</caption> <thead> <tr> <th>ID</th> <th>课程</th> <th>时间</th> <th>状态</th> </tr> </thead> <tbody> <tr> <td>1</td> <td rowspan="2">PHP</td> <td>2020-04-03</td> <td>正常</td> </tr> <tr> <td>2</td> <!-- <td>JavaScript</td> --> <td>2020-04-05</td> <td>正常</td> </tr> <tr> <td>3</td> <td>Jquery</td> <td>2020-04-09</td> <td>正常</td> </tr> <tr> <td>4</td> <td>CSS</td> <td>2020-04-06</td> <td>正常</td> </tr> <tr> <td>5</td> <td>HTML</td> <td>2020-04-07</td> <td>正常</td> </tr> </tbody> <tfoot> <tr bgcolor="wheat"> <td>备注: </td> <td colspan="3">请提前10分钟上课</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
