HTML快速入门2

简介: 三、版面风格控制 1. 字体控制 A. 字体大小 用 和 表示,#为字号: 1 - 7 ,缺省为 3 ,可用 改变缺省字号。 设置字号有两种办法: l 设置绝对字号; l 设置相对字号; ,以缺省字号为基础,“+”号表示字体变大,“-”号表示字体变小。

三、版面风格控制

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="image-url">

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

?/P>

或 <img src="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">

HTML快速入门(二)

<body bgcolor=Silver text=#ff0000>

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

</body>

若转载请注明出处!若有疑问,请回复交流!
目录
相关文章
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
250 0
|
移动开发 前端开发 Java
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
340 20
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
403 13
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
271 3
|
移动开发 开发者 HTML5
构建你的首个个人网站:HTML基础入门
【8月更文挑战第29天】在数字化时代,拥有一个个人网站是展示自我、分享知识和技能的窗口。本文将引导你通过简单的步骤,使用HTML构建你的第一个个人网站。我们将探索HTML的基础标签,页面结构,以及如何将这些元素融合在一起创建一个简单的网页。无论你是编程新手还是希望扩展你的技术工具箱,这篇文章都提供了一条清晰的路径,帮助你开始你的网站开发之旅。
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
154 0
杨老师课堂之网页制作HTML的学习入门-含有案例1
杨老师课堂之网页制作HTML的学习入门-含有案例
216 3
|
存储 移动开发 API
HTML5本地存储:从入门到精通
HTML5本地存储:从入门到精通
397 1