HTML基础知识——滚动条、字体、链接、调色

于 2022-07-14 17:59:29 发布
阅读量874 收藏 2
点赞数
分类专栏： 技术介绍 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kxiaozhuk/article/details/125789890
版权

滚动条 

这是由IE提供的滚动条，可不要被众多的属性吓到了，越多的属性功能越强喔！

【文字卷动标记】

<MARQUEE>...</MARQUEE> 文字卷动 ( 滚动条 )。 

【相关属性】

·BEHAVIOR = 设定卷动方式
-- ALTERNATE 交替来回卷动
-- SCROLL 卷动 ( 预设 )
-- SLIDE 滑动

·BGCOLOR = color 背景颜色
·DIRECTION = 设定卷动方向
·HEIGHT = n 高度
·LOOP = n 循环 , 卷动次数 ( 预设循环 )
·SCROLLAMOUNT = n 设定卷动距离
·SCROLLDELAY = milliseconds 设定卷动时间
·TRUESPEED = milliseconds 设定卷动速度
·WIDTH = n 宽度 ( 可设百分比% )

【举例】

如 : <MARQUEE BGCOLOR=RED BEHAVIOR=ALTERNATE DIRECTION=LEFT SCROLLAMOUT=10 SCROLLDELAY=100> <FONT COLOR=WHITE>流年设计</FONT></MARQUEE>
流年设计 

如 : <MARQUEE BGCOLOR=GREEN HEIGHT=50 BEHAVIOR=SCROLL DIRECTION=UP SCROLLAMOUT=10 SCROLLDELAY=300> <FONT COLOR=WHITE><CENTER>流年设计</CENTER></FONT></MARQUEE>

流年设计 

字体 

我们在这里将要谈的是有关文字的标记，包括字体大小、颜色、字型...等变化，适当的应用可以增加页面的美观！

　　常用字体标记 

<Hn>...</Hn> 标题，设定标题字体大小， n = 1 ( 大 ) ~ 6 ( 小 ) 会自动跳下一行。通常用在如章节、段落等标题上。

如 : <H2> 标题 </H2>

标题

如 : <H3 ALIGN = CENTER> 标题 </H3> ( 标题置中 )

标题

<B>...</B> 粗体字。

如 : <B> 粗体字 </B> 

粗体字 

<I>...</I> 斜体字。

如 : <I> 斜体字 </I>
斜体字 

<U>...</U> 加底线。

如 : <U> 加底线 </U>
加底线 

<DEL>...</DEL> 横线 ( 表示删除 )。

如 : <DEL> 横线 </DEL>
横线

<TT>...</TT> 打字体 ( 固定宽度文字 )。

如 : <TT> 打字体 </TT>
打字体 

<SUP>...</SUP> 上标字。

如 : 字体 <SUP> 上标字 </SUP>
字体上标字 

<SUB>...</SUB> 下标字。

如 : 字体 <SUB> 下标字 </SUB>
字体下标字 

<!...> 注解 ( 不会显示在浏览器上 )，可以多行。

如 : <! 更新日期 : 2000/1/1>

设定字体大小、颜色、字型 

有关设定文字的方法共有以下几种 :

1.设定HTML文件主体文字颜色。<BODY>...</BODY>标记。 

如 : <BODY TEXT=RED>...</BODY> 或
<BODY TEXT=#FF0000>...</BODY>

2.设定基本字体大小、颜色、字型。<BASEFONT>...</BASEFONT>标记。

3.设定字体大小、颜色、字型。<FONT>...</FONT>标记。

<BASEFONT>...</BASEFONT> 设定基本字体，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。

如 : <BASEFONT SIZE=4> 基本字体大小为 4 </BASEFONT>
基本字体大小为 4

如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT>
设定颜色

如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
设定字型

如 : <BASEFONT COLOR =#FF0000> 设定颜色 </BASEFONT>
设定颜色

如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
设定字型

如 : <BASEFONT FACE = 标楷体 , 细明体 > 设定字型 </BASEFONT>
设定字型

<BIG>...</BIG> 基本字体加大。

如 : <BASEFONT SIZE=4> 基本字体大小为 4，</BASEFONT>
<BIG> 加大为 5 </BIG>
基本字体大小为 4，加大为 5

<SMALL>...</SMALL> 基本字体减小。

如 : <BASEFONT SIZE=4> 基本字体大小为 4，</BASEFONT>
<SMALL> 减小为 3 </SMALL>
基本字体大小为 4，减小为 3

<FONT>...</FONT> 设定字体大小、颜色、字型，SIZE = 1 ~ 7，1 ( 最小 ) 7 ( 最大 )。

如 : <FONT SIZE=4> 字体大小为 4 </FONT>
字体大小为 4 

如 : <BASEFONT SIZE=4> 基本字体大小为 4
<FONT SIZE=+1> +1字体大小为 5 </FONT>
<FONT SIZE=-2> -2字体大小为 2 </FONT>...</BASEFONT>
　　基本字体大小为 4
+1字体大小为 5
-2字体大小为 2

如 : <FONT COLOR =#FF0000> 设定颜色 </FONT>
设定颜色

如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT>
设定字型 

如 : <FONT COLOR =#FF0000> 设定颜色 </FONT>
设定颜色

如 : <FONT FACE = 标楷体 , 细明体 > 设定字型 </FONT>
设定字型 

　　注意事项 

1. 设定字体的大小分 : 绝对SIZE 如 : <FONT SIZE=4>
和 相对SIZE 如 : <FONT SIZE=+1> ( 以 BASEFONT 设定的字体大小做加减 )。

2. 设定字体的颜色可以是颜色名称或#RRGGBB表红绿蓝强度 ( 00 暗 ~ FF 亮 )。 #RRGGBB 所代表的是红、绿、蓝三原色，每一色由两位十六进制的数值表示 ( 即十进制 0 ~ 255 )。
十六进制 : 0、1、2、3、4、5、6、7、8、9、A、B、C、D、E、F。

3. 设定字体的字型会按照顺序找出显示的字型，若找不到则以系统预设字型显示。 

链接 

现在的网站没有用图片的，几乎很少了吧！图片增加了网站版面的美观，不过也不要放了大量的图片，而拖慢网站传输的效率喔！

　　有关设定图片的方法共有以下几种 :

  1. 设定HTML文件背景图片、背景颜色。<BODY>...</BODY>标记。
    如 : <BODY BACKGROUND=A.GIF>...</BODY> 或
    <BODY BGCOLOR=#000000>...</BODY>
  2. 设定图片。<IMG>标记。
  3. 设定地图。<MAP>...</MAP>标记。

　　常用图片标记 

<IMG> 指令

相关属性 :
·ALIGN 调整
·ALT 提示字
·BORDER 边框
·HEIGHT 高度
·SRC 文件或URL位址
·USEMAP 地图名称
·WIDTH 宽度

如 : 可插入图片 ( GIF、JPG格式 )、AVI电影
<CENTER>
<IMG SRC="../../../images/pcedu_lo.gif" ALT="太平洋网络学院" ALIGN=TOP BORDER=1>
</CENTER>

<MAP>...</MAP> 地图

相关属性 :
·NAME 名称

<AREA> 设定地图动作区域

相关属性 :
·COORDS 设定动作区域座标 ( 左上角座标 : X1,Y1 ; 右下角座标 : X2,Y2 )
·HREF 动作区域连结点 ( 可载入位址或文件 )
·NOHREF 动作区域连结点不动作
·SHAPE 外型

　　举例 

设定地图
<IMG BORDER=0 SRC=A.GIF USEMAP=#A>
<MAP NAME=A>
<AREA SHAPE=RECT COORDS=0,0,200,100 HREF=1.HTM>
<AREA SHAPE=RECT COORDS=0,100,200,200 NOHREF>
<AREA SHAPE=RECT COORDS=0,200,200,300 HREF=3.HTM>
</MAP>

调色原理 

■ 调色原理： 

HTML 的颜色表示可分两种：

  • 以命名方式定义常用的颜色，如 RED。
  • 以 RGB 值表示，如 #FF0000 表示 red。 

　　命名方式所包括的色种不多也不是很方便，所以较少采用，以下介绍 RGB 值的原理：

　　众所周知颜色是由 "red" "green" "blue" 三原色组合而成的，在 HTML 中对于彩度的定义是采用十六进制的，对于三原色 HTML 分别给予两个十六进位去定义，也就是每个原色有 256 种彩度，故此三原色可混合成一千六百多万个颜色。

　　例如

　　白色的组成是 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 值前加上符号 # 以示分别，但不加也可。

■ HTML 基本架构：

按不同颜色按钮以测试前景颜色的效果 （只适合 Internet Explorer）             按不同颜色按钮以测试背景颜色的效果             或输入一个 RGB 颜色值或名称    

■ 16 常用颜色表：

Color

Value

Name

Color

Value

Name

#00FFFF

aqua

#808080

gray

#000080

navy

#C0C0C0

silver

#000000

black

#008000

green

#808000

olive

#008080

teal

#0000FF

blue

#00FF00

lime

#800080

purple

#FFFF00

yellow

#FF00FF

fuchsia

#800000

maroon

#FF0000

red

#FFFFFF

white

■ 其它常用颜色：

Color

Value

Name

Color

Value

Name

#F0F8FF

aliceblue

#A00000

antiquewith

#7FFFD4

aquamarine

#F0FFFF

azure

#F5F5DC

beige

#FFE4C4

bisque

#000000

black

#FFEBCD

blanchedalmond

#0000FF

blue

#8A2BE2

blueviolet

#A52A2A

brown

#DEB887

burlywood

#5F9EA0

cadetblue

#7FFF00

chartreuse

#D2691E

chocolate

#FF7F50

coral

#C0F000

cornfloewrblue

#FFF8DC

cornsilk

#00FFFF

cyan

#00008B

darkblue

#008B8B

darkcyan

#B8860B

darkgoldenrod

#A9A9A9

darkgray

#006400

darkgreen

#DA0000

darkhaki

#8B008B

darkmagenta

#556B2F

darkolivegreen

#DA000E

darkorenge

#9932CC

darkorchid

#8B0000

darkred

#E9967A

darksalmon

#8FBC8F

darkseagreen

#483D8B

darkslateblue

#2F4F4F

darkslategray

#00CED1

darkturquoise

#9400D3

darkviolet

#FF1493

deeppink

#00BFFF

deepskyblue

#696969

dimgray

#1E90FF

dodgerblue

#B22222

firebrick

#FFFAF0

floralwhite

#228B22

forestgreen

#DCDCDC

gainsboro

#00000E

gostwhite

#FFD700

gold

#00E00D

golenrod

#808080

gray

#008000

green

#ADFF2F

greenyellow

#F0FFF0

honeydew

#FF69B4

hotpink

#CD5C5C

indianred

#FFFFF0

ivory

#F0E68C

khaki

#E6E6FA

lavender

#FFF0F5

lavenderblush

#7CFC00

lawngreen

#FFFACD

lemonchiffon

#ADD8E6

lightblue

#F08080

lightcoral

#E0FFFF

lightcyan

#0000E0

lightgodenrod

#0000E0

lightgodenrodyellow

#0000A0

lightgray

#90EE90

lightgreen

#FFB6C1

lightpink

#FFA07A

lightsalmon

#20B2AA

lightseagreen

#87CEFA

lightskyblue

#0000EB

lightslateblue

#778899

lightslategray

#B0C4DE

lightsteelblue

#FFFFE0

lightyellow

#32CD32

limegreen

#FAF0E6

linen

#FF00FF

magenta

#800000

maroon

#66CDAA

mediumaquamarine

#0000CD

mediumblue

#BA55D3

mediumorchid

#ED0000

mediumpurpul

#3CB371

mediumseagreen

#7B68EE

mediumslateblue

#00FA9A

mediumspringgreen

#48D1CC

mediumturquoise

#C71585

mediumvioletred

#191970

midnightblue

#F5FFFA

mintcream

#FFE4E1

mistyrose

#FFE4B5

moccasin

#FFDEAD

navajowhite

#000080

navy

#A0B0E0

navyblue

#FDF5E6

oldlace

#6B8E23

olivedrab

#FFA500

orange

#0E0EED

orengered

#DA70D6

orchid

#A00D00

palegodenrod

#98FB98

palegreen

#AFEEEE

paleturquoise

#DB7093

palevioletred

#FFEFD5

papayawhip

#FFDAB9

peachpuff

#CD853F

peru

#FFC0CB

pink

#DDA0DD

plum

#B0E0E6

powderblue

#800080

purple

#FF0000

red

#BC8F8F

rosybrown

#4169E1

royalblue

#8B4513

saddlebrown

#FA8072

salmon

#F4A460

sandybrown

#2E8B57

seagreen

#FFF5EE

seashell

#A0522D

sienna

#87CEEB

skyblue

#6A5ACD

slateblue

#708090

slategray

#FFFAFA

snow

#00FF7F

springgreen

#4682B4

steelblue

#D2B48C

tan

#D8BFD8

thistle

#FF6347

tomato

#40E0D0

turquoise

#EE82EE

violet

#00E0ED

violetred

#F5DEB3

wheat

#000E00

hite

#F5F5F5

whitesmoke

#FFFF00

yellow

#9ACD32

yellowgreen

kxiaozhuk
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML网页滚动条使用整理_网页滚动条使用详解
天马3798
06-01 629
HTML Document 滚动条，自动出现；当网页内容超出浏览器可视宽度或者高度，滚动条自动出现；不同浏览器滚动条样式效果不同。1.js绑定2.jquery 绑定3.js滚动条监听：滚动条事件，操作滚动条滚动。
为div添加滚动条.html
04-16
为div添加滚动条 html 欢迎下载
关于HTML中的滚动条
数据库
06-15 236
今天学习牛腩新闻发布系统的时候牛腩老师讲到了滚动条的一些知识,提到的不多,只涉及到了滚动条的一部分知识,如果想深入研究的话这些是不够的,还要自己去搜集一些相关的知识 我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,只需要在.aspx的源码中的顶端部分加上 MaintainScr...
HTML滚动条
菜鸟小灰灰的博客
01-15 538
滚动条第一种方式： CSS linear-gradient()_CSS3 000102030405 101112131515 202122232425 303132333435 滚动条第二种方式： CSS linear-gradient()_CSS
文章内容显示栏 -- overflow 属性
10-11 223
overflow 属性规定当内容溢出元素框时发生的事情。 说明这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。               默认值：auto               继承性：no                  版本：CSS2JavaScript 语法：object.style.overflow="scroll"浏览器支持所有主流浏览器都支持 overflow 属性。
windows 程序设计.doc
08-22
21. **动态链接库** - DLL（Dynamic Link Library）可提高代码重用，本章介绍了DLL的基础知识和各种使用场景，帮助开发者理解如何创建和使用DLL。 22. **声音与音乐** - 这部分涉及到Windows多媒体编程，包括波形...
JAVA上百实例源码以及开源项目
01-03
　Java波浪文字，一个利用Java处理字符的实例，可以设置运动方向参数，显示文本的字符数组，高速文本颜色，显示字体的 FontMetrics对象，得到Graphics实例，得到Image实例，填充颜色数组数据，初始化颜色数组。...
JAVA上百实例源码以及开源项目源代码
12-11
日历表格面板 [ConfigLine.java] 控制条类 [RoundBox.java] 限定选择控件 [MonthMaker.java] 月份表算法类 [Pallet.java] 调色板，统一配色类 Java扫雷源码 Java生成自定义控件源代码 2个目标文件 Java实现HTTP连接...
Visual C++2010开发权威指南（共三部分）.part1.rar
11-12
9.1.4 颜色和调色板 412 9.1.5 图形设备接口函数 413 9.2 Windows屏幕绘图简介 414 9.2.1 窗口客户区 414 9.2.2 映射模式 414 9.2.3 图形刷新 416 9.3 微软GDI绘图简介 416 9.3.1 GDI基础 416 9.3.2 GDI结构 417 ...
html自定义滚动条(整理)
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
04-27 2584
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义滚动条<
html滚动条
12-06
很简单的html滚动条，适合刚开始学习html的同学，非常实用。
HTML中滚动条各种样式示例
11-24
HTML中滚动条样式。
html中怎么设置滚动条效果,滚动条怎么实现
weixin_30316931的博客
06-04 3533
HTML中如何在div中实现滚动条？HTML中如何在div中实现滚动条？ CSS布局HTML小编今天和大家分享问overflow:scroll; /*任何时候都强制显示滚动条*/overflow:auto; /*需要的时候会出现滚动条*/overflow-x:auto; /*控制X方向的滚动条*/overflow-y:auto; /*控制Y方向的滚动条*/受overflow影响的必需是块元素，并且...
HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type="range"]）
weixin_32211599的博客
05-30 2903
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的：color、date、datetime、datetime-local、month、week、time、email、number、range、search、tel 和 url。input的type属性设置input的type="range"即可得到滑动条控件，如下：const range = d...
html 滚动条_自定义滚动条(Custom ScrollBar)
weixin_39796652的博客
12-01 266
时间如流水，只能流去不流回！点赞再看，养成习惯，这是您给我创作的动力！本文 Dotnet9 https://dotnet9.com 已收录，站长乐于分享dotnet相关技术，比如Winform、WPF、ASP.NET Core等，亦有C++桌面相关的Qt Quick和Qt Widgets等，只分享自己熟悉的、自己会的。阅读导航：一、先看效果二、本文背景三、代码实现四、文章参考五、代码下载一、先看效...
HTML滚动条样式代码及使用技巧
热门推荐
前端小白
12-15 3万+
html中滚动条属性设置 scrollbar属性、样式详解 1、 overflow内容溢出时的设置（设定被设定对象是否显示滚动条）     overflow-x水平方向内容溢出时的设置     overflow-y垂直方向内容溢出时的设置     以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2、 scrollbar-3d-light-colo
HTML基础知识：内嵌式框架入门
"本章主要介绍了HTML基础知识，包括HTML简介、标记语法、文档结构、段落和列表标记、图片和表格处理、超链接、表单以及如何插入多媒体元素和使用内嵌式框架。HTML是一种描述性的标记语言，用于定义网页内容的显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值