HTML 文本格式化

HTML 文本格式化

1. 常见文本格式化标签

html文本格式化是将文本内容按照需求进行修改。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    	<h1>html文本格式化标签</h1>
    	<p>
    	<b>b_bold_加粗文本</b>
    	<br/>
    	<strong>strong_加粗文本_加重语气</strong>
    	<br/>
    	<i>i_italic_斜体文本</i>
    	<br/>
    	<em>em_斜体文本</em>
    	<br/>
    	<big>big_放大文本</big>
    	<br/>
    	<small>small_缩小文本</small>
    	<br/>
    	<sub>sub_下标</sub>
    	<br/>
    	<sup>sup_上标</sup>
    	<br/>
    	log<sub>3</sub><sup>9</sup>=3
    	<br/>
    	<ins>ins_插入字_加下划线</ins>
    	<br/>
    	<del>del_删除字</del>
    	</p>
    </body>
</html>

运行结果:
在这里插入图片描述

2. “计算机输出”标签

标签意义
<code>定义计算机代码
<kbd定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本

用pre标签可以将行与复数空格表示出来。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <code>code
_    __     冬天 是  两个
                动物 交配的 
                季节
        </code>
        <br/>
        <kbd>kbd
_    __     冬天 是  两个
                动物 交配的 
                季节
        </kbd>
        <br/>
        <samp>samp
_    __     冬天 是  两个
                动物 交配的 
                季节
        </samp>
        <br/>
        <var>var
_    __     冬天 是  两个
                动物 交配的 
                季节
        </var>
        <br/>
        <pre>pre
_    __     冬天 是  两个
                动物 交配的 
                季节
            </pre>
    </body>
</html>

运行结果:
在这里插入图片描述

3. 引文,引用及标签定义

abbr

  • 标签定义及使用说明

<abbr> 标签用来表示一个缩写词或者首字母缩略词,如"WWW"或者"NATO"。
\通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。

  • 提示和注释

提示:在某些浏览器中,当您把鼠标移至带有 <abbr> 标签的缩写词/首字母缩略词上时,<abbr> 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。

address

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>abbr定义缩写</p>
        <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
        <address>
            Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br/> 
            Visit us at:<br/>
            Example.com<br/>
            Box 564, Disneyland<br/>
            USA
        </address>
        <p>该段落文字从左到右显示。</p>  
        <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
        <blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
        </blockquote>
        <p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
        <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
        <dfn>定义项目</dfn>
    </body>
</html>
  • 标签定义及使用说明

<address> 标签定义文档作者/所有者的联系信息。
如果 <address> 元素位于 <body> 元素内部,则它表示该文档作者/所有者的联系信息。
如果 <address> 元素位于 <article> 元素内部,则它表示该文章作者/所有者的联系信息。
<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

  • 提示和注释

提示:不应该使用 <address> 标签来描述邮政地址,除非这些信息是联系信息的组成部分。
提示:<address> 元素通常被包含在 <footer> 元素的其他信息中。

bdo

  • 标签定义及使用说明

bdo 指的是 bidi 覆盖(Bi-Directional Override)。
<bdo> 标签用来覆盖默认的文本方向。

  • 属性dir

值ltr(left to right)从左向右
值rtl(right to left)从右向左

blockquote

  • 标签定义及使用说明

<blockquote> 标签定义摘自另一个源的块引用。
浏览器通常会对<blockquote> 元素进行缩进。

  • 提示和注释

提示:如果标记是不需要段落分隔的短引用,请使用 <q>。

属性cite,值为URL,是引用的来源。
如需把页面作为 XHTML 进行验证,那么

元素必须包含块级元素,比如:

<blockquote>
<p>这是一个长引用,这是一个长引用。</p>
</blockquote>

blockquote元素中一般嵌套p元素,用于标记被引用的文本,这些引用文本并不是直接位于blockquote元素中。
如果引文来自在线资源(包括自己网站中的其他地方),那么可以在<blockquote>标签的cite(引用)属性中指明原始来源的URL。
通常浏览器会把blockquote元素呈现为一段左右两侧缩进(40px)的文本。

q

  • 标签定义及使用说明

<q> 标签定义一个短的引用。
浏览器经常会在这种引用的周围插入引号。

  • 提示和注释

提示:请使用 <blockquote> 来标记摘自另一个源的块引用。

属性cite,值为URL,是引用的源URL。

cite

  • 标签定义及使用说明

<cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。

注释:人名不属于作品的标题。

dfn

  • 标签定义及使用说明

<dfn> 标签是一个短语标签,用来定义一个定义项目。

提示:我们并不反对使用这个标签,但是如果您只是为了达到某种视觉效果而使用这个标签的话,我们建议您使用 CSS ,这样可能会取得更丰富的效果。
在这里插入图片描述

  • 2
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

从零开始的智障生活

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值