HTML 符号

TML 符号实体

HTML 符号是不呈现在标准的键盘上，比如数学运算符、箭头符号、技术符号和形状。

如需向 HTML 页面添加这些符号，您可以使用 HTML 实体名称。

如果不存在实体名称，您可以使用实体编号。

如果字符没有实体名称，您可以使用十进制（或十六进制）引用。

实例

结果如下：

我将显示 €

HTML 支持的数学符号

如果您使用的是一个 HTML 实体名称或一个十六进制编号，字符总是能正确显示。

这是与您页面使用的字符集相互独立的！

字符	编号	实体	描述
∀	∀	∀	所有（for all）
∂	∂	∂	部分（part）
∃	∃	∃	存在（exists）
∅	∅	∅	空（empty）
∇	∇	∇	倒三角（nabla）
∈	∈	∈	属于（isin）
∉	∉	∉	不属于（notin）
∋	∋	&ni;	包含的成员（ni）
∏	∏	∏	连乘（prod）
∑	∑	∑	总和（sum）

完整的数学（Math）参考手册

HTML 支持的希腊字母

字符	编号	实体	描述
Α	Α	Α	Alpha（中文注音：阿耳法）
Β	Β	Β	Beta（中文注音：贝塔）
Γ	Γ	Γ	Gamma（中文注音：伽马）
Δ	Δ	Δ	Delta（中文注音：德耳塔）
Ε	Ε	Ε	Epsilon（中文注音：艾普西隆）
Ζ	Ζ	Ζ	Zeta（中文注音：截塔）

完整的希腊（Greek）参考手册

HTML 支持的其他实体

字符	编号	实体	描述
©	©	©	版权所有（REGISTERED SIGN）
®	®	®	注册商标（REGISTERED SIGN）
€	€	€	欧元符号（EURO SIGN）
™	™	™	商标（trademark）
←	←	←	向左箭头（LEFTWARDS ARROW）
↑	↑	↑	向上箭头（UPWARDS ARROW）
→	→	→	向右箭头（RIGHTWARDS ARROW）
↓	↓	↓	向下箭头（DOWNWARDS ARROW）
♠	♠	&spades;	黑桃（BLACK SPADE SUIT）
♣	♣	&clubs;	黑梅花（BLACK CLUB SUIT）
♥	♥	&hearts;	黑心（BLACK HEART SUIT）
♦	♦	&diams;	黑方块（BLACK DIAMOND SUIT）

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

果给你一些文本文字，要让它变得美，你将会采用什么方法？用过PPT的人都知道，可以调整颜色，可以设定字体，可以进行对齐、缩进等操作。这些在PPT中常用的方法，在CSS中也是很容易实现的，代码也简单。

10.1 文本颜色

在CSS中，设置文本颜色，用color属性，值可为16进制、一个RGB值或颜色名称。十六进制用#号开始，后接#RGB，比如 #ff0000；RGB值为rgb(255,0,51)形式；颜色名称名称直接就是英语单词，如red。

样色表ys2.css文件内容

body {
       color:#00ff00;
}
h3 {
 color:CadetBlue;

}
p {
    color:rgb(0,0,255);
}

HTML文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体颜色</title>
    <link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了，还能找工作不?</h3>
<p>
    昨晚七点多收到通知，说老板抽查了几次监控，发现一些人上班浑水摸鱼玩手机，
要召开紧急视频会议，<br/>
    全体员工必须参会，视频里老板很生气，正火冒三丈的批评那些财务人员上班玩手机，
说再不多提升自己，<br/>
    以后早晚被电脑和机器代替， 然后我忘记关麦了，说了句：机器能替你吃牢饭？<br/>
    唉，也不知道年底了工作好不好找。</p>
</body>
</html>

输出结果

10.2 文本字体

CSS字体属性定义字体，加粗，大小，文字样式。在用软件时，你是不是见过宋体什么的，没错，那个就是字体了。在CSS中，可以使用Font Family："宋体"的方式指定字体；样式，就是加粗、倾斜那个，用font-style指定；大小则用font-size。

/* ys2.css里的样式表内容 */
.f {
    font-family: "宋体";
    /* 加粗 */
    font-style: oblique;
    font-size: 40px;
}

<!--html文件内容-->
<div class="f">
    牛的程序员，羊一样的女孩
</div>

输出结果

10.3 对齐方式

文本在元素内水平对齐，可以使用 text-align: 值的方式，center居中对齐，left居左对齐，right居右对齐；垂直居中对齐，可用vertical-align和line-height结合的方式进行指定，这个平时会经常用到，记下来。

/*css文件里的内容*/

/*水平居中*/
.div-width {
    width: 800px;
}

.txt-left {
    text-align: left;
    color: aquamarine;
}

.txt-center {
    text-align: center;
    color: darkcyan;
}

.txt-right {
    text-align: right;
    color: darkgreen;
}

/*垂直居中*/
.txt-vertical {
    border: 2px solid green;
    height: 100px;
    line-height: 100px;
    vertical-align: middle;
    text-align: center;
}

<!-- HTML文件里的内容 -->
<div class="div-width">
    <!--水平居中-->
    <p class="txt-left">向左看齐</p>
    <p class="txt-center">居中对齐</p>
    <p class="txt-right">向右看齐</p>
    <!--垂直居中-->
    <div class="txt-vertical">垂直居中方法1</div>
    <div>垂直居中方法2</div>
</div>

输出结果

如果要对标签进行水平居中的话，可以使用 margin: auto;用position: absolute; 属性来对齐元素的话，有些浏览器不支持，所以不推荐。

/* 在样式表文件中 */
.div-center {
    margin: auto;
    width: 50%;
    border: 1px solid green;
    height: 300px;
    text-align: center;
    vertical-align: center;
    line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在，人海中间：div在Web居中，文字在div中居中</div>

输出结果

10.4 文本之距

为了让阅读舒服，在进行文本排版之时，会考虑字与字之间的间距，有行与行之间的距离，还有段落的缩进等。在CSS中，字符间距可用letter-spacing:值；行间距依然用line-height:值；段落字符缩进，用text-indent即可。温馨提醒：text-indent只对div和p标签有效。

/* 在样式表文件中 */
.text-spacing {
    width: 900px;
    border: 1px solid green;
    letter-spacing: 50px;
}

p.row {
    line-height: 3.0em;
}

p.i {
    /*em是相对单位，2em即现在一个字大小的两倍*/
    text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
    他说风雨中，这点痛算什么
</div>
<p class="row">
    秋季降温快的特点，使得秋收、秋耕、秋种的“三秋”大忙显得格外紧张。<br/>
    秋分棉花吐絮，烟叶也由绿变黄，正是收获的大好时机。华北地区已开始播种冬麦，<br/>
    长江流域及南部广大地区正忙着晚稻的收割，抢晴耕翻土地，准备油菜播种。
</p>
<p class="i">
    当我以为我无法继续走下去时，我强迫自己要继续前进。<br/>
    我的成功是基于我的坚持，并非运气。<br/>
    努力,是为了跳出你厌恶的圈子。<br/>
    读书,是为了远离渣货垃圾人。<br/>
    健身,是为了让讨厌的人心平气和...
</p>

输出结果

好了，有关CSS文本或元素对齐的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##CSS##程序员##Web#

public String convertToReference(char character, String encoding) {
    if (encoding.startsWith("UTF-")) {
        switch(character) {
        case '"':
            return """;
        case '&':
            return "&";
        case '\'':
            return "'";
        case '<':
            return "<";
        case '>':
            return ">";
        }
    } else if (character < 1000 || character >= 8000 && character < 10000) {
        int index = character < 1000 ? character : character - 7000;
        String entityReference = this.characterToEntityReferenceMap[index];
        if (entityReference != null) {
            return entityReference;
        }
    }

    return null;
}

在线咨询

上一篇：Angular第十九章：主页面“index.html”
下一篇：JS｜鼠标事件交替显示不同的图片

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML 符号

10.1 文本颜色

10.2 文本字体

10.3 对齐方式

10.4 文本之距

您的项目需求