整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
avaScript語言中的條件語句，除了if 語句，還有switch 語句。switch 常用于根據(jù)不同的條件執(zhí)行不同的操作。雖然它和 if 語句都是用來判斷條件的語句，但是它們之間還是有不同。
語法如下所示：
switch(expression) {
case 變量x:
// 語句1代碼塊
case 變量y:
// 語句2代碼塊
case 變量z:
// 語句3代碼塊
break;
default:
// 代碼塊
}
語法解釋：表達式值計算一次，然后我們依次將表達式的值與每一種 case 情況的值進行比較，如果匹配，就會執(zhí)行與 case 對應(yīng)的相關(guān)代碼塊。
執(zhí)行原理：變量 expression 的值與 case 的值進行比較，比如變量 expression 等于 case 變量 x，我們就執(zhí)行語句1的代碼塊，如果變量 expression 等于 case 變量 y 就執(zhí)行語句2的代碼塊，依次類推，如果都不符合就執(zhí)行 default 語句代碼塊。break 語言用于結(jié)束當前執(zhí)行的語句，default 表示默認的，在沒有符合選項的時候默認選擇。
示例：
使用 switch 語句來看判斷今天是星期幾，并輸出對應(yīng)時間。例如在一個 HTML 文件中，寫入下列代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_俠課島(9xkd.com)</title>
</head>
<body>
<div>
<p id="date"></p>
</div>
<script>
var day;
var d=new Date().getDay();
switch(d) {
case 0:
day="星期天";
break;
case 1:
day="星期一";
break;
case 2:
day="星期二";
break;
case 3:
day="星期三";
break;
case 4:
day="星期四";
break;
case 5:
day="星期五";
break;
case 6:
day="星期六";
break;
case 7:
day="星期天";
break;
}
document.getElementById("date").innerHTML=day;
</script>
</body>
</html>
在瀏覽器中打開這個HTML文件，頁面會顯示：
星期二
我們來分析一下 <script> 標簽中的 JavaScript 代碼，變量 d 是我們獲取到的當天的星期天數(shù)（我寫這個文章的時候是星期二），getDay() 方法會返回與星期相對應(yīng)的數(shù)字，例如星期一返回1、星期二返回2，以此類推。
然后我們將這個變量 d 作為switch 語句的表達式值，將它與 case 后面的值匹配，如果表達式等于某個 case 后面的值，則執(zhí)行響應(yīng)的代碼。例如上述代碼中，變量 d 的值為2，那么就會匹配到 case 2，所對應(yīng)的代碼就是day="星期二";，所以輸出結(jié)果為星期二。后面還有一個break 語句，這個語句的作用就是跳出 switch 語句，避免同時執(zhí)行多個case。
default 關(guān)鍵詞規(guī)定 case 匹配不存在時所做的事情。
示例：
例如我們看下面這段代碼：
var level="P";
switch(level){
case "A":
console.log("第一類");
break;
case "B":
console.log("第二類");
break;
case "C":
console.log("第三類");
break;
case "D":
console.log("第四類");
break;
default:
console.log("其他");
}
輸出：
其他
上述代碼中，如果 level 的值不滿足任何 case 的值，則會匹配到 default。代碼中 level 的值為 P，而 case 語句中的值只有A、B、C、D，此時就會匹配到 default 語句，執(zhí)行 default 語句下面的代碼。
break 關(guān)鍵詞用于跳出 switch 代碼塊。使用 break 能夠節(jié)省大量執(zhí)行時間，因為它會忽略 switch 代碼塊中的其他代碼的執(zhí)行。
關(guān)于條件分支 switch 和 if 兩者之間的區(qū)別和關(guān)聯(lián)，我們可以通過下面這個表格進行簡單直觀的認識：
switchif判斷條件等值判斷等值判斷和區(qū)間判斷結(jié)束語句break跳出執(zhí)行一個if后自動結(jié)束默認和否則語句default可以放在任何位置else只能放在最后
注意一般能用 switch 語句實現(xiàn)的就一定能使用 if 語句來實現(xiàn)，但是反過來卻是不一定的，如果區(qū)間范圍就采用 if，如果等值判斷就使用 switch。
效率問題：
4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優(yōu)缺點。
內(nèi)聯(lián)方式
內(nèi)聯(lián)方式指的是直接在 HTML 標簽中的 style 屬性中添加 CSS。
示例：
<div style="background: red"></div>
這通常是個很糟糕的書寫方式，它只能改變當前標簽的樣式，如果想要多個 <div> 擁有相同的樣式，你不得不重復地為每個 <div> 添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會導致 HTML 代碼變得冗長，且使得網(wǎng)頁難以維護。
嵌入方式
嵌入方式指的是在 HTML 頭部中的 <style> 標簽下書寫 CSS 代碼。
示例：
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只對當前的網(wǎng)頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網(wǎng)頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。
鏈接方式
鏈接方式指的是使用 HTML 頭部的 <head> 標簽引入外部的 CSS 文件。
示例：
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨的 CSS 文件中，所以具有良好的可維護性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會在第一次加載時引入，以后切換頁面時只需加載 HTML 文件即可。
導入方式
導入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。
示例：
<style> @import url(style.css); </style>
比較鏈接方式和導入方式
鏈接方式（下面用 link 代替）和導入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。
小結(jié)：我們應(yīng)盡量使用 <link> 標簽導入外部 CSS 文件，避免或者少用使用其他三種方式。
HTML （Hypertext Markup Language）是標準標記語言，是 Web 瀏覽器顯示的基礎(chǔ)。 此外，CSS（Cascading Style Sheets）等技術(shù)以及JavaScript等腳本語言也支持這種技術(shù)。
創(chuàng)建主頁時，首先使用 HTML 確定句子的結(jié)構(gòu)并標記它，然后設(shè)計要顯示的信息。 這是網(wǎng)頁的基礎(chǔ)。
現(xiàn)在，讓我們仔細看看可以使用少量 CSS 代碼實現(xiàn)的技術(shù)。
Web 性能改進技術(shù)之一是屬性，允許用戶延遲加載，直到滾動。 它還適用于嵌入 YouTube 視頻的 iframe 代碼和大尺寸圖像。loading="lazy"
XHTML
1 | <img src='image.jpg' loading='lazy' alt='代替テキスト'> |
打開電子郵件創(chuàng)建頁面、直接撥打電話或發(fā)送短消息的技術(shù)。
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <a href="mailto:{email}?subject={subject}&body={content}"> Eメールを送信 </a> <a href="tel:{phone}"> お電話ください </a> <a href="sms:{phone}?body={content}"> SMSショートメッセージを送信 </a> |
start屬性允許您自由確定列表格式的數(shù)字。
meter元素允許您使用彩色滑塊顯示數(shù)字和數(shù)量。 不需要 JavaScript 或 CSS。
通過預先在表單輸入元素中指定一些數(shù)據(jù)列表，可以將其作為候選關(guān)鍵字顯示在輸入字段中的下拉列表中。
fieldset元素允許您將 Web 窗體中的多個控件和標簽 （） 組合在一起。label
target="_blank在 中打開的頁面將允許您訪問原始頁面的 window.opener。 這可能會對安全性和性能產(chǎn)生負面影響，例如"原始窗口在知道之前已轉(zhuǎn)換到填充站點"。 為了防止這種情況，請包括 或 。rel="noopener"rel="noreferrer"
1 2 3 | <a href="https://markodenic.com/" target="_blank" rel="noopener"> 參考ウェブサイト </a> |
如果要在新選項卡中打開 HTML 文檔中的所有鏈接，可以使用元素。 在下面的示例中，兩個鏈接都在新的選項卡中打開。base
若要更新網(wǎng)站的傳真，您可以通過將其添加到文件名中來在瀏覽器中下載新版本。?v=2
一種有效的技術(shù)，尤其是在生產(chǎn)環(huán)境中，以確保用戶輸入新版本。
XHTML
1 | <link rel="icon" href="/favicon.ico?v=2" /> |
可以決定是否檢查元素的拼寫錯誤的屬性。spellcheck
input type="range"允許您使用滑塊調(diào)整數(shù)字。 所選數(shù)字可以顯示在 中。input type="number"
details元素允許您創(chuàng)建僅 HTML 本機手風琴。
mark標記允許您使用黃色標記突出顯示文本的一部分。
URL 鏈接的屬性允許您直接下載文件，而不是將其移動到文件中。download
XHTML
1 2 3 | <a href='path/to/file' download> Download </a> |
使用".webp"作為圖像格式可以減小圖像大小并提高網(wǎng)站性能。
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <picture> <!-- サポートされていたら.webp畫像を読み込む --> <source srcset="logo.webp" type="image/webp"> <!-- .webp畫像や<picture>タグが ブラウザにサポートされていないときの フォールバックとして --> <img src="logo.png" alt="logo"> </picture> |
poster屬性允許您指定在加載視頻或按下"播放"按鈕之前顯示的圖像。
XHTML
1 | <video poster="path/to/image"> |
在搜索框中使用時，將自動顯示"X"清除標記以取消。type="search"
只有 HTML 可以實現(xiàn)的功能，我有很多。 我們計劃在未來添加和更新小技巧技術(shù)。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
