整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
TML常用標(biāo)簽有：a標(biāo)簽、table標(biāo)簽、img標(biāo)簽、form標(biāo)簽和input標(biāo)簽。
作用
屬性
（一）href
href是hyper reference的縮寫(xiě)，超鏈接的意思。
用于指定鏈接目標(biāo)的ur地址，(必須屬性)當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能；
href=“#”表示這是一個(gè)空鏈接；
如果href里面地址是—個(gè)文件或者壓縮包,會(huì)下載這個(gè)文件。
<a href="https://google.com">超鏈接到google網(wǎng)站的主頁(yè)</a>
<a href="https://google.com">超鏈接到google的主頁(yè)</a>
<a href="//google.com">超鏈接到google的主頁(yè)</a>展現(xiàn)形式：
點(diǎn)擊此鏈接，即可到達(dá)google的主頁(yè)
a標(biāo)簽href的取值：
1、上述代碼中的網(wǎng)址的取值(推薦使用第三行的代碼)
<a href="//google.com">超鏈接到google的主頁(yè)</a>
由于此方式能夠自動(dòng)補(bǔ)齊相關(guān)的網(wǎng)絡(luò)地址，前面兩種寫(xiě)錯(cuò)就會(huì)報(bào)錯(cuò)，所以推薦使用。
2、路徑
當(dāng)前路徑下的a里面的b，b里面的c
在當(dāng)前目錄下尋找index.html文件
3、偽協(xié)議
<a href="javascript：;">點(diǎn)擊后無(wú)任何點(diǎn)擊或刷新等動(dòng)作的反應(yīng)</a><a href="#要跳轉(zhuǎn)的元素的id"></a>點(diǎn)擊鏈接的時(shí)候，會(huì)跳轉(zhuǎn)到指定元素所在的位置。
<a href="mailto:abcdefg@163.com ">發(fā)郵件給我</a><a href="tel:12345678901">打電話(huà)給我</a>（二）targe
用于指定鏈接頁(yè)面的打開(kāi)方式
a的target取值
1、內(nèi)置名字
_blank 在空白頁(yè)打開(kāi)
_self 在當(dāng)前頁(yè)面打開(kāi)
_parent 在父級(jí)窗口打開(kāi)
_top 在最頂級(jí)的窗口打開(kāi)
<a href="//google.com" target="_blank">超鏈接到google網(wǎng)站的主頁(yè)在空白頁(yè)打開(kāi)</a>2、程序員的命名
window：name（在xxx頁(yè)面打開(kāi)）
iframe的name（iframe現(xiàn)在已經(jīng)很少使用了，是指內(nèi)嵌窗口）
（三）download
下載頁(yè)面，但目前很少用，有的瀏覽器不支持，尤其是手機(jī)瀏覽器可能不支持。
1、table標(biāo)簽的語(yǔ)法：
thead:表頭
tbody:表的內(nèi)容，用于定義
tfoot:表的腳部
tr:table row,表格里的行
th:表格的表頭部分，其中的文本內(nèi)容字體加粗居中顯示
td:table data,表格數(shù)據(jù)，用于定義表格中的單元格
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th>小紅</th>
<th>小黃</th>
<th>小藍(lán)</th>
</tr>
</thead>
<tbody>
<tr>
<th>數(shù)學(xué)</th>
<td>90</td>
<td>60</td>
<td>80</td>
</tr>
<tr>
<th>語(yǔ)文</th>
<td>88</td>
<td>95</td>
<td>97</td>
</tr>
<tr>
<th>英語(yǔ)</th>
<td>88</td>
<td>95</td>
<td>97</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>總分</th>
<td>266</td>
<td>250</td>
<td>274</td>
</tr>
</tfoot>
</table>
</body>
</html>
第一行的th標(biāo)簽為空
2、table的樣式
table-layout：auto；自動(dòng)計(jì)算每一行的寬高
table-layout：fixed；通過(guò)列表的寬度來(lái)決定平均寬度
border-collapse：collapse； 合并邊框(默認(rèn)邊框與邊框之間不合并)
border-spacing：0；邊框?yàn)?.(邊框與邊框之間的距離)。
作用：發(fā)出get請(qǐng)求，展示一張圖片。
<img src="1.JPG" alt="頭像" width="400" />當(dāng)前路徑下的1.jpg，確定寬度為400，只寫(xiě)寬度高度會(huì)自適應(yīng)
屬性
alt：alternate的縮寫(xiě)，替換的意思。替換文本，圖像不能顯示的文字。
路徑錯(cuò)誤顯示alt內(nèi)容
title：提示文本。鼠標(biāo)放到圖像上，顯示的文字。
響應(yīng)
max-width：100% 所有的圖片在手機(jī)上都自適應(yīng)寬度，寬度最大為100%。
事件
onload/onerror 監(jiān)聽(tīng)圖片是否加載成功，加載成功時(shí)用onload，不成功是用onerror事件。確保在onerror事件能夠補(bǔ)救。
<body>
<img id="xxx" src="dog.jpg" alt="一只小狗">
<script>
xxx.onload = function () {
console.log("圖片加載成功");
};
xxx.onerror = function () {
console.log("圖片加載失敗");
xxx.src = "/404.jpg";
};
</script>
</body>監(jiān)聽(tīng)成功時(shí)，打印出成功
監(jiān)聽(tīng)失敗時(shí)，先打印出監(jiān)聽(tīng)失敗并且開(kāi)始執(zhí)行加載失敗是的挽救圖片。404.jpg文件執(zhí)行
本文為作者本人的原創(chuàng)文章，著作權(quán)歸作者本人和饑人谷所有，轉(zhuǎn)載務(wù)必注明來(lái)源。
avaScript 是目前最流行的編程語(yǔ)言之一，正如大多數(shù)人所說(shuō)：“如果你想學(xué)一門(mén)編程語(yǔ)言，請(qǐng)學(xué)JavaScript?！?/p>
FreeCodeCamp的創(chuàng)始人 Quincy Larson 在最近的一次采訪(fǎng)中被問(wèn)到哪種語(yǔ)言開(kāi)發(fā)人員應(yīng)該首先學(xué)習(xí)。他回答：“ JavaScript。”
“軟件正在吞噬世界，JavaScript正在吞噬軟件。JavaScript每年都在變得越來(lái)越占主導(dǎo)地位，而且沒(méi)人知道最終會(huì)取代它的是什么。" 如果您沒(méi)有充分的理由學(xué)習(xí)一種新語(yǔ)言（例如您的工作要求您維護(hù)非JavaScript代碼庫(kù)），那么我的建議是著重于提高JavaScript的水平。”
聽(tīng)我說(shuō)這么多，你是不是很激動(dòng)呢。這里有127端常用的JS代碼片段，方便你學(xué)習(xí)和使用。
如果數(shù)組所有元素滿(mǎn)足函數(shù)條件，則返回true。調(diào)用時(shí)，如果省略第二個(gè)參數(shù)，則默認(rèn)傳遞布爾值。
const all = (arr, fn = Boolean) => arr.every(fn);
all([4, 2, 3], x => x > 1); // true
all([1, 2, 3]); // true
判斷數(shù)組中的元素是否都相等
const allEqual = arr => arr.every(val => val === arr[0]);
allEqual([1, 2, 3, 4, 5, 6]); // false
allEqual([1, 1, 1, 1]); // true
此代碼示例檢查兩個(gè)數(shù)字是否近似相等，差異值可以通過(guò)傳參的形式進(jìn)行設(shè)置
const approximatelyEqual = (v1, v2, epsilon = 0.001) => Math.abs(v1 - v2) < epsilon;
approximatelyEqual(Math.PI / 2.0, 1.5708); // true
此段代碼將沒(méi)有逗號(hào)或雙引號(hào)的元素轉(zhuǎn)換成帶有逗號(hào)分隔符的字符串即CSV格式識(shí)別的形式。
const arrayToCSV = (arr, delimiter = ',') =>
arr.map(v => v.map(x => `"${x}"`).join(delimiter)).join('\n');
arrayToCSV([['a', 'b'], ['c', 'd']]); // '"a","b"\n"c","d"'
arrayToCSV([['a', 'b'], ['c', 'd']], ';'); // '"a";"b"\n"c";"d"'
此段代碼將數(shù)組元素轉(zhuǎn)換成<li>標(biāo)記，并將此元素添加至給定的ID元素標(biāo)記內(nèi)。
const arrayToHtmlList = (arr, listID) =>
(el => (
(el = document.querySelector('#' + listID)),
(el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))
))();
arrayToHtmlList(['item 1', 'item 2'], 'myListID');此段代碼執(zhí)行一個(gè)函數(shù)，將剩余的參數(shù)傳回函數(shù)當(dāng)參數(shù)，返回相應(yīng)的結(jié)果，并能捕獲異常。
const attempt = (fn, ...args) => {
try {
return fn(...args);
} catch (e) {
return e instanceof Error ? e : new Error(e);
}
};
var elements = attempt(function(selector) {
return document.querySelectorAll(selector);
}, '>_>');
if (elements instanceof Error) elements = []; // elements = []此段代碼返回兩個(gè)或多個(gè)數(shù)的平均數(shù)。
const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;
average(...[1, 2, 3]); // 2
average(1, 2, 3); // 2一個(gè) map()函數(shù)和 reduce()函數(shù)結(jié)合的例子，此函數(shù)先通過(guò) map() 函數(shù)將對(duì)象轉(zhuǎn)換成數(shù)組，然后在調(diào)用reduce()函數(shù)進(jìn)行累加，然后根據(jù)數(shù)組長(zhǎng)度返回平均值。
const averageBy = (arr, fn) =>
arr.map(typeof fn === 'function' ? fn : val => val[fn]).reduce((acc, val) => acc + val, 0) /
arr.length;
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], o => o.n); // 5
averageBy([{ n: 4 }, { n: 2 }, { n: 8 }, { n: 6 }], 'n'); // 5此函數(shù)包含兩個(gè)參數(shù)，類(lèi)型都為數(shù)組，依據(jù)第二個(gè)參數(shù)的真假條件，將一個(gè)參數(shù)的數(shù)組進(jìn)行分組，條件為真的放入第一個(gè)數(shù)組，其它的放入第二個(gè)數(shù)組。這里運(yùn)用了Array.prototype.reduce() 和 Array.prototype.push() 相結(jié)合的形式。
const bifurcate = (arr, filter) =>
arr.reduce((acc, val, i) => (acc[filter[i] ? 0 : 1].push(val), acc), [[], []]);
bifurcate(['beep', 'boop', 'foo', 'bar'], [true, true, false, true]);
// [ ['beep', 'boop', 'bar'], ['foo'] ]此段代碼將數(shù)組按照指定的函數(shù)邏輯進(jìn)行分組，滿(mǎn)足函數(shù)條件的邏輯為真，放入第一個(gè)數(shù)組中，其它不滿(mǎn)足的放入第二個(gè)數(shù)組 。這里運(yùn)用了Array.prototype.reduce() 和 Array.prototype.push() 相結(jié)合的形式，基于函數(shù)過(guò)濾邏輯，通過(guò) Array.prototype.push() 函數(shù)將其添加到數(shù)組中。
const bifurcateBy = (arr, fn) =>
arr.reduce((acc, val, i) => (acc[fn(val, i) ? 0 : 1].push(val), acc), [[], []]);
bifurcateBy(['beep', 'boop', 'foo', 'bar'], x => x[0] === 'b');
// [ ['beep', 'boop', 'bar'], ['foo'] ]用于檢測(cè)頁(yè)面是否滾動(dòng)到頁(yè)面底部。
const bottomVisible = () =>
document.documentElement.clientHeight + window.scrollY >=
(document.documentElement.scrollHeight || document.documentElement.clientHeight);
bottomVisible(); // true此代碼返回字符串的字節(jié)長(zhǎng)度。這里用到了Blob對(duì)象，Blob（Binary Large Object）對(duì)象代表了一段二進(jìn)制數(shù)據(jù)，提供了一系列操作接口。其他操作二進(jìn)制數(shù)據(jù)的API（比如File對(duì)象），都是建立在Blob對(duì)象基礎(chǔ)上的，繼承了它的屬性和方法。生成Blob對(duì)象有兩種方法：一種是使用Blob構(gòu)造函數(shù)，另一種是對(duì)現(xiàn)有的Blob對(duì)象使用slice方法切出一部分。
const byteSize = str => new Blob([str]).size;
byteSize(''); // 4
byteSize('Hello World'); // 11將字符串的首字母轉(zhuǎn)成大寫(xiě),這里主要運(yùn)用到了ES6的展開(kāi)語(yǔ)法在數(shù)組中的運(yùn)用。
const capitalize = ([first, ...rest]) =>
first.toUpperCase() + rest.join('');
capitalize('fooBar'); // 'FooBar'
capitalize('fooBar', true); // 'FooBar'將一個(gè)句子中每個(gè)單詞首字母轉(zhuǎn)換成大寫(xiě)字母，這里中要運(yùn)用了正則表達(dá)式進(jìn)行替換。
const capitalizeEveryWord = str => str.replace(/\b[a-z]/g, char => char.toUpperCase());
capitalizeEveryWord('hello world!'); // 'Hello World!'此段代碼將非數(shù)值的值轉(zhuǎn)換成數(shù)組對(duì)象。
const castArray = val => (Array.isArray(val) ? val : [val]);
castArray('foo'); // ['foo']
castArray([1]); // [1]將數(shù)組中移除值為 false 的內(nèi)容。
const compact = arr => arr.filter(Boolean);
compact([0, 1, false, 2, '', 3, 'a', 'e' * 23, NaN, 's', 34]);
// [ 1, 2, 3, 'a', 's', 34 ]統(tǒng)計(jì)數(shù)組中某個(gè)值出現(xiàn)的次數(shù)
const countOccurrences = (arr, val) => arr.reduce((a, v) => (v === val ? a + 1 : a), 0);
countOccurrences([1, 1, 2, 1, 2, 3], 1); // 3此代碼段使用 existSync() 檢查目錄是否存在，然后使用 mkdirSync() 創(chuàng)建目錄（如果不存在）。
const fs = require('fs');
const createDirIfNotExists = dir => (!fs.existsSync(dir) ? fs.mkdirSync(dir) : undefined);
createDirIfNotExists('test');
// creates the directory 'test', if it doesn't exist返回當(dāng)前訪(fǎng)問(wèn)的 URL 地址。
const currentURL = () => window.location.href;
currentURL(); // 'https://medium.com/@fatosmorina'返回當(dāng)前是今年的第幾天
const dayOfYear = date =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()); // 272將字符串的首字母轉(zhuǎn)換成小寫(xiě)字母
const decapitalize = ([first, ...rest]) =>
first.toLowerCase() + rest.join('')
decapitalize('FooBar'); // 'fooBar'今天的內(nèi)容就和大家分享到這里，感謝你的閱讀，如果你喜歡我的分享，麻煩給個(gè)關(guān)注、點(diǎn)贊加轉(zhuǎn)發(fā)哦，你的支持，就是我分享的動(dòng)力，后續(xù)會(huì)持續(xù)分享剩余的代碼片段，歡迎持續(xù)關(guān)注。
本文原作者：Fatos Morina
來(lái)源網(wǎng)站：medium
注：并非直譯
該方法用于檢測(cè)給出的日期是否有效：
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 17, 1995 03:24:00"); // true
復(fù)制代碼該方法用于計(jì)算兩個(gè)日期之間的間隔時(shí)間：
const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2021-11-3"), new Date("2022-2-1")) // 90
復(fù)制代碼距離過(guò)年還有90天~
該方法用于檢測(cè)給出的日期位于今年的第幾天：
const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date()); // 307
復(fù)制代碼2021年已經(jīng)過(guò)去300多天了~
該方法可以用于將時(shí)間轉(zhuǎn)化為hour:minutes:seconds的格式：
const timeFromDate = date => date.toTimeString().slice(0, 8);
timeFromDate(new Date(2021, 11, 2, 12, 30, 0)); // 12:30:00
timeFromDate(new Date()); // 返回當(dāng)前時(shí)間 09:00:00
復(fù)制代碼該方法用于將英文字符串的首字母大寫(xiě)處理：
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world") // Hello world
復(fù)制代碼該方法用于將一個(gè)字符串進(jìn)行翻轉(zhuǎn)操作，返回翻轉(zhuǎn)后的字符串：
const reverse = str => str.split('').reverse().join('');
reverse('hello world'); // 'dlrow olleh'
復(fù)制代碼該方法用于生成一個(gè)隨機(jī)的字符串：
const randomString = () => Math.random().toString(36).slice(2);
randomString();
復(fù)制代碼該方法可以從指定長(zhǎng)度處截?cái)嘧址?
const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString('Hi, I should be truncated because I am too loooong!', 36) // 'Hi, I should be truncated because...'
復(fù)制代碼該方法用于去除字符串中的HTML元素：
const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
復(fù)制代碼該方法用于移除數(shù)組中的重復(fù)項(xiàng)：
const removeDuplicates = (arr) => [...new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
復(fù)制代碼該方法用于判斷一個(gè)數(shù)組是否為空數(shù)組，它將返回一個(gè)布爾值：
const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]); // true
復(fù)制代碼可以使用下面兩個(gè)方法來(lái)合并兩個(gè)數(shù)組：
const merge = (a, b) => a.concat(b);
const merge = (a, b) => [...a, ...b];
復(fù)制代碼該方法用于判斷一個(gè)數(shù)字是奇數(shù)還是偶數(shù)：
const isEven = num => num % 2 === 0;
isEven(996);
復(fù)制代碼const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4, 5); // 3
復(fù)制代碼該方法用于獲取兩個(gè)整數(shù)之間的隨機(jī)整數(shù)
const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
random(1, 50);
復(fù)制代碼該方法用于將一個(gè)數(shù)字按照指定位進(jìn)行四舍五入：
const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56
復(fù)制代碼該方法可以將一個(gè)RGB的顏色值轉(zhuǎn)化為16進(jìn)制值：
const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255); // '#ffffff'
復(fù)制代碼該方法用于獲取一個(gè)隨機(jī)的十六進(jìn)制顏色值：
const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();
復(fù)制代碼該方法使用 navigator.clipboard.writeText 來(lái)實(shí)現(xiàn)將文本復(fù)制到剪貼板：
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");
復(fù)制代碼該方法可以通過(guò)使用 document.cookie 來(lái)訪(fǎng)問(wèn) cookie 并清除存儲(chǔ)在網(wǎng)頁(yè)中的所有 cookie：
const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
復(fù)制代碼該方法通過(guò)內(nèi)置的 getSelection 屬性獲取用戶(hù)選擇的文本：
const getSelectedText = () => window.getSelection().toString();
getSelectedText();
復(fù)制代碼該方法用于檢測(cè)當(dāng)前的環(huán)境是否是黑暗模式，它是一個(gè)布爾值：
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)
復(fù)制代碼該方法用于在頁(yè)面中返回頂部：
const goToTop = () => window.scrollTo(0, 0);
goToTop();
復(fù)制代碼該方法用于檢測(cè)當(dāng)前標(biāo)簽頁(yè)是否已經(jīng)激活：
const isTabInView = () => !document.hidden;
復(fù)制代碼該方法用于檢測(cè)當(dāng)前的設(shè)備是否是蘋(píng)果的設(shè)備：
const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();
復(fù)制代碼該方法用于判斷頁(yè)面是否已經(jīng)底部：
const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
復(fù)制代碼該方法用于重定向到一個(gè)新的URL：
const redirect = url => location.href = url
redirect("https://www.google.com/")
復(fù)制代碼該方法用于打開(kāi)瀏覽器的打印框：
const showPrintDialog = () => window.print()
復(fù)制代碼該方法可以返回一個(gè)隨機(jī)的布爾值，使用Math.random()可以獲得0-1的隨機(jī)數(shù)，與0.5進(jìn)行比較，就有一半的概率獲得真值或者假值。
const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();
復(fù)制代碼可以使用以下形式在不適用第三個(gè)變量的情況下，交換兩個(gè)變量的值：
[foo, bar] = [bar, foo];
復(fù)制代碼該方法用于獲取一個(gè)變量的類(lèi)型：
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
trueTypeOf(''); // string
trueTypeOf(0); // number
trueTypeOf(); // undefined
trueTypeOf(null); // null
trueTypeOf({}); // object
trueTypeOf([]); // array
trueTypeOf(0); // number
trueTypeOf(() => {}); // function
復(fù)制代碼該方法用于攝氏度和華氏度之間的轉(zhuǎn)化：
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
celsiusToFahrenheit(15); // 59
celsiusToFahrenheit(0); // 32
celsiusToFahrenheit(-20); // -4
fahrenheitToCelsius(59); // 15
fahrenheitToCelsius(32); // 0
復(fù)制代碼該方法用于檢測(cè)一個(gè)JavaScript對(duì)象是否為空：
const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
