天天看點

JavaWeb學習之路(5)--編寫第一段HTML網頁代碼

1. 什麼是HTML

在上一章的學習中,我們已經開發了一個空白的網頁。但是空白的網頁啥作用呢?

毫無作用啊!!

是以我們需要設計一個好看的,有内容的網頁,而HTML語言,就是用來編寫網頁内容的語言。

我們使用HTML語言規範編寫的網頁,浏覽器就能按照相應的規則展示我們設計的内容。

2. 為啥叫HTML

HTML,英文全稱HyperText Markup Language,翻譯為中文:超文本标記語言。

OK,語言很好了解,程式設計語言就是程式員和計算機之間的溝通工具,HTML是程式員設計網頁内容的語言。

文本也很好了解,就是文字的意思。

那麼超文本是啥意思呢?這裡的超其實是超越的意思,也就是說這門語言超越了文本。因為HTML網頁不光能展示文本,還能展示圖檔、音樂、視訊的内容,是以是超越了文本的。

最後是重點:标記,這展現了這門語言的特點。HTML是通過标記來描述網頁的各個部分的。

3. 什麼是标記

舉個例子先,我們看一下信封的格式。

我們分析下,左上角是郵編,右上角是郵票,中間依次是位址、姓名、寄信人。

這其實就是一種标記,通過不同的位置标記出來這個區域代表的内容。

是以寄信人發出郵件後,郵政公司就能根據不同位置标記的内容,獲得對應的郵編、位址等資訊。

4. HTML的标記

HTML的标記不是通過位置來實作的,它是通過标簽。

例如<title>淘寶網</title>就是一個網頁标題的标簽,都是以<xxx>開頭,且以</xxx>結束,這就是标記,标記名稱xxx代表标記的用途,<xxx>和</xxx>中間的部分表示标記的内容。

是以對于<title>淘寶網</title>來說,這個标簽的用途就是title,也就是設定網頁的标題;這個标簽的内容是淘寶網,也就是網頁的标題設定為淘寶網。

5. 編寫第一段HTML網頁代碼

我們學習最簡單的3個标簽:<html>、<head>、<title>,第一個标簽表示HTML網頁,第一個表示網頁的頭部,第三個表示網頁的标題。

打開記事本,建立一個hello.html,然後内容如下。這樣的話,标簽中間的部分就是網頁的内容了。

<html>

</html>

1

2

然後在中間添加<head>标簽,因為網頁的頭部屬于網頁,是以放到<html>标簽的中間。

<head></head>

最後,我們在網頁的頭部,設定網頁的标題,标題的内容為:hello。

<head>

<title>hello</title>

</head>

此時我們使用浏覽器打開這個網頁,效果如下,可見我們已經成功設定了标題。

6. 小結

其實HTML語言的規則及其簡單,标簽幾乎都是以<xxx>開頭,對應的以</xxx>結束,而開始和結束中間的部分就是标簽對應的内容。

常用的标簽也就十幾二十個,是以學習HTML就是熟悉這些常用的标簽的過程。

不算困難吧。

繼續閱讀