整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

html开发笔记08- 字体样式与颜色(标签的属性)

、标签的分类:双标签和单标签

双标签:就是成对出现的,类似于这种 <html> </html>

单标签:就是可以单个使用的,类似于 <br> 换行标签 或 <hr>水平线标签。

二、标签属性的作用:

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等,这个是标签属性的作用。


三、标签属性的特性:

1、每一个标签都有自己的属性,单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值,值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值,必须是系统可以识别的字体,一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码:↓

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<!--网页抬头-->

<title>中央气象局</title>

</head>

<body>

<!--水平线的宽度是500像素,这个width就是标签属性-->

<hr width="500">

<!--下面这个是多个标签属性,多个属性之间用空格隔开-->

<font color="red" face="黑体" size="7">标签属性</font>

</body>

</html>

个网页对应于一个html文件,HTML文件以.htm或.html为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑来产生HTML文件。标准的HTML文件都具有一个基本的整体结构,即HTML文件的开头与结尾标志和HTML的头部与实体2大部分。有3个双标记符用于页面整体结构的确认。

1、HTML元素
a、从开始标签到结束标签的所有代码
b、开始(开放)标签<p>、结束(闭合)标签</p>、标签内的东西:元素内容
c、<br/>空元素,换行的意思
d、用p标签行之间间隔较大,用br标签行之间间隔较小
e、HTML元素语法:
(1)元素内容是开始标签与结束标签之间的内容
(2)空元素在开始标签中进行关闭
(3)大多数HTML元素可拥有属性
f、嵌套的HTML元素:大多数的HTML元素都是可以嵌套使用的

2、HTML属性
a、标签可以拥有属性为元素提供更多信息
b、属性以键值对的形式出现:例如a标签里面 href="www.baidu.com"
c、常用标签类型:
(1)<h1 align = " ">对齐方式,例如center中间
(2)<body bgcolor=" ">背景颜色
(3)<a target = " ">规定在何处打开链接,_self本地默认打开
属性:
(1)默认,覆盖原标签页
(2)_blank,打开为新标签页
(4)<body backgroud=" ">设置背景图片
d、通用属性:
(1)class:规定元素的类名
(2)id:规定元素的唯一ID
(3)style:规定元素的样式,一般引用css
(4)title:规定元素的额外信息

3、HTML格式化
a、定义粗体文本
b、<big>定义大号字,HTML5会被css代替
c、<em>定义着重问题
d、定义斜体字
e、<small>定义小号字
f、<strong>定义加重语气
g、<sub>定义下标字
h、<sup>定义上标字
i、<ins>定义插入字,有下划线
j、<del>定义删除字,有删除线

每种HTML标记符在使用中可带有不同的属性项,用于描述该标记符说明的内容显示不同的效果。正文标记符中提供以下属性来改变文本的颜色及页面背景。

头条创作挑战赛#

颜色对于 css 来说是非常重要的,网站之所以会呈现出五彩斑斓的样式,就是这些颜色样式起的作用。在 css 中,对于颜色样式有很多种表达方式,今天我们就来盘点下 css 中颜色的格式。

名字颜色

在 css 中,默认定义了很多名字颜色,比较常见的比如 yellow,blue,red,pink 等,实际上,css 中一共定义了 140 个颜色名字,这些名字你都可以直接拿来使用。虽然 140 种看起来很多,但是实际上它比 8bit 的颜色还要少,因此,平时我们很少使用它。

RGB

这是一种颜色格式,从名字我们就知道它是 red,green,blue 三种颜色的简写,我们都知道三原色原理,也就是通过三种基本颜色,我们就可以组合出其它的颜色出来,因此,rgb 就可以表示出我们可以看到的各种颜色。

在 css 中,red,green,blue 被称作三通道,每个通道的值是从 0-255,通过混合这些通道颜色,我们就可以创造出 1600 多万种颜色。需要注意的是 rgb(255,255,255,0.5) 允许我们有第四个参数,它的值从 0-1,用来表示透明度。

.translucent-box {
  background: rgb(255 0 0 / 0.5);
}

Hex Codes

通过十六进制数字来表示颜色代码,6 位数字被分成了三组,每两位一组,一位是 16,两位就是 16*16=256,所以它其实和 RGB 基本是相同的,只不过它是用 16 进制进行表示。

它的三组也是代表着 red,green,blue,和 RGB 一样的是,它也可以指定透明度,也就是说我们可以使用 8 位十六进制来表示颜色。

.translucent-box {
  background: #ffff0080;
}

HSL

和 RGB 不同的是,HSL 是通过指定色调,饱和度,亮度来表示颜色的。

在 HSL 中,我们的色调是在 0deg-360deg 之间,转一圈的大致颜色范围就是红橙黄绿青蓝紫,饱和度是在 0-100%之间,亮度是在 0%-100%之间。

HSL 是可以和 RGB 进行转换的,其中色调的转换公式比较复杂。

.translucent-box {
  background-color: hsl(0deg 100% 2%);
}

P3

P3 是一个在继承 sRGB 色彩空间范围之外,又提供了更亮更充满活力的色彩范围,也就是说 P3 表示的色彩范围要更大。

因此,使用 P3 的时候,需要使用特殊的属性值 color 形式来表示,但是对于 color 这个属性,目前只有 safari 支持。

.translucent-box {
  background: color(display-p3 1 0 0);
}

LCH

因为 HSL 对于不同颜色在表示亮度的时候给人的感觉是不同的,因此,人们发明了 LCH 用来更接近人眼感知的色彩表示方式。

LCH 代表 “亮度色相”。“色度”或多或少是“饱和度”的同义词。它在概念上与 HSL 非常相似,但有两个很大的区别:

  • 如前所述,它优先考虑人类的感知,因此具有相同“亮度”值的两种颜色将感觉同样轻。
  • 它不绑定到任何特定的颜色空间。

与我们看到的其他颜色格式不同,LCH 不受 sRGB 的约束。它甚至没有绑定到 P3!它通过对色度没有上限来实现这一点。

在 HSL 中,饱和度范围从 0%(无饱和)到 100%(完全饱和)。这是可能的,因为我们知道我们正在谈论 sRGB 色彩空间,一个有限的调色板。

但是 LCH 与特定的色彩空间无关,因此我们不知道饱和上限在哪里。它不是一成不变的:随着显示技术的不断改进,我们可以期待显示器达到越来越宽的色域。LCH 将自动能够通过调高色度来引用这些扩展的颜色。谈论面向未来!

.translucent-box {
  background: lch(50% 120 20);
}

总结

CSS 是一种令人惊讶的难以掌握的语言。无论花了多少年练习,总会觉得有很多我不知道的东西。

就目前而言,在 LCH 没有被完全支持的情况下,HSL 也许更加适合表达。

所以说很多时候,当我们以为自己已经很熟悉或者掌握一门语言的时候,其实可能我们才仅仅是刚入门而已,任何知识当我们深入研究的时候我们都会发现我们对它的了解其实并不是真的很透彻。