HTML及HTML基礎標籤

HTML

  1. HTML全稱是超文本標記語言,英文全稱爲:HyperText Markup Language。
  2. HTML的整體框架包括頂層標籤()、頭部標籤()、體標籤()。
  3. html的各種標籤均爲尖括號,一般情況標籤都是成對出現,如果標籤沒有內容的話,則會出現單個,並且標籤會有結尾符,如:
  4. html使用形式來進行註釋,標籤之間可以嵌套,但不可以交錯,註釋標籤之內不可以嵌套註釋標籤。
  5. 標籤不區分大小寫。
  6. 空格使用&nbsp來表示。小於號用&lt來表示,大於號用&gt來表示,不等號用&ne來表示。引號用&quot來表示。
  7. html的頭標籤內使用來讓瀏覽器以utf-8的方式解析頁面,使得中文可以正常被識別。

HTML基本標籤



 1. <p>:段落標籤。
 2. <hr>:單行橫線。
 3. <h1>到<h6>:六種不同的標題字體。
 4. <br>:換行。
 5. <b>:粗字體。
 6. <i>:斜字體。
 7. <del>:刪除線字體。
 8. <small>:小字體。
 9. <em>:重點文字。
 10. <strong>:加重字體。
 11. <sub>:下標。
 12. <sup>:上標。
 13. <ins>:插入。
 14. <abbr>:縮寫。<abbr title="">文本</abbr>,鼠標移到文本上不離開,會顯示出來提示符,內容是title裏的內容。
 15. <bdo>:可以定義方向的字。<bdo dir="ltr">文本</bdo>,表示文本是從左向右顯示,ltr表示從左向右,rtl表示從右向左。
 16. <blockquote>:長的引用。表示標籤內的這部分文本是一個引用,在某些瀏覽器內會自動改變字體、樣式等。
 17. <q>:短的引用。表示標籤內的這部分文本是一個引用,在某些瀏覽器內會自動改變字體、樣式等。
 18. <cite>:引用、引證。表示標籤內的這部分文本是一個引用,在某些瀏覽器內會自動改變字體、樣式等。
 19. <dfn>:一個自定義的項目。<dfn title="">文本</dfn>,表示文本是一個自定義的項目,在某些瀏覽器內會改變字體、樣式等,並且鼠標移到文本上不離開,會顯示出來提示符,內容是title裏的內容。
 20. <var>:變量。表示標籤內的這部分文本是一個變量,在某些瀏覽器內會自動改變字體、樣式等。
 21. <a>:超鏈接。<a href="" target="">文本</a>,表示點擊文本會進行跳轉,跳轉的地址爲href屬性內的地址,跳轉的方式由target屬性決定,target可以爲以下幾種情況:_self:表示在當前頁面打開(默認),_blank表示在新頁籤打開,_parent表示在父窗口打開,_top表示在包含這個超鏈接的窗口打開。
 22. <img>:圖片拆連接。<img src="" alt=""/>,src表示顯示的圖片地址,alt表示圖片加載失敗時替換的文本。
 23. <table>:表格聲明。
 24. <tr>:表格的行。
 25. <td>:表格的單元格。常用的屬性爲border:設置邊框的寬度,colspan:跨列單元格,rowspan:跨行單元格。
 26. <th>:表格的表頭。
 27. <ul>:無序列表。
 28. <ol>:有序列表。
 29. <dl>:定義列表。<dt>表示定義的詞,<dd>表示定義的描述。

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>簡單網頁測試</title>
</head>
<body>
<p>第一段</p>
<hr/>
<h1>不同字體</h1>
<h2>不同字體</h2>
<h3>不同字體</h3>
<h4>不同字體</h4>
<h5>不同字體</h5>
<h6>不同字體1</h6>
<br/>
<b>粗字體</b>
<i>斜字體</i>
<del>刪除字體</del>
<small>小字體</small>
<em>重點文字</em>
<strong>加重語氣</strong>
<sub>下標字</sub>
<sup>上標字</sup>
<ins>插入字</ins>
<abbr title="這是一個縮寫">這是要縮寫的內容</abbr>
<bdo dir="rtl">可定義方向的文字,這段是從右到左。</bdo>
<blockquote>長的引用
    Here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation
    here is a long quotation here is a long quotation here is a long quotation.
</blockquote>
<q>短的引用</q>
<cite>引用、引證:《富春山居圖》</cite>
<dfn title="這是一個定義的項目">一個定義項目:定義的項目名稱</dfn>
<var>變量</var>
<br/>
<a href="https://www.baidu.com" target="_self">
    <img src="http://www.123.com/qqq.png" alt="圖片顯示失敗了。"/>
</a>
<br/>
<h3>無邊框表格</h3>
<table>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
</table>
<h3>有邊框,有表頭,有誇單元格</h3>
<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
    </tr>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
    </tr>
    <tr>
        <td>!</td>
        <td colspan="3">@</td>
    </tr>
</table>
<br/>
<h3>列表</h3>
<table>
    <tr>
        <td>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            <ol>
                <li>a</li>
                <li>b</li>
                <li>c</li>
                <li>d</li>
            </ol>
        </td>
    </tr>
    <tr>
        <td>
            <dl>
                <dt>爸爸</dt>
                <dd>111111111</dd>
                <dt>爸爸2</dt>
                <dd>22222222</dd>
            </dl>
        </td>
    </tr>
</table>
<br/>
<object></object>
</body>
</html>

效果

簡單網頁測試

第一段


不同字體

不同字體

不同字體

不同字體

不同字體
不同字體1

粗字體 斜字體 刪除字體 小字體 重點文字 加重語氣 下標字 上標字 插入字 這是要縮寫的內容 可定義方向的文字,這段是從右到左。
長的引用 Here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation here is a long quotation.
短的引用 引用、引證:《富春山居圖》 一個定義項目:定義的項目名稱 變量
圖片顯示失敗了。

無邊框表格

1 2 3 4
a b c d

有邊框,有表頭,有誇單元格

1 2 3 4
a b c d
! @

列表

  • 1
  • 2
  • 3
  • 4
  1. a
  2. b
  3. c
  4. d
爸爸
111111111
爸爸2
22222222

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章