一個網頁文件本質上就是一個文本文檔。理論上我們可以使用任何文本編輯器來編寫這種文件。例如Windows中的記事本。現在我們打開記事本，輸入下邊的一句話：
```html
我正在寫<u>超文本</u>文檔。
```
然后我們保存這個文件。記事本默認將其保存為普通的文本文檔，擴展名是.txt。不過這次我們換個擴展名，把它另存為index.htm。正常情況下，Windows會把這個文件重新關聯到一個Web瀏覽器上。用瀏覽器打開這個文件就會看到這串文字，只是在“超文本”這三個字上加了下劃線。在這個例子中，我們使用了\<u\>...\</u\>標簽，這對兒標簽有開始也有結束，瀏覽器在渲染時會給該標簽包圍的文本加下劃線。這是一種特殊的文本文檔，它用一部分文本作為標簽去定義另一部分文本的意義和顯示方式，我們把這種文檔叫做**超文本文檔**，用來編寫超文本文檔的語言叫做**超文本標記語言**（HTML）。但不論它超級到什么程度，其本質仍然是文本文檔。你或許會想，即便是文本文檔，也有很多編碼方式。那么我們應該選擇哪種編碼呢？其實這取決于我們面向哪種語言的人群以及他們所使用的瀏覽器。不過目前來講，全網普遍傾向于使用UTF-8編碼，這種編碼支持幾乎所有人類語言。現在你需要做的，就是為自己選擇一款現代瀏覽器和酷炫的文本編輯器。瀏覽器這方面，我建議你在Google Chrome和Firefox中任選一款你喜歡的，它們都緊跟JavaScript的成長步伐。文本編輯器這方面，特別推薦你使用vscode，這是微軟非常成功的免費項目，用戶體驗堪稱絲滑順爽。特別有意義的是，vscode本身就是用JavaScript編寫的。
上面的例子只是在演示超文本的概念。然而，一個完整的超文本文檔應該具備下面的結構。請在剛才的index.htm中進行修改，換成下面的樣子：
```html
<!doctype html>
<html>
<head>
<title>welcome</title>
</head>
<body>
<p>This is a paragraph.</p >
</body>
</html>
```
在瀏覽器里觀察新的內容，不需要重新打開文件，只需按<kbd>F5</kbd>鍵刷新頁面即可。超文本標記語言也有自身的演化歷程，歷史上出現過很多版本的HTML。在上邊的例子中，\<!doctype html\>這一行是告訴瀏覽器該文檔是一個符合HTML 5規范的超文本文檔。\<html\>...\</html\>是一對兒標簽，也是超文本文檔的最外層節點，其他所有標簽統統要放在這對兒標簽的內部。在這對兒標簽內部，又被分為兩大部分，第一部分是\<head\>...\</head\>，叫做**頭部**。頭部里邊放置供瀏覽器使用的信息。在這里有一個\<title\>...\</title\>標簽，其中包圍的文字會出現在瀏覽器的標題欄中。第二部分是\<body\>...\</body\>，叫做**體部**。體部中主要放置要在瀏覽器窗口中呈現給用戶的內容。在這個例子中，體部里有一個\<p\>...\</p\>標簽，表示此處是一個段落。
現在，你可以編寫更多的信息。例如，告訴瀏覽器這個文檔的編碼類型是UTF-8，可以寫成下面的樣子：
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>歡迎來訪</title>
</head>
<body>
<p>這是一個UTF-8編碼的網頁。</p >
</body>
</html>
```
當然，別忘了用utf-8編碼方式來保存這個文件。如果文檔實際的編碼和告知瀏覽器的不一致，會導致頁面顯示錯亂（亂碼）。