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