標籤:

HTML 是什麼?


不要相信任何所謂程序員說的:「HTML是用來做網頁的」。

這句話正確的描述是:「HTML是用於描述超文本的,網頁是一個超文本資源節點」。

HTML和網頁本無聯繫。

建立向女神寢室的信息通信

為了簡化你對複雜的Internet的理解,我們暫時把複雜的Internet抽象成:你向女生宿舍發送信號。

為了能夠在斷網後繼續聯絡女神,你買來了電池和開關,然後拉了普通電線線到女神的寢室。

你的女神把小燈泡接在了電線的兩端。

那麼,你只需要開閉開關,就可以控制女神屋裡的燈泡了。

發送信號

關閉著小燈泡1秒鐘,代表發送一個0。

打開了小燈泡1秒鐘,代表發送一個1。

此時你可以向女神發送任意二進位內容了。

發送文本

你只希望發送一個「Good Night」。

所以你必須想辦法對「Good Night」進行編碼。

"G","o","o","d"的ASCII編碼是:071,111,111,100

轉換成二進位就是: 0100 0001 0110 1111 0110 1111 0110 0100

使用發送二進位信號的方法發過去,你的女神需要自己解碼來閱讀出「Good」。

發送富文本

有一天,你希望發送「I miss you」。

為了表達心意,你希望加粗「you」,並使用紅色的字體發送「miss」。

而……這一根簡陋的電線似乎很難理解「加粗」和「紅色」……

不過這難不倒你的。

於是機智你發送了:I &miss& &you&

同樣機智的女神理解了這件事情。

你發明了一種語言

你很喜歡這種編碼格式。

這是一種標記語言,於是你稱其為:TGML (To Girl Markup Language)

平時你使用TGML來和你的女神通信。

TGML可以非常好的解決富文本的傳輸問題。

表白

終於你決定表白了。

你繪製了很美麗的心形圖片,還有兩個按鈕:接受、拒絕。

兩個按鈕分別會鏈接到 "接受.tgml"和"拒絕.tgml"

為了描述圖片,你使用了&

為了描述按鈕,你使用了&

現在你發送給女神的內容,已經不只是帶格式的富文本,而是帶鏈接的富文本。

如果把帶鏈接的富文本叫超文本。那麼……

於是在這個世界上,擁有了一種能夠描述超文本的語言,叫做TGML

超文本

描述超文本的方式有很多,例如:HTML,TGML,還有markdown。

HTML的誕生是為了描述超文本。

超文本的用途也很多,例如:描述一個網頁,或者描述一個Word文檔。

HTML文件是超文本文件。但是超文本未必是HTML。

Microsoft Word

Microsoft Word是Office的一個組件。它同樣代表一個超文本資源。

如果你解壓一個docx文件並仔細翻一翻,你能找到你剛才寫的作業,是以HTML方式記載著。

當然,描述超文本還有markdown。所以你可以使用一些工具,比如pandoc,把markdown轉換成word。

故事的結局

你的女神有一個名字,叫瀏覽器。

你的名字叫Web伺服器。

你們中間的那根線,叫HTTP。

總結

HTML用於描述超文本。描述超文本的語言有很多種。

超文本的用途很多。做網頁只是其中一種。

HTML最初設計時確實是為了做網頁考慮的。但HTML不是做網頁的唯一工具。

探索HTML是如何呈現、渲染還有它強大的功能時,你只是在探索你的瀏覽器的解碼能力而已。

=====小字=====

*後註:html一般不是ASCII編碼,而是utf-8

*HTTP除了要傳輸內容,還要傳輸狀態碼,頭,地址等很多信息。上面的文字只是簡化了這個模型。

*&不是合法的html標籤


在了解概念之前,先做以下操作,在桌面新建一個txt文件,然後在txt文件中輸入:「Hello World」,保存該文件並將其後綴名改為.html,(如果你的電腦默認隱藏了文件的後綴名,那麼請點擊如何查看電腦文件後綴名)然後雙擊打開,你就能在瀏覽器上看到頁面顯示「Hello World",按F12鍵,你將看到這個頁面的源代碼除了"Hello World"之外,還有其他標記符號。這些就是html標記符。

再試另一個例子:依然是打開一個txt文件,然後將以下代碼複製到文件中,保存為2.html

&
&
&
&
&HTML是超文本標記語言&
&
&
& &

那麼問題來了,HTML是一門什麼樣的語言呢?

HTML中文全名叫做:**「超文本標記語言」**。超文本的意思就是不止是文本,還可以包含圖片,鏈接,音樂,甚至程序等非文字元素。

本質上來看,HTML其實和我們日常交流使用的語言沒什麼兩樣,不同在於自然語言是用於人與人之間的交流而HTML則是用於人與瀏覽器之間的交流。

要想讓瀏覽器按照我們的意願展示出我們期望的酷炫效果,我們就得學會用HTML語言來告訴瀏覽器,在頁面的哪個位置,放置一個什麼控制項。至於這個控制項長啥樣,具體有什麼些功能,則分別需要CSS和JavaScript來實現。

(CSS:層疊樣式表,是用來表現HTML或XML等文件樣式的計算機語言。JavaScript:一種直譯式腳本語言,用來給網頁實現複雜的動態功能,關於這兩面語言的更多內容占時不在討論範圍,大家可自行百度或腦補)

HTML結構:

標準的超文本標記語言文件都具有一個基本的整體結構,標記一般都是成對出現(部分標記除外例如:&
),即超文本標記語言文件的開頭與結尾標誌和超文本標記語言的頭部與實體兩大部分。有三個雙標記符用於頁面整體結構的確認。

標記符&,說明該文件是用超文本標記語言(本標籤的中文全稱)來描述的,

它是文件的開頭;而&,則表示該文件的結尾,它們是超文本標記語言文件的開始標記和結尾標記。

頭部內容

& &這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容,它本身不作為內容來顯示,但影響網頁顯示的效果。

主體內容

&&網頁中顯示的實際內容均包含在這2個正文標記符之間。正文標記符又稱為實體標記。

下面是一個典型的網頁源碼的結構劃分:

& // Html 開始標示
& // Html 頭標示
&Hello& // 設置網頁標題
&
// 頭結束標示
& // 主體開始標示
&

Hello world!!!& // 放置Hello word!!!文本
& // 主體結束標示
& // Html結束標示

內容部分引用自如下鏈接,有興趣的歡迎查閱。

[HTML介紹](HTML_百度百科

)

[CSS 介紹](CSS_百度百科

)

[JS 介紹](javascript_百度百科

)


用來描寫網頁的超文本語言,全稱Hyper Text Markup Language。

是一種標記語言,不屬於編程語言,使用標記標籤描述網頁中的文字、圖片、鏈接等,

右鍵查看源文件,就是。


HTML

How.To.Meet.Lady.


how to make love


做官方解釋:Hyper Text Makeup Language。

超文本標記語言。


最開始學習網頁設計的時候學的就是html,根據眾多高手的介紹html是所有網站學習的基礎,學習html最關鍵的就是要明白「標籤」二字的含義,html學習沒有其他編程語言那麼複雜,比較容易學,其中大部分的html內容跟你想要看到的最終的效果內容沒有太大的區別,該有的都有,介紹兩本書一起看就能了解html到底是什麼,CSS3實戰手冊第3版(影印版)和HTML5實戰手冊(影印版)。


推薦閱讀:

移動端開發使用css中使用position將一個div固定瀏覽器底部,會擋住內容,該怎麼完美的解決?
Mac 上最好的網頁編輯工具是什麼?
chrome手機模擬模式的時候,發現頁面會比正常的小很多,然後每次都要去瀏覽器設置調整字體,如何避免?
我想搭建一個網站,請問我需要什麼技術?目前前後端哪一些技術比較流行?有什麼資料可以推薦的嘛?
shim和polyfill有什麼區別?

TAG:HTML |