HTML5引入了一系列新的文本语义标签，用于更精确地标记文本内容的含义，提高文档的语义化和可访问性。
东巴文（db-w.cn） 认为：文本语义标签让HTML不仅仅是展示文本，更是传达文本的含义和用途。
<time>标签用于标记日期或时间，使机器能够识别时间信息。
<!-- 标记日期 -->
<p>发布日期：<time datetime="2024-01-15">2024年1月15日</time></p>
<!-- 标记时间 -->
<p>会议时间：<time datetime="14:30">下午2:30</time></p>
<!-- 标记日期时间 -->
<p>活动时间：<time datetime="2024-01-15T14:30:00">2024年1月15日下午2:30</time></p>
<!-- 标记时长 -->
<p>课程时长：<time datetime="PT2H30M">2小时30分钟</time></p>
datetime属性提供机器可读的时间格式：
| 格式 | 示例 | 说明 |
|---|---|---|
| 日期 | 2024-01-15 |
YYYY-MM-DD |
| 时间 | 14:30:00 |
HH:MM:SS |
| 日期时间 | 2024-01-15T14:30:00 |
日期T时间 |
| 时区 | 2024-01-15T14:30:00+08:00 |
带时区 |
| 时长 | PT2H30M |
P表示时长，T后是时间 |
<article>
<header>
<h1>HTML5新特性详解</h1>
<p>
作者：<span>张三</span> |
发布于：<time datetime="2024-01-15" pubdate>2024年1月15日</time>
</p>
</header>
<p>文章内容...</p>
</article>
东巴文点评：<time>标签对SEO和可访问性都有帮助，搜索引擎可以更好地理解时间信息。
<mark>标签用于标记需要突出显示的文本，通常用于搜索结果高亮。
<p>搜索结果中，<mark>关键词</mark>会被高亮显示。</p>
<p>在HTML5中，<mark>语义化标签</mark>是一个重要特性。</p>
<article>
<h2>搜索结果</h2>
<p>
HTML5是HTML的最新版本，引入了许多<mark>语义化标签</mark>，
如<mark>header</mark>、<mark>nav</mark>、<mark>article</mark>等。
</p>
</article>
| 标签 | 用途 | 示例 |
|---|---|---|
<mark> |
突出显示 | 搜索结果高亮 |
<strong> |
重要文本 | 强调重要性 |
<em> |
强调文本 | 语气强调 |
<b> |
粗体文本 | 视觉加粗 |
东巴文点评：<mark>标签是HTML5新增的，专门用于标记需要引起注意的文本。
<ruby>标签用于标记注音（拼音或注音符号），主要用于东亚文字。
<ruby>
汉<rt>hàn</rt>
字<rt>zì</rt>
</ruby>
<ruby>
汉
<rp>(</rp>
<rt>hàn</rt>
<rp>)</rp>
字
<rp>(</rp>
<rt>zì</rt>
<rp>)</rp>
</ruby>
<article>
<h1>东巴文学习</h1>
<p>
<ruby>
东<rt>dōng</rt>
巴<rt>bā</rt>
文<rt>wén</rt>
</ruby>
是一个编程学习平台。
</p>
<p>
<ruby>
编<rt>biān</rt>
程<rt>chéng</rt>
</ruby>
是一项重要的技能。
</p>
</article>
| 标签 | 说明 |
|---|---|
<ruby> |
注音容器 |
<rt> |
注音文本 |
<rp> |
括号（不支持ruby时显示） |
东巴文点评：<ruby>标签对中文学习网站、字典网站非常有用。
<bdi>标签用于隔离双向文本，防止文本方向相互影响。
<ul>
<li>用户 <bdi>إيان</bdi>：90分</li>
<li>用户 <bdi>Julia</bdi>：85分</li>
<li>用户 <bdi>张三</bdi>：95分</li>
</ul>
<!-- 没有bdi -->
<p>用户 إيان：90分</p>
<!-- 阿拉伯文会影响到后面的文字方向 -->
<!-- 使用bdi -->
<p>用户 <bdi>إيان</bdi>：90分</p>
<!-- 阿拉伯文被隔离，不影响周围文字 -->
<!-- 评论列表 -->
<div class="comments">
<div class="comment">
<strong><bdi>张三</bdi></strong>：这篇文章写得很好！
</div>
<div class="comment">
<strong><bdi>إيان</bdi></strong>：Great article!
</div>
</div>
东巴文点评：<bdi>标签在多语言网站中非常重要，可以防止文本方向混乱。
<bdo>标签用于覆盖文本的默认方向。
<!-- 从左到右 -->
<p><bdo dir="ltr">从左到右的文本</bdo></p>
<!-- 从右到左 -->
<p><bdo dir="rtl">从右到左的文本</bdo></p>
<article>
<h2>文本方向示例</h2>
<!-- 正常方向 -->
<p>这是正常的文本方向。</p>
<!-- 反向显示 -->
<p><bdo dir="rtl">这是反向显示的文本。</bdo></p>
<!-- 阿拉伯文 -->
<p><bdo dir="rtl">مرحبا بالعالم</bdo></p>
</article>
| 值 | 说明 |
|---|---|
ltr |
从左到右 |
rtl |
从右到左 |
东巴文点评：<bdo>标签可以强制改变文本方向，但使用时要谨慎。
<wbr>标签表示换行机会，告诉浏览器在哪里可以换行。
<!-- 长URL -->
<p>访问我们的网站：https://www<wbr>.example<wbr>.com<wbr>/very<wbr>/long<wbr>/path</p>
<!-- 长单词 -->
<p>这是一个超长的单词：Supercalifragilistic<wbr>expialidocious</p>
<div style="width: 200px; border: 1px solid #ccc;">
<!-- 没有wbr -->
<p>https://www.example.com/very/long/path/to/resource</p>
<!-- 有wbr -->
<p>https://www<wbr>.example<wbr>.com<wbr>/very<wbr>/long<wbr>/path<wbr>/to<wbr>/resource</p>
</div>
| 标签 | 说明 |
|---|---|
<br> |
强制换行 |
<wbr> |
建议换行点 |
东巴文点评：<wbr>标签在响应式设计中很有用，可以避免长单词或URL破坏布局。
<data>标签用于将内容与机器可读的值关联。
<!-- 产品价格 -->
<p>产品价格：<data value="99.99">99.99元</data></p>
<!-- 产品ID -->
<p>产品编号：<data value="PROD-12345">PROD-12345</data></p>
<ul>
<li>
<data value="1001">iPhone 15</data> -
<data value="6999">6999元</data>
</li>
<li>
<data value="1002">MacBook Pro</data> -
<data value="12999">12999元</data>
</li>
</ul>
| 标签 | 用途 |
|---|---|
<time> |
时间日期 |
<data> |
通用数据 |
东巴文点评：<data>标签为脚本和搜索引擎提供了结构化数据。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5文本语义标签示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
mark {
background-color: #fff3cd;
padding: 2px 4px;
border-radius: 3px;
}
ruby {
ruby-align: center;
}
rt {
font-size: 0.7em;
color: #666;
}
.example-box {
background: #f5f5f5;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
</style>
</head>
<body>
<article>
<header>
<h1>HTML5文本语义标签详解</h1>
<p>
作者：张三 |
发布时间：<time datetime="2024-01-15T10:30:00">2024年1月15日上午10:30</time>
</p>
</header>
<section>
<h2>什么是文本语义标签</h2>
<p>
HTML5引入了一系列<mark>文本语义标签</mark>，
用于更精确地标记文本内容的含义。
</p>
</section>
<section>
<h2>注音标签示例</h2>
<p>
<ruby>
东<rt>dōng</rt>
巴<rt>bā</rt>
文<rt>wén</rt>
</ruby>
是一个优秀的编程学习平台。
</p>
</section>
<section>
<h2>产品列表</h2>
<ul>
<li>
<data value="PROD-001">HTML教程</data> -
<data value="99">99元</data>
</li>
<li>
<data value="PROD-002">CSS教程</data> -
<data value="129">129元</data>
</li>
</ul>
</section>
<footer>
<p>最后更新：<time datetime="2024-01-15">2024年1月15日</time></p>
</footer>
</article>
</body>
</html>
| 标签 | 用途 | 示例 |
|---|---|---|
<time> |
时间日期 | <time datetime="2024-01-15">2024年1月15日</time> |
<mark> |
高亮标记 | <mark>关键词</mark> |
<ruby> |
注音 | <ruby>汉<rt>hàn</rt></ruby> |
<bdi> |
双向隔离 | <bdi>إيان</bdi> |
<bdo> |
双向覆盖 | <bdo dir="rtl">文本</bdo> |
<wbr> |
换行机会 | long<wbr>word |
<data> |
数据关联 | <data value="99">99元</data> |
<!-- 推荐：使用datetime属性 -->
<time datetime="2024-01-15">2024年1月15日</time>
<!-- 不推荐：没有datetime属性 -->
<time>2024年1月15日</time>
<!-- 推荐：搜索结果高亮 -->
<p>搜索结果：<mark>HTML5</mark>是HTML的最新版本。</p>
<!-- 不推荐：仅用于样式 -->
<p>这是一段<mark>重要</mark>的内容。</p>
<!-- 推荐：中文注音 -->
<ruby>东巴文<rt>dōng bā wén</rt></ruby>
<!-- 不推荐：没有rt标签 -->
<ruby>东巴文</ruby>
问题1：以下哪个标签用于标记时间？
A. <date>
B. <time>
C. <datetime>
D. <timestamp>
答案：B
东巴文解释：<time>标签用于标记日期或时间，datetime是它的属性，不是标签名。
问题2：<mark>标签的主要用途是什么？
A. 标记重要文本 B. 标记搜索结果高亮 C. 标记引用文本 D. 标记删除文本
<details> <summary>点击查看答案</summary>答案：B
东巴文解释：<mark>标签主要用于标记需要突出显示的文本，常用于搜索结果高亮。重要文本应该用<strong>标签。
任务：创建一个包含以下文本语义标签的HTML页面：
<time>标记文章发布时间<mark>高亮关键词<ruby>为中文添加拼音<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本语义标签示例</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
mark {
background-color: #fff3cd;
padding: 2px 4px;
}
rt {
font-size: 0.7em;
color: #666;
}
</style>
</head>
<body>
<article>
<header>
<h1>
<ruby>
东<rt>dōng</rt>
巴<rt>bā</rt>
文<rt>wén</rt>
</ruby>
编程教程
</h1>
<p>发布时间：<time datetime="2024-01-15">2024年1月15日</time></p>
</header>
<p>
本文介绍了<mark>HTML5文本语义标签</mark>的使用方法。
<mark>语义化标签</mark>对SEO和可访问性都有很大帮助。
</p>
</article>
</body>
</html>
东巴文（db-w.cn） - 让编程学习更有趣、更高效！