天天看點

HTML 簡介HTML 簡介

HTML 簡介

超文本标記語言  (Hypertext Markup Language, HTML)  是一個可以用來結構化你的Web内容并給予其含義和目标的編碼語言。例如,你的内容可以包括一組段落或一個重點清單,甚至可以含有圖檔和資料表。這一節将為你提供足夠的資訊,使你能夠對HTML語言加以熟悉。 Learning page  。

什麼是HTML?

HTML 是用來描述網頁的一種語言。

  • HTML 指的是超文本标記語言: Hypertext Markup Language
  • HTML 不是一種程式設計語言,而是一種标記語言
  • 标記語言是一套标記标簽 (markup tag)
  • HTML 使用标記标簽來描述網頁
  • HTML 文檔包含了HTML标簽及文本内容
  • HTML文檔也叫做 web 頁面

HTML 文檔 = 網頁

  • HTML 文檔描述網頁
  • HTML 文檔包含 HTML 标簽和純文字
  • HTML 文檔也被稱為網頁

Web 浏覽器的作用是讀取 HTML 文檔,并以網頁的形式顯示出它們。浏覽器不會顯示 HTML 标簽,而是使用标簽來解釋頁面的内容。

HTML 結構

文檔類型聲明

<!doctype html>

聲明為 HTML5 文檔。

<!DOCTYPE>

聲明有助于浏覽器中正确顯示網頁。

網絡上有很多不同的檔案,如果能夠正确聲明 HTML 的版本,浏覽器就能正确顯示網頁内容。

doctype 聲明是不區分大小寫的,以下方式均可:

<!DOCTYPE html> 
<!DOCTYPE HTML> 
<!doctype html> 
<!Doctype Html>           

通用聲明

  • HTML5
<!DOCTYPE html>           
  • HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">           
  • XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">           

html 元素

<html>

元素是 HTML 頁面的根元素。

head 元素

<head>

元素包含了文檔的元(meta)資料。

body 元素

<body>

元素包含了可見的頁面内容。

<!doctype html>
<html>
<head>
<title>頁面标題</title>
</head>
<body>
<h1>這是一個标題</h1>
<p>這是一個段落。</p>
</body>
</html>           

HTML 标簽

HTML 标記标簽通常被稱為 HTML 标簽 (HTML tag)。

  • HTML 标簽是由尖括号包圍的關鍵詞,比如

    <html>

  • HTML 标簽通常是成對出現的,比如

    <b>

    </b>

  • 标簽對中的第一個标簽是開始标簽,第二個标簽是結束标簽
  • 開始和結束标簽也被稱為開放标簽和閉合标簽
<标簽>内容</标簽>           

HTML 元素

"HTML 标簽" 和 "HTML 元素" 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始标簽與結束标簽,如下執行個體:

HTML 元素:

<p>這是一個段落。</p>           

HTML 屬性

  • HTML 元素可以設定屬性
  • 屬性可以在元素中添加附加資訊
  • 屬性一般描述于開始标簽
  • 屬性總是以名稱/值對的形式出現,比如:name="value"。
  • 屬性和屬性值對大小寫不敏感。

不過,網際網路聯盟在其 HTML 4 推薦标準中推薦小寫的屬性/屬性值。

而新版本的 (X)HTML 要求使用小寫屬性。

HTML 屬性常用引用屬性值

屬性值應該始終被包括在引号内。

雙引号是最常用的,不過使用單引号也沒有問題。

提示: 在某些個别的情況下,比如屬性值本身就含有雙引号,那麼您必須使用單引号,例如:

name='John "ShotGun" Nelson'

常用屬性

下面列出了适用于大多數 HTML 元素的屬性:

屬性 描述
class 為html元素定義一個或多個類名(classname)(類名從樣式檔案引入)
id 定義元素的唯一id
style 規定元素的行内樣式(inline style)
title 描述了元素的額外資訊 (作為工具條使用)

繼續閱讀