欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML 文本格式化

程序员文章站 2022-04-24 12:29:30
...

文章目录

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>

运行结果：
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>

运行结果：
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:aaa@qq.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 ，这样可能会取得更丰富的效果。
HTML 文本格式化

相关标签： HTML

上一篇： 水浒中五虎将董平的妻子是谁？她是什么结局

下一篇： 一份简明的 Markdown 笔记与教程

推荐阅读