HTML文法介紹

一基本标簽（塊級标簽和内聯标簽）

<hn>: n的取值範圍是1~6; 從大到小. 用來表示标題.

<p>: 段落标簽. 包裹的内容被換行.并且也上下内容之間有一行空白.

<b> <strong>: 加粗标簽.

<strike>: 為文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角标 和 下角表.

<br>:換行.

<hr>:水準線

<div><span>

塊級标簽：<p><h1><table><ol><ul><form><div>

内聯标簽：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特點

總是在新行上開始；
寬度預設是它的容器的100%，除非設定一個寬度。
它可以容納内聯元素和其他塊元素

inline元素的特點

和其他元素都在一行上；
寬度就是它的文字或圖檔的寬度，不可改變
内聯元素隻能容納文本或者其他内聯元素

特殊字元

&lt; &gt; &quot; &copy; &reg;

<br>标簽

　　<br>可插入一個簡單的換行符。

　　<br>标簽是空标簽（意味着它沒有結束符，是以下面的這個是錯誤的：<br></br>）

1.1 HTML中塊級标簽和内聯标簽的差別

塊級元素	行内元素
獨占一行,預設情況下，其寬度自動填滿其父元素寬度	相鄰的行内元素會排列在同一行裡，直到一行排不下，才會換行，其寬度随元素的内容而變化
可以設定width，height屬性	行内元素設定width，height屬性無效
可以設定margin和padding屬性	行内元素起邊距作用的隻有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。
對應于display:block	對應于display:inline；

二，head标簽

　　我們首先來介紹一下

head

标簽的主要内容和作用，文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的标題、編碼方式及URL等資訊,這些資訊大部分是用于提供索引,辯認或其他方面的應用（移動端）的等。以下标簽是可以用在

head

标簽中的：

<head lang='en'>
    <title>标題資訊</title>
    <meta charset='utf-8'>
    <link>
    <style type='text/css'></style>
    <script type='text/javascript'></script>
</head>

三，title标簽

　　在

<title>

和

</title

>标簽之間的文字内容是網頁的标題資訊，它會顯示在浏覽器标簽頁的标題欄中。可以把它看成是一個網頁的标題。主要用來告訴使用者和搜尋引擎這個網頁的主要内容是什麼，搜尋引擎可以通過網頁标題，迅速的判斷出目前網頁的主題。

　　下面做一個小練習，建立一個帶有我們自定義标題内容的網頁：

<!DOCTYPE HTML>
<html>
    <head>
        <title>戰争熱誠</title>
    </head>
    <body></body>
</html>

　　将上面的檔案另存為a

.html

，然後用浏覽器打開，就可以看到下面的内容。

上面我們介紹了

title

标簽的用法，接下來我們繼續看一下

head

标簽中可以使用的其他标簽：

上面我們介紹了

title

head

四，meta标簽

Meta标簽介紹：

　　元素可提供有關頁面的原資訊（mata-information）,針對搜尋引擎和更新頻度的描述和關鍵詞。

　　标簽位于文檔的頭部，不包含任何内容。

　　提供的資訊是使用者不可見的。 meta标簽的組成：meta标簽共有兩個屬性，它們分别是http-equiv屬性和name屬性，不同的屬性又有不同的參數值，這些不同的參數值就實作了不同的網頁功能。

常用的meta标簽：

http-equiv屬性

它用來向浏覽器傳達一些有用的資訊，幫助浏覽器正确地顯示網頁内容，與之對應的屬性值為content，content中的内容其實就是各個參數的變量值。

<!--重定向 2秒後跳轉到對應的網址，注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
<!--指定文檔的内容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE浏覽器以最進階模式渲染目前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2. name屬性

　　主要用于頁面的關鍵字和描述，是寫給搜尋引擎看的，關鍵字可以有多個用 ‘,’号隔開，與之對應的屬性值為content，content中的内容主要是便于搜尋引擎機器人查找資訊和分類資訊用的。

<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉">
<meta name="description" content="戰争熱誠">

五，body标簽

　　想要在網頁上展示出來的内容一定要放在

body

标簽中。把我們之前海燕那一段HTML代碼貼過來，儲存到一個HTML格式的檔案中。

<!DOCTYPE HTML>
<html>
    <head>
        <title>戰争熱誠</title>
    </head>
    <body>
        <h1>海燕</h1>
        <p>在蒼茫的大海上，</p>
        <p>狂風卷集着烏雲。</p>
        <p>在烏雲和大海之間，</p>
        <p>海燕像黑色的閃電，</p>
        <p>在高傲地飛翔。</p>
    </body>
</html>

　　使用浏覽器打開，看一下效果：

上面也出現了字型的大小，這是什麼呢？這裡就簡單介紹一下。

六，标題标簽h1~h6

　　<h1> -

<h6>

标簽可定義标題。

<h1>

定義最大的标題。

<h6>

定義最小的标題。由于 h 元素擁有确切的語義，是以請您慎重地選擇恰當的标簽層級來建構文檔的結構。是以，請不要利用标題标簽來改變同一行中的字型大小。相反，我們應當使用css來定義來達到漂亮的顯示效果。标題标簽通常用來制作文章或網站的标題。

h1~h6标簽的預設樣式：

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>戰争熱誠</title>
    </head>
    <body>
        <h1>一級标題</h1><h2>二級标題</h2>
        <h3>三級标題</h3>
        <h4>四級标題</h4>
        <h5>五級标題</h5>
        <h6>六級标題</h6>
    </body>
</html>

　　請看上面代碼

<h1>

<h2>

書寫在一行上展示，但是在浏覽器的效果卻是換行了，如下：

文本樣式标簽主要用來對HTML頁面中的文本進行修飾，比如加粗，斜體，線條樣式等等，，，，

1. `<b></b>`：加粗
2. `<i></i>`：斜體
3. `<u></u>`：下劃線
4. `<s></s>`：删除線
5. `<sup></sup>`：上标 
6. `<sub></sub>`：下标

　　現在如果想在一段文字中特别強調某幾個字，這時候就可以用到`<em>`或`<strong>`标簽。

這兩個标簽都是表示強調，但是兩者在強調的語氣上有差別:`<em>`表示強調，`<strong>`表示更強烈的強調。

在浏覽器中`<em>`預設會用斜體表示，`<strong>`會用粗體來表示。兩個标簽相比，我們通常會推薦大家使用`<strong>`表示強調。

七，段落标簽p

<p>,paragraph的簡寫。定義段落

<body>
        <p>我們大多數都是想法太多實踐太少，或者簡單點說就是想不勞而獲</p>
        <p>為了改變自己，我決定好好學習，多做事情，少說話</p>

</body>

浏覽器展示特點：

跟普通文本一樣，但我們可以通過css來設定目前段落的樣式
是否又獨占一行呢？答案是的塊級元素

超連結标簽a

href:要連接配接的資源路徑 格式如下: href="http://www.baidu.com" 

target: _blank : 在新的視窗打開超連結. 架構名稱: 在指定架構中打開連接配接内容.

name: 定義一個頁面的書簽.

用于跳轉 href : #id.（錨）

　　超級連結

<a>

标記代表一個連結點，是英文anchor（錨點）的簡寫。它的作用是把目前位置的文本或圖檔連接配接到其他的頁面、文本或圖像

<body>
    <h1>

        <!-- a連結 超連結  
        target:_blank 在新的網站打開連結的資源位址
                _self 在目前網站打開連結的資源位址
        title: 滑鼠懸停時顯示的标題
        -->
        <a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
        <a href="a.zip">下載下傳包</a>
        <a href="mailto:[email protected]">聯系我們</a>
        <!-- 傳回頁面頂部的内容 -->
        <a href="#">跳轉到頂部</a>

        <!-- 傳回某個id -->
        <a href="#p1">跳轉到p1</a>
        <!-- javascript:是表示在觸發<a>預設動作時，執行一段JavaScript代碼，
而 javascript:; 表示什麼都不執行，這樣點選<a>時就沒有任何反應。 -->
        <a href="javascript:alert(1)">内容</a>
        <a href="javascript:;">内容</a>


    </h1>
</body>

　　target:_blank 在新的網站打開連結的資源位址
　　target：_self 在目前網站打開連結的資源位址
　　title: 表示滑鼠懸停時顯示的标題

連結其他表現形式：

目标文檔為下載下傳資源例如：href屬性值，指定的檔案名稱，就是下載下傳操作(rar、zip等)
電子郵件連結前提：計算機中必須安裝郵件用戶端，并且配置好了郵件相關資訊。例如： <ahref="mailto:[email protected]">聯系我們</a>
傳回頁面頂部的空連結或具體id值的标簽例如： <a href="#">内容</a> 或 <a href="#id值">内容</a>
javascript:是表示在觸發 <a> 預設動作時，執行一段JavaScript代碼。例如： <ahref="javascript:alert()">内容</a>
javascript:;表示什麼都不執行，這樣點選 <a> 時就沒有任何反應例如： <a href="javascrip:;"> 内容</a

八，清單标簽ul，ol

<ul>: 無序清單

<ol>: 有序清單
         <li>:清單中的每一項.

<dl>  定義清單

         <dt> 清單标題
         <dd> 清單項

　　網站頁面上一些清單相關的内容比如說物品清單、人名清單等等都可以使用清單标簽來展示。通常後面跟 `<li>` 标簽一起用，每條li表示清單的内容

　　<ul>

:unordered lists的縮寫無序清單

<ol>

:ordered listsde的縮寫有序清單

<!-- 無序清單 type可以定義無序清單的樣式-->
    <ul type="circle">
        <li>我的賬戶</li>
        <li>我的訂單</li>
        <li>我的優惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ul>
    <!-- 有序清單 type可以定義有序清單的樣式 -->
    <ol type="a">
        <li>我的賬戶</li>
        <li>我的訂單</li>
        <li>我的優惠券</li>
        <li>我的收藏</li>
        <li>退出</li>
    </ol>

ol标簽的屬性：

type：清單辨別的類型

1：數字
a：小寫字母
A：大寫字母
i：小寫羅馬字元
I：大寫羅馬字元

清單辨別的起始編号

預設為1

ul标簽的屬性： type：清單辨別的類型

disc：實心圓(預設值)
circle：空心圓
square：實心矩形
none：不顯示辨別

九，盒子标簽div

　　<div>可定義文檔的分區 division的縮寫譯：區

<div>

标簽可以把文檔分割為獨立的、不同的部分,請看下面代碼我們将他們進行分區

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8" >
    <title>常用标簽一</title>
</head>
<body>
    <div id="wrap">
        <div class="para">
            <p style="height: 1000px" id="p1">段落</p>
        </div>

        <div class="anchor">
            我是普通的文本
            <h1>

                <a href="http://www.baidu.com" target="_blank" title="百度">百度</a>
                <a href="a.zip">下載下傳包</a>
                <a href="mailto:[email protected]">聯系我們</a>
                <a href="#">跳轉到頂部</a>
                <a href="#p1">跳轉到p1</a>

                <a href="javascript:alert(1)">内容</a>
                <a href="javascript:;">内容</a>
            </h1>
        </div>
        <!-- <h2>戰争熱誠</h2>
        <h3>戰争熱誠</h3>
        <h4>戰争熱誠</h4>
        <h5>戰争熱誠</h4>
        <h6>戰争熱誠</h6> -->
        <div class="para">
        <!-- 定義段落 通常指文章一段内容 -->
        <p>好好學習，天天向上</p>
        <p>有時候把，我覺得有些人真的厲害，為什麼那麼厲害呢</p>
        <p>有時候把，又覺得自己超級笨，為什麼自己那麼笨呢</p>
        </div>

        <div class="lists">
            <!-- 無序清單 -->
            <ul type="circle">
                <li>我的賬戶</li>
                <li>我的訂單</li>
                <li>我的優惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ul>
            <!-- 有序清單 -->
            <ol type="a">
                <li>我的賬戶</li>
                <li>我的訂單</li>
                <li>我的優惠券</li>
                <li>我的收藏</li>
                <li>退出</li>
            </ol>
        </div>
    </div>
</body>
</html>

　　分析上面代碼可以下面的層次結構

<div id='wrap'>
    <div class='para'></div>
    <div class='anchor'></div>
    <div class='para'></div>
    <div class='lists'></div>    
</div>

　　我們将文檔放在一個父級的區（div）中，它裡面包含四塊區（div）域，浏覽器檢視效果,你會發現每小塊區域都是獨占一行的，是以div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你可以看成給這個區域起個名字。id是唯一的，一個頁面中不能有兩個重複的id，跟身份證号碼一樣，class可以設定同樣的屬性值，并且可以設定多個，例如class=’para n1‘

十，圖檔标簽<img>

src: 要顯示圖檔的路徑.

alt: 圖檔沒有加載成功時的提示.

title: 滑鼠懸浮時的提示資訊.

width: 圖檔的寬

height:圖檔的高 (寬高兩個屬性隻用一個會自動等比縮放.)

一個網頁除了有文字，還會有圖檔。我們使用 `<img/>` 标簽在網頁中插入圖檔。

文法：

<img src="圖檔位址" alt="圖檔加載失敗時顯示的内容" title = "提示資訊" />

注意：

src設定的圖檔位址可以是本地的位址也可以是一個網絡位址。
圖檔的格式可以是png、jpg和gif。
alt屬性的值會在圖檔加載失敗時顯示在網頁上。
還可以為圖檔設定寬度(width)和高度(height)，不設定就顯示圖檔預設的寬度和高度

<div>
     <span>與行内元素展示的标簽<span>
     <span>與行内元素展示的标簽<span>
     <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px">
     <img src="./finance-right.png" alt="人工智能實戰"  style="width: 200px;height: 200px">
 </div>

浏覽器檢視效果：行内塊元素
5. 與行内元素在一行内顯示
6. 可以設定寬度和高度
7. span标簽可以單獨摘出某塊内容，結合css設定相應的樣式

十一，表格标簽table

　　表格由

<table>

标簽來定義。每個表格均有若幹行（由

<tr>

标簽定義），每行被分割為若幹單元格（由

<td>

标簽定義）。字母 td 指表格資料（table data），即資料單元格的内容。資料單元格可以包含文本、圖檔、清單、段落、表單、水準線、表格等等。

border: 表格邊框.

cellpadding: 内邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好通過css來設定長寬）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列（即合并單元格）

<th>: table header <tbody>(不常用): 為表格進行分區.

<div class="table">
        <table>
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裡使用的是th-->
                    <th></th>
                </tr>
            </thead>
            <!--表格主體-->
            <tbody>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td></td>
                </tr>
            </tfoot>
        </table>
</div>

表格行和列的合并

rowspan 合并行(豎着合并)
colspan 合并列(橫着合并)

　　小練習：

<body>
    <div class="table">
        <table border="1" cellspacing="0">
            <!--表格頭-->
            <thead>
                <!--表格行-->
                <tr>
                    <!--表格列，【注意】這裡使用的是th-->
                    <th></th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                </tr>
            </thead>
            <!--表格主體-->
            <tbody>
                <!--表格行-->
                <tr>
                    <td rowspan="3">上午</td>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td>國文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td>國文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td>國文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <td rowspan ="2">下午</td>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td>國文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
                <tr>
                    <!--表格列，【注意】這裡使用的是td-->
                    <td>國文</td>
                    <td>數學</td>
                    <td>英文</td>
                    <td>生物</td>
                    <td>化學</td>
                </tr>
            </tbody>
            <!--表格底部-->
            <tfoot>
                <tr>
                    <td colspan="6">課程表</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

十二，表單标簽 form

表單是一個包含表單元素的區域

表單元素是允許使用者在表單中輸入内容，比如：文本域(textarea)、輸入框(input)、單選框（）

表單的作用

表單用于顯示、手機資訊，并将資訊送出給伺服器

1，文法

<form>允許出現表單控件</form>

表單标簽<form>

表單用于向伺服器傳輸資料。

表單能夠包含 input 元素，比如文本字段、複選框、單選框、送出按鈕等等。

表單還可以包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用于接收不同類型的使用者輸入，使用者送出表單時向伺服器傳輸資料，進而實作使用者與Web伺服器的互動。表單标簽, 要送出的所有内容都應該在該标簽中.

action: 表單送出到哪. 一般指向伺服器端一個程式,程式接收到表單送出過來的資料（即表單元素值）作相應處理，比如https://www.sogou.com/web

method: 表單的送出方式 post/get 預設取值就是 get（信封）

get: 1.送出的鍵值對.放在位址欄中url後面. 2.安全性相對較差. 3.對送出内容的長度有限制.

post:1.送出的鍵值對不在位址欄. 2.安全性相對較高. 3.對送出内容的長度理論上無限制.

get/post是常見的兩種請求方式.

2.表單元素

<input> 标簽的屬性和對應值

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 送出按鈕            

             button 按鈕(需要配合js使用.) button和submit的差別？

             file 送出檔案：form表單需要加上屬性enctype="multipart/form-data"   

 name:    表單送出項的鍵.注意和id屬性的差別：name屬性是和伺服器通信時使用的名稱；
而id屬性是浏覽器端使用的名稱，該屬性主要是為了友善用戶端程式設計，而在css和javascript中使用的

 value:   表單送出項的值.對于不同的輸入類型，value 屬性的用法也不同：

type

"button"

"reset"

"submit"

定義按鈕上的顯示的文本

type

"text"

"password"

"hidden"

定義輸入字段的初始值

type

"checkbox"

"radio"

"image"

定義與輸入相關聯的值

checked:  radio 和 checkbox 預設被選中

 readonly: 隻讀. text 和 password

 disabled: 對所用input都好使.

HTML文法介紹

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 送出按鈕            

             button 按鈕(需要配合js使用.) button和submit的差別？

             file 送出檔案：form表單需要加上屬性enctype="multipart/form-data"   

 name:    表單送出項的鍵.注意和id屬性的差別：name屬性是和伺服器通信時使用的名稱；而id屬性是浏覽器端使用的名稱，該屬性主要是為了友善客
          戶端程式設計，而在css和javascript中使用的

value:   表單送出項的值.對于不同的輸入類型，value 屬性的用法也不同：

type

"button"

"reset"

"submit"

定義按鈕上的顯示的文本

type

"text"

"password"

"hidden"

定義輸入字段的初始值

type

"checkbox"

"radio"

"image"

定義與輸入相關聯的值

checked:  radio 和 checkbox 預設被選中

 readonly: 隻讀. text 和 password

 disabled: 對所用input都好使.

HTML文法介紹

上傳檔案注意兩點：

1 請求方式必須是post

2 enctype="multipart/form-data"

<select> 下拉選标簽屬性

name:表單送出項的鍵.

          size：選項個數

          multiple：multiple 

                 <option> 下拉選中的每一項 屬性：

                       value:表單送出項的值.   selected: selected下拉選預設被選中

                 <optgroup>為每一項加上分組

<textarea> 文本域

name:    表單送出項的鍵.

cols:    文本域預設有多少列

rows:    文本域預設有多少行

<label>

<label for="www">姓名</label>
<input id="www" type="text">

<fieldset>
    <legend>登入吧</legend>
    <input type="text">
</fieldset>

屬性見下表：

表單控件分類，見下圖：

<form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                使用者名稱：
                <input type="text" name="txtUsename" value="請輸入使用者名稱" readonly>
            </p>
            <p>
                使用者密碼：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                确認密碼：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--單選框-->
            <p>
                使用者性别：
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=''>女
            </p>
            <!--複選框-->
            <p>
                使用者愛好：吃
                <input type="checkbox" name="chkhobby" value="吃" checked> 喝
                <input type="checkbox" name="chkhobby" value="喝"> 玩
                <input type="checkbox" name="chkhobox" value="玩"> 樂
                <input type="checkbox" name="chkhobox" value="樂" checked>
            </p>
            <!-- 按鈕 -->
            <p>
                <input type="submit" name="btnsbt" value="送出">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按鈕">
            </p>
            <!--檔案選擇框-->
            <p>
                請上傳檔案：
                <input type="file" name="txtfile">
            </p>
            <!--textarea-->
            <p>
                自我介紹：
                <textarea name="txt" cols="20" rows="5"></textarea>
            </p>
            <!--選擇框-->
            <!--滾動清單 multiple設定以後實作多選效果，ctrl+滑鼠左鍵進行多選-->
            <p>籍貫：
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>
            <!--下拉清單-->
            <p>意向工作城市：
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>        
        </form>

十三，其他标簽

換行标簽 `<br>`

<br>

标簽用來将内容換行，其在HTML網頁上的效果相當于我們平時使用word編輯文檔時使用回車換行。

分割線 `<hr>`

<hr>

标簽用來在HTML頁面中建立水準分隔線，通常用來分隔内容

特殊符号

浏覽器在顯示的時候會移除源代碼中多餘的空格和空行。所有連續的空格或空行都會被算作一個空格。需要注意的是，HTML代碼中的所有連續的空行（換行）也被顯示為一個空格。

舉個例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>戰争熱誠的部落格</title>
</head>
<body>
    <p>
        好好學習

            我們會掙好多錢的
    </p>
</body>
</html>

　　上面的代碼在浏覽器中最終的顯示效果為：

　　是以HTML代碼對縮進的要求并不嚴格，我們通常使用縮進來讓我們的代碼結構更清晰，僅此而已。

　　在上一個執行個體中，我們示範了HTML中輸入空格、回車都是沒有作用的。要想輸入空格，需要用特殊符号 --

。

常用的特殊字元：

HTML特殊符号對照表：http://tool.chinaz.com/Tools/HtmlChar.aspx

不經一番徹骨寒怎得梅花撲鼻香

HTML文法介紹

一基本标簽（塊級标簽和内聯标簽）

block（塊）元素的特點

inline元素的特點

特殊字元

<br>标簽

1.1 HTML中塊級标簽和内聯标簽的差別

二，head标簽

三，title标簽

四，meta标簽

五，body标簽

六，标題标簽h1~h6

七，段落标簽p

超連結标簽a

八，清單标簽ul，ol

網站頁面上一些清單相關的内容比如說物品清單、人名清單等等都可以使用清單标簽來展示。通常後面跟 `<li>` 标簽一起用，每條li表示清單的内容

九，盒子标簽div

十，圖檔标簽<img>

一個網頁除了有文字，還會有圖檔。我們使用 `<img/>` 标簽在網頁中插入圖檔。

十一，表格标簽table

十二，表單标簽 form

表單的作用

十三，其他标簽

換行标簽 `<br>`

分割線 `<hr>`

特殊符号

繼續閱讀

javaScript之基礎介紹

CSS基本介紹

前端開發初識（附前端學習路徑圖）

javaScript之變量與資料類型

HBuilder的安裝及用法

CSS文法基礎

javaScript之分支判斷與内置對象

開發“todolist“”項目及其自己的感悟

JavaScript之ECMA對象的學習

開發“小米商城官網首頁”（靜态頁面）

開發“抽屜新熱榜”

python闖關之路（五）前端開發

HTML文法介紹

一 基本标簽（塊級标簽和内聯标簽）

block（塊）元素的特點

inline元素的特點

特殊字元

<br>标簽

1.1 HTML中塊級标簽和内聯标簽的差別

二，head标簽

三，title标簽

四，meta标簽

五，body标簽

六，标題标簽h1~h6

七，段落标簽p

超連結标簽a

八，清單标簽ul，ol

網站頁面上一些清單相關的内容比如說物品清單、人名清單等等都可以使用清單标簽來展示。通常後面跟 <li> 标簽一起用，每條li表示清單的内容

九，盒子标簽div

十，圖檔标簽<img>

一個網頁除了有文字，還會有圖檔。我們使用 <img/> 标簽在網頁中插入圖檔。

十一，表格标簽table

十二，表單标簽 form

表單的作用

十三，其他标簽

換行标簽 <br>

分割線 <hr>

特殊符号

繼續閱讀

一基本标簽（塊級标簽和内聯标簽）

　　網站頁面上一些清單相關的内容比如說物品清單、人名清單等等都可以使用清單标簽來展示。通常後面跟 `<li>` 标簽一起用，每條li表示清單的内容

一個網頁除了有文字，還會有圖檔。我們使用 `<img/>` 标簽在網頁中插入圖檔。

換行标簽 `<br>`

分割線 `<hr>`