HTML学习:文本格式化

HTML 中存在一些格式化文本的标签,它们可以被直接使用,而不用再去写样式进行调整。

一、文本格式化

HTML 使用标签<b>("bold") 与<i>("italic") 对输出的文本进行格式。
通常标签<strong>替换加粗标签<b>来使用,<em>替换<i>标签使用。 然而,这些标签的含义是不同的。 <strong>或者<em>意味着你要呈现的文本是重要的,所以要突出显示。

<h1>标题一</h1>
<hr> <!-- 注释:这是一条水平线 -->
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<b>加粗</b>
<br><!-- 注释:换行 -->
<i>斜体</i><br />
<code>电脑自动输出</code><br />
这是<sub>下标</sub>和<sup>上标</sup><br /><br />
<b>这个文本是加粗的</b><br />
<strong>这个文本是加粗的</strong><br />
<big>这个文本字体放大</big><br />
<em>这个文本是斜体的</em><br />
<i>这个文本是斜体的</i><br />
<small>这个文本是缩小的</small><br />
这个文本包含<sub>下标</sub><br />
这个文本包含<sup>上标</sup>
文本格式化.png

二、预格式文本

使用 pre 标签对空行和空格进行控制。

<pre>
    使用 pre 标签
对空行

    和    空格
进行控制
</pre>
预格式文本.png

三、"计算机输出"标签

常用于显示计算机/编程代码。

<code>计算机输出</code><br />
<kbd>键盘输入</kbd><br />
<tt>打字机文本</tt><br />
<samp>计算机代码样本</samp><br />
<var>计算机变量</var><br />
"计算机输出"标签.png

四、地址

在 HTML 文件中写地址。

<address>
Written by <a href="mailto:example@163.com">Example</a><br />
</address>
地址.png

五、缩写和首字母缩写

实现缩写或首字母缩写。
在某些浏览器中,当您把鼠标移至缩略词语上时,title 可用于展示表达的完整版本。
仅对于 IE 5 中的 acronym 元素有效。
对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。

<abbr title="etcetera">etc.</abbr><br />
<acronym title="World Wide Web">WWW</acronym>
缩写和首字母缩写.png

六、文字方向

改变文字的方向。

<p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
文字方向.png

七、块引用

实现长短不一的引用语。

标签 描述
<abbr> 定义缩写
<address> 定义地址
<bdo> 定义文字方向
<blockquote> 定义长的引用
<q> 定义短的引用语
<cite> 定义引用、引证
<dfn> 定义一个定义项目
<p>块引用:
    <q>引用的文字</q>
。</p>
块引用.png

八、删除字效果和插入字效果

标记删除文本和插入文本。

<p>实例文字<del>删除</del> <ins>插入</ins>!</p>
删除字效果和插入字效果.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,321评论 1 41
  • 前言 本系列文章主要是基于W3school这个学习网站来总结的,之所以会自己总结一番,一来是因为网站中的实例效果,...
    码字与律动阅读 4,092评论 4 70
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,621评论 32 459
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,347评论 0 10
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,368评论 0 7