【HTML基础】HTML文字效果标签+超齐全颜色表(可直接复制使用)

简介: 了解HTML文字效果标签+超齐全颜色表。

文字段落样式效果


文字效果

1.添加文字

2.标题文字效果:

效果展示

标题字标签的属性

3.空格

4.特殊字符:

5.注释

6.设置文字样式属性

7.上、下标

颜色表(英语单词+十六进制数值)汇总


文字效果


1.添加文字


直接在body标签中输入,即能在浏览器窗口中显示。

<html>
 <head>
  <meta charset="UTF-8">
  <title>文字效果</title>
 </head>
 <body>
    点赞,收藏,关注,评论
 </body>
</html>

浏览器窗口效果:

微信图片_20221029132732.png


2.标题文字效果:


效果展示

标记 效果
< h1 >…< /h1 > 一级标题
< h2 >…< /h2 > 二级标题
< h3 >…< /h3 > 三级标题
< h4 >…< /h4 > 四级标题
< h5 >…< /h5 > 五级标题
< h6 >…< /h6 > 六级标题
<html>
 <head>
  <meta charset="UTF-8">
  <title>文字效果</title>
 </head>
 <body>
    <h1>HTML</h1> <br>
  <h2>文字效果</h2> <br>
  <h3>点赞</h3> <br>
  <h4>关注</h4> <br>
  <h5>收藏</h5> <br>
  <h6>评论</h6>
 </body>
</html>

标题字标记在浏览器窗口中的效果(br标记起到换行作用):

微信图片_20221029132749.png


标题字标签的属性


align属性:设置标题字的对齐属性;

可描述为:

align = center 居中

align = left居左

align = right居右

<html>
 <head>
  <meta charset="UTF-8">
  <title>文字效果</title>
 </head>
 <body>
  <h2 align = center>文字效果</h2> <br>
  <h3>点赞</h3> <br>
  <h4 align = "left">关注</h4> <br>
  <h5 align = "right">收藏</h5> <br>
  <h6>评论</h6><br>
  <h1>HTML</h1> 
 </body>
</html>

浏览器窗口效果:

微信图片_20221029132804.png


3.空格


注意:符号代码开头是 & 结尾是 ;


在一般情况下,HTML会删除文字内容中多余的空格,不管文字中间存在多少个空格,最终只会被视为一个空格。

在这时,为了增加浏览器窗口中显示的空格内容,我们可以用一个“ ”表示一个空格。

<body>&nbsp;</body>

4.特殊字符:


注意:符号代码开头是 & 结尾是 ;


特殊文字与空格是类似的,都可以通过在HTML文件中输入符号代码来添加。通过对应的符号代码,可以在浏览器窗口中输出键盘上没有的字符,这些特殊字符可以应用于特定的情境中。


以下是一些汇总来的符号代码:

<html>
 <head>
  <meta charset="UTF-8">
  <title>文字效果</title>
 </head>
 <body>
    &plusmn; -------- plusmn <br>
  &middot; -------- middot <br>
  &pound;  -------- pound  <br>
  &times;  -------- times  <br>
  &trade;  -------- trade  <br>
  &copy;   -------- copy   <br>
  &quot;   -------- quot   <br>
  &euro;   -------- euro   <br>
  &cent;   -------- cent   <br>
  &sect;   -------- sect   <br>
    &amp;    -------- amp    <br>
  &reg;    -------- reg    <br>
  &yen;    -------- yen    <br>
  &lt;     -------- lt     <br>
  &gt;     -------- gt     <br>
 </body>
</html>

不同符号代码在浏览器窗口显示的对应特殊字符:

(建议收藏起来,需要的时候直接拷贝来使用😊)

微信图片_20221029132821.png


5.注释


学习过编程语言的小伙伴们应该对注释都十分熟悉了,在HTML文件中添加注释,可以对代码起到解释说明的作用,增加代码的可读性,便于后期修改或者维护。

方便的就在于注释不会在浏览器窗口中显示,只有对HTML源代码进行文本编辑的时候才会显示出来。

<!-- 我是注释 -->

注意:注释不能镶嵌在其他注释中。


6.设置文字样式属性


我们可以通过使用 font 标记以及在 font 标记中设置标记属性的方式来对网页文字的字体、字号、颜色进行设置。


使用font标记包裹需要设置样式的文字,对标记属性进行定义即可。

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

①face属性:

定义字体,可定义多个字体属性,每个字体属性用 逗号 隔开,可以显示什么字体取决于计算机系统有什么字体,若定义多个字体属性,优先使用第一个属性,若计算机系统没有此字体,就会使用第二个属性,以此类推。若设置的属性都没有,使用计算机系统默认字体。


②size属性:

定义字号,范围在 负7 ~ 正7、


③color属性:

定义颜色,可用颜色英文单词或十六进制数值表示不同颜色。


7.上、下标

<sub>...</sub>  <!-- 下标 -->  
<sup>...<、sup>  <!-- 上标 -->

说明:

(1)将文字放在 sup 标志之间 可以实现上标

(2)将文字放在 sub 标志之间 可以实现下标


颜色表(英语单词+十六进制数值)汇总


建议收藏,要用直接对照复制(可拷贝文字在图片下方)

微信图片_20221029132844.png微信图片_20221029132935.png

✨aliceblue (#F0F8FF) antiquewhite (#FAEBD7) aqua (#00FFFF)aquamarine(#7FFFD4)

✨azure (#F0FFFF) beige (#F5F5DC) bisque (#FFE4C4) black

(#000000)

✨ blanchedalmond (#FFEBCD) blue (#0000FF) blueviolet

(#8A2BE2) brown (#A52A2A)

✨ burlywood (#DEB887) cadetblue (#5F9EA0)chartreuse (#7FFF00) chocolate (#D2691E)

✨coral (#FF7F50)cornflowerblue (#6495ED) cornsilk (#FFF8DC) crimson (#DC143C)

✨ cyan(#00FFFF) darkblue (#00008B) darkcyan (#008B8B) darkgoldenrod (#B8860B)

✨ darkgray (#A9A9A9) darkgreen (#006400) darkkhaki (#BDB76B)

darkmagenta (#8B008B)

✨darkolivegreen (#556B2F) darkorange (#FF8C00)darkorchid (#9932CC) darkred (#8B0000)

✨darksalmon (#E9967A)darkseagreen (#8FBC8B) darkslateblue (#483D8B) darkslategray (#2F4F4F)

✨darkturquoise (#00CED1) darkviolet (#9400D3) deeppink (#FF1493)

deepskyblue (#00BFFF)

✨ dimgray (#696969) dodgerblue (#1E90FF)firebrick (#B22222) floralwhite (#FFFAF0)

✨forestgreen (#228B22) fuchsia (#FF00FF) gainsboro (#DCDCDC) ghostwhite (#F8F8FF)

✨ gold (#FFD700) goldenrod (#DAA520) gray (#808080) green (#008000)


✨ greenyellow (#ADFF2F) honeydew (#F0FFF0) hotpink (#FF69B4) indianred(#CD5C5C)

✨ indigo (#4B0082) ivory (#FFFFF0) khaki (#F0E68C) lavender(#E6E6FA)

✨lavenderblush (#FFF0F5) lawngreen (#7CFC00) lemonchiffon

(#FFFACD) lightblue (#ADD8E6)

✨ lightcoral (#F08080) lightcyan(#E0FFFF) lightgoldenrodyellow (#FAFAD2) lightgreen (#90EE90)

✨ lightgrey (#D3D3D3) lightpink (#FFB6C1) lightsalmon (#FFA07A)

lightseagreen (#20B2AA)

✨ lightskyblue (#87CEFA) lightslategray(#778899) lightsteelblue (#B0C4DE) lightyellow (#FFFFE0)

✨ lime(#00FF00) limegreen (#32CD32) linen (#FAF0E6) magenta (#FF00FF)

✨ maroon (#800000) mediumaquamarine (#66CDAA) mediumblue (#0000CD)mediumorchid (#BA55D3)

✨mediumpurple (#9370DB) mediumseagreen(#3CB371) mediumslateblue (#7B68EE) mediumspringgreen (#00FA9A)

✨ mediumturquoise (#48D1CC) mediumvioletred (#C71585) midnightblue

(#191970) mintcream (#F5FFFA) 、

✨ mistyrose (#FFE4E1) moccasin (#FFE4B5)navajowhite (#FFDEAD) navy (#000080)

✨oldlace (#FDF5E6) olive (#808000) olivedrab (#6B8E23) orange (#FFA500)

✨ orangered (#FF4500)orchid (#DA70D6) palegoldenrod (#EEE8AA) palegreen (#98FB98)

✨ paleturquoise (#AFEEEE) palevioletred (#DB7093) papayawhip (#FFEFD5)peachpuff (#FFDAB9)

✨peru (#CD853F) pink (#FFC0CB) plum (#DDA0DD) powderblue (#B0E0E6)

✨ purple (#800080) red (#FF0000) rosybrown(#BC8F8F) royalblue (#4169E1)

✨saddlebrown (#8B4513) salmon (#FA8072) sandybrown (#F4A460) seagreen (#2E8B57)

✨ seashell (#FFF5EE) sienna(#A0522D) silver (#C0C0C0) skyblue (#87CEEB)

✨ slateblue (#6A5ACD)slategray (#708090) snow (#FFFAFA) springgreen (#00FF7F)

✨ steelblue (#4682B4) tan (#D2B48C) teal (#008080) thistle (#D8BFD8)

✨ tomato(#FF6347) turquoise (#40E0D0) violet (#EE82EE) wheat (#F5DEB3)

✨ white(#FFFFFF) whitesmoke (#F5F5F5) yellow (#FFFF00) yellowgreen (#9ACD32)


制作不易,如果觉得实用:

✨ 点赞

✨ 收藏

✨ 关注作者

✨ 发表评论

微信图片_20221029111446.jpg

目录
相关文章
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
48 5
|
5天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
37 1
前端基础(十七)_HTML5新特性
|
5天前
|
存储 移动开发 前端开发
|
1月前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
37 2
|
1月前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
31 1
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
18 2
|
1月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
27 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
100 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
187 1