HTML打開(kāi)神器，讓你秒懂！

何打開(kāi)HTML文件？一文教你多種方法！HTML文件是網(wǎng)頁(yè)開(kāi)發(fā)的基礎(chǔ)，它可以包含文本、圖像、音頻、視頻等多種多媒體元素。那么，我們?cè)撊绾未蜷_(kāi)這樣的文件呢？下面來(lái)介紹幾種常見(jiàn)的方法。第一種方法是使用瀏覽器打開(kāi)。這是最常見(jiàn)的方式，只需要幾個(gè)簡(jiǎn)單的步驟就能完成。首先，我們可以使用Chrome瀏覽器。打開(kāi)Chrome瀏覽器，然后在地址欄中輸入HTML文件的URL，或者直接將HTML文件拖拽到瀏覽器窗口中，HTML文件就會(huì)在瀏覽器中打開(kāi)了。同樣的，使用Firefox瀏覽器和Safari瀏覽器也是類(lèi)似的操作，只需要在地址欄中輸入U(xiǎn)RL或者拖拽HTML文件到瀏覽器窗口中即可。第二種方法是使用編輯器打開(kāi)。如果你習(xí)慣使用Sublime Text或者Atom這樣的編輯器，也可以通過(guò)它們來(lái)打開(kāi)HTML文件。

只需要在菜單欄中選擇“文件”->“打開(kāi)”，然后在彈出的文件瀏覽器窗口中找到你的HTML文件，點(diǎn)擊打開(kāi)即可。第三種方法是使用命令行工具打開(kāi)。如果你熟悉命令行操作，可以使用命令行工具來(lái)打開(kāi)HTML文件。在Windows系統(tǒng)中，打開(kāi)命令提示符，使用cd命令切換到HTML文件所在的目錄，然后在命令提示符中輸入"type filename.html"（其中filename.html是你的HTML文件名），HTML文件的內(nèi)容將會(huì)在命令提示符中顯示。在macOS系統(tǒng)中，打開(kāi)終端，使用cd命令切換到HTML文件所在的目錄，然后在終端中輸入"cat filename.html"（其中filename.html是你的HTML文件名），HTML文件的內(nèi)容將會(huì)在終端中顯示。通過(guò)以上幾種方式，你可以輕松地打開(kāi)HTML文件。

無(wú)論是使用瀏覽器、編輯器還是命令行工具，都能夠幫助你查看和編輯HTML文件，更好地進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)工作。參考資料：- [How to Open HTML Files](https://www.wikihow.com/Open-HTML-Files)- [How to Open HTML Files](https://www.techwalla.com/articles/how-to-open-html-files)

DEX-UI是一個(gè)全屏、跨平臺(tái)的終端仿真器和系統(tǒng)監(jiān)視器，它的外觀和感覺(jué)就像一個(gè)科幻電腦界面。

從《創(chuàng)戰(zhàn)記》的電影特效(尤其是會(huì)議室的場(chǎng)景)中獲得了巨大的靈感，最初，eDEX-UI項(xiàng)目的設(shè)計(jì)初衷是“減少?藝術(shù)?，增加?可分配軟件?的dx - ui”。雖然保持了未來(lái)主義的外觀和感覺(jué)，它努力保持一定程度的功能，并在現(xiàn)實(shí)生活場(chǎng)景中可用，更大的目標(biāo)是把科幻小說(shuō)的UXs帶入主流。

使用環(huán)境

Windows 10

eDEX-UI 可以安裝在linux、Windows、MacOS操作系統(tǒng)上面。

安裝

下載地址：https://github.com/GitSquared/edex-ui/releases

如果在linux32位或者64位上安裝，可以選擇 eDEX-UI.Linux.i386.AppImage或者 eDEX-UI.Linux.x86_64.AppImage，下載完，輸入chmod +x eDEX-UI.Linux*添加執(zhí)行權(quán)限，然后./ eDEX-UI.Linux*執(zhí)行，就可以運(yùn)行eDEX-UI終端模擬器了。

在windows中安裝，需要下載 eDEX-UI.Windows.Installer.exe這個(gè)安裝包。下載完成之后，雙擊運(yùn)行，自動(dòng)進(jìn)入終端模擬器了。

https://www.51cto.com/it/news/2020/0507/20545.html

下面是啟動(dòng)后的效果：

可以更改主題：鼠標(biāo)點(diǎn)擊settings.json，然后修改themes

修改完成之后，需要點(diǎn)擊”Save to Disk”，然后點(diǎn)擊”Reload UI”

更改themes后的效果圖

Themes: Tron-disrupted

Themes: Matrix

Themes: Red

總結(jié)

eDEX-UI是一個(gè)全屏、跨平臺(tái)的終端仿真器和系統(tǒng)監(jiān)視器，它的外觀和感覺(jué)就像一個(gè)科幻電腦界面。

言

在.NET Core中運(yùn)行JavaScript代碼，目前已經(jīng)有很多實(shí)現(xiàn)方案。

但是，如果你希望在純JavaScript環(huán)境中運(yùn)行.NET Core代碼呢？

那么，DotNetJS可能對(duì)你有所幫助。

DotNetJS

DotNetJS可以將C#項(xiàng)目編譯為與任何環(huán)境兼容的單文件JavaScript庫(kù)，無(wú)論是Web瀏覽器，Node.js還是自定義限制空間，如VS Code的Web擴(kuò)展，都可以正常使用它。

該解決方案基于兩個(gè)主要組件：

JavaScript/dotnet-runtime（npm） 使用已編譯的C#程序集和.NET運(yùn)行時(shí)WebAssembly模塊，以在JavaScript中提供C# 操作性層。該庫(kù)與環(huán)境無(wú)關(guān) - 它不依賴(lài)于特定于平臺(tái)的API，如瀏覽器DOM或節(jié)點(diǎn)模塊，并且可以作為CommonJS或ECMAScript模塊導(dǎo)入，也可以通過(guò)瀏覽器中的腳本標(biāo)記使用。
DotNet/dotNetJS（NuGet） 在C#中提供JavaScript互操作性層，并通過(guò)MSBuild任務(wù)將項(xiàng)目輸出打包到單文件JavaScript庫(kù)中。生成的庫(kù)包含使用項(xiàng)目程序集初始化的dotnet運(yùn)行時(shí)，并準(zhǔn)備用作打包的C#項(xiàng)目的互操作性層。

Demo

1. 創(chuàng)建項(xiàng)目

使用VS2022創(chuàng)建一個(gè)控制臺(tái)項(xiàng)目，修改項(xiàng)目文件，文件內(nèi)容如下：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 <PropertyGroup>
  <TargetFramework>net6.0</TargetFramework>
  <EmitSourceMap>true</EmitSourceMap>
  <EmitTypes>true</EmitTypes>
 </PropertyGroup>
 <ItemGroup>
  <PackageReference Include="DotNetJS" Version="0.4.0" />
 </ItemGroup>
</Project>

指定SDK為Microsoft.NET.Sdk.BlazorWebAssembly
引用DotNetJS Nuget包

2. 實(shí)現(xiàn)C#代碼

實(shí)現(xiàn)Program.cs，代碼如下：


using DotNetJS;
using Microsoft.JSInterop;
using System;
using System.Threading.Tasks;
namespace HelloDotnetJS;
public partial class Program
{ 
    public static void Main()
    {
        Console.WriteLine($"HelloDotnetJS 初始化!");
    }
    [JSFunction]  
    public static partial string GetBaseAddress();
    [JSInvokable]
    public async static Task<WeatherForecast[]> Demo()
    {
        var uri = new Uri(GetBaseAddress());
        Console.WriteLine(uri);
        var json = await new System.Net.Http.HttpClient { BaseAddress = uri }
            .GetStringAsync("weather.json");
        var forecasts = Newtonsoft.Json.JsonConvert.DeserializeObject<WeatherForecast[]>(json);
        return forecasts;
    }
}

Demo方法的具體邏輯如下：

獲取網(wǎng)站根路徑，使用[JSFunction]指定具體值來(lái)源于JS傳入；
訪問(wèn)網(wǎng)站根路徑下的weather.json文件
反序列化json，調(diào)用Newtonsoft驗(yàn)證第三方庫(kù)能否正常使用；
返回WeatherForecast集合

在終端窗口執(zhí)行dotnet publish，上述代碼將會(huì)編譯成JS代碼文件dotnet.js。

3. 實(shí)現(xiàn)JS代碼

創(chuàng)建demo.html，代碼如下：

<meta charset="UTF-8">
<script src="dotnet.js"></script>
<script>
    //定義GetBaseAddress實(shí)現(xiàn)
    dotnet.HelloDotnetJS.GetBaseAddress = () => window.location.protocol + "//" + window.location.host;
    window.onload = async function () {
        //初始化
        await dotnet.boot();
 
        console.log("開(kāi)始執(zhí)行Demo");
        const str = await dotnet.HelloDotnetJS.Demo();
        console.log(str);
    };
</script>

4. 運(yùn)行效果

將所有文件部署到網(wǎng)站上，例如http://localhost:5678/：

weather.json的文件內(nèi)容如下：

[
  {
    "date": "2018-05-06",
    "temperatureC": 1,
    "summary": "My IO"
  },
  {
    "date": "2018-05-07",
    "temperatureC": 14,
    "summary": "Bracing"
  }
]

用瀏覽器訪問(wèn)http://localhost:5678/demo.html，在控制臺(tái)窗口可以看到代碼運(yùn)行正常：

結(jié)論

DotNetJS目前還不完善，生成的JS代碼文件dotnet.js尺寸較大，demo代碼就有11M。

在線咨詢(xún)

上一篇：CSS3實(shí)現(xiàn)文本字體漸變雙色變化
下一篇：Node-RED教程 – 42 – 改變顯示內(nèi)容的顏色

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商