本文爲Django技術學習筆記，相關教材爲清華大學出版社出版的《Django開發寶典》。
這一節介紹Django開發的前端技術，主要爲HTML相關知識點補記。
1.1 初識HTMl
1. HTML的定義
HTML是用來描述網頁的一種語言。
- HTML是指超文本標記語言（Hyper Text Markup Language）。
- HTML不是一種編程語言，而是一種標記語言（Markup Language）。
- 標記語言是一套標記標籤（Markup Tag），HTML使用標記標籤來描述網頁。
2. HTML標籤
HTML標記標籤通常被稱爲HTML標籤（HTML Tag）。
- HTML標籤是由尖括號括起來的關鍵詞，如<html>。
- HTML標籤通常是承兌出現的，如<b>和</b>。
- 標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤；開始標籤和接數標籤也被稱爲開放標籤和閉合標籤。
3. HTML元素
HTML元素是指開始標籤（Start Tag）到接數標籤（End Tag）的所有代碼。
| 開始標籤 | 元素內容 | 結束標籤 |
|---|---|---|
| <p> | This is a paragraph | </p> |
| <a href=“default.html” > | This is a link | </a> |
| <br /> |
1.2 走進HTML
1. HTML編輯器
可以是用專業編輯器來編輯，推薦使用文本編輯器來學習HTMl。
2. HTML標題
HTML標題（Heading）是通過<h1>~<h6>等標籤進行定義的。例如：
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h2>This is a heading</h2>3. HTML段落
HTML段落是通過<p>標籤進行定義的。例如：
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>4. HTML鏈接
HTML使用超級鏈接與網絡上的另一個文檔相連。幾乎在任何一個網頁中都能找到超級鏈接，單擊超級鏈接可以從一張頁面跳轉到另一張頁面。
通過使用<a>標籤可以在HTML中創建超級鏈接，具體有一下兩種使用/標籤的方式。
- 通過使用href屬性創建指向另一個文檔的鏈接。
- 通過使用name屬性創建文檔內的標籤。
使用target屬性可以定義被超級鏈接的文檔要在何處顯示。下面的這行會在新窗口打開文檔：
<a href ="http://www.baidu.com/" target = "_blank">百度一下，你就知道</a>5. HTML圖像
要在頁面上顯示圖像需要使用（src），src是指“source”。源屬性的值是圖像的URL地址。
定義圖像的語法是：
< img src = "url" /> //URL指存儲圖像的位置6. HTML表格
表格由<table>標籤來定義。每個表格均有若干行（由<tr>標籤定義），每行被分割爲若干單元格（由<td>標籤定義）。字母td是指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
<table border = "1">
<tr>
<td>row 1,cell 1</td>
<td>row 1,cell 2</td>
</tr>
<tr>
<td>row 2,cell 1</td>
<td>row 2,cell 2</td>
</tr>
</table>7. HTML列表
HTML支持有序列表、無序列表和自定義列表。
1）有序列表
無序列表是一個項目的列表，此列表項目使用粗體原點（典型的小黑圓圈）進行標記。無序列表始於<ul>標籤，每個列表項始於<li>標籤。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>2）無序列表
有序列表是一個項目的列表，此列表項目使用數字進行標記。有序列表始於<ol>標籤，每個列表始於<li>標籤。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>3）自定義列表
自定義列表不僅是一個項目的列表，也是項目及其註釋的組合。自定義列表以<dl>標籤開始，每個自定義列表項以<dt>標籤開始，每個自定義列表項的定義以<dd>標籤開始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>8. HTML表單和輸入
1）表單
HTML表單用於收集不同類型的用戶輸入信息。表單使用表單標籤（<form>）定義。
<form>
...
input 元素
...
</form>2）輸入
多數情況下被用到的表單標籤是輸入標籤（<input>），輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下。
（1）文本域（Text Fields）。當用戶要在表單中輸入字母、數字等內容時，就會用到文本域。
<form>
First name: <input type="text" name="firstname" />
Last name: <input type="text" name="lastname" />
</form>（2）單選按鈕（Radio Buttons）。當用戶需要從若干給定的選擇中選取其一時，就會用到單選按鈕。主義，只能從中選取其一。
<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>（3）複選框（Checkboxes）。當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到複選框。
<form>
<input type="checkbox" name="bike" /> I have a bike
<input type="checkbox" name="car" /> I hava a car
</form>3）表單的動作屬性（Action）和確認按鈕
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>9. HTML背景
<body>擁有兩個配置背景的標籤，背景可以是顏色或者圖像。
1）背景顏色（Bgcolor）
背景顏色屬性將背景設置爲某種顏色，屬性值可以是十六進制數、RGB值或顏色名。
<body bgcolor = "#00000">
<body bgcolor = "rgb(0,0,0)">
<body bgcolor = "black">2）背景（Background）
背景屬性將背景設置爲圖像，屬性值爲圖像的URL。如果圖像尺寸小於瀏覽器窗口，那麼圖像將在整個瀏覽器窗口進行復制。
<body backgroud = "clouds.gif">
<body backgroud = "http://www.w3school.com.cn/clouds.gif">10. HTML樣式
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下3種方式來插入樣式表。
1）外部樣式表
當樣式需要被應用到很多頁面時，外部樣式表將是理想的選擇。使用外部樣式表，用戶就可以通過更改一個文件來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"
</head>2）內部樣式表
當單個文件需要特別樣式表時，就可以使用內部樣式表。用戶可以在head部分通過<style>標籤定義內部樣式表。
<head>
<style type="text/css">
body {backgroud-color:red}
p {margin-left:20px}
</style>
</head>3）內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何CSS屬性。以下示例顯示出如何改變段落的顏色和左外邊距。
<p style="color:red;margin-left:20px">
This is a paragraph
</p>