Y 分鐘速成 html 詳情 - html,html5,基礎,入門小X學技術博客

獲取代碼： learnhtml.txt

HTML 代表超文本標記語言。

它是一種允許我們為萬維網編寫頁面的語言。它是一種標記語言，它使我們能夠使用代碼編寫網頁來指示應如何顯示文本和數據。事實上，HTML 文件是簡單的文本文件。

這個標記是什麼？它是一種通過用開始標籤和結束標籤包圍頁面數據來組織頁面數據的方法。此標記用於賦予它所包含的文本以意義。與其他計算機語言一樣，HTML 有許多版本。這裏我們將討論 HTML5。

注意： 你可以在類似 codepen 的網站上的教程中，嘗試不同的標籤和元素帶來的效果，理解它們如何起效，並且逐漸熟悉這門語言。本文主要關注 HTML 語法和一些有用的技巧。

<!-- 註釋要像本行一樣被包圍起來！ -->

<!-- #################### 標籤 #################### -->
   
<!-- 下面是一個我們將要分析的HTML文件的例子。 -->

<!doctype html>
    <html>
        <head>
            <title>我的網站</title>
        </head>
        <body>
            <h1>Hello, world!</h1>
            <a href = "http://codepen.io/anon/pen/xwjLbZ">來看看這裏有什麼</a>
            <p>這是一個段落。</p>
            <p>這是另外一個段落。</p>
            <ul>
                <li>這是一個非計數列表的一項（項目符合列表）</li>
                <li>這是另一項</li>
                <li>這是列表中的最後一項</li>
            </ul>
        </body>
    </html>

<!-- 一個HTML文件通常開始於向瀏覽器表明本頁面是HTML。 -->
<!doctype html>

<!-- 在這之後，由<html>開始標籤作為起始。 -->
<html>

<!-- 在文件的最後會由</html>標籤結束。 -->
</html>

<!-- 在最終的標籤後面應該沒有任何東西。 -->

<!-- 在其中（在開始標籤<html>和結束標籤</html>中間）我們可以看到： -->

<!-- 由標籤<head>定義的頭部 （頭部必須被</head>標籤關閉）。 -->
<!-- 頭部包含一些不顯示的描述和額外信息；這些是元數據。 -->

<head>
    <title>我的網站</title><!-- <title>標籤告訴瀏覽器在瀏覽器窗口的標題區和標籤欄應該顯示什麼標題。 -->
</head>

<!-- 在<head>區域之後，我們可以看到<body>標籤 -->
<!-- 在這點之前的內容都不會顯示在瀏覽器的窗口中。 -->
<!-- 我們必須在正文區填上需要顯示的內容。 -->

<body>
    <h1>Hello, world!</h1> <!-- h1標籤創建了一個標題 -->
    <!-- <h1>標籤可以有一些副標題，從最重要的（h2）到最細微的（h6）。 -->
    <a href = "http://codepen.io/anon/pen/xwjLbZ">來看看這裏有什麼</a> <!-- 一個指向href=""屬性中URL的超鏈接 -->
    <p>這是一個段落。</p> <!-- <p>標籤讓我們在html頁面中顯示文字 -->
    <p>這是另外一個段落。</p>
    <ul> <!-- <ul>標籤創建了一個項目符合列表。 -->
    <!-- 如果需要一個編號列表，我們可以使用<ol>標籤。這樣會在在第一項前顯示1.，第二項前顯示2.，以此類推。 -->
        <li>這是一個非計數列表的一項（項目符合列表）</li>
        <li>這是另一項</li>
        <li>這是列表中的最後一項</li>
    </ul>
</body>

<!-- 好了，創建一個HTML文件就是這麼簡單。 -->

<!-- 當然我們還可以加入很多額外的HTML標籤類型。 -->

<!-- 插入圖片。 -->
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- 圖片源是由src=""屬性指明的 -->
<!-- 圖片源可以是一個URL或者你電腦上一個文件的路徑。 -->

<!-- 創建表格也沒問題。 -->

<table> <!-- 我們開始一個<table>元素 -->
    <tr> <!-- <tr>讓我們創建一行 -->
        <th>第一個表頭</th> <!-- <th>讓我們給表格列一個標題 -->
        <th>第二個表頭</th>
    </tr>
    <tr>
        <td>第一行第一列</td> <!-- <td>讓我們創建一個單元格 -->
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>