HTML 之简介

TML 实例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

实例解析

DOCTYPE 声明了文档类型
位于标签 <html> 与 </html> 描述了文档类型
位于标签 <body> 与 </body> 为可视化网页内容
位于标签 <h1> 与 </h1> 作为一个标题使用
位于标签 <p> 与 </p> 作为一个段落显示

	<!DOCTYPE html> 在HTML5中也是描述了文档类型。

什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

Web 浏览器

Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

HTML 网页结构

下面是一个可视化的HTML页面结构：

<html>

<head>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

	只有 <body> 区域 (白色部分) 才会在浏览器中显示。

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

<!DOCTYPE> 声明

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

查看完整网页声明类型 DOCTYPE 参考手册。

中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8。

HTML 实例

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>页面标题</title></head><body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body></html>

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

者 | Adam Giese

译者 | 王强

CSS 中有两种颜色模型 RGB 和 HSL，如何用 JavaScript 控制它们？

背景知识：颜色模型

点开这篇文章的你，肯定是想要学习怎样控制颜色的——我们后面就会讲具体操作。但首先，我们需要对 CSS 如何标记颜色有一个基本的认识。CSS 使用的是两种颜色模型：RGB 和 HSL，我们先简单了解一下。

1、RGB

RGB 就是“红色，绿色，蓝色”的简称。这个模型由三个数字组成，每个数字表示其所代表的颜色在最终生成的颜色中有多高的亮度。在 CSS 中，每个数值的范围都是 0-255，三个数值间用逗号分隔，作为 CSS rgb 函数的参数，例如：rgb（50,100,0）。

RGB 是一种“增量”颜色系统。这意味着每个数字越高，最终生成的颜色就越亮。如果所有值都相等就生成灰度颜色；如果所有值都为零，结果为黑色；如果所有值都是 255，则结果为白色。

此外你也可以使用十六进制表示法来标记 RGB 颜色，其中每种颜色的数值从 10 进制转换为 16 进制。例如，rgb（50,100,0）用 16 进制就写成＃326400。

虽然我个人比较习惯使用 RGB 模型（特别是十六进制），但我也经常发现它不易阅读，也不容易操作。下面来看 HSL 模型。

2、HSL

HSL（https://codepen.io/AdamGiese/full/989988044f3b8cf6403e3c60f56dd612）是“色调，饱和度，光线”的简称，HSL 也包含三个值。色调值对应于色轮上的点，由 CSS 角度值表示，最常用的是度数单位。

饱和度以百分比表示，是指颜色的强度。当饱和度为 100％时颜色最深，饱和度越低，颜色越浅，直到灰度为 0％。

亮度也以百分比表示，指的是颜色有多亮。“常规”的亮度是 50％。无论色调和饱和度值如何，100％的亮度都是纯白色，0％的亮度就是纯黑色。

我觉得 HSL 模型更直观一些，颜色之间的关系更加明显，控制颜色时只要简单地调整几个数字就可以了。

3、颜色模型之间的转换

RGB 和 HSL 颜色模型都将颜色分解为各种属性。要在不同模型之间进行转换，我们首先需要计算这些属性。

除了色调，上面提到的所有数值都可以表示为百分比。就连 RGB 值也是用字节表示的百分比。在下面提到的公式和函数中，这些百分比将由 0 到 1 之间的小数来表示。

这里提一下，我并不会深入探讨这些数学知识；相比之下，我将简要介绍一遍原始数学公式，然后将其转换为 JavaScript 格式。

4、从 RGB 模型中计算亮度

亮度是三个 HSL 值中最容易计算的一个。其数学式如下，其中 M 是 RGB 值的最大值，m 是最小值：

亮度的数学式

用 JavaScript 函数写成下面的形式：

const rgbToLightness =（r，g，b）=>
 1/2 *（Math.max（r，g，b）+ Math.min（r，g，b））;

5、从 RGB 模型中计算饱和度

饱和度仅比亮度稍微复杂一些。如果亮度为 0 或 1，则饱和度值为 0；否则，它基于下面的数学公式计算得出，其中 L 表示亮度：

饱和度的数学式

写成 JavaScript：

const rgbToSaturation = (r,g,b) => {
 const L = rgbToLightness(r,g,b);
 const max = Math.max(r,g,b);
 const min = Math.min(r,g,b);
 return (L === 0 || L === 1)
 ? 0
 : (max - min)/(1 - Math.abs(2 * L - 1));
};

6、从 RGB 模型中计算色调

从 RGB 坐标中计算色调角度的公式有点复杂：

色调的数学式

写成 JavaScript：

const rgbToHue = (r,g,b) => Math.round(
 Math.atan2(
 Math.sqrt(3) * (g - b),
 2 * r - g - b,
 ) * 180 / Math.PI
);

最后 180 / Math.PI 的算法是将结果从弧度转换为度。

7、计算 HSL

上面这些函数都可以包含在同一个功能函数里：

const rgbToHsl = (r,g,b) => {
 const lightness = rgbToLightness(r,g,b);
 const saturation = rgbToSaturation(r,g,b);
 const hue = rgbToHue(r,g,b);
 return [hue, saturation, lightness];
}

8、从 HSL 模型中计算 RGB 值

开始计算 RGB 之前，我们需要一些前提值。

首先是“色度”值：

色度的数学式

还有一个临时的色调值，我们将用它来确定我们所属的色调圈的“段”：

色调区间的数学式

接下来，我们设一个“x”值，它将用作中间（第二大）组件值：

临时“x”值的数学式

我们再设一个“m”值，用于调整各个亮度值：

亮度匹配的数学式

根据色调区间值，r，g 和 b 值将映射到 C，X 和 0：

RGB 值的数学式，不考虑亮度

最后，我们需要映射每个值以调整亮度：

用 RGB 来解释亮度的数学式

将上面这些都写到 JavaScript 函数中：

const hslToRgb = (h,s,l) => {
 const C = (1 - Math.abs(2 * l - 1)) * s;
 const hPrime = h / 60;
 const X = C * (1 - Math.abs(hPrime % 2 - 1));
 const m = l - C/2;
 const withLight = (r,g,b) => [r+m, g+m, b+m];
if (hPrime <= 1) { return withLight(C,X,0); } else
 if (hPrime <= 2) { return withLight(X,C,0); } else
 if (hPrime <= 3) { return withLight(0,C,X); } else
 if (hPrime <= 4) { return withLight(0,X,C); } else
 if (hPrime <= 5) { return withLight(X,0,C); } else
 if (hPrime <= 6) { return withLight(C,0,X); }
}

9、创建颜色对象

为了便于在操作属性时访问，我们将创建一个 JavaScript 对象。把前面提到的这些函数打包起来就能创建这个对象：

const rgbToObject = (red,green,blue) => {
 const [hue, saturation, lightness] = rgbToHsl(red, green, blue);
 return {red, green, blue, hue, saturation, lightness};
}
const hslToObject = (hue, saturation, lightness) => {
 const [red, green, blue] = hslToRgb(hue, saturation, lightness);
 return {red, green, blue, hue, saturation, lightness};
}

10、示例

我强烈建议你花些时间看看这个示例：

https://codepen.io/AdamGiese/full/86b353c35a8bfe0868a8b48683faf668

从中了解调节各个属性时其它属性如何发生变化，这样能帮助你更深入地了解两种颜色模型是如何对应的。

颜色控制

现在我们已经知道怎样在颜色模型之间进行转换了，那么就来看看该如何控制这些颜色！

1、更新属性

我们提到的所有颜色属性都可以单独控制，返回一个新的颜色对象。例如，我们可以编写一个旋转色调角度的函数：

const rotateHue = rotation => ({hue, ...rest}) => {
 const modulo = (x, n) => (x % n + n) % n;
 const newHue = modulo(hue + rotation, 360);
return { ...rest, hue: newHue };
}

rotateHue 函数会接受一个旋转参数并返回一个新函数，该函数接受并返回一个颜色对象。这样就可以轻松创建新的“旋转”函数：

const rotate30 = rotateHue(30);
const getComplementary = rotateHue(180);
const getTriadic = color => {
 const first = rotateHue(120);
 const second = rotateHue(-120);
 return [first(color), second(color)];
}

用这种方式，你也可以编写加深或提亮颜色的函数——或者反过来，减淡或变暗也行。

const saturate = x => ({saturation, ...rest}) => ({
 ...rest,
 saturation: Math.min(1, saturation + x),
});
const desaturate = x => ({saturation, ...rest}) => ({
 ...rest,
 saturation: Math.max(0, saturation - x),
});
const lighten = x => ({lightness, ...rest}) => ({
 ...rest,
 lightness: Math.min(1, lightness + x)
});
const darken = x => ({lightness, ...rest}) => ({
 ...rest,
 lightness: Math.max(0, lightness - x)
});

2、颜色谓词

除了颜色控制以外，你还可以编写“谓词”——亦即返回布尔值的函数。

const isGrayscale = ({saturation}) => saturation === 0;
const isDark = ({lightness}) => lightness < .5;

3、处理颜色数组

过滤器

JavaScript [] .filter 方法会接受一个谓词并返回一个新数组，其中包含所有“传递”的元素。我们在上一节中编写的谓词可以用在这里：

const colors = [/* ... an array of color objects ... */];
const isLight = ({lightness}) => lightness > .5;
const lightColors = colors.filter(isLight);

排序

要对颜色数组进行排序，首先需要编写一个“比较器”函数。此函数接受一个数组的两个元素并返回一个数字来表示“赢家”。正数表示第一个元素应该先排序，而负数表示第二个元素应该先排序。零值表示平局。

例如，这是一个比较两种颜色亮度的函数：

const compareLightness = (a,b) => a.lightness - b.lightness;

这是一个比较饱和度的函数：

const compareSaturation = (a,b) => a.saturation - b.saturation;

为了防止代码重复，我们可以编写一个高阶函数来返回一个比较函数来对比各种属性：

const compareAttribute = attribute =>
 (a,b) => a[attribute] - b[attribute];
const compareLightness = compareAttribute('lightness');
const compareSaturation = compareAttribute('saturation');
const compareHue = compareAttribute('hue');

平均属性

你可以搭配各种 JavaScript 数组方法来平衡颜色数组中的特定属性。首先，你可以使用 reduce 求和并用 Array length 属性分割来计算一个属性的均值：

const colors = [/* ... an array of color objects ... */];
const toSum = (a,b) => a + b;
const toAttribute = attribute => element => element[attribute];
const averageOfAttribute = attribute => array =>
 array.map(toAttribute(attribute)).reduce(toSum) / array.length;

你可以用它来“规范化”一组颜色：

/* ... continuing */
const normalizeAttribute = attribute => array => {
 const averageValue = averageOfAttribute(attribute)(array);
 const normalize = overwriteAttribute(attribute)(averageValue);
 return normalize(array);
}
const normalizeSaturation = normalizeAttribute('saturation');
const normalizeLightness = normalizeAttribute('lightness');
const normalizeHue = normalizeAttribute('hue');

4、结论

颜色是网络不可或缺的一部分。将颜色分解为属性就可以灵活控制它们，并创造出无限的可能。

查看英文原文：

https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8

福利推荐

前端领域的技术演进一直要比其他技术快一些，这给前端工程师带来持续的挑战。这里整理了从 Vue 到 React、iOS 到 Andoid、再到前端架构体系的干货课程，带你解读从前端小工到专家的实战心法，高效解决 80% 的开发难题。

课程利用 HTML 和 CSS 来打造《超能陆战队》里的“暖男”—大白，可学习如何用 HTML 结合 CSS 来设计高端大气上档次的图，并了解 HTML 布局，CSS 构建对象样式。
本教程由BigGod发布在实验楼，完整教程、代码及在线练习地址：纯 CSS 打造网页版「大白」——https://www.shiyanlou.com/courses/328

一、实验介绍

1.1 实验内容

还记得《超能陆战队》里的 “暖男” -「大白」么？是不是很想拥有一个？

没问题！今天我们就利用 HTML 和 CSS 来打造自己的「大白」！最终效果：

1.2 实验知识点

div 布局
CSS 相对定位
CSS 各种属性的应用

1.3 实验环境

本实验环境采用带桌面的 Ubuntu Linux 环境，实验中可能会用到桌面上的程序：

Firefox：浏览器，可以用在需要前端界面的课程里，只需要打开环境里写的 HTML/JS 页面即可；
GVim：非常好用的编辑器，最简单的用法可以参考课程 Vim编辑器

1.4 适合人群

本课程难度一般，只要你学过基本的 HTML 和 CSS 就能做出来。

二、开发准备

进入到 /home/shiyanlou/ 目录下，新建空白文档：

命名为 Baymax.html （其它名字也可以，但后缀名必须是 .html）：

使用 gedit 打开，准备编辑代码：

三、实验步骤

3.1 编写 HTML

下面通过 div定义大白身体的各个部位：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baymax</title>
</head>
<body>

3.2 添加 CSS 样式

我们已经使用 HTML 定义好「大白」的各个元素，现在就需要利用到 CSS 来绘制它的样式外表。

由于「大白」是白色的，为了更容易辨识，我们把背景设为深色。然后首先是头部：

<style>

body {
 background: #595959;

效果预览：

赶紧再来添加眼睛和嘴吧！

#eye,
#eye2 { 
 width: 11px; 
 height: 13px; 
 background: #282828; 
 border-radius: 50%; 
 position: relative; 
 top: 30px; 
 left: 27px; 
 
 /*旋转该元素*/

一个 mini 的「大白」，雏形初现：

接下来是躯干和腹部：

#torso,
#belly {
 margin: 0 auto; 
 height: 200px; 
 width: 180px; 
 background: #fff; 
 border-radius: 47%; 
 /*设置边框*/

赋予「大白」象征生命的心脏：

#heart{ 
 width:25px;

现在的「大白」是这个样子的了：

还没有手和脚，怪萌怪萌的...「大白」需要温暖的手臂：

#left-arm,
#right-arm {
 height: 270px; 
 width: 120px; 
 border-radius: 50%; 
 background: #fff; 
 margin: 0 auto; 
 position: relative; 
 top: -350px; 
 left: -100px; 
 transform: rotate(20deg); 
 z-index: -1;

还没有手指头呢：

#l-bigfinger,
#r-bigfinger {
 height: 50px; 
 width: 20px; 
 border-radius: 50%; 
 background: #fff; 
 position: relative; 
 top: 250px; 
 left: 50px; 
 transform: rotate(-50deg);

有点意思了：

迫不及待要给「大白」加上腿了吧：

#left-leg,
#right-leg {
 height: 170px; 
 width: 90px; 
 border-radius: 40% 30% 10px 45%; 
 background: #fff; 
 position: relative; 
 top: -640px; 
 left: -45px; 
 transform: rotate(-1deg); 
 z-index: -2; 
 margin: 0 auto;

duang~ duang~ duang~ 特技完成！

3.3 完整代码

四、总结

本课程使用 div+css 画出了萌萌的大白，相信通过完成本实验能加深你对 div 布局的理解以及提高对 css 各种属性的运用能力。

五、作业

代码中还有不少重复的地方，试着进一步简化代码
运用 CSS 动画让大白的眼睛动起来

本教程的完整步骤、代码及在线练习地址——https://www.shiyanlou.com/courses/328（更多课程请查看全部 - 课程 - 实验楼）

在线咨询

上一篇：玩法创新的手机页游-《传奇世界H5》测评
下一篇：HTML 实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商