HTML是什么？-零基礎自學網頁制作

TML是什么

HTML的全稱是超文本標記語言，英文全稱是HyperText Markup Language。如果您是零基礎的話，看到這個名字，即使是漢語的，估計也會不知所云。

超文本指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起，這些相互連接的文本集合稱為"超文本"。超文本是網頁制作一個非常重要的概念，可以說網絡的精髓就在于"互聯"。

這些相互關聯的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。（孫素華編著．Dreamweaver CS5 Flash CS5 Photoshop CS5網頁設計從入門到精通：中國青年出版社，2014.10：第16頁）

標記語言的概念比較復雜，簡單來說，HTML并不是程序語言（不同于C或Python），只是一種在網頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。

如果讀的不太明白，在下一節"HTML基本框架"中會對HTML的排版結構規則進行直觀展示，如果您讀不懂可以盡情的跳過，畢竟我們的重點是怎么用。

HTML基本框架

HTML框架簡單說就是任何HTML網頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下：

<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

這七行代碼是所有HTML頁面所共有的，也就是HTML的框架了。不信我們來驗證一下。

例子一，頭條的文章頁面（電腦版）網址：https://www.toutiao.com/i6785149184245760516/

筆者使用Firefox（火狐）瀏覽器，輸入網址后點擊鍵盤上的F12,，如圖所示

我們可以看到頁面下半部分出現了一個調控臺。

點擊查看器即可看頁面代碼。代碼如下：

放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少，只是中間多了很多內容而已。

一個例子不具有普適性，下面我們再看一個例子，我隨便找了個新聞頁面，網址：https://mil.eastday.com/a/200125113254400.html

使用同樣的方法打開查看器看代碼，如圖：

是不是框架中的代碼一個也不少吧。

所以，大家請在自己的電腦中新建一個txt文件，將HTML框架粘貼到txt文件中，并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。

通過對框架中的代碼進行觀察，細心的讀者可能已經發現了HTML這種標記語言的書寫規律。

規律1：每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一，大家一定記牢。

規律2：除了<!DOCTYPE HTML>這個標簽外，其他標簽都是成對出現！例如<html>與</html>，<head>與</head>，<body>與</body>。

規律3：這個規律通過觀察代碼也不難發現，即<html></html>兩個標簽中間夾著<head></head>和<body></body>，我們把<head></head>標簽稱為<html></html>標簽的子標簽，反過來<html></html>標簽是<head></head>標簽的父標簽，<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句，屬于六親不認的。

各種關系如下圖所示：

這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言"，這種父子關系、兄弟關系就可以理解為一個頁面的"結構"，這種結構又與頁面的排版有關。

在下一期中，我們會通過練習來解釋"結構"與排版的關系。

喜歡的小伙伴請加關注，有任何問題可以留言給我，歡迎指正批評，感激不盡！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

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

天給大家推薦幾個可以在線編程的網站。對于大部分開發者可能會不屑使用在線的網站，認為在自己電腦安裝環境不是很簡單的事情么。但是你很有可能臨時需要一臺電腦去測試一段簡單的代碼，也有可能想要分享一段代碼給別人，也有可能你想要學習很多語言，又不想一一安裝編程環境。那么今天推薦的網站肯定能滿足你的需求。

idenone.com

網址：https://ideone.com/SExhrM

這個網站不錯，支持Java，但是頁面有廣告。除了支持Java語言，還支持其他語言。

dabblet

https://dabblet.com/

這個網站適合前端測試使用，該網站可以用來測試Html，Css，Js等功能。

Fenby

網址：http://www.fenby.com/

這個網站不只支持后端語言編碼，也支持前端編碼，使用體驗很不錯。支持的語言也很豐富。

前端的支持也很OK。

W3School

https://www.w3school.com.cn/tiy/t.asp?f=js_use

當然對于想系統學習前端知識的童鞋可以使用W3School，這個網站很適合，不僅有大量的案列，還有可以實戰編碼。

在線編程

https://www.bccn.net/run/

該網站支持的語言也挺多，比較推薦。

今天的介紹就到這里了，如果你打算系統學習編程，那我還是建議你老老實實的安裝編譯環境，安裝編輯器。

在線咨詢

上一篇：如何把電子書轉換成適合Kindle 的格式？這是最全的攻略
下一篇：是時候拯救我的 HTML 技術了

您的項目需求

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

整合營銷服務商