当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2024-12-02 22:45 47 浏览

文本格式标记

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

标题 - <head> </head>

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

粗体 -

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

斜体 -

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

下划线 -

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

删除线 - <strike> </strike>

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

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

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

源代码 - <code> </code>

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

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

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

Block Quote - <blockquote> </blockquote>

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

小号字 -

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

字体颜色 -

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

字体大小 -

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

字体大小变化 -

font标记的size属性还可以相对于其前面的字体大小的作即时更改，此用法将按你指定的数字增减字体大小。例如：一些文本

字体 -

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

居中 - <center> </center>

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

强调 -

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

着重强调 -

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

例子

下面是以上标记的示例：

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

HTML 样式

上一篇：第4天 | 16天搞定前端，html文本格式，奇葩说?
下一篇：网页格式只有“HTML”?错!还有好多种

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

文本格式标记

标题 - <head> </head>

粗体 - <b> </b>

斜体 - <i> </i>

下划线 - <u> </u>

删除线 - <strike> </strike>

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

源代码 - <code> </code>

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

Block Quote - <blockquote> </blockquote>

小号字 - <small> </small>

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

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

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

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

居中 - <center> </center>

强调 - <em> </em>

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

例子

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿