使用 Notepad 或 TextEdit 來編寫 HTML

以使用專業(yè)的 HTML 編輯器來編輯 HTML：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

不過，我們同時推薦使用文本編輯器來學習 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我們相信，使用一款簡單的文本編輯器是學習 HTML 的好方法。

通過記事本，依照以下四步來創(chuàng)建您的第一張網(wǎng)頁。

步驟一：啟動記事本

如何啟動記事本：

開始

所有程序

附件

記事本

步驟二：用記事本來編輯 HTML

在記事本中鍵入 HTML 代碼：

步驟三：保存 HTML

在記事本的文件菜單選擇“另存為”。

當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區(qū)別，完全根據(jù)您的喜好。

在一個容易記憶的文件夾中保存這個文件。

步驟四：在瀏覽器中運行這個 HTML 文件

啟動您的瀏覽器，然后選擇“文件”菜單的“打開文件”命令，或者直接在文件夾中雙擊您的 HTML 文件。

結(jié)果應(yīng)該類似這樣：

TML是什么

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

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

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

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

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

HTML基本框架

HTML框架簡單說就是任何HTML網(wǎng)頁文件中都會包含的基本代碼內(nèi)容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內(nèi)容?？蚣艽a如下：

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

第一行 <!DOCTYPE HTML>

第二行 <html>

第三行 <head>

第四行 </head>

第五行 <body>

第六行 </body>

第七行 </html>

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

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

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

我們可以看到頁面下半部分出現(xiàn)了一個調(diào)控臺。

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

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

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

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

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

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

通過對框架中的代碼進行觀察，細心的讀者可能已經(jīng)發(fā)現(xiàn)了HTML這種標記語言的書寫規(guī)律。

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

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

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

各種關(guān)系如下圖所示：

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

在下一期中，我們會通過練習來解釋"結(jié)構(gòu)"與排版的關(guān)系。

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作

在線咨詢

上一篇：JavaScript常用API合集匯總「值得收藏」
下一篇：HTML5 拖放

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商