HTML描述性文本

最新推荐文章于 2024-03-30 11:13:51 发布

nuist__NJUPT

最新推荐文章于 2024-03-30 11:13:51 发布

阅读量701

点赞数 1

分类专栏： HTML+CSS+JavaScript 文章标签： html 前端

本文链接：https://blog.csdn.net/nuist_NJUPT/article/details/120940580

版权

HTML+CSS+JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML描述性文本

在HTML4中有一些侧重描述的文本标签，用户习惯用它们设置文字以特殊的方式显示，如粗体，斜体，上下标等，淡化了标签修饰的功能，强调其固有语义，对于极个别纯样式标签，不再建议使用。

1-定义强调文本
标签用于强调文本，其包含的文字默认为斜体，标签也用于强调文本，它的强调更强，包含的文字通常以粗体显示。
示例如下：
em强调以斜体显示，strong强调以粗体显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义强调文本</title>
</head>
<body>
<p>没有<em>最好</em>只有<strong>更好</strong>！</p>
</body>
</html>

2-定义格式文本
文本格式有很多种，如粗体，斜体，大号下划线等等效果，为了排版需要，HTML5继续支持HTML4中部分纯格式标签。
 ：定义粗体文本。与strong标签默认效果相似。
 ：定义斜体文本，与em标签默认效果相似。
< big > :定义大号字体。
：定义小号字体。
：定义字体上标。
:定义下标文本。

下面的示例演示格式化语义结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义格式化文本</title>
</head>
<body>
<div id = "maths">
    <h1>解一元二次方程</h1>
    <p>一元二次方程的四种解法</p>
    <ul>
        <li>直接开平方法</li>
        <li>配方法</li>
        <li>公式法</li>
        <li>分解因式法</li>
    </ul>
    <p>例如，针对下面的一元二次方程式：</p>
    <p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
    <p>我们使用<big><b>分解因式法</b></big>来演示思路</p>
    <p><small>由：(<i>x</i>-1</small>)(<i>x</i>-4)=0</p>
    <p><small>得：</small><br>
    <i>x</i><sub>1</sub>=1<br>
    <i>x</i><sub>2</sub>=4</p>
</div>
</body>
</html>

3-定义输出文本
HTML提供很对输出信息的标签，如下所示：
< code >:表示代码字体，即显示源代码。
< pre > :表示预定义格式的源代码，即保留源代码显示中的空格。
< tt> : 表示打印机字体
< kbd >:表示键盘字体
< dfn >:表示定义的术语
< var > :表示变量字体
< samp > :表示代码范例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义输出文本</title>
</head>
<body>
<div id = "output">
    <p>表示预定义格式的源代码</p>
    <pre>
        var count = 0 ;
        while(count < 10){
        document.write(count+"&lt;br&gt;");
        count ++ ;
        }
    </pre>
    <p>表示代码打印字体：<code>System.out.println("我爱你") ;</code></p>
    <p>表示打印机字体：<tt>打印机字体</tt></p>
    <p>表示键盘字体：<kbd>键盘字体</kbd></p>
    <p>表示代码范例：<samp>代码范例</samp></p>
</div>
</body>
</html>

4-定义插入与删除文本
< ins >标签定义了插入到文档中的文本，< del >定义文档中已被删除的文本，一般可以配合使用两个标签，来描述文档中的更新和修正。
< ins > 和 < del >标签都支持下面两个属性：
1-cite:指向另一个文档的URL，该文档可以解释文本被删除的原因
2-datetime:定义文本被删除的日期和时间

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义插入和删除文本</title>
</head>
<body>
<div id = "ins_del">
    <p><cite>因为懂得，所以悲伤</cite> <ins cite = "http:www.baidu.com" datetime="2021-10-1">张爱玲说的话</ins></p>
    <p><del datetime="2014-1-1">出自冰心的小说</del></p>
</div>
</body>
</html>

5-定义文本方向
如果在HTML中混合了从左到右或者从右到左书写的字符，那么可能要使用bdi和bdo元素，要使用bdo，必须包括dir属性，取值包括ltr(从左到右)和rtl(从右到左),指定希望呈现的显示方向

bdo适用于段落里的短语或者句子，不能用它包围多个段落，bdi是HTML5新加的元素，用于内容的方向未知的情况，不必包含dir属性，因此默认已设为自动判断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定义文本方向</title>
</head>
<body>
<bdo dir = "rtl">窗前明月光，疑是地上霜，举头望明月，低头思故乡。</bdo>
</body>
</html>

nuist__NJUPT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML描述性文本

HTML描述性文本在HTML4中有一些侧重描述的文本标签，用户习惯用它们设置文字以特殊的方式显示，如粗体，斜体，上下标等，淡化了标签修饰的功能，强调其固有语义，对于极个别纯样式标签，不再建议使用。1-定义强调文本标签用于强调文本，其包含的文字默认为斜体，标签也用于强调文本，它的强调更强，包含的文字通常以粗体显示。示例如下：em强调以斜体显示，strong强调以粗体显示<!DOCTYPE html><html lang="
复制链接

扫一扫