4/06/2020

HTML:網頁的標記語言

當網際網路已經成為我們日常生活的一部分,每天打開電腦上網、手機上網,看到的網頁,其實最核心都是以HTML為基礎所構成。憑著這一點,HTML語言應該有資格成為現代人的基本常識。

HTML是Hyper Text Markup Language的首字母構成,意思是「超文本標記語言」。所謂的超文本,也就是超鏈接的意思。簡單的說,HTML語言的兩大特色就是Hyper Text和Markup。

網頁文件和一般電腦文件不同的地方在於,藉由超鏈接的設置,它可以讓使用者很方便地跳轉到同文件的另一個位置,或開啟另一個網頁。超鏈接的概念,實現了整個網際網路的互聯。

Markup這個特色則說明瞭HTML語言的功能,它提供了一套通用型高的標記系統,能夠將五花八門的網頁內容(文字、圖像、影片、表格等)進行井然有序的標記,然後透過瀏覽器顯示成網頁。儲存網頁內容的檔案,就是HTML文件,而許多人不知道,HTML文件其實是純文字格式。

以下是有關HTML基本概念的筆記。


互聯網:我們的日常世界

瀏覽器——網頁文件——服務器

*網頁文件儲存在服務器(主機)上,方便世界各地的瀏覽器透過網路存取。
*網頁需要有通用的格式標準,才能兼容各種瀏覽器,也才能正確顯示所有的網頁內容(各種語言、各種格式)。


HTML的基本概念

*HTML語言是所有網頁的基礎,用來標記網頁文件的架構。
*.html文檔是純文字檔案,卻能承載豐富的多媒體信息。
*HTML5新版的規則是,以HTML標記網頁架構(如標題、段落、鏈接),以CSS設置網頁樣式(如字體、顏色、大小)。
*超文本的概念:用超鏈接(hyperlink)與其他網頁(文件、圖片等)互相連接。
*在.html文件中,除了HTML語言,通常還會設置有其他語言的代碼,如CSS(層疊樣式表), Javascript等。


學會HTML可以做什麼用?

*所有網頁的基礎都是HTML,HTML是網頁製作、網站架構的基礎知識。
*理解HTML,就能瞭解網頁是怎麼構成的。
*學會HTML,在網頁設計時思路能更清晰,可運用的工具也更多。
*學會HTML,可以知道如何:
a. 在.html文件中修改內容,如關鍵詞、超鏈接,或複製代碼到需要的地方。
b. 查看別人網頁源代碼里的信息,如關鍵詞。
c. 修改源代碼,消除網頁錯誤bug。
d. 在沒有軟件支持的情況下,直接用HTML語言修改源代碼。


編輯製作.html文檔的工具

*純文字編輯器:如Windows里的記事本
*所見即所得的軟件:Dreamweaver, Expression Web, Coda, TextMate, CoffeeCup, Aptana Studio


.html文件的基本標記原則

*以純文字格式存在,檔案格式為UTF-8
*檔案名稱為.html或.htm
*用成對的標籤圍繞要被標注的文本,例如<title>互聯網的世界</title>
*常用的標籤,例如:
標示網頁標題<h1></h1>;
標示段落<p></p>;
標示表格<table></table>;
標示段落區塊<div></div>;
標示句子或字段 <span></span>;
加粗<strong></strong>

*絕大多數的標記都是成對的,但有例外
*例外:<img>、<br>的標記單一不成對。
*標記必須是嵌套的,例如:<h2><p>I am a paragraph</p></h2>。
*錯誤的標記示例:<head><title>I am a title</head></title>。

文件中的備注<!-- 注釋文字放這裡 -->:若想將一段文字注明在.html文檔中,但不在網頁中顯示,就用這個備注格式。

*瀏覽器讀取.html文件時,會自動忽略文件中的換段和大部分的空格。撰寫.html文件時換段,是為了方便我們自己編寫和閱讀。(但文本存檔時若標記中斷,可能會造成網頁讀取錯誤)
*標記若錯誤,網頁就不會如預期的顯示。(網頁上不會提示錯誤在哪裡,需自己除錯)

沒有留言:

張貼留言