mozilla
您的搜尋結果

    Introduction to HTML

    This translation is incomplete. Please help translate this article from English.

    當你在瀏覽器上瀏覽網頁時,你看到的是最基本的文字。這些字通常包含一些特色樣式,像是各種不同的字型和顏色。在很多時候有些頁面還會顯示圖片或是影片,而有時可能會有個表格能讓你進入(或搜尋)想要的資訊,甚至是依照你自己的喜好自訂頁面的顯示方式。有些頁面時常包含動態內容和會不斷變更的項目,而有些頁面則保持相同不變。

    有許多技術(諸如 CSSJavaScriptFlashAJAXJSON)可以用來定義網頁的元素,但是以最基礎的層面來說,網頁是以 HTML超文件標示語言)來定義。 意即沒有 HTML,就沒有所謂的網頁。

    本文章提供 HTML 的基本介紹,如果你想知道網頁瀏覽器背後有什麼,那可以從這裡開始學習。

    HTML 發展歷史

    提姆·柏納-李在 1980 年代是在 CERN(歐洲核子研究組織)的一位物理學家,他建立了能在網路上分享文件的一種方式。而在這之前,網路上溝通的方式僅能以純文本傳遞,使用像是電子郵件、FTP(檔案傳輸協議)和 Usenet 討論板等技術。HTML 利用內容檔案儲存至中央伺服器的方式,然後再將內容透過瀏覽器傳遞至本機工作站。它簡化了內容存取的方式,也讓更多「豐富」內容能夠顯示(諸如較複雜的文本格式與圖片的顯示)。

    什麼是 HTML?

    HTML 是一種標記語言。它告訴瀏覽器如何顯示內容。HTML 將「content」(文字、圖片、語音、影片等等)從「presentation」(內容型態定義與內容型態如何顯示的描述)分隔出來。HTML 使用預先定義的元素集合來識別內容型態。元素包含一個以上的標記來包含或表達內容。標記利用尖括號來表示,而結束標記(用來指示內容尾端)則在前面加上斜線。

    舉例來說,段落元素包含起始標記"<p>"和結束標記"</p>"。下面的例子展示了一個包含 HTML 段落元素的段落:

    <p>My dog ate all the guacamole.</p>

    當此內容顯示在網頁瀏覽器中,它看起來會像這樣:

    瀏覽器利用標記來當作指示如何顯示標記中的內容。

    包含內容的元素通常還可以再包含其它元素。舉例來說,斜體元素("<em>")可以包含在段落元素中:

    <p>My dog ate <em>all</em> the guacamole.</p>

    它會顯示成這樣:

    有些元素則不會包含其它元素。舉例來說,,圖片標記("<img>")僅明確指示內容的檔案名稱(圖片)為屬性:

    <img src="smileyface.jpg">

    通常在結束標記中會放置右斜線來表示為標記的結束。這在 HTML 為選擇性的,但是在 XHTML 則一定要加上。

    接下來文章將會更深入講解有關此語言得更多概念。不過如果您想實際操作 HTML,請前往 Mozilla Thimble,這是個線上互動的編輯器教導您如何編寫 HTML。除此之外,也別忘了查看 HTML 元素來了解有哪些可用的元素和使用它們的說明。

    元素-基礎建構區間

    HTML 由一組元素所組成。元素定義了他們內容中語意的意思。這些元素包括所有處在兩個相配的元素標籤的東西,也包括標籤本身。舉例來說 ,"<p>"這個元素代表段落;"<img>"這個元素代表圖片。查看 HTML 元素裡有完整的條列。

    有些元素具有非常精確的含義,如「這是一張圖片」,「這是一個標題」或「這是一個有序列表」。其他的還有不太具體的,例如「這是頁面上的一部分」或「這是文本的一部分」。然而,其他用於技術上的原因,諸如「這是不應該顯示的頁面識別信息」。無論如何,在這樣或那樣的所有HTML元素都有一個語義值。

    大部分元素可能會包含其他元素,形成階層式結構。一個非常簡單但完整的網頁看起來是這樣的:

    <html>
      <body>
    
        <p>My dog ate all the guacamole.</p>
    
      </body>
    </html>

    正如你可以看到,<html>的元素圍住其餘的文件,<body>元素圍住的頁面內容。這種結構通常作為樹的分支(在這種情況下,在<body>和p元素)從樹幹生長(<html>)。這個層次結構被稱為DOM:文件物件模型。

    標籤

    HTML文件是以純文本的形式寫入。他們可以寫在任何文本編輯器,允許將內容保存為純文本(雖然大多數HTML的作者喜歡使用一個專門的編輯器,突顯語法和顯示的DOM。標籤名字可以用大寫或小寫,然而,在W3C(保持HTML規格的國際財團)建議使用小寫(而XHTML要求小寫)。

    在HTML中,在小於號(“<”)和大於號(“>”)之間的所有東西都具有特殊意義。這種標記被稱為一個標籤。下面是一個簡單的例子:

    <p>This is text within a paragraph.</p>
    

    在這個例子中,有一個開始標籤和結束標籤。結束標籤和開始標籤是相同的,但在小於號後面多了一個斜杠。大多數HTML元素都是用開始標記和結束標記來寫。開始和結束標記應正確嵌入,也就是結束標籤應該寫在開始標籤的相反順序。正確的嵌入是一個必須遵守的規則,這樣才能寫出有效的代碼。

    這是一個有效的代碼,例如:
    <em>I <strong>really</strong> mean that</em>.
    

    這是一個無效的代碼,例如:

    Invalid: <em>I <strong>really</em> mean that</strong>.

    Note that in the valid example, the closing tag for the nested element is placed before the closing tag for the element in which it is nested.

    採用HTML5解析規則之前,瀏覽器沒有以同樣方式解釋無效的代碼,當他們遇到無效的代碼時會產生不同的結果。瀏覽器是容許Web作者失誤的,但不幸的是,並非所有都以同樣的方式產生,導致在無效的HTML的情況下幾乎都是不可預知的結果。現今瀏覽器的最新發展,如Internet Explorer 10中,Firefox4,Opera11.60中,Chrome 18或Safari5,它們執行了現在標準的的無效代碼解析規則。在所有現代瀏覽器中,無效的代碼都會產生相同的DOM tree。

    某些元素不包含任何文本內容或元素。這些都是空的元素,不需要結束標籤。這是一個例子:

    <img src="smileyface.jpg">

    很多人在尾端使用斜線標記空元素(這在XHTML中是強制的)。

    <img src="smileyface.jpg" />

    在HTML中,斜線沒有技術上的功能,它只是一個純粹的文體選擇。

    屬性

    屬性名稱開始標籤可能包含額外的信息,如在前面的例子。這樣的信息被稱為屬性。屬性通常由兩部分組成:

    • 屬性名稱
    • 屬性值

    有些屬性只能有一個值,他們是布爾值(true/false)屬性,可以縮寫剩下僅屬性名、或將屬性值留空。所以以下三個示例系等價的:

    <input required="required">
    
    <input required="">
    
    <input required>
    

    若屬性值僅爲一個單詞或數字,可以直接書寫;但若屬性值含有兩個或以上字符串時,則必須包在引號內。單引號和雙引號都系可以的。多數開發者都偏好總是使用引號來避免歧義和錯誤,類似的錯誤可見如下示例:

    <p class=foo bar> (注意哦,這裏可能會導致歧義。)

    在上述示例,開發者希望設置的屬性值爲“foo bar”,但由於沒有引號,程式被瀏覽器理解成:

    <p class="foo" bar="">

    Named character references

    Named character references (often casually called entities) are used to print characters that have a special meaning in HTML. For example, HTML interprets the less-than and greater-than symbols as tag delimiters. When you want to display a greater-than symbol in the text, you can use a named character reference. There are four common named character references one must know:

    • &gt; denotes the greater than sign (>)
    • &lt; denotes the less than sign (<)
    • &amp; denotes the ampersand (&)
    • &quot; denotes double quote (")

    There are many more entities, but these four are the most important because they represent characters that have a special meaning in HTML.

    Doctype and comments

    In addition to tags, text content and entities, an HTML document must contain a doctype declaration as the first line. In modern HTML this is written like this:

    <!DOCTYPE html>

    The doctype has a long and intricate history, but for now all you need to know is that this doctype tells the browser to interpret the HTML and CSS code according to W3C standards and not try to pretend that it is Internet Explorer from the 90's. (See quirks mode.)

    HTML has a mechanism for embedding comments that are not displayed when the page is rendered in a browser. This is useful for explaining a section of markup, or leaving notes for other people who might work on the page, or for leaving reminders for yourself. HTML comments are enclosed in symbols as follows:

    <!-- This is comment text -->

    A complete but small document

    Putting this together here is a tiny example of an HTML-document. You can copy this code to a text editor, save it as myfirstdoc.html and load it in a browser. Make sure you are saving it using the character encoding UTF-8. Since this document uses no styling it will look very plain, but it is only a small start.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>A tiny document</title>
    </head>
    <body>
      <h1>Main heading in my document</h1>
      <!-- Note that it is "h" + "1", not "h" + the letter "one" -->
      <p>Loook Ma, I am coding <abbr title="Hyper Text Markup Language">HTML</abbr>.</p>
    </body>
    </html>
    

    Document Tags and Contributors

    Contributors to this page: waynew, moscartong, teoli, wildsky, Dawei
    最近更新: moscartong,