整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
avaScript语言中的条件语句，除了if 语句，还有switch 语句。switch 常用于根据不同的条件执行不同的操作。虽然它和 if 语句都是用来判断条件的语句，但是它们之间还是有不同。
语法如下所示：
switch(expression) {
case 变量x:
// 语句1代码块
case 变量y:
// 语句2代码块
case 变量z:
// 语句3代码块
break;
default:
// 代码块
}
语法解释：表达式值计算一次，然后我们依次将表达式的值与每一种 case 情况的值进行比较，如果匹配，就会执行与 case 对应的相关代码块。
执行原理：变量 expression 的值与 case 的值进行比较，比如变量 expression 等于 case 变量 x，我们就执行语句1的代码块，如果变量 expression 等于 case 变量 y 就执行语句2的代码块，依次类推，如果都不符合就执行 default 语句代码块。break 语言用于结束当前执行的语句，default 表示默认的，在没有符合选项的时候默认选择。
示例：
使用 switch 语句来看判断今天是星期几，并输出对应时间。例如在一个 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 是我们获取到的当天的星期天数（我写这个文章的时候是星期二），getDay() 方法会返回与星期相对应的数字，例如星期一返回1、星期二返回2，以此类推。
然后我们将这个变量 d 作为switch 语句的表达式值，将它与 case 后面的值匹配，如果表达式等于某个 case 后面的值，则执行响应的代码。例如上述代码中，变量 d 的值为2，那么就会匹配到 case 2，所对应的代码就是day="星期二";，所以输出结果为星期二。后面还有一个break 语句，这个语句的作用就是跳出 switch 语句，避免同时执行多个case。
default 关键词规定 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 语句，执行 default 语句下面的代码。
break 关键词用于跳出 switch 代码块。使用 break 能够节省大量执行时间，因为它会忽略 switch 代码块中的其他代码的执行。
关于条件分支 switch 和 if 两者之间的区别和关联，我们可以通过下面这个表格进行简单直观的认识：
switchif判断条件等值判断等值判断和区间判断结束语句break跳出执行一个if后自动结束默认和否则语句default可以放在任何位置else只能放在最后
注意一般能用 switch 语句实现的就一定能使用 if 语句来实现，但是反过来却是不一定的，如果区间范围就采用 if，如果等值判断就使用 switch。
效率问题：
4 种方式可以在 HTML 中引入 CSS。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外两种是引入 外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。
内联方式
内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：
<div style="background: red"></div>
这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。
嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例：
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 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 规则引入外部 CSS 文件。
示例：
<style> @import url(style.css); </style>
比较链接方式和导入方式
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
小结：我们应尽量使用 <link> 标签导入外部 CSS 文件，避免或者少用使用其他三种方式。
HTML （Hypertext Markup Language）是标准标记语言，是 Web 浏览器显示的基础。 此外，CSS（Cascading Style Sheets）等技术以及JavaScript等脚本语言也支持这种技术。
创建主页时，首先使用 HTML 确定句子的结构并标记它，然后设计要显示的信息。 这是网页的基础。
现在，让我们仔细看看可以使用少量 CSS 代码实现的技术。
Web 性能改进技术之一是属性，允许用户延迟加载，直到滚动。 它还适用于嵌入 YouTube 视频的 iframe 代码和大尺寸图像。loading="lazy"
XHTML
1 | <img src='image.jpg' loading='lazy' alt='代替テキスト'> |
打开电子邮件创建页面、直接拨打电话或发送短消息的技术。
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属性允许您自由确定列表格式的数字。
meter元素允许您使用彩色滑块显示数字和数量。 不需要 JavaScript 或 CSS。
通过预先在表单输入元素中指定一些数据列表，可以将其作为候选关键字显示在输入字段中的下拉列表中。
fieldset元素允许您将 Web 窗体中的多个控件和标签 （） 组合在一起。label
target="_blank在 中打开的页面将允许您访问原始页面的 window.opener。 这可能会对安全性和性能产生负面影响，例如"原始窗口在知道之前已转换到填充站点"。 为了防止这种情况，请包括 或 。rel="noopener"rel="noreferrer"
1 2 3 | <a href="https://markodenic.com/" target="_blank" rel="noopener"> 参考ウェブサイト </a> |
如果要在新选项卡中打开 HTML 文档中的所有链接，可以使用元素。 在下面的示例中，两个链接都在新的选项卡中打开。base
若要更新网站的传真，您可以通过将其添加到文件名中来在浏览器中下载新版本。?v=2
一种有效的技术，尤其是在生产环境中，以确保用户输入新版本。
XHTML
1 | <link rel="icon" href="/favicon.ico?v=2" /> |
可以决定是否检查元素的拼写错误的属性。spellcheck
input type="range"允许您使用滑块调整数字。 所选数字可以显示在 中。input type="number"
details元素允许您创建仅 HTML 本机手风琴。
mark标记允许您使用黄色标记突出显示文本的一部分。
URL 链接的属性允许您直接下载文件，而不是将其移动到文件中。download
XHTML
1 2 3 | <a href='path/to/file' download> Download </a> |
使用".webp"作为图像格式可以减小图像大小并提高网站性能。
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 可以实现的功能，我有很多。 我们计划在未来添加和更新小技巧技术。
*请认真填写需求信息，我们会在24小时内与您取得联系。
