什么是HTM或HTML文件？如何打開HTM和HTML文件？

么是HTML / HTM文件？他們相差一個字母有什么區別嗎，如何查看或編輯源代碼以及如何轉換成其他格式，例如DOCX，PDF，JPG 等，針對這些問題編程獅W3Cschool整理以下資料希望能對你有所幫助：

什么是HTM或HTML文件？

HTM / HTML 文件是超文本標記語言（Hyper Text Markup Language）文件，是 Internet 上的標準網頁文件類型。

由于 HTM 文件是純文本文件，因此它們僅包含文本（例如您現在正在閱讀的內容）以及對其他外部文件的文本引用（例如本文中的配圖）。

HTM 和 HTML 文件還可以引用其他文件，例如視頻，CSS 或 JS 文件。

HTM與HTML的區別

HTM 與 HTML 沒有本質意義的區別，只是為了滿足 DOS 僅能識別 8+3 的文件名而已，因為一些老的系統 (win32) 不能識別四位文件名，所以某些網頁服務器要求 index.html 最后一個 l 不能省略。MSIE 能自動識別和打開這些文件，但編寫網頁地址的時候必須是完全對應的，也就是說 index.htm 和 index.html 是兩個不同的文件，對應著不同的地址。值得一提的是 UNIX 系統中對大小寫敏感，不吻合的話就可能報沒有文件或者找不到文件。

如何打開HTM或HTML文件？

任何 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 文件的源代碼被“轉換”為真實的網頁（盡管源代碼已很精簡了）。

如何轉換HTML和HTM文件？

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、CSS、JS、React 等前端核心技能，并創建一個待辦事項的管理應用～

項目效果：

課程從最基礎的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。

以下是課程第一節的內容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：

「HTML 簡介」

實驗介紹

本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內容有：HTML 常見標簽、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習，可以構建簡單的 HTML 網頁。

知識點

什么是 HTML
Web 是如何工作的
文檔結構
常見標簽
表格
表單
有序列表和無序列表

什么是 HTML

HTML（超文本標記語言）是一種用于創建網頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執行，它的解析依賴于瀏覽器的內核。它不是一種編程語言，而是一種標記語言。

Web 是如何工作的

下面我們來演示用戶是如何看到一個網頁顯示的。

具體來講：

當用戶通過瀏覽器輸入網址后，瀏覽器先在 DNS 服務器上找到它，然后對它進行解析。
解析完成后，瀏覽器給服務器發送 http 請求。
服務器同意這個請求，就把 HTML 文件發送回瀏覽器。
瀏覽器拿到 HTML 文件，對其解析執行，顯示在用戶屏幕上。

HTML 文檔結構

首先我們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。

文檔類型聲明

<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標簽

html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。

head 元素

head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。

title 標簽

作用：設置文檔的標題或者名稱。瀏覽器通常將該標簽的內容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。

meta 標簽

<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。

body 標簽

body 標簽定義文檔的主體，也就是我們的主要內容（比如文本、超鏈接、圖像、表格和列表等）。

常見標簽

1.h 系類標簽

h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
  </body>
</html>

為了大家能更有效的學習，請使用實驗樓的環境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。

最終效果為：

2.p 標簽

p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<p>我是第一段文字，實驗樓，做實驗，學編程</p>
<p>我是第二段文字，實驗樓，做實驗，學編程</p>

3. 圖片標簽

HTML 的圖像是通過標簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標簽

<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

<a href="https://www.shiyanlou.com/">實驗樓</a>

點擊文字：

跳轉到指定網頁：

篇幅有限，后續的課程內容，請在“實驗樓”邊敲代碼邊學習～

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續學習啦！

.你是如何理解HTML語義的？

答：使用合適的標簽標示內容。優點在于標簽語義化有利于搜索引擎建立索引進行抓取，有助于構建良好的HTML結構，便于團隊開發和維護。

2.meta viewport 是做什么用的，怎么寫？

答：meta表示不能被HTML的其它元素（link，script,base, style, title）之一表示的任何元素信息。viewpoint讓web開發者控制視口的尺寸及比例，移動設備的viewpoint指設備屏幕上用來展示網頁的那一塊區域，也就是瀏覽器上用來展示網頁的那部分，可能比瀏覽器的可視區大，也可能比瀏覽器可視區域小，一般情況，比瀏覽器可視區域大。屬性包括width、height、initial-scale、maximum-scale、minimum-scale,使用方式是

<meta name="viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1">

3.canvas 元素是干什么的？

答： canvas是用來繪制圖形的HTML元素。

4.html5新特性？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

答：html5新特性：

語義特性: header footer
本地存儲特性： localStorage, manifest
設備訪問特性: Geolocation
連接特性: webSocket
網頁多媒體特性: audio、video標簽
三維、圖形及特效：SVG，Canvas, css3D
性能、集成特性

解決兼容性的方法：

在IE8以下，通過document.createElement(新標簽)，并設置css樣式。document.createElement('header'), header {display: block};
條件注釋的方式

<!--[if lt IE 9]> 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
<![endif]-->

HTML和HTML5

文檔類型聲明上：

html:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">

html5:

 <!doctype html>

結構語義上 html: 基本沒有體現結構語義，一般為

 <div id="header"></div>

html5: 具有結構語義

 <header></header>

5.Doctype作用？標準模式與兼容模式各有什么區別?

答： Doctype是document type(文檔類型)，告訴瀏覽器解析器采用哪種規范（html、xhtml）來解析頁面，Doctype不存在或格式錯誤的情況下，采用兼容模式。

標準模式（嚴格模式）展示的支持最新標準的網頁。兼容模式（松散模式或怪異模式）展示的是兼顧傳統瀏覽器的網頁，向后兼容老式瀏覽器。

具體區別：

6.用戶訪問頁面到最終渲染的整個過程？

用戶輸入url,瀏覽器向服務器發送請求，獲取html,然后進入HTML渲染機制。首先，根據HTML生成DOM樹；其次，根據css和js重排頁面 https://segmentfault.com/a/1190000009317496

7.你對頁面進行性能優化的思路和思想是什么？

答：減少http請求; 減少DOM操作，避免不必要的重繪和重排;壓縮文件體積；采用CDN；

在線咨詢

上一篇：一篇文章帶你了解CSS 文本樣式
下一篇：CSS美化網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商