---
# System prepended metadata

title: 我們使用的技術脈絡
tags: [看]

---

---
lang: zh-tw
title: '我們使用的技術脈絡'
tags: '看'
---


# 我們使用的技術脈絡


## 概觀

以下不涉及太過久遠的版本
<table class="Skill_Support_TB">
    <tbody>
         <tr>
            <td>
                <p class="tb-head">HTML
                    <a title="佐證資料" href="https://zh.wikipedia.org/zh-tw/HTML#%E7%89%88%E6%9C%AC%E6%97%B6%E9%97%B4%E7%BA%BF" target="_blank">
                        <i class="fa fa-html5"></i>
                    </a>
                </p>
                <div>
                   <span class="badge suggest hot">HTML 5</span>
                   <span class="badge">HTML 4</span>
                   <span class="badge">HTML 3</span>
                </div>
            </td>
            <td>
                <p class="tb-head">CSS
                    <a title="佐證資料" href="https://zh.wikipedia.org/wiki/%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8#%E7%89%88%E6%9C%AC%E6%AD%B7%E5%8F%B2" target="_blank">
                        <i class="fa fa-css3"></i>
                    </a>
                </p>
                <div>
                   <span class="badge suggest hot">CSS3</span>
                   <span class="badge">CSS2.1</span>
                   <span class="badge">CSS2</span>
                   <span class="badge">CSS1</span>
                </div>
            </td>
             <td>
                <p class="tb-head">JavaScript
                   <a title="佐證資料" href="https://zh.wikipedia.org/wiki/ECMAScript#%E7%89%88%E6%9C%AC" target="_blank">
                        <i class="fa fa-link"></i>
                   </a>
                </p>
                <div>
                   <span class="badge">ES13</span>
                   <span class="badge">ES12</span>
                   <span class="badge">ES11</span>
                   <span class="badge">ES10</span>
                   <span class="badge">ES9</span>
                   <span class="badge">ES8</span>
                   <span class="badge">ES7</span>
                   <span class="badge suggest hot">ES6</span>
                   <span class="badge suggest">ES5</span>
                   <br>
                </div>
            </td>            
        </tr>
        <tr>
            <td>
                <p class="tb-head">jQuery
                   <a title="佐證資料" href="https://releases.jquery.com/jquery" target="_blank">
                        <i class="fa fa-link"></i>
                   </a>
                </p>
                <div>
                   <span class="badge suggest hot">3.x</span>
                   <span class="badge">2.x</span>
                   <span class="badge">1.x</span>
                </div>
            </td>
            <td>
                <p class="tb-head">Bootstrap
                   <a title="佐證資料" href="https://getbootstrap.com/docs/versions/" target="_blank">
                        <i class="fa fa-link"></i>
                   </a>
                </p>
                <div>
                   <span class="badge suggest">v5.x</span>
                   <span class="badge suggest hot">v4.x</span>
                   <span class="badge">v3.x</span>
                </div>
            </td>
            <td>
                <p class="tb-head">IIS
                   <a title="佐證資料" href="https://sdwh.dev/posts/2021/03/IIS-Version-Mapping-OS-Version/#%E8%AA%AA%E6%98%8E" target="_blank">
                        <i class="fa fa-server"></i>
                   </a>
                </p>
                <div>
                   <span class="badge suggest hot">IIS 10.0</span>
                   <span class="badge">IIS 8.5</span>
                   <span class="badge">IIS 8.0</span>
                   <span class="badge">IIS 7.5</span>
                   <span class="badge">IIS 7.0</span>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <p class="tb-head">Windows
                   <a title="佐證資料" href="https://zh.wikipedia.org/zh-tw/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E5%88%97%E8%A1%A8#%E5%BE%AE%E8%BD%AF%EF%BC%88Microsoft%EF%BC%89" target="_blank">
                        <i class="fa fa-windows"></i>
                   </a>
                </p>
                <div>
                   <span class="badge suggest hot">Win 10 / Win Server 2016, 2019</span>
                   <span class="badge">Win 8.1 / Win Server 2012 R2</span>
                   <span class="badge">Win 8 / Win Server 2012</span>
                   <span class="badge">Win 7 / Win Server 2008 R2</span>
                   <span class="badge">Win Vista / Win Server 2008</span>
                </div>
            </td>
            <td>
                <p class="tb-head">.NET
                   <a title="佐證資料" href="https://learn.microsoft.com/zh-tw/dotnet/framework/migration-guide/how-to-determine-which-versions-are-installed" target="_blank">
                        <i class="fa fa-code"></i>
                   </a>
                   <a class="ml-2" title="佐證資料" href="https://zh.wikipedia.org/zh-tw/.NET#%E5%8E%86%E5%8F%B2" target="_blank">
                        <i class="fa fa-globe"></i>
                   </a>
                </p>
                <div>
                   <p>.NET Framework</p>
                   <span class="badge">.NET Framework 4.8.1</span>
                   <span class="badge suggest hot">.NET Framework 4.8</span>
                   <span class="badge">.NET Framework 4.7.x</span>
                   <span class="badge hot">.NET Framework 4.6.x</span>
                   <span class="badge hot">.NET Framework 4.5.x</span>
                   <br>
                   <br>
                   <p>.NET Core</p>
                   <span class="badge">.NET 7</span>
                   <span class="badge suggest hot">.NET 6</span>
                   <span class="badge hot">.NET 5</span>
                   <span class="badge">.NET Core 3.1</span>
                   <span class="badge">.NET Core 3.0</span>
                   <span class="badge">.NET Core 2.2</span>
                   <span class="badge">.NET Core 2.1</span>
                   <span class="badge">.NET Core 2.0</span>
                   <span class="badge">.NET Core 1.1</span>
                   <span class="badge">.NET Core 1.0</span>
                </div>
            </td>
            <td>
                <p class="tb-head">MS-SQL
                   <a title="佐證資料" href="https://zh.wikipedia.org/zh-tw/Microsoft_SQL_Server#%E7%89%88%E6%9C%AC%E6%BC%94%E9%80%B2" target="_blank">
                        <i class="fa fa-database"></i>
                   </a>
                </p>
                <div>
                   <span class="badge">SQL Server 2022</span>
                   <span class="badge suggest hot">SQL Server 2019</span>
                   <span class="badge">SQL Server 2017</span>
                   <span class="badge hot">SQL Server 2016</span>
                   <span class="badge hot">SQL Server 2014</span>
                   <span class="badge">SQL Server 2012</span>
                   <span class="badge">SQL Server 2008 R2</span>
                </div>
            </td>
        </tr>
    </tbody>
</table>


<div class="legend">
    <span class="mb-[5px] badge"></span> 版本
    <span class="mb-[5px] badge suggest"></span> 建議甲方使用
    <span class="mb-[5px] badge hot"></span> 技術較熟練
</div>

<br><br>

## 簡述

:::spoiler {state="open"} **前端**
* **HTML**：一段文字的描述，是人能懂的語言；一段被標記起來的區塊，則是瀏覽器能懂的語言

	* 透過正確的標籤，將我們網頁的內容賦予意義，稱為語意化
	* 當你重視 **HTML** 的語意化時，不僅會提升 **SEO**[^SEO] 排名，也間接銜接上**無障礙**[^Accessibility]其中之一的設計
	  例如：使用利於盲人的文字閱讀器設備，針對這些語意化標籤會發出較重的語氣，來產生不同的語境
	* 除非特別指定版本，否則目前版本都以 **HTML 5** 為主
	* 版本向下相容
				  
* **CSS**：人要衣裝，佛要金裝，網頁就靠它來打扮
	* 可以設計網頁的外觀與排版
	* 目前的切版技術以 **CSS** 中的 **Flex、Grid** 為主流
	* **RWD** 的技術，約有七、八成，可用 **CSS** 達成，剩下用 **JS** 處理
	* **CSS** 版本是根據瀏覽器，決定支援程度的，目前大眾瀏覽器都支援使用 **CSS3**
	* 版本向下相容

* **JavaScript**：詠唱咒語來注入靈魂，使空無一物的軀殼，具有生命力
	* 增加各種動態效果、動畫、表單驗證等
	* 目前為==每年6月==推出一個版本
	* **Java** 與 **JavaScript** 不一樣
		* 命名相似的原因，是因為當初 **Java** 較熱門，而扒在他身上想一起火起來
	* **JavaScript** 既能使用於前端，也能運作於後端
		* 在演進的過程，也可以透過 **Node.js** 這個執行環境，於後端執行
	* **JavaScript** 版本也是根據瀏覽器，決定支援程度的，目前大眾瀏覽器都支援使用 **ES6**
	* 不建議使用太新版的語法，因為要考慮手機的瀏覽器支援程度較差
	* 版本向下相容

* **jQuery**：縮短了詠唱的時間，且威力更強
	* 為 **JavaScript** 的函式庫
	* 封裝了許多簡化後的語法可以使用，但只限於前端的部分
	* 隨著版本的演進，進而改善執行效能與安全性更新
	* 原始碼掃描的時候，通常都要求最新版本
	* 版本向下相容

* **Bootstrap**：前端工程師的軍火庫，你要的武器，這邊通通有
	* 是個結合了 **HTML、CSS、JS** 的**前端元件庫**
	* 上述所謂的元件，即為一般**網頁設計**中，常見到的一種通俗的樣式與功能
	  例如：麵包屑、導覽列、分頁...等
	* **Bootstrap** 將這些常見的設計，包裝成各個元件（模板），提供開發者取用
	* 另一個特色為，有一套 **RWD** 的設計系統，在手機和平板都有很好的呈現
	* 每次的大版本號變動，在 **HTML、CSS、JS** 都有一定程度上的調整，升級大版本號不是件容易的事
		* **HTML** 模板結構改變、**CSS** 樣式命名不同、**JS** 操作改變等
:::

    

:::spoiler {state="open"} **伺服器端**
* **Windows**：帶領你達成無盡的成就
	* 為一套作業系統，集結了各式各樣的系統軟體、輔助工具，及各種服務等功能
	* 因容易使用，又支援許多軟體生態，而佔有七成以上的市佔率，使之成為作業系統的首選

* **IIS**：不分晝夜的默默付出，但偶爾小毛病會發作
	* 為 **Web** 伺服器應用程式，用於在 **Windows** 環境下管理 **Web** 站台
	* 除了 **C#** 的 **`ASP.NET`** 之外，還可以架其他語言開發的網站
	  例如：**PHP、Node.js、Python、Ruby**...等
	* **IIS 7 以前**的都不建議，因為安全性、維護性、以及架構都略有不同，固不再考量範圍內
	* 且一律建議使用 **IIS 10.0**

:::



:::spoiler {state="open"} **後端**
* **.NET Framework**：我是Framework，我會造飛機，而且造的很快，造出來的飛機可以在天上飛
	* 由 **Common Language Runtime (CLR)** 和 .**NET Framework 類別庫** 所組成
	* 只適用於 **Windows** 環境，並且可以建立 **Windows 應用程式** 和 **Web 服務** 等技術
	* 永遠停在 **4.8.1** 版本（依然有安全性更新和錯誤修正），且 **.NET 5+** 的版本，不會取代 **.NET Framework**
	* 官方建議已使用 **.NET Framework** 開發的軟體，不需要改為 **.NET Core** 版，但新開發的專案，建議使用 **.NET 6+** 開發

* **.NET Core**：我是阿Core，我也會造飛機，而且造的超級快，造出來的飛機不只在天上飛，還可以在水底飛、宇宙上飛、黑洞內飛
	* 免費、跨平台、開源程式碼，主打**快速**開發**可靠、高效能**的程式碼
	* [**.NET Core 3.1** 以前稱作 **.NET Core**，而後面出的版本命名為 **.NET 5**](https://learn.microsoft.com/zh-tw/dotnet/core/whats-new/dotnet-5)
		* 略過號碼 **4.x**，以避免與 **.NET Framework 4.x** 混淆
		* 命名去掉 「**Core**」，強調這是 **.NET** 未來的主線
	* **.NET 5**，統一了 **.NET** 的各個平台的碎片版本
  		* **.NET Framework 4.8、.NET Standard、.NET Core 3.1、Mono、Xamarin** 等
	* 未來==每年11月==出新版，**偶數**版本為 **LTS**
	* **.NET 5** 之後的版本皆向下相容，且改動幅度較小，但跨版本更新還是有其它的困難點要克服（第三方套件有無支援）
	<small class="text-muted">*（.NET6、.NET7、.NET8 向下相容）*</small>
	* [目前不在更新 **.NET5** (含)以前的版本](https://dotnet.microsoft.com/zh-cn/platform/support/policy/dotnet-core#lifecycle)
	<small class="text-muted">*（.NET 5、.NET Core 3.1、.NET Core 3.0、.NET Core 2.2、.NET Core 2.1 .NET Core 2.0、.NET Core 1.1、.NET Core 1.0 向下相容）*</small>
	* **.NET Core** 升 **.NET** 幅度較大，不易處理

* **MS-SQL**：打造一個某領域的專屬字典
	* 用於儲存系統所需的資料
	* 盡量不存個資相關的資料
	* 以效能來講，盡量都用最新的穩定版
	* 要提升效能，優先都以資料庫調校為優先
	* 版本向下相容
:::


 

[^SEO]: 搜尋引擎最佳化（SEO，Search Engine Optimization）：受眾對象若想將網站排在 google 排行前幾名，其中一個要做的重要環節，就是導入正確的語意化，使搜尋引擎能更快讀懂我，並找到我
[^Accessibility]: 無障礙網頁設計所設定的受惠者是「所有人」，簡言之就是要提高易用性，不論是身心障礙者，還是正常人，都必須能夠平等的使用網頁

<br><br>

## 版本相依

### 前端

> 沒有版本相依性，用穩定的版本即可

### 伺服器、後端
<table>
	<thead>
		<tr>
			<th>Windows 伺服器</th>
			<th>IIS</th>
			<th>MS-SQL</th>
			<th>.NET Framework</th>
			<th>.NET Core</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Windows Server <br> 2022</td>
			<td>IIS 10.0</td>
			<td>SQL Server <br>2022、2019、2017</td>
			<td class="text-center">all</td>
			<td>.NET 7、6</td>
		</tr>
		<tr>
			<td>Windows Server <br>2019、2016</td>
			<td>IIS 10.0</td>
			<td>SQL Server <br>2022、2019、2017、2014、2012</td>
			<td class="text-center">all</td>
			<td>.NET 7、6</td>
		</tr>
		<tr>
			<td>Windows Server <br>2012 R2</td>
			<td>IIS 8.5</td>
			<td>SQL Server <br>2017、2016、 <br>2014、2012、2008 R2</td>
			<td class="text-center">all</td>
			<td>.NET 7、6</td>
		</tr>
		<tr>
			<td>Windows Server <br>2012</td>
			<td>IIS 8.0</td>
			<td>SQL Server <br>2017、2016、 <br>2014、2012、2008 R2</td>
			<td class="text-center">all</td>
			<td>.NET 7、6</td>
		</tr>
	</tbody>
</table>



<br><br><br>

:link: 參考
---

[無障礙](https://ithelp.ithome.com.tw/articles/10222915)
[IIS 維基百](https://zh.wikipedia.org/zh-mo/%E7%B6%B2%E9%9A%9B%E7%B6%B2%E8%B7%AF%E8%B3%87%E8%A8%8A%E6%9C%8D%E5%8B%99)
[.NET 6/7 版本相依](https://learn.microsoft.com/zh-tw/dotnet/core/install/windows?tabs=net70#supported-releases)
[MS-SQL 版本相依](https://learn.microsoft.com/zh-tw/troubleshoot/sql/general/use-sql-server-in-windows#summary)


<br><br><br><br><br><br>

<style>
    code.red {
        color: #e91e63 !important;
        font-size: 1.6rem !important;
    }
    code.blackred{
        color:#900000 !important;
        font-size: 1.6rem !important;        
    }
    code.blue {
        color: #337AB7 !important;
        font-size: 1.6rem !important;
    }
    code.orange {
        color: #F7A004 !important;
        font-size: 1.6rem !important;
    }
    .markdown-body {
        max-width: 820px;
    }
    .markdown-body p > code {
        color: #c7254e !important;
        background-color: #f9f2f4 !important;
        border-radius: 4px !important;
        padding: 2px 4px !important;
        font-size: 90% !important;
    }
    .markdown-body pre {
        background-color: #112648;
    }
    .markdown-body pre,
    .markdown-body pre .code .hljs-tag {
        color: #eee;
    }
    img:not(.emoji) {
        padding: 5px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
        -webkit-box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
        box-shadow: 1px 1px 5px rgb(0 0 0 / 10%);
        margin: 5px 0;
    }
    .markdown-body .alert hr {
        height: 1px;
        margin: 8px 0 15px 0;
        background-color: #31708f;
    }
    .markdown-body .alert h3,
    .markdown-body .alert h4 {
        margin: 0px;
    }
    .markdown-body blockquote > p {
       /* background-color: #f5f5f5;*/
    }
    .markdown-body strong {
       /*font-size: 2rem;*/
    }
    /*程式碼等於符號的顏色*/
    .token.operator {
        background: #102546;
    }
    /*
     * 本頁用
     */
    .Skill_Support_TB .tb-head {
        font-size: 2.5rem;
        font-weight: bold;
        display: flex;
    }
    .Skill_Support_TB .tb-head > a:first-child {
        margin-left: auto;
    }
    .Skill_Support_TB .tb-head small {
        font-size: .875rem;
        color:#777;
    }
    .Skill_Support_TB tbody tr {
        display: flex;
    }
    .Skill_Support_TB tbody tr td {
        display: flex;
        justify-content: flex-start;
        width: 33.3%;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .Skill_Support_TB tbody tr td > div > p {
        margin-bottom: 0
    }
    .suggest {
        background-color: #337ab7;
    }
    .hot {
        background-color: #a94442;
    }
    .badge.suggest.hot {
        background: linear-gradient(to right, #337ab7,#a94442);
    }
    .legend .badge {
        height: 15px;
        width: 15px;
        border-radius: 0;
        display: inline-block;
    }
</style>