三、版面风格控制

1. 字体控制

A. 字体大小

用 <font Size=#> 和 </font> 表示，＃为字号： 1 － 7 ，缺省为 3 ，可用 <basefontsize= 字号 > 改变缺省字号。

设置字号有两种办法：

l 设置绝对字号； <font size= 字号 >

l 设置相对字号； <font size= ± n> ，以缺省字号为基础，“＋”号表示字体变大，“－”号表示字体变小。

B. 字体风格

字体风格分为物理风格和逻辑风格。

物理风格直接指定字体，物理风格的字体有 <B> 黑体， <I> 斜体， <U> 下划线， <TT> 打字机体。

逻辑风格指定文本的作用。 <EM> 强调； <STRONG> 特别强调； <CODE> 源代码； <SAMP> 例子； <KBD>

键盘输入； <VAR> 变量； <DFN> 定义； <CITE> 引用； <SMALL> 较小； <BIG> 较大； <SUP> 上标； <SUB> 下标。

<B>Today is fine!</B>

<I>Today is fine!</I>

<U>Today is fine!</U>

<TT>Today is fine!</TT> 如图：

 }" align="baseline" border="0" />

逻辑风格指定文本的作用

<DFN> 定义 : 用于定义词的风格。通常是按斜体字体显示

<EM> 强调 : 通常也是显示为斜体。

<STRONG> 特别强调 : 用加粗字体显示。如 ( 重要事项 )

<CODE> 源代码 : 显示摘录的程序代码，用固定大小的字体显示

<KBD> 键盘输入 : 用于显示用户的键盘输入。用粗体加亮字体显示，许多浏

览器直接用等宽字体显示

<VAR> 变量 : 表示变量，通常用斜体显示

<SMALL> 较小

<BIG> 较大

上标 <SUP> 上标

下标 <SUB> 下标

C. 字体颜色

页面的颜色是由 "red" "green" "blue" 三原色组合而成，在 HTML 中对于颜色深度的定义采用十六进

制，对于三原色 HTML 分别给予两个十六进位去定义，也就是每个原色可有 256 种深度，故此三原色

可混合成一千六佰多万的颜色（ 16777216 ）。

例如

白色 red=ff, green=ff, blue=ff, RGB 值即为 ffffff

红色 red=ff, green=00, blue=00, RGB 值即为 ff0000

绿色 red=00, green=ff, blue=00, RGB 值即为 00ff00

蓝色 red=00, green=00, blue=ff, RGB 值即为 0000ff

黑色 red=00, green=00, blue=00, RGB 值即为 000000

应用时常在每个 RGB 值之前加上符号 # 以示分别，不加亦可。

请看常用RGB色彩对照表

也可以使用以下预定义的颜色 black, olive （橄榄色） , teal （黑绿色，水鸭） , red, blue, maroon （栗子色） ,

navy （海蓝） , gray （灰） , lime （酸橙） , fudrsia （紫红） white, green, purple( 紫色 ),

sliver, yellow, aqua （浅绿）之一。

颜色

颜色实效

英文名

十六进制 RGB 值

黑色

  

Black

#000000

银灰色

  

Silver

#C0C0C0

灰色

  

Gray

#808080

白色

  

White

#FFFFFF

绛紫色

  

Maroon

#800000

红色

  

Red

#FF0000

紫色

  

Purple

#800080

紫红色

  

Fudrsia

#FF00FF

绿色

  

Green

#008000

草绿色

  

Lime

#00FF00

橄榄色

  

Olive

#808000

黄色

  

Yellow

#FFFF00

海蓝色

  

Navy

#000080

蓝色

  

Blue

#0000FF

黑绿色

  

Teal

#008080

淡蓝色

  

Cyan

#00FFFF

<Font Size=7 Color=Red> 电子科技大学 ( 红 )</Font><br>

<Font Size=6 Color=Fudrsia> 电子科技大学 ( 紫红色 )</Font><br>

<Font Size=5 Color=Silver> 电子科技大学 ( 银灰 )</Font><br>

<Font Size=4 Color=Lime> 电子科技大学（草绿） </Font><br>

<Font Size=3 Color=Blue> 电子科技大学（蓝色） </Font><br>

<Font Size=2 Color=Maroon> 电子科技大学（栗色） </Font><br>

<Font Size=1 Color=Black> 电子科技大学 ( 黑色 )</Font><br>

2. 横线　 (hr)

横线，用于分隔同一文体的不同部分。

Size=n , 横线的垂直宽度 , n 的单位是象素 , 如： <hr Size=10>

width ＝ #, 横线长度 , # 可以是象素、百分比两种表示方式

<hr width=50> 、 <hr width=50%> 。

align=# 横线的位置。 # 定义如下。

left 左对齐；

right 右对齐；

center 居中对齐 （缺省）

<hr Size=3 width=50% align=center >

1. 图文混排

A. 在页面中添加图象

图象使页面更漂亮，但图象会导致网络流量增大。访问时间延长。所以在主页 (homepage) ，不宜采

用多个很大的图象。

图象的基本格式为： <img src="data:image-url">

比如：<img src="http://263.aka.org.cn/flyinglother.gif">(这个是绝对路径)

?/P>

或 <img src="data:image-urd" alt="text">

image-url 是图象文件的 url 。大部分浏览器支持 .gif 和 .jpg 文件， alt 属性告诉不支持图象的浏览

器用 text 代替该图。

假设图片为 Top-1.gif, 通常 SRC 有以下几种形式：

l SRC=”Top-1.gif”

l SRC=”image/Top-1.gif”

l SRC=”../Top-1.gif”

l SRC=http://www.rwsky.com/image/Top-1.gif

第一种 : SRC=”Top-1.gif” ： Top-1.gif 必须与该 html 文件放在同一文件夹。

第二种 :SRC=”image/Top-1.gif” ： Top-1.gif 必须放在该 html 文件所在文件夹下的 image 子文件夹中。

第三种 :SRC=”../Top-1.gif” ： Top-1.gif 必须放在该 html 文件所在文件夹的上一层文件夹 ( 父文件夹 ) 。

第四种 :SRC=”http://www.rwsky.com/image/Top-1.gif ” ：图象文件 Top-1.gif 必须放在www.rwsky.com这个 web 服务器宿主目录（默认为 wwwroot ）的 image 子目录下。

前三种叫做相对 url ，第四种叫做绝对 url 。

<body background="image-url"> 指定背景图片

<body bgcolor=# text=#> 指定背景和文字颜色

image-url ：填充背景的图象，如图象的尺寸小于窗口，则背景图象重复填

满窗口区域。

bgcolor ： 景颜色 16 进制的红、绿、兰分量如 00FF00( 绿色 ) 。

Text ： 文本颜色

Link ： 链接指针颜色

Alinik ： 活动的链接指针颜色 ( 即当鼠标在链接上按下了左键还没有

松开的状态 )

vlinik ： 已访问过的链接指针颜色

例：背景图片的平铺

<body background="fish.jpg">

<body bgcolor=Silver text=#ff0000>

<font size=4> 精彩的网络 </font>

</body>

HTML快速入门2的更多相关文章

  1. Web Api 入门实战 （快速入门+工具使用+不依赖IIS）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html 屁话我也就不多说了,什么简介的也省了,直接简单概括+demo ...

  2. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  3. 前端开发小白必学技能—非关系数据库又像关系数据库的MongoDB快速入门命令（2）

    今天给大家道个歉,没有及时更新MongoDB快速入门的下篇,最近有点小忙,在此向博友们致歉.下面我将简单地说一下mongdb的一些基本命令以及我们日常开发过程中的一些问题.mongodb可以为我们提供 ...

  4. 【第三篇】ASP.NET MVC快速入门之安全策略（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  6. Mybatis框架 的快速入门

    MyBatis 简介 什么是 MyBatis? MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除 了几乎所有的 JDBC 代码和参数的手工设置以及结果 ...

  7. grunt快速入门

    快速入门 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.:奇数版本 ...

  8. 【第一篇】ASP.NET MVC快速入门之数据库操作（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  9. 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  10. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

随机推荐

  1. am，pm时间转换

    写在前面 最近遇到的一个问题,在英文操作系统上,获取到的时间是带am或者pm的.但是数据库是datetime类型,存储的时候竟然都变成0000-00-00 00:00:00.但是在中文操作系统上又是正 ...

  2. Grovvy Step byStep Examples

    def LIMIT=10 def count=1 println 'start' while(count<=LIMIT){ println "count:${count}" ...

  3. 每天一个linux命令（23）: chown命令

    chown将指定文件的拥有者改为指定的用户或组,用户可以是用户名或者用户ID:组可以是组名或者组ID:文件是以空格分开的要改变权限的文件列表,支持通配符.系统管理员经常使用chown命令,在将文件拷贝 ...

  4. 思甜雅--关于qq的NABCD模型分析

    个人连接:http://www.cnblogs.com/xiaoliulang/ 关于QQ的NABCD模型 N--Need 随着电脑的普及,人们在网络上进行交流的时间越来越多,由于现有的交流工具还不是 ...

  5. OC基础--OC中的类方法和对象方法

    PS:个人感觉跟C#的静态方法和非静态方法有点类似,仅仅是有点类似.明杰老师说过不要总跟之前学过的语言做比较,但是个人觉得,比较一下可以加深印象吧.重点是自己真的能够区分开! 一.OC中的对象方法 1 ...

  6. hdu1520 树形dp

    树形dp入门,在树上进行dp. 状态转移方程: dp[i][0] = max(dp[j][0], dp[j][1]);//i为j的上司 并且i不来 dp[i][1] = dp[j][0];//i来了 ...

  7. ActiveMQ 入门使用实例

    1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/download-archives.html 2.运行ActiveMQ 解压缩apache-active ...

  8. 【CodeForces 620D】Professor GukiZ and Two Arrays

    题 题意 两个数列,一个有n个数,另一个有m个数,让你最多交换两次两个数列的数,使得两个数列和的差的绝对值最小,求这个差的绝对值.最少交换次数.交换数对 分析 交换0次.1次可得到的最小的差可以枚举出 ...

  9. 简短的几句js实现css压缩和反压缩功能

    写在前面 最近一直在整理css,但因为现在Visual Studio 2013太智能了,它每每在我按ctrl+E+D进行格式化代码的时候,就会将css进行层次格式化(如下图所示),而这个格式让我老大实 ...

  10. 轻量级应用开发之（10） UINavigationController导航控制器

    一 多控制器 1)一个iOS的app很少只由一个控制器组成,除非这个app极其简单2)当app中有多个控制器的时候,我们就需要对这些控制器进行管理3)有多个view时,可以用一个大的view去管理1个 ...