HTML快速入门2

三、版面风格控制

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">

<body bgcolor=Silver text=#ff0000>

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

</body>

时间: 2024-11-08 12:01:02

HTML快速入门2的相关文章

笔记:Spring Cloud Zuul 快速入门

Spring Cloud Zuul 实现了路由规则与实例的维护问题,通过 Spring Cloud Eureka 进行整合,将自身注册为 Eureka 服务治理下的应用,同时从 Eureka 中获取了所有其他微服务的实例信息,这样的设计非常巧妙的将服务治理体系中维护的实例信息利用起来,使得维护服务实例的工作交给了服务治理框架自动完成,而对路由规则的维护,默认会将通过以服务名作为 ContextPath 的方式来创建路由映射,也可以做一些特别的配置,对于签名校验.登录校验等在微服务架构中的冗余问题

javaweb-html快速入门

本文主要是进行HTML简单介绍(详细的属性查帮助文档就行了,这里主要为快速入门,赶时间,在最短的时间中看明白一个html文件的代码(如果能称之为代码的话)详细的样式表,布局啥的有时间再研究吧) HTML 1.html的简介 1.1,html的全称:HyperText Mark-up Language ,超文本标记型语言,是网页的语言. 超文本:比文本更加强大(后面还会讲到XML,可扩展标记性语言) 标记:就是标签,html所有操作都是通过标签直接或间接的操作(把需要操作的数据通过标签封装起来)

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话

crosswalk 快速入门,利用WebRTC(html)开始开发视频通话 安装Python 从http://www.python.org/downloads/ 下载安装程序 安装完后,再添加到环境变量. 安装Oracle JDK 下载页面: http://www.oracle.com/technetwork/java/javase/downloads/ 选择要下载的Java版本(推荐Java 7). 选择一个JDK下载并接受许可协议. 一旦下载,运行安装程序. 安装Ant Ant:下载http

bash编程快速入门

首先,我们简单的介绍一下bash,bash是GNU计划编写的Unixshell,它是许多Linux平台上的内定shell,它提供了用户与系统的很好的交互,对于系统运维人员,bash的地位是举足轻重的,bash编程能很快处理日常的任务 bash入门,一个最简单的bash例子 #vim hello.sh #!/bin/bash #This is the first example of the bash #echo "Hello world" 下面,我们就这个简单的bash 脚本来介绍一下

定时器(Quartz)快速入门

Quartz概述 Quartz中的触发器 Quartz中提供了两种触发器,分别是CronTrigger和SimpleTrigger. SimpleTrigger 每 隔若干毫秒来触发纳入进度的任务.因此,对于夏令时来说,根本不需要做任何特殊的处理来"保持进度".它只是简单地保持每隔若干毫秒来触发一次,无论你的 SimpleTrigger每隔10秒触发一次还是每隔15分钟触发一次,还是每隔24小时触发一次. CronTrigger 在特定"格林日历"时刻触发纳入进程的

vue.js--60分钟快速入门

Vue.js--60分钟快速入门 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文摘自:http://www.cnblogs.com/keepfool/p/5619070.html 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM

Netty5快速入门及实例视频教程(整合Spring)

Netty5快速入门及实例视频教程+源码(整合Spring) https://pan.baidu.com/s/1pL8qF0J 01.传统的Socket分析02.NIO的代码分析03.对于NIO的一些疑惑04.Netty服务端HelloWorld入门05.Netty服务端入门补充06.Netty客户端入门07.如何构建一个多线程NIO系统08.Netty源码分析一09.Netty源码分析二10.Netty5服务端入门案例11.Netty5客户端入门案例12.单客户端多连接程序13.Netty学习

一起学Google Daydream VR开发,快速入门开发基础教程一:Android端开发环境配置一

原文因涉及翻墙信息,被强制删除,此文为补发! 准备工作 进入Google Daydream开发者官网,开启准备工作,官网地址:https://vr.google.com/daydream/developers/ -------------------------------------------------------------------------------------------------------------------- Google Daydream开发者网址: https

程序员带你十天快速入门Python,玩转电脑软件开发(二)

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到熟悉的效果. 声明:本次教程主要适用于已经习得一门编程语言的程序员.想要学习第二门语言.有梦想,立志做全栈攻城狮的你 如果是小白,也可以学习本教程.不过可能有些困难.如有问题在文章下方进行讨论.或者添加QQ群538742639.群马上就满了,名额不多. 上节课主要讲解了以下内容: 为什么学习Pyth

程序员带你学习安卓开发,十天快速入门-基础知识(四)

关注今日头条-做全栈攻城狮,学代码也要读书,爱全栈,更爱生活.提供程序员技术及生活指导干货. 如果你真想学习,请评论学过的每篇文章,记录学习的痕迹. 请把所有教程文章中所提及的代码,最少敲写三遍,达到熟悉的效果. 本系列课程是.Net程序员学习安卓开发系列课程. 下面是前三次课程列表: 程序员带你学习安卓开发,十天快速入门-安卓学习必要性 程序员带你学习安卓开发,十天快速入门-开发工具配置学习 程序员带你学习安卓开发,十天快速入-对比C#学习java语法 为了大家系统有效的快速入门安卓开发,推荐