整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
么是HTML / HTM文件？他們相差一個字母有什么區別嗎，如何查看或編輯源代碼以及如何轉換成其他格式，例如DOCX，PDF，JPG 等，針對這些問題編程獅W3Cschool整理以下資料希望能對你有所幫助：
HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。
由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本引用（例如本文中的配圖）。
HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。
HTM 與 HTML 沒有本質意義的區別，只是為了滿足 DOS 僅能識別 8+3 的文件名而已，因為一些老的系統 (win32) 不能識別四位文件名，所以某些網頁服務器要求 index.html 最后一個 l 不能省略。MSIE 能自動識別和打開這些文件，但編寫網頁地址的時候必須是完全對應的，也就是說 index.htm 和 index.html 是兩個不同的文件，對應著不同的地址。值得一提的是 UNIX 系統中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。
任何 Web 瀏覽器，例如 Edge，Firefox，Chrome，Opera，IE，360 安全瀏覽器等，都可以打開并正確顯示 HTM 和 HTML 文件。換句話說，在瀏覽器中打開這些文件并“解碼（decode）” HTM 或 HTML 文件使其能正確顯示。
現在有很多簡化編輯和創建 HTM / HTML 文件的工具。一些著名的免費 HTML 編輯器包括 Eclipse ，Komodo Edit 和 Bluefish 。另一個流行的具有許多高級功能的 HTM / HTML 編輯器是 Adobe Dreamweaver ，不過它是收費的。
雖然 Windows 系統自帶的記事本等簡單的文本編輯器的功能不如專用的 HTM 編輯器那么豐富，但是對 HTM 或 HTML 文件進行簡單編輯修改還是可以的。不過，W3Cschool還是建議大家使用專用的編輯器，如 WebStorm、VS Code 等，它具更多專業功能。
這是一個非常簡單的 HTML 頁面以文本形式顯示的示例：
源碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>什么是HTM或HTML文件？ - 編程獅(w3cschool.cn)</title>
</head>
<body>
<h1>什么是HTM或HTML文件？</h1>
<p>HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。</p>
<p>由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本*引用*（例如本文中的配圖）。</p>
<p>HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。</p>
</body>
</html>當 Web 瀏覽器呈現信息時，HTML 文件的源代碼被“轉換”為真實的網頁（盡管源代碼已很精簡了）。
HTM 文件以特定的語法（規則）構成，以使其中的代碼和文本在瀏覽器中打開時能夠正確顯示。因此，將 HTM / HTML 文件轉換為另一種格式可能會丟失頁面上的所有功能。
如果你想要做的是將一個 HTM / HTML 文件轉換為方便離線查看的文件，這時圖片或 PDF 格式會方便很多。
在 Chrome 中，鼠標右鍵單擊網頁，出現的選項菜單中進入 “打印(P)...”(快捷鍵：CTRL + P) ，在打印選項中選擇另存為 PDF，以將窗口中的頁面轉換為 PDF 文件。Chrome 瀏覽器的擴展功能也稱為“全屏截屏”，可將 Chrome 瀏覽器中所有打開的 HTM / HTML 文件轉換為 PNG 文件。
其他瀏覽器具有類似的功能，例如 Firefox 的 “另存為 PDF” 加載項。
您也可以使用專門用于 HTM / HTML 進行圖像文件轉換的網站，例如iWeb2Shot 或Web-capture 。
一個免費的文件轉換器可以用來轉換并保存 HTM / HTML 文件到您的計算機。如 FileZigZag 是一個免費的文檔轉換器網站，可將 HTM 轉換為RTF，EPS，CSV，PDF 和許多其他格式。
HTM / HTML 文件不能轉換為文本文件格式以外的任何格式。例如，HTML 文件永遠不能轉換為 MP3 音頻文件。
HTML / HTM 文件應該很容易打開，因為它們只是任何 Web 瀏覽器都可以查看的文本文件。如果您的文件沒有從上面建議的任何程序打開，則很有可能正在打開的這個文件并非超文本標記語言文件。
某些文件格式使用的文件擴展名與 HTML / HTM 非常相似，但實際上并非相同。一個主要的示例是用于壓縮 HTML 電子書文件的 HTMLZ 文件擴展名。有 HTML 文件在內的 HTMLZ 文件，但整個包的格式為 ZIP，不會在 Web 瀏覽器或文本編輯器打開。
在此示例中，您需要特定的 HTMLZ 文件查看器，例如Caliber 。或者，由于此文件格式實際上是存檔，因此您可以使用 7-Zip 之類的文件解壓縮器將其打開，然后您可以使用網絡瀏覽器或上述任何其他 HTML 查看器/編輯器打開任何單獨的 HTML 文件。
TMLANGUAGE 是另一個可能與 HTML / HTM 文件混淆的文件擴展名。這些實際上是TextMate 用于 macOS 的 TextMate 語言語法文件。
以上就是編程獅W3Cschool為你整理的關于《什么是HTM或HTML文件？如何打開、編輯和轉換HTM和HTML文件？》的全部內容，現希望可以幫到你~
、html的介紹
HTML 的全稱為：HyperText Mark-up Language, 指的是超文本標記語言。標記：就是標簽, <標簽名稱></標簽名稱>，比如：<html></html>、<h1></h1>等，標簽大多數都是成對出現的。
所謂超文本，有兩層含義:
html是用來開發網頁的，它是開發網頁的語言。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>網頁文件的后綴是.html或者.htm, 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁。
全拼是 Visual Studio Code (簡稱 VS Code) 是由微軟研發的一款免費、開源的跨平臺代碼編輯器，目前是前端(網頁)開發使用最多的一款軟件開發工具。
插件名說明Chinese (Simplified) Language Pack for VS Code中文(簡體)漢化包open in browser右擊在瀏覽器打開html
點擊對應安裝的插件，然后再點擊卸載按鈕即可。
本文已經過原作者 Tapas Adhikary 授權翻譯
上傳文件功能可以說是項目經常出現的需求。從在社交媒體上上傳照片到在求職網站上發布簡歷，文件上傳無處不在。在本文中，我們將討論 HTML文件上傳支持的10種用法，希望對你有用。
我們可以將input 類型指定為file，以在Web應用程序中使用文件上傳功能。
<input type="file" id="file-uploader">
input filte 提供按鈕上傳一個或多個文件。默認情況下，它使用操作系統的本機文件瀏覽器上傳單個文件。成功上傳后，File API 使得可以使用簡單的 JS 代碼讀取File對象。要讀取File對象，我們需要監聽 change事件。
首先，通過id獲取文件上傳的實例:
const fileUploader = document.getElementById('file-uploader');
然后添加一個change 事件偵聽器，以在上傳完成后讀取文件對象， 我們從event.target.files屬性獲取上傳的文件信息：
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
console.log('files', files);
});
在控制臺中觀察輸出結果，這里關注一下FileList數組和File對象，該對象具有有關上傳文件的所有元數據信息。
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm
如果我們想上傳多個文件，需要在標簽上添加 multiple 屬性：
<input type="file" id="file-uploader" multiple />
現在，我們可以上傳多個文件了，以前面事例為基礎，選擇多個文件上傳后，觀察一下控制臺的變化：
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp
每當我們上傳文件時，File對象都有元數據信息，例如file name，size，last update time，type 等等。這些信息對于進一步的驗證和特殊處理很有用。
const fileUploader = document.getElementById('file-uploader');
// 聽更 change 件并讀取元數據
fileUploader.addEventListener('change', (event) => {
// 獲取文件列表數組
const files = event.target.files;
// 遍歷并獲取元數據
for (const file of files) {
const name = file.name;
const type = file.type ? file.type: 'NA';
const size = file.size;
const lastModified = file.lastModified;
console.log({ file, name, type, size, lastModified });
}
});
下面是單個文件上傳的輸出結果：
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv
我們可以使用accept屬性來限制要上載的文件的類型，如果只想上傳的文件格式是 .jpg，.png 時，可以這么做：
<input type="file" id="file-uploader" accept=".jpg, .png" multiple>
在上面的代碼中，只能選擇后綴是.jpg和.png的文件。
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP
成功上傳文件后顯示文件內容，站在用戶的角度上，如果上傳之后，沒有一個預覽的，就很奇怪也不體貼。
我們可以使用FileReader對象將文件轉換為二進制字符串。然后添加load 事件偵聽器，以在成功上傳文件時獲取二進制字符串。
// FileReader 實例
const reader = new FileReader();
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
reader.readAsDataURL(file);
reader.addEventListener('load', (event) => {
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = event.target.result;
img.alt = file.name;
});
});
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ
如果用戶上傳圖片過大，為了不讓服務器有壓力，我們需要限制圖片的大小，下面是允許用戶上傳小于 1M 的圖片，如果大于 1M 將上傳失敗。
fileUploader.addEventListener('change', (event) => {
// Read the file size
const file = event.target.files[0];
const size = file.size;
let msg = '';
// 檢查文件大小是否大于1MB
if (size > 1024 * 1024) {
msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
} else {
msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
}
feedback.innerHTML = msg;
});
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv
更好的用戶體驗是讓用戶知道文件上傳進度，前面我們用過了FileReader以及讀取和加載文件的事件。
const reader = new FileReader();
FileReader還有一個progress 事件，表示當前上傳進度，配合HTML5的progress標簽，我們來模擬一下文件的上傳進度。
reader.addEventListener('progress', (event) => {
if (event.loaded && event.total) {
// 計算完成百分比
const percent = (event.loaded / event.total) * 100;
// 將值綁定到 `progress`標簽
progress.value = percent;
}
});
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj
我們可以上傳整個目錄嗎?嗯，這是可能的，但有一些限制。有一個叫做webkitdirectory的非標準屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳)，它允許我們上傳整個目錄。
目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳，具體可以看下百度云盤的網頁版的上傳按鈕，在火狐下就支持按照文件進行上傳，而在谷歌和Edge下，就會給用戶提供一個下拉，讓用戶選擇是根據文件進行上傳還是根據文件夾進行上傳。
<input type="file" id="file-uploader" webkitdirectory />
用戶必須需要確認才能上傳目錄
用戶單擊“上傳”按鈕后，就會進行上傳。這里要注意的重要一點。FileList數組將以平面結構的形式包含有關上載目錄中所有文件的信息。對于每個File對象，webkitRelativePath屬性表示目錄路徑。
例如，上傳一個主目錄及其下的其他文件夾和文件：
現在，File 對象將將webkitRelativePath填充為：
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp
不支持文件上傳的拖拽就有點 low 了，不是嗎?我們來看看如何通過幾個簡單的步驟實現這一點。
首先，創建一個拖放區域和一個可選的區域來顯示上傳的文件內容。
<div id="container">
<h1>Drag & Drop an Image</h1>
<div id="drop-zone">
DROP HERE
</div>
<div id="content">
Your image to appear here..
</div>
</div>
通過它們各自的ID獲取dropzone和content 區域。
const dropZone = document.getElementById('drop-zone');
const content = document.getElementById('content');
添加一個dragover 事件處理程序，以顯示將要復制的內容的效果:
dropZone.addEventListener('dragover', event => {
event.stopPropagation();
event.preventDefault();
event.dataTransfer.dropEffect = 'copy';
});
接下來，我們需要一個drop事件監聽器來處理。
dropZone.addEventListener('drop', event => {
// Get the files
const files = event.dataTransfer.files;
});
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN
有一個特殊的方法叫做URL.createobjecturl()，用于從文件中創建唯一的URL。還可以使用URL.revokeObjectURL()方法來釋放它。
URL.revokeObjectURL() 靜態方法用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之后，應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。
fileUploader.addEventListener('change', (event) => {
const files = event.target.files;
const file = files[0];
const img = document.createElement('img');
imageGrid.appendChild(img);
img.src = URL.createObjectURL(file);
img.alt = file.name;
});
如果大家看到這里，有點激動，想手賤一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN
無論何時，如果你還想學習本文涉及的一些知識，你可以在這里嘗試。
https://html-file-upload.netlify.app/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
