语义化文本元素
1. 常用文本元素
| 标签 |
描述 |
<p> |
段落内容 |
<pre> |
按源码格式原样显示 |
<br> |
换行(源码中的换行会被解析来空格) |
<span> |
与<div>类似,无语义, 主要用作内容的样式钩子 |
<time> |
描述日期或时间 |
<abbr> |
缩写 |
<sub> |
下标 |
<sup> |
上标 |
<address> |
地址,通常用在<footer>中 |
<s> / <del> |
删除线, <s>无语义 |
<code> |
显示代码块,通常与代码格式化插件配合,才能高亮关键字 |
<progress> |
进度条 |
<b> / <strong> |
加粗, <b>无语义 |
<i> / <em> |
斜体, <i>无语义 |
<mark> |
高亮标记, 默认为内容添加黄色背景 |
<q> / <blockquote> |
引用, 内容加双引号 |
2. 示例
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>语义化文本元素</title> </head> <body> <time>2020-03-09 18:22:42</time> <p>HTML元素是页面是具体显示的内容,如标题,段落,图片等</p> <!--缩写文本下有虚线,完整信息在标签的title属性中,鼠标悬停会显示title中的描述信息--> <p> <abbr title="HyperText Markup Language">HTML</abbr >文档,是指采用超文本标记语言编写的结构化文档 </p> <!--上标与下标--> <p> 2<sup>4</sup> = 16 <br /> php中文网<sub style="color: gray">国内最大的php与web开发资源分享平台</sub >PHP.CN </p> <!--地址, 默认会换行,并斜体显示--> <footer> 联系地址: <address>合肥市政务新区怀宁路999号</address> </footer> <!--删除线--> <p>猪肉原价: <del>58.88元</del>, 现价: <strong>49.99元</strong></p> <!--代码, 通常与pre配合--> <p> <code> const username = 'admin'; </code> </p> <p> <!-- 如果浏览器不支持该标,则显示内部文本: 已完成 50%--> <progress value="50" max="100">已完成 50% </progress> </p> <p> <!-- 强调:--> <strong>重复其实是最快的学习方法</strong> <br /> <em>编程能力是培训逻辑思维的有效方式</em> </p> <!--标注--> <p>我是php中文网的讲师: <mark>朱老师(Peter Zhu)</mark></p> <!--引用--> <p> <!-- 短引用: 文本添加引号 --> <q>引用文本</q> </p> <!-- 长引用: 缩进表示 --> <blockquote cite="https://www.php.cn"> <p> 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。 这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。 这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便 </p> </blockquote> </body></html>
