你知道HTML是干什么的嗎？

．什么是HTML？

HTML（Hyper Text Mark-up Language ）即超文本標記語言，是萬維網的核心語言，標準通用標記語言下的一個應用，由 Tim Berners-lee提出。

HTML文本是由 HTML命令組成的描述性文本，HTML 命令可以說明文字、圖形、動畫、聲音、表格、鏈接等。

HTML的結構包括頭部 (Head)、主體 (Body) 兩大部分。頭部描述瀏覽器所需的信息，主體包含所要說明的具體內容。

2．HTML的由來

HTML是為“網頁創建和其它可在網頁瀏覽器中看到的信息”設計的一種標記語言。

萬維網上的一個超媒體文檔稱之為一個頁面（page）。作為一個組織或者個人在萬維網上放置開始點的頁面稱為主頁（Homepage）或首頁，主頁中通常包括有指向其他相關頁面或其他節點的指針（超級鏈接）。超級鏈接，就是一種統一資源定位器（Uniform Resource Locator，縮寫：URL）指針，通過激活（點擊）它，可使瀏覽器方便地獲取新的網頁。

這是HTML獲得廣泛應用的最重要的原因之一。在邏輯上將視為一個整體的一系列頁面的有機集合稱為網站（Website或Site）。

3．HTML的功能和作用

設計 HTML 語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系在一起，形成有機的整體，人們不用考慮具體信息是在當前電腦上還是在網絡的其它電腦上。這樣，你只要使用鼠標在某一文檔中點取一個圖標，Internet就會馬上轉到與此圖標相關的內容上去，而這些信息可能存放在網絡的另一臺電腦中。

4．HTML的特點

4.1 HTML是用來制作網頁的標記語言，不需要編譯，直接由瀏覽器執行。

1）HTML其實是一個文本文件，包含了一些HTML元素、標簽等，它需要瀏覽器的解釋。

2）HTML文件必須使用html或htm為文件名后綴。出現2個后綴的原因是過去的老軟件只支持3個字母的后綴，所以.html的文件只能寫成寫成.htm，這是長久以來形成的習慣。現在不存在軟件不支持的情況，使用哪種后綴看你的喜好。

3）HTML對大小寫不敏感，HTML與html是一樣的。

4.2 HTML文檔制作不是很復雜，且功能強大，支持不同數據格式的文件鑲入。

1）HTML的簡易性，HTML版本升級采用超集方式，從而更加靈活方便。

2）HTML的可擴展性，HTML語言的廣泛應用帶來了加強功能，增加標識符等要求，HTML采取子類元素的方式，為系統擴展帶來保證。

3）HTML的平臺無關性。HTML可以使用在廣泛的平臺上，包括PC機和MAC等機不同類型的機器。

4.3 HTML是網絡的通用語言，一種簡單、通用的全置標記語言，具有通用性。

HTML允許網頁制作人建立文本與圖片相結合的復雜頁面，這些頁面可以被網上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器。

5．HTML的發展歷史

超文本標記語言（第一版）——在1993年6月作為互聯網工程工作小組（IETF）工作草案發布（并非標準）。

HTML 2.0——1995年11月作為RFC 1866發布，在RFC 2854于2000年6月發布之后被宣布已經過時

HTML 3.2——1997年1月14日，W3C推薦標準

HTML 4.0——1997年12月18日，W3C推薦標準

HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準

HTML 5——2014年10月28日，W3C推薦標準

　HTML是最流行的Web前端開發技術之一，它是一種用于創建網頁和 Web 應用程序的標記語言。HTML與CSS和JavaScript結合使用以創建有吸引力且響應迅速的前端網頁。

　　HTML 提供了幾個不同的元素，如 <head>、<body>、<p>、<img>、<a> 等，它們充當網站的構建塊，瀏覽器使用這些 HTML 元素來解釋和表示網頁上的內容。

　　HTML 概述

　　HTML(超文本標記語言)是Web瀏覽器理解并用于呈現網頁的語言。在不同元素的幫助下，HTML 決定了網頁的外觀和顯示內容。超文本標記語言 (HTML) 是一種用于創建獨立于平臺的超文本文檔的簡單標記語言。

　　HTML 文檔是具有通用語義的 SGML(標準通用標記語言)文檔，可用于表示來自各種學科的數據。HTML 標記可用于創建超文本郵件、文檔、新聞和超媒體;選項菜單;數據庫查詢結果;帶有內嵌圖形的簡單結構化文檔;和現有數據集的超文本視圖。

　　HTML 語言的主要用途

　　輕松瀏覽互聯網

　　超文本允許你訪問 Internet 上的不同頁面，尤其是在你沒有記住所有 URL 的情況下。你只需單擊鏈接或在地址字段中輸入 URL 即可瀏覽互聯網。超文本對于引導用戶瀏覽你的網站并充當網關至關重要，以便他們知道存在不同的頁面并可以在它們之間導航。如果不使用超文本，用戶很難檢測到網站上是否還有其他網頁。

　　尖端功能

　　HTML 支持 Polyfill 功能，它是一種允許你在 HTML 中本地使用不同技術的代碼。你可以使用此功能復制未來的API，同時為過時版本的瀏覽器提供回退功能;你可以自定義polyfill庫以滿足你的特定要求并執行其他人從未做過的事情。HTML 的這些尖端特性是HTML有如此多用途的原因。

　　創建 Web 文檔

　　網頁只是一個Web文檔，你可以在其中編寫你希望用戶看到的材料，然后將其包裝在指示機器如何格式化整個內容的代碼中。這會告訴你的瀏覽器標題、正文和元數據中的文本，它帶有標簽，因此計算機知道如何處理你提供的信息。

　　數據輸入

　　你擁有執行任何數據輸入任務所需的所有 API。作為開發人員，你只需在相關字段中添加標簽，例如文本和數據格式，你甚至可以提供屏幕鍵盤和驗證，確保為用戶提供流暢和愉快的體驗。

　　游戲開發

　　游戲開發是 HTML 的重要用途之一。盡管不再支持Flash，但HTML仍可用于創建基于瀏覽器的游戲。你使用的API不必完全實現，但可以使用最必要的組件，同時去掉了其余的功能，帶來了更輕松的體驗。由于HTML5的進步，HTML正迅速成為最流行的游戲編程語言之一。

　　離線存儲

　　如果你的一些用戶不在線怎么辦?在最新版本的HTML中找到的應用程序緩存方法的幫助下，你仍然可以使你的應用程序運行。應用程序緩存負責各種離線功能，包括各種組件，包括需要更新的API調用。通過清單文件，你可以控制瀏覽器對其離線使用的操作，甚至它使用的資源。

　　原生API使用

　　API代表“應用程序編程接口”，這是兩個不同應用程序相互通信的一種方式。通過使用API，HTML包括地理定位、事件管理、拖放和更多功能，HTML編程現在比以往任何時候都更強大。開發人員還可以使用具有異步特性的現代在線應用程序。

　　在客戶端存儲東西

　　IndexDB和Localstorage 使在客戶端存儲文件更簡單、更高效，這些都有自己的一套強大的功能。

　　Localstorage支持setItem、getItem 和removeItem方法，以及基于字符串的哈希表存儲。IndexDB帶有更多的存儲空間，你可以在用戶許可的情況下增加。

　　方便使用的

　　與其他編程語言不同，HTML以用戶友好而聞名，即使對于初學者也是如此，所以，這也是HTML的主要用途之一。HTML中有語義組件來描述它們所具有的內容類型，例如，頁眉、頁腳、主要、摘要和時間等HTML常用標簽是自描述的。

　　可訪問的富Internet應用程序

　　HTML5語義標簽的使用使網站搜索引擎和屏幕閱讀器友好，如果正確使用語義標簽，視障人士可以使用屏幕閱讀器從網頁中獲取信息。

　　結論

　　在這篇博客中，我們講述了HTML的所有重要用途，它通常是Web開發人員學習的第一語言，所以，如果你想學習Web編程并且害怕學習HTML的難度，你不必擔心，HTML非常容易學習。

eb標準：

由于不同瀏覽器解析出來的網頁效果可能不同，所以需要通過web標準對其進行約束使其一致，主要包括三個方面：

結構標準：

結構用于對網頁元素進行整理和分類，主要指的是HTML。

表現標準：

表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。

行為標準：

行為是指網頁模型的定義及交互的編寫，主要指的是 JavaScript。

初識HTML：

html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標記語言” ，描述網頁的一種語言。

HTML發展：

XHTML 是一個 W3C 標準，可擴展超文本標簽語言（EXtensible HyperText Markup Language），更嚴格更純凈的 HTML 版本，作為一種 XML 應用被重新定義的 HTML。

HTML中的注釋：

 <!-- 注釋標簽：注釋的內容 -->

條件注釋：

條件注釋的作用是：定義只有Internet Explorer才執行條件注釋中的html標簽。


    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網頁的跟標簽,lang=""用來設置網頁語言，其值還有zh-CN中文簡體、fr法語等，設置后當系統設置語言和網頁語言發生沖突時會提示是否翻譯網頁 -->
    <head> <!-- 網頁的頭部 -->
        <meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有gbk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動端視口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設置iOS頂部通欄樣式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到數字不轉成電話號碼 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 網站搜索關鍵字 -->
        <meta name='description' content='this is description'> <!-- 描述網站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!--  網站的圖標，如果圖標是gif圖，則需要改：type="image/gif"，引入網站圖標另一種方法：命名為favicon.ico文件放到網站根目錄下 -->
        <link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base標簽，定義這個網頁中a鏈接打開窗口的方式，其值還有_self -->
        <title>標題</title> <!-- 網站的標題 -->
        <style type="text/CSS">  /* 用來寫CSS代碼，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 網頁的主體 -->
        <h1>標題</h1> <!-- 標題標簽，共六個級，分別為：h1~h6,大小逐級遞減，h1在一個網頁中只允許出現一次。 -->
        <p>段落</p> <!-- 段落標簽 -->
        <hr/> <!-- 單線標簽,所有單標簽后面的關閉符均可以省略 -->
        <br/> <!-- 換行標簽 -->
        </div></div> <!-- 無語義化標簽布局用,上面的標簽是語義化標簽 -->
        <span>span</span> <!-- 無語義化標簽分割用 -->                
        <strong>加粗</strong> <!-- 加粗標簽 -->
        <b>加粗</b> <!-- 加粗標簽 -->
        <i>傾斜</i> <!-- 傾斜標簽 -->
        <em>傾斜</em> <!-- 傾斜標簽 -->
        <s>刪除線</s> <!-- 刪除標簽 -->
        <del>刪除線</del> <!-- 刪除標簽 -->
        <u>下劃線</u> <!-- 下劃線標簽 -->
        <ins>下劃線</ins> <!-- 下劃線標簽 -->
        <img src="圖片路徑" alt="圖片無法加載，提示文字" title="鼠標懸停，提示文體" border="2"/> <!-- 圖像標簽，border是邊框屬性，width和height屬性設置圖像的寬度和高度 -->
        <a href="跳轉目標" target="_self">鏈接的命名</a> <!-- 鏈接標簽，target屬性為鏈接頁面打開的方式，默認值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁面只會打開一個;_top跳出框架-->
        <ul> <!-- 無序列表 -->
            <li>列表項1</li>
            <li>列表項2</li>
            <li>列表項3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,屬性type可以控制li序號的樣式，其屬性值有：1、A、a、I、i-->
            <li>中國</li>
            <li>美國</li>
            <li>英國</li>
        </ol>
        <dl> <!-- 自定義列表 -->
            <dt>分類1</dt> <!-- 分類名稱 -->
            <dd>分類1第1項</dd> <!-- 類的項 -->
            <dd>分類1第2項</dd>
            <dt>分類2</dt>
            <dd>分類2第1項</dd>
            <dd>分類2第2項</dd>
        </dl>
        <table> <!-- 定義表格，table標簽實際就是一個四方塊框框，里面有單元格才會顯示出表格的樣子 -->
        <caption>信息表</caption> <!-- 表格標題 -->
        <tr> <!-- 定義行 -->
            <th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
            <th>年齡</th>
            <th>性別</th>
        </tr>
        <tr> <!-- 定義行 -->
            <td>小明</td> <!-- 定義單元格，表格里面沒有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯系本人咨詢：

QQ：810665436

微信：ConstancyMan

在線咨詢

上一篇：20、rem 適配方法如何計算 HTML 跟字號及適配方案？（必會）
下一篇：項目管理工具dhtmlxGantt入門教程（九）：支持的數據格式（下）

您的項目需求

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

整合營銷服務商

你知道HTML是干什么的嗎？

您的項目需求