一、HTML相關概念
HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫，他是一種制作萬維網頁面標准語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。瀏覽器負責將標簽翻譯成用戶“看得懂”的格式，呈現給用戶！(例：django模版引擎)
什么是標簽:
- 是由一對尖括號包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.
- 標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
- 標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
- 有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/> <hr/> <img /><input/>
- 標簽可以嵌套.但是不能交叉嵌套.
標簽的屬性:
- 通常是以鍵值對形式出現的. 例如 name="alex"
- 屬性只能出現在開始標簽 或 自閉和標簽中.
- 屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
- 如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
下面來看一下html文檔樹：
二、html標簽
1、HTML分類：
塊級標簽和內聯標簽：
塊級標簽：<p><h1><table><ol><ul><form><div>
內聯標簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點：
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素
inline元素的特點：
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下：
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
2、字符實體
比如我們想在網頁上面顯示一個“<”小於符號，但是“<”在HTML中是文檔標記的開始語言，如果我們直接使用“<”會出差錯，所以我們就會一些實體名稱來代替！
顯示結果----------描述----------實體名稱----------實體編號 ---------------------空格---------- ---------- <--------------------小於號---------- <---------- < >--------------------大於號---------- >---------- > &--------------------和號---------- &---------- & "--------------------引號---------- " ---------- " '--------------------撇號---------- ' (IE不支持)---------- ' ￠--------------------分---------- ¢---------- ¢ £--------------------鎊---------- £---------- £ ¥--------------------日圓---------- ¥---------- ¥ €--------------------歐元---------- €---------- € §--------------------小節---------- §---------- § ©--------------------版權----------©---------- © ®--------------------注冊商標---------- ®---------- ® ™--------------------商標---------- ™---------- ™ ×--------------------乘號---------- ×---------- × ÷--------------------除號---------- ÷---------- ÷
3、<head>標簽
<head> 標簽用於定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題、在 Web 中的位置以及和其他文檔的關系等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。<title> 定義文檔的標題，它是 head 部分中唯一必需的元素。
下面這些標簽可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<head>
<meta charset="UTF-8">
<meta name="keywords" content="搜索引擎根據這里面的東西">
<meta name="description" content="網頁的描述信息">
<meta http-equiv="Refresh" content="2;"> # 每2秒中刷新以下網頁
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com"> # 2秒后重定向到某網站
<title>web</title> # 網頁的窗口標題
<link rel="shortcut icon" href="http://www.jd.com/favicon.ico"> # 網頁圖標
<link rel="stylesheet" href="mycss.css"> # 外部css文件
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script> # 引用js文件
</head>
4、<a>超鏈接標簽
<a href="" target="打開方式" name="頁面錨點名稱" >鏈接文字或者圖片</a>
href:鏈接的地址，鏈接的地址可以是一個網頁，也可以是一個視頻、圖片、音樂等等
target:(1) _blank在一個新的窗口中打開鏈接
(2) _seif(默認值)在當前窗口中打開鏈接
(3) _parent在父窗口中打開頁面（框架中使用較多）
(4) _top在頂層窗口中打開文件（框架中使用較多）
示例1：
<a href="http://baidu.com" target="_blank">百度</a>
示例2：錨點
<body>
<!--尋找頁面中id=i1的標簽，將其標簽顯示在頁面頂部-->
<a href="#i1">第一章</a>
<a href="#i2">第二章</a>
<!--id每一個標簽的id屬性值不允許重復;id屬性可以不寫-->
<div id="i1" style="height: 800px";>第一章內容</div>
<div id="i2" style="height: 500px";>第二章內容</div>
</body>
5、<img>圖像標簽
<img src="路徑/文件名.圖片格式" width="屬性值" height="屬性值" border="屬性值" alt="屬性值">
src屬性：指定我們要加載的圖片的路徑和圖片的名稱以及圖片格式
width屬性：指定圖片的寬度，單位px、em、cm、mm
height屬性：指定圖片的高度，單位px、em、cm、mm
border屬性：指定圖標的邊框寬度，單位px、em、cm、mm
alt屬性：(1)作用一：當網頁上的圖片被加載完成后，鼠標移動到上面去，會顯示這個圖片指定的屬性文字
(2)作用二：如果圖像沒有下載或者加載失敗，會用文字來代替圖像顯示
(3)作用三: 搜索引擎可以通過這個屬性的文字來抓取圖片
6、格式標簽：<hn><div><span><p><br/><hr/><li><ul><ol><dl><dt><dd><center><pre>
<hn>: 標題標記，共有6個級別，n的范圍1~6，不同級別對應顯示大小不同的標題，h1最大，h6最小
<div>: 塊級標簽，分區顯示標記，也稱之為層標記，常用來編排一大段的HTML段落，也可以用於格式化表，和<p>很相似
<span>: 內聯標簽，字符占多少標簽就占多少
<p>: 換段落標記，由於多個空格和回車在HTML中會被等效為一個空格，所以HTML中要換段落就要用<p>,<p>段落中也可以包含<p>段落！
<br/>: 強制換行標記，讓后面的文字、圖片、表格等等，顯示在下一行
<hr/>: 水平分割線標記，段落之間的分割線
<li>: 列表項目標記，每一個列表使用一個<li>標記
<ul>: 無序列表標記，<ul>聲明這個列表沒有序號
<ol>: 有序列表標記，可以顯示特定的一些順序
(1)格式:
<ol type="符號類型">
<li type="符號類型"></li>
<li type="符號類型"></li>
</ol>
(2)有序列表的type屬性值:
阿拉伯數字1.2.3等等，默認type屬性值
大小字母A、B、C等等
小寫字母a、b、c等等
大寫羅馬數字Ⅰ、Ⅱ、Ⅲ、Ⅳ等等
小寫羅馬數字ⅰ、ⅱ、ⅲ、ⅳ等等
<dl><dt><dd>: 定義型列表，對列表條目進行簡短的說明
(1)格式：
<dl>
<dt>軟件說明：</dt>
<dd>簡單介紹軟件的功能及基本應用</dd>
<dt>軟件界面</dt>
<dd>用於選擇軟件的外觀</dd>
</dl>
<center>: 居中對齊標記，讓段落或者是文字相對於父標記居中顯示
<pre>: 預格式化標記，保留預先編排好的格式
7、表單設計：<form><input><textarea><select>
<form>
基本格式：
<form action="服務器端地址（接受表單內容的地址）" name="表單名稱" method="post|get">...</form>
常用屬性：
(1)action: 表單數據的處理程序的URL地址，如果為空則使用當前文檔的URL地址，如果表單中不需要使用action屬性也要指定其屬性為”no“
(2)method: 傳送數據的方式，分為post和get兩種方式
get: get方式提交時，會將表單的內容附加在URL地址的后面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性
post: post方式提交時，將表單中的數據一並包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制
(3)name: 表單名稱
(4)enctype: 設置表單的資料的編碼方式，用於input標簽type='file'時使用
<input>
(1)文本密碼文件郵箱:
<input type="" name="" value="" size="" maxlength="" placeholder="" />
type: text當type="text"時，<input>表示一個文本輸入域
password當type="password"時，<input>表示一個密碼輸入域
file當type="file"時，上傳文件form enctype="multipart/form"
email當type="email"，<input>表示一個郵箱輸入域
name: 定義input名稱
value: 默認輸入的值
size: 定義輸入框框的長度
maxlength：輸入框最大允許輸入的字符長度
placeholder：輸入框的提示信息
(2)單選框和復選框，互斥時需要設置name等於同一個名字
當<input type="radio">時，為單選按鈕
當<input type="checkbox">時，為復選框
單選框和復選框都可以使用”cheked“屬性來設置默認選中項
(3)提交、重置、普通按鈕
當<input type="submit">時，為提交按鈕
當<input type="button">時，為普通按鈕
當<input type="reset">時，為重置按鈕
(4)隱藏域
當<input type="hidden">時，為隱藏表單域
<textarea>
基本格式：
<textarea name="name" rows="value" cols="value" value="value"> ... ... <textarea>
rows和cols:分別用來指定，顯示的行數和列數，單位是字符個數
name: select的名稱
value: 是默認值
<select>
基本格式：
<select name="" size="value" multiple>
<optgroup label="南方"/>
<option value="value" selected>選項1</option>
<optgroup label="北方"/>
<option value="value">選項2</option>
<option value="value">選項3</option>
</select>
select屬性：
multiple：multiple屬性不用賦值，其作用是，表示用可以多選的下來列表，如果沒有這個屬性就只能單選
size：設置列表的高度
name：定義這個列表的名稱
optgroup屬性:
label: 分組的名字
option屬性：
value: 給選項賦值，指定傳送到服務器上面的值
selected: 指定默認的選項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>input標簽系列</title> </head> <body> <!--要提交的內容放置在form標簽中--> <form> <div style="border: 1px solid red;"> <p>用戶名：<input type="text" /></p> <p>密碼: <input type="password"/></p> <p>郵箱: <input type="email"/></p> <p>文件：<input type="file"/></p> <p>性別(單選框) <!--默認單選框和復選框一樣可以多選,定義name屬性值一樣就不會多選--> <br/>男<input type="radio" name="ee"/> <br/>女<input type="radio" name="ee"/> </p> <p>愛好(復選框): <br/>國產<input type="checkbox"/> <br/>日本<input type="checkbox"/> <br/>歐美<input type="checkbox"/> <br/>朝鮮<input type="checkbox"/> <br/>韓國<input type="checkbox"/> <br/>動物<input type="checkbox"/> </p> <input type="submit" value="submit提交表單"/> <input type="button" value="button普通按鈕"/> <input type="reset" value="reset重置表單"/> <hr/> <!--select標簽--> <p>城市(下拉框一): <select> <option>福建</option> <option>廣東</option> <option>北京</option> <option>上海</option> </select> </p> <p>城市(下拉框二): <select multiple size="2"> <option>福建</option> <option>廣東</option> <option>北京</option> <option>上海</option> </select> </p> <p>城市(下拉框三): <select> <optgroup label="南方"/> <option>福建</option> <option>廣東</option> <optgroup label="北方"/> <option>北京</option> <option>上海</option> </select> </p> <hr/> <!--textarea標簽--> <p>備注(textarea)：<textarea></textarea></p> </div> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form提交數據</title> </head> <body> <form action="http://192.168.1.21:8000/index/" method="post" enctype="multipart/form-data"> <input type="text" name="username"/> <input type="password" name="passwd"/> <hr/> <p>radio單選框上傳數據定義name,value： 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="2"/> </p> <p>checkbox復選框上傳數據定義name,value： 籃球<input type="checkbox" name="favor" value="1"/> 足球<input type="checkbox" name="favor" value="2"/> 手球<input type="checkbox" name="favor" value="3"/> </p> <hr/> <p>文件file定義name,form表單需要加上enctype="multipart/form-data": <input type="file" name="wenjian"/> </p> <hr/> <p>select標簽上傳定義name,value: <select name="city"> <option value="1">上海</option> <option value="2">北京</option> <option value="3">深圳</option> </select> </p> </form> </body> </html>
8、表格設計：<table>
<table>
基本格式：
<body>
<table 屬性1="屬性值1" 屬性2="屬性值2" ... ... >
<caption 屬性值1="屬性值1">
<tr>
<th colspan="2">標題一</th>
<th>標題二</th>
<th>標題三</th>
<!--<th>標題四</th>-->
</tr>
<tr>
<td>內容一</td>
<td rowspan="2">內容二</td>
<td>內容三</td>
<td>內容四</td>
</tr>
<tr>
<td>內容一</td>
<!--<td>內容二</td>-->
<td>內容三</td>
<td>內容四</td>
</tr>
</caption>
</table>
</body>
9、文本標簽：<font><b><i><sub><sup><tt><cite><em><strong><small><big><u>基本不用,會使用css來操作
<font>: 字體設置標記，設置字體的格式，三個常用屬性
(1)size（字體大小）:<font size="14px">
(2)color（顏色）:<font color="red">
(3)face（字體）:<font face="微軟雅黑">
<b>: 粗字體標記
<i>: 斜字體標記
<sub>: 文字下標字體標記
<sup>: 文字上標字體標記
<tt>: 打印機字體標記
<cite>: 引用方式的字體，通常是斜體
<em>: 表示強調，通常顯示為斜體字
<strong>: 表示強調，通常顯示為粗體字
<small>: 小型字體標記
<big>: 大型字體標記
<u>: 下划線字體標記