HTML文字颜色和排版

2,081 阅读3分钟

1、HTML中颜色表示法

三种表示方法:

(1)直接用英文单词表示,例如:white(白色)

(2)以六位十六进制表示,例如:#ffffff(白色)

(3)以RGB模式表示,也就是用3个0至255之间的数字来分别表示红绿蓝三色的比重,

例如 rgb(255,255,255) (白色)

2、回车换行<br />

解释:单标签、无属性标签,用于强制换行

3、段落<p>

解释:用以区别文字的不同段落 格式:<p align="参数">…</p>

align参数取值:left(默认)、center、right,分别表示段落文字居左、居中、居右对齐。

4、水平线 <hr />

解释:单标签,显示水平线,段落之间的分隔 格式:<hr /> 属性:

  • size:设置水平分割线的粗细,以数值表示,值越大,线越粗。以百分比表示,百分比越大,线越粗。

  • width:设置水平分隔线的宽度,以数值表示,宽度固定。以百分比表示,窗口随着百分比变化。

  • align:设置对齐方式(left,center,right),默认center。

  • color:设置颜色,默认black(黑色)。

  • noshade:取消水平线阴影

使用建议:不建议直接使用,建议使用样式替换。

## 5、居中对齐<center>

解释:双标签,用于文字图片等居中显示,被废弃的标签,html5不支持。

格式:<center>…</center>

6、预格式化文本标签<pre>

解释:双标签,用于保留原始文字排版格式(空格、换行等)显示。

格式:<pre>…</pre>

7、空格

解释:用 表示,两个空格表示一个汉字的位置。

使用建议:HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格

8、文字标签

解释:规定文本的字体、字体尺寸、字体颜色

格式:<font>…</font> 属性:

  • size:设置文字大小,参数取值范围1-7,数字越大,字体越大。默认3
  • color:设置文字颜色,默认黑色
  • face:设置文字使用字体,默认宋体

9、标题文字

  • <h1>…</h1>:一号标题

  • <h2>…</h2>:二号标题

  • <h3>…</h3>:三号标题

  • <h4>…</h4>:四号标题

  • <h5>…</h5>:五号标题

  • <h6>…</h6>:六号标题

说明:数字越小字体越大

10、引用文本<blockquote>

解释:用于语句块的引用 格式:<blockquote>…</blockquote> 属性:属性名称cite,属性值为URL

11、逻辑字体

解释:不指明字体如何显示,让Web浏览器自行决定显示方式。

  • <address>将网页需要显示的地址文字突出显示,斜体显示。</address>

  • <em>用于强调,斜体表示</em>

  • <strong>特别强调,粗体显示</strong>

  • <code>显示命令与代码</code>

  • <samp>用于字母序列</samp>

  • <kbd>定义键盘文本</kbd>

  • <var>表示程序变量名,斜体显示</var>

  • <dfn>对特殊术语或短语的定义,斜体显示</dfn>

  • <cite>用于标题文字,斜体显示</cite>

  • <strike>删除线</strike> <small>缩小字体,比网页字体减少一号</small>

  • <big>放大字体,比网页中缺省字体放大一号</big>

12、物理字体

解释:物理字体明确了字体类型,表明无论何种浏览器遇到这些标签,都以相同的方式显示。

  • <b>粗体</b>

  • <i>斜体</i>

  • <u>下划线</u>

  • <sup>上标,将文字显示为上标</sup>

  • <sub>下标,将文字显示为下标</sub>

  • <tt>宽字体显示文字,相当于打字机的效果</tt>

  • <s>删除线</s>

本文使用 mdnice 排版