建議學習時長: 30分鐘
學習方式:了解
學習目標
- 知道什么是 HTML。
- 了解HTML的基本結構。
- 知道什么是標簽。
- 知道什么是屬性。
- 知道 HTML 文件的后綴是什么。
- 知道如何在瀏覽器中運行 HTML 文件。
詳細介紹
HTML 簡史
HTML 是 蒂姆·伯納斯-李(物理學家),在80年代后期設計了一種能在網上分享文檔的方式。在這之前,網上溝通的方式僅限于純文本傳遞,比如:電子郵件、FTP(文件傳輸協(xié)議)和Usenet討論版。HTML是利用內容檔案儲存至中央服務器的方式,然后再將內容透過瀏覽器傳遞至本機工作站。它簡化了內容存取的方式,也讓更多豐富內容能夠顯示(諸如較復雜的文本格式與圖片的顯示)。
什么是HTML
HTML是超文本標記語言(HyperText Markup Language)的簡寫。它是用來描述網頁內容的一種語言。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。
HTML 是由一系列的標簽(也叫元素)組成的。
什么是標簽
HTML 為由一對尖括號(<>)所括起來的內容賦予了特定含義。 這樣的標識稱為一個 標簽(tag)。如,下面是一個表示段落的標簽:
<p>這是一段文字</p>
上面的例子中, p 是標簽的名字, <p> 是標簽的開始, </p> 是標簽的結束,這是一段文字 是標簽的內容。
標簽里可以嵌套標簽,如
<p>這是一段<strong>很重要</strong>的文字</p>
標簽的名字不是亂寫的。是由 W3C 維護的,所有的標簽見 這里。
有些標簽不能包含內容,稱為空元素。如,文本輸入框就是空標簽
<input type="text" />
什么是屬性
屬性是標簽的特性。屬性包括屬性名和屬性值,寫法是 name="value",屬性只能寫在開始標簽中。如
<p class="intro" id="a">介紹</p>
上面代碼中, class,id是屬性名,intro 和 a 是對應的屬性值。
HTML 頁面的基本結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
其中
- DOCTYPE定義了文檔類型。
<!DOCTYPE html>表明這是一個HTML5文檔。了解即可。 -
<html>和</html>之間的內容描述了網頁。所有的網頁標簽必須寫在<html></html>中。 -
<head>和</head>之間的內容描述了網頁的一些額外信息。不會被顯示。 -
<title>之間的內容描述了網頁的標題。會在網頁標簽上顯示 -
<meta charset="utf-8">讓瀏覽器用utf-8的編碼格式來對文檔內容進行編碼 -
<body>和</body>之間的內容描述網頁的可見部分
如何在瀏覽器中運行 HTML 文件
創(chuàng)建一個文件,后綴名是 html。 在編輯器中打開文件,內容復制 HTML 頁面的基本結構。雙擊文件,即可在瀏覽器運行。
更多學習資源
拓展閱讀
練習題
- 寫一個 HTML 頁面,頁面的標題是 Hello World。并在瀏覽器中運行。
- 完成慕課 HTML+CSS基礎課程 中第一章。