整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html基础必备-文本格式标记,前端小白一看就会

本格式标记

以下HTML标记用于格式化网页上文本的外观。这可以使网页变得更加生动,但是,文本格式的太多变化也会使人不快。

标题 - <head> </head>

head标记有6个级别可用,从h1用于最大和最重要的标题,到h6是最小的标题。

粗体 - <b> </b>

b标记之间的文本以粗体显示,与周围的文本相对突出。

斜体 - <i> </i>

i标记以一个小角度显示文本。

下划线 - <u> </u>

u标记在文本正文添加一条线,请注意,链接已经有下划线,不需要额外的标记。

删除线 - <strike> </strike>

strike标记在文本的正中间画一条线,通常用来表示文本是旧的,不再相关,删除。也可以用<s></s>代替。

预格式化文本 - <pre> </pre>

pre标记之间的任何文本,包括空格、回车符和标点符号,都将像在文本编辑器中一样显示在浏览器中(通常浏览器会忽略多个空格)

源代码 - <code> </code>

code标记之间的文本以固定宽度字体显示,通常在显示源代码时使用。

打字机文本 - <tt> </tt>

tt标记之间的文本就像是用打字机打出了一个固定宽度的文字。

Block Quote - <blockquote> </blockquote>

blockquote标记定义一个块引用,并且在块的左右添加额外的边距。

小号字 - <small> </small>

small标记让你无需设置字体大小,就可以使文本呈现比周围稍小的外观。

字体颜色 - <font color="#??????"> </font>

font标记的color属性改变几个字或一段文字的颜色。属性使用十六进制颜色代码。

字体大小 - <font size="?"> </font>

font标记的size属性改变字体的大小,值范围从1到7,1是最小,7是最大。

字体大小变化 - <font size="+/-?"> </font>

font标记的size属性还可以相对于其前面的字体大小的作即时更改,此用法将按你指定的数字增减字体大小。例如:<font size="-1">一些文本</font>

字体 - <font face="?"> </font>

font标记的face属性以指定的字体显示文本,值为字体名称,如“Helvetica”、“Arial”或“Courier”。

居中 - <center> </center>

center标记之间的所有内容都居中。

强调 - <em> </em>

em标记用于强调文本,文本通常以斜体显示,可能会根据浏览器的不同而有所不同。

着重强调 - <strong> </strong>

strong标记用于着重强调文本,通常以粗体显示,可能会根据浏览器的不同而有所不同。

例子

下面是以上标记的示例:

浏览器显示内容如下所示:

体效果

<h1></h1> 标题字(最大)

<h6></h6> 标题字(最小)

<h1 align="center"></h1>

<strong></strong> 粗体字(突出强调)

<b></b> 粗体字(bold:粗体)

<i></i> 斜体字(italic:斜体)

<u></u> 底线,文本添加下划线:(underline:下划线)

<strike></strike>或<s></s> 横线,相当于加删除线文本 <del></del> HTML5

等宽文字标签:对于等宽文字设置多数情况用在英文文字显示中

<tt></tt> 打字体,类似打字机或者等宽的文本效果。

<code></code> 等宽文字设置内容(定义计算机代码文本)

<samp></samp> 等宽文字设置内容(定义样本文本)

<kbd> 定义键盘文本。

<sup></sup> 文字上标字体标签(super)

<sub></sub> 文字下标字体标签(subscipt)

<address></address> 设置地址文字(可定义一个地址,比如电子邮件地址。您应当使用它来定义地址、签名或者文档的作者身份。)

<font></font> 编辑网页文字样式

<font face="" size="" color=""></font>

face属性可以用于设置文字的名称,可以是宋体、隶书、楷体等;

size属性用于设置字号的大小(单位:字号),从 1 到 7 的数字,或h1-h6。浏览器默认值是3。

color用于设置字体的颜色

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

手册上没有

<ruby></ruby>和<rt></rt> 设置文字标注标记

实例:

<ruby>当代最可爱的人<rt>志愿军</rt></ruby>

arkdown 起源:

Markdown 是由约翰·格鲁伯(John Gruber)和亚伦·斯沃茨(Aaron Swartz)共同创造的一种轻量级标记语言。它于2004年首次发布,旨在提供一种易于编写和阅读的文本格式,以便将内容转换为结构良好的 HTML。Markdown 的设计目标是让人们专注于内容,而不是样式。

markdown - 简洁易用的标记语言

Markdown 的起源可以追溯到格鲁伯的一篇博文,他提出了一种简单的标记语法,以解决 HTML 编写过程中繁琐的问题。斯沃茨对此表示了兴趣,并与格鲁伯合作进一步发展了 Markdown,并将其应用于斯沃茨的项目中。随着时间的推移,Markdown 逐渐获得了广泛的认可和应用,在编写文档、撰写博客、写作文档和代码文档等领域都得到了广泛使用。

Markdown 的优点:

  • 简单易学:Markdown 使用简单的标记语法,易于学习和使用,不需要复杂的编程知识。
  • 纯文本格式:Markdown 文件是纯文本格式,可以在任何文本编辑器中编写,无需特殊的编辑器支持。
  • 易于阅读和编写:Markdown 的语法结构清晰简洁,可读性强,同时也方便编写和编辑。
  • 平台无关性:Markdown 可以在不同的平台和设备上进行编辑和阅读,而不会受到格式兼容性的问题。
  • 可导出多种格式:Markdown 可以轻松转换为 HTML、PDF、Word 等其他格式,便于在不同场景下使用。

Markdown 的缺点:

  • 语法有限:Markdown 的语法相对简单,不支持复杂的排版和高级功能,有时可能无法满足特定的需求。
  • 样式受限:由于 Markdown 的设计初衷是专注于内容而非样式,因此在样式和布局方面的自定义能力相对有限。
  • 学习曲线:尽管 Markdown 的语法简单,但对于完全不熟悉的用户来说,仍然需要一些时间和实践来掌握其语法规则。

Markdown 常用语法:

简单整理了一下,以下是按常用和不常用顺序排列的 Markdown 语法表格:

标题

使用 # 标记,可表示 1 到 6 级标题

粗体

使用 **文本**__文本__ 标记

斜体

使用 *文本*_文本_ 标记

引用

使用 > 标记引用文本

无序列表

使用 -+* 标记列表项

有序列表

使用数字后跟 . 来标记列表项

任务列表

使用 - [ ]- [x] 标记未完成或已完成的任务

链接

使用 [链接文本](链接地址) 标记超链接

图片

使用 ![替代文本](图片地址) 插入图片

代码块

使用 标记单行代码块,或使用 标记多行代码块

水平线

使用 ---___*** 插入水平线

表格

使用 `

脚注

使用 [^脚注名称] 标记脚注,并在文本末尾定义脚注

内联 HTML

可以在 Markdown 中使用部分 HTML 标签和属性

自动链接

使用 <链接地址> 自动将链接转换为可点击的链接

转义字符

使用反斜杠 \ 对特殊字符进行转义

删除线

使用 ~~文本~~ 标记删除线

注释

使用 <!-- 注释内容 --> 插入注释

转义特殊字符

使用 & 加上特殊字符代码转义特殊字符

内嵌 LaTeX 公式

使用 $ 公式 $$$ 公式 $$ 插入内嵌 LaTeX 公式

定义 HTML 锚点

使用 <a name="锚点名称"></a> 定义 HTML 锚点

自定义标题标识符

使用 {#标识符} 自定义标题的 ID 属性

高亮显示代码

使用三个反引号后加语言名称来高亮显示代码块

表格对齐

使用冒号 : 在表格中指定对齐方式

注脚链接

使用 [^脚注名称] 创建注脚链接

自动链接邮箱地址

使用 <邮箱地址> 自动将邮箱地址转换为可点击的链接

自动链接 URL

使用 <链接地址> 自动将 URL 转换为可点击的链接

转义 HTML 标签

使用反斜杠 \ 转义 HTML 标签

内嵌图表

使用 {{图表代码}} 在 Markdown 中插入图表

转义 Markdown 标记

使用反斜杠 \ 转义 Markdown 标记

定义图片尺寸

使用 <img> 标签并指定 widthheight 属性定义图片尺寸

扩展语法(GFM)

GitHub Flavored Markdown(GFM)提供了更多语法扩展,如任务列表

目录

使用 [TOC] 自动生成目录

请注意,这只是 Markdown 语法的一部分,而且不同的 Markdown 解析器可能会有略微不同的语法支持。

文本编辑软件推荐:

第一款:Typora

Typora是一款简单高效的Markdown编辑器,使您可以轻松编写和编辑纯文本。让您觉得它实际上是一个系统自带应用程序。通过为您提供所有必要的工具和一个组织良好的环境,使Markdown编辑任务看起来像是在散步。

Typora 为您提供作为读者和作者的无缝体验。它删除了预览窗口、模式切换器、Markdown 源代码的语法符号以及所有其他不必要的干扰,代之以实时预览,以帮助您专注于内容本身。

软件下载地址:https://alonggjx.com/1.html


typora - 文本编辑器

第二款:EmEditor Pro

EmEditor Pro – 强大的文本编辑器专业版,为程序员、Web 开发人员和普通用户提供语法说明和 Unicode 支持。编辑器功能包括使用正则表达式在文件中搜索和替换、自动检测代码、突出显示链接和电子邮件地址、块选择模式、配置按钮栏、菜单、字体和颜色元素。对于每种语言,您可以设置单独的配置。该程序还支持用 javascript 或 VBScript 编写的强大宏,使您可以捕获经常或偶尔使用的几乎任何操作。

软件下载地址:https://alonggjx.com/146.html


EmEditor pro -文本编辑器


总结:

人们使用 Markdown 的主要原因是它的简洁性和易用性。与其他标记语言相比,Markdown 的语法更简单,使得写作和编辑变得更加高效。它使得编写文档和博客成为一种愉快的体验,同时也方便了文档的版本控制和协作编辑。此外,Markdown 的纯文本格式使得文件易于存储、分享和迁移,不受特定软件或平台的限制。因此,Markdown 成为了许多人在写作和记录文档时的首选工具。