1. 程式人生 > >web前端學習(2):開始編寫HTML

web前端學習(2):開始編寫HTML

其中 title 養成 的人 以及 字體 寫入 文本格式 軟件

  在第一章中,我們初步了解了上網的過程,同時也明白了所謂網頁,其本質就是主要用HTML語言所寫的一份文檔。相信大多數人在了解HTML文件前,最先接觸的是利用“記事本”所寫的文檔或者是利用辦公軟件“Word”所建的文檔,身為初心者的你可能會問,HTML文檔與這些文檔又有何差別?在回答這個問題前,讓我們嘗試著創建這三種文檔。

  創建我們熟悉的.txt文件,打開它並試著輸入文本內容“學而時習之”:

技術分享圖片

技術分享圖片

  創建一個.docx文件,打開並輸入文本內容“學而時習之”:

技術分享圖片

技術分享圖片

  

  好,現在讓我們創建今天的主角——HTML文檔。嘗試著把“記事本”文檔和Word文檔的後綴名改為“html”:

技術分享圖片

  你會發現他們“看上去”都一模一樣了,那讓我們打開試試:

技術分享圖片

     “記事本”文檔

技術分享圖片

      Word文檔

  我們可以通過後綴名改變文件類型,當我們將後綴名改為“html”後,實際上已經創建了“HTML文檔”。但是改了文檔後綴名後,我們發現出現了不同情況了。當我們將後綴名為“txt”的文檔改為“html”後,雙擊打開文本內容仍然能夠正常顯示出來;但是,為什麽將Word文檔後綴名“docx”改為“html”後,雙擊後文檔卻顯示一大片亂碼呢。使用過Word的人應該都明白,Word文本是帶有格式的文本,即我們不僅可以輸入文本,同時默認地文本已經自帶了格式,如字號字體行距等(當然我們還可以主動給文本內容設置各種格式)。顯然地,Word文本區別於“記事本”文檔以及“html”文檔——我們通常將Word這種自帶文本格式的文檔成為“格式文本”,而剩余的稱為“純文本”。因為Word文檔內還包含關於格式的數據,將其後綴名改為“html”後,這些數據難以解釋出來,最終出現了亂碼。

  由上我們可以知道,HTML文檔便是純文本文檔。接下來,我將簡單介紹HTML文檔的主要結構,讓我們試著寫一個簡單的的HTML頁面吧!

<html>

<head>
</head>

<body>
</body>

</html>

  如上圖,整個HTML文檔其實分為三個部分,包括<html>部,<head>部,<body>部;而帶有左右尖括號括起來的部分被叫做標簽,標簽有開始標簽和結束標簽之分,結束標簽就是在做尖括號後加“/”。一般開始標簽和結束標簽是成對出現的,他們標記在文本兩端,必須要有他們來指明內容的結構。這就是所謂的超文本標記語言,標記兩字的意義所在。

  當我們將記事本文檔改為HTML文檔後,打開文檔我們會發現文檔內容能夠顯示出來,那如果我們想要用HTML語言顯示同一文本,又該寫下何處,如何寫呢?如字面意義所言,文檔內容部分,應該是這個網頁的軀幹,所以我們要將主體文檔部分寫入<body>部,如下圖代碼及效果圖。

<html>

<head>
</head>

<body>
學而時習之
</body>

</html>

技術分享圖片

  那麽當我們想要說明一些不屬於文檔內容卻有關於網頁的信息時自然就該寫進頭部了。讓我們在<head>部試著引入<title>標簽吧!

<html>

<head>
   <title>時習</title> 
</head>

<body>
學而時習之
</body>

</html>

技術分享圖片

  和上圖效果圖對比,唯一的差別就在於網頁的標題變了。這時我們並沒有改變網頁的文檔內容,但是通過在<head>部寫入<title>,我們改變了網頁的標題。由此我們可以做一個今天的小總結了,作為純文本文檔的HTML文檔由三個部分組成:<html>部,<head>部,<body>部;其中<body>部主要寫網頁文檔內容,<head>部則寫網頁相關的信息;此外,必須要有標簽指明內容的結構,標簽一般有開始和結束兩種。在練習過程中,你也許會發現少打了幾個字或者"/"也能照常顯示文檔,那是因為HTML是較為寬容的語言,瀏覽器也會采用寬容模式,盡量將其解釋並顯示出來。但是如果想要減少錯誤,就應該從一開始就要有嚴謹的態度,養成良好的編程習慣。

  今天我們開始接觸了HTML文檔並且親自嘗試了HTML語言編寫自己的網頁,同時也了解了標簽。學習Web前端,首先我們要學超文本標記語言(HTML),這意味著我們以後將遇到更多標簽,而當我們掌握得越多,我們將會對HTML理解得更深,同時,也希望你和我一樣,能夠在遵守一定規則下體會到略帶“設計感”的樂趣。

web前端學習(2):開始編寫HTML