博主信息
博文 21
粉丝 0
评论 0
访问量 24177
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
语义化文本元素
MUZILE
原创
770人浏览过

语义化文本元素

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. 示例

  • 运行效果

效果图

  • 示例代码
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>语义化文本元素</title>
  7. </head>
  8. <body>
  9. <time>2020-03-09 18:22:42</time>
  10. <p>HTML元素是页面是具体显示的内容,如标题,段落,图片等</p>
  11. <!--缩写文本下有虚线,完整信息在标签的title属性中,鼠标悬停会显示title中的描述信息-->
  12. <p>
  13. <abbr title="HyperText Markup Language">HTML</abbr
  14. >文档,是指采用超文本标记语言编写的结构化文档
  15. </p>
  16. <!--上标与下标-->
  17. <p>
  18. 2<sup>4</sup> = 16
  19. <br />
  20. php中文网<sub style="color: gray">国内最大的php与web开发资源分享平台</sub
  21. >PHP.CN
  22. </p>
  23. <!--地址, 默认会换行,并斜体显示-->
  24. <footer>
  25. 联系地址:
  26. <address>合肥市政务新区怀宁路999号</address>
  27. </footer>
  28. <!--删除线-->
  29. <p>猪肉原价: <del>58.88元</del>, 现价: <strong>49.99元</strong></p>
  30. <!--代码, 通常与pre配合-->
  31. <p>
  32. <code>
  33. const username = 'admin';
  34. </code>
  35. </p>
  36. <p>
  37. <!-- 如果浏览器不支持该标,则显示内部文本: 已完成 50%-->
  38. <progress value="50" max="100">已完成 50% </progress>
  39. </p>
  40. <p>
  41. <!-- 强调:-->
  42. <strong>重复其实是最快的学习方法</strong>
  43. <br />
  44. <em>编程能力是培训逻辑思维的有效方式</em>
  45. </p>
  46. <!--标注-->
  47. <p>我是php中文网的讲师: <mark>朱老师(Peter Zhu)</mark></p>
  48. <!--引用-->
  49. <p>
  50. <!-- 短引用: 文本添加引号 -->
  51. <q>引用文本</q>
  52. </p>
  53. <!-- 长引用: 缩进表示 -->
  54. <blockquote cite="https://www.php.cn">
  55. <p>
  56. 超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。
  57. 这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。
  58. 这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便
  59. </p>
  60. </blockquote>
  61. </body>
  62. </html>
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学