HTML文字颜色与排版

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>…</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>

HTML图像和超链接

1、网页中插入图片标签<img/>

格式：<img src="URL" alt="名称" />
示例：<img src="img/1.jpg" alt="荷花" />
属性：

  • src：图片的url路径，也就是来源，包含路径与名称
  • alt：提示文字，用于鼠标悬停或者图片加载不出来的时候显示，常用于SEO
  • width：图片宽度，绝对宽度像素表示，相对宽度百分比表示，为了不失真，通常只设置实际宽度像素
  • height：图片高度，绝对高度像素表示，相对高度百分比表示，为了不失真，通常只设置实际高度像素
  • border：边框
  • align：对齐方式，取值：top(顶)、right(右)、bottom(底)、left(左)、middle(中间)
  • vspace:垂直边距，即定义图片顶部与底部的空白
  • hspace：水平边距，即定义图片左侧与右侧的空白

2、超链接—网页的灵魂

(1)基本格式
<a href="URL" target="窗口名称" title="指向连接显示的文字">超链接名称</a>

(2)属性
href：链接指向的目标地址
target:用于指定打开链接的目标窗口,取值如下：

  • _blank：在新窗口中打开
  • _parent：在上一级窗口，即父窗口中打开，框架中常用
  • _self：当前窗口中打开，一般不设置，默认选项
  • _top：最顶级的浏览器窗口中打开，忽略任何框架

(3)链接路径分析
URL(Uniform Resource Locator)中文名字为“统一资源定位器,即请求资源的地址。
链接路径分类：

  • 绝对路径 如：http://www.yanfadi.com
  • 相对路径 如：new/index.html
  • 根路径 如：file：根文件夹

(4)链接种类

  • 文字链接 例如：<a href="网站">紫沐兜</a>
  • 图像链接 例如：<a href=”网站><img src="img/logo.png" /></a>
  • 锚点链接：链接到当前网页的任意位置,指向锚时需加“#”
<a href="#one">第一段</a>

<a name="#one">第一段内容</a>

//E-mail链接 例如：
<a href="mailto:865207900@qq.com">联系站长</a>

// FTP链接 例如：
<a href="ftp://主机地址">进入</a>
————————————————