整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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>
<title>頁面標題</title>
</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 打開，準備編輯代碼：
下面通過 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（更多課程請查看全部 - 課程 - 實驗樓）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
