三、版面风格控制

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. WCF入门（7）

    前言 前段时间忙着驾照科目二的考试,都没有机会碰自己的电脑.说起来也是第一次参加这么没信心的考试,不过好在过了. 再打个广告吧,昨天终于把下载的WCF视频全部传到了QQ群共享里面,群号37819043 ...

  2. JavaScript基础---语言基础（3）

    流程控制语句 学习要点: 1.switch语句 2.for...in语句 3.break和continue语句 4.with语句 ECMA-262规定了一组流程控制语句.语句定义了ECMAScript ...

  3. Grovvy Step byStep Examples

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

  4. 读代码之private construtor

    private 构造函数 private修饰构造函数在Singleton设计模式中经常使用.但是今天在读到EntityUtils时,发现这是一个final类.final很好理解:EntityUtils ...

  5. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  6. 【POJ 1035】Spell checker

    题 题意 每个单词,如果字典里存在,输出”该单词 is correct“:如果字典里不存在,但是可以通过删除.添加.替换一个字母得到字典里存在的单词,那就输出“该单词:修正的单词”,并按字典里的顺序输 ...

  7. android 6.0 SDK中删除HttpClient的相关类的解决方法

    一.出现的情况 在eclipse或 android studio开发, 设置android SDK的编译版本为23时,且使用了httpClient相关类的库项目:如android-async-http ...

  8. Spring的辅助类

    http://www.cnblogs.com/maoan/p/3446224.html spring获取ApplicationContext对象的方法——ApplicationContextAware

  9. session实现防止重复提交,以及验证

    参考文档 1.生成Token的参考文档.http://www.cnblogs.com/TianFang/p/3180899.html 2.主要参考文档.http://www.cnblogs.com/x ...

  10. The Honeynet ProjectThe Honeynet Project

    catalogue . 蜜罐基本概念 . Kippo: SSH低交互蜜罐安装.使用 . Dionaea: 低交互式蜜罐框架部署 . Thug . Amun malware honeypots . Gl ...