一個完整的網頁是由html（超文本標記語言），css（層疊樣式表）JavaScript（動態腳本語言）三部分組成css
1、htmlhtml
概念：超文本標記語言，「超文本」就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素django
結構構造：超文本標記語言的結構包括「頭」部分（英語：Head）、和「主體」部分（英語：Body），其中「頭」部提供關於網頁的信息，「主體」部分提供網頁的具體內容瀏覽器
聲明<!DOCTYPEhtml>安全
html也有多個不一樣的版本，只有徹底明白頁面中使用的確切HTML版本，瀏覽器才能正確地顯示HTML頁面，這就是用處服務器
什麼是標籤:框架
一、有尖括號包圍的關鍵詞post
二、一般是成對出現的字體
三、也有單獨呈現的標籤，如：<img src="百度百科.jpg" />等。網站
四、標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫
五、標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
六、通常成對出現的標籤，其內容在兩個標籤中間。單獨呈現的標籤，則在標籤屬性中賦值。如<h1>標題</h1>和 <input type="text" value="按鈕" />
七、有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉和標籤.例如: <br/> <hr/> <input /> <img />
八、標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>
標籤的屬性:
一、屬性是用來修飾標誌的
二、一般是以鍵值對形式出現的. 例如 name="alex"
三、屬性只能出如今開始標籤 或 自閉和標籤中.
四、屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
五、若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly
html文檔樹形結構圖
一、html中head標籤：
<head>標籤中：標題、字符格式、語言、兼容性、關鍵字、描述等信息
<body>標籤中：而網頁需展現的內容需嵌套在。某些時候不按標準書寫代碼雖然能夠正常顯示，可是做爲職業素養，仍是應該養成正規編寫習慣
定義和用法：
用於描述文檔的各類屬性和信息（文檔的標題、編碼方式、在wed中的位置、以及其餘文檔的關係等），文檔頭部所包含的的信息不會做爲主體內容顯示給讀者
下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定義文檔的標題，它是 head 部分中惟一必需的元素
提示和註釋：
提示：應該把 <head> 標籤放在文檔的開始處，緊跟在 <html> 後面，並處於 <body> 標籤或 <frameset> 標籤以前。
提示：請記住始終爲文檔規定標題
<meta>標籤（提供有關頁面的元信息）的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性
一、name屬性
name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的
meta標籤的name屬性語法格式是：
A、Keywords(關鍵字)
說明：keywords用來告訴搜索引擎你網頁的關鍵字是什麼
說明：description用來告訴搜索引擎你的網站主要內容
二、http-equiv屬性
http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值
meta標籤的http-equiv屬性語法
A、Expires(期限)
說明：能夠用於設定網頁的到期時間。一旦網頁過時，必須到服務器上從新傳輸
B、Refresh(刷新)
說明：自動刷新並指向新頁面
<link> 標籤最多見的用途是連接樣式表（用於引入網頁標題前面的圖標log）
|
1
|
<
link
rel="icon" href="http://www.jd.com/favicon.ico">
|
二、html中body標籤：
body標籤包含文檔的全部內容（好比文本、超連接、圖像、表格和列表等等
一 基本標籤
<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題（塊狀標籤）
<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白（塊狀標籤）
<br>:換行（塊狀標籤）
<hr>:水平線（塊狀標籤）
<b> ：加粗標籤（內聯標籤）
<strong>: 加粗標籤（內聯標籤）
<strike>: 爲文字加上一條中線（內聯標籤）
<em>: 文字變成斜體（內聯標籤）
<sup>：上角標（內聯標籤）
<sub>: 下角表（內聯標籤）
<span>：元素包含的內容，在顯示格式上沒有任何變化，沒有由於插入<span>元素而產生換行或者其餘排版效果。這樣的顯示效果稱爲「行內元素」（內聯標籤）
<div>：元素所包含的內容，在格式上有所變化，每個<div>元素所包含的內容都另起一行，瀏覽器爲他們分配了一個獨立區域，造成一個一個「塊」，所以<div>也被稱做「塊級元素」（塊狀標籤）
常見的塊狀標籤：
address - 地址 block - 塊引用 center - 居中對齊塊(不推薦) dir - 目錄列表(HTML5踢出) div - 經常使用的不能再經常使用了dl - 列表 fieldset - 一個包含着form組的框 form - 表了個單 h1 ~ h6 各類尺寸標題 hr - 水平分隔線 menu - 菜單列表 noframes - 瀏覽器不支持 frames顯示的塊 noscript - 瀏覽器不支持 script顯塊 ol - 有序列表 ul - 無序列表 p - 段落 pre - 格式化文本 table - 表了個格
常見的內聯標籤：
a - 錨點 abbr - 縮寫(語義、利於搜索引擎) b - 粗體(不推薦) big - 大字體(不推薦)
cite - 引用(語義、利於搜索引擎) code - 引用源碼(語義) em - 強調(若是僅爲了斜體請用<i>) font - 字體設定(不推薦)
i - 斜體 img - 圖片 input - 輸入框 label - 表單標籤(事件關聯對應表單項)
q - 短引用 s - 中劃線(不推薦) samp - 用於提取內容 select - 項目選擇
small - 小字體(不推薦) strong - 粗體(不推薦) sub - 下標 sup - 上標
textarea - 多行文本輸入框 u - 下劃線 var - 定義變量
特殊字符地址：
http://tool.chinaz.com/Tools/htmlchar.aspx?qq-pf-to=pcqq.group&jdfwkey=s0gsw
二 圖形標籤: <img>
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
三 超連接標籤(錨標籤)<a>:
href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com"
target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容
name: 定義一個頁面的書籤
用於跳轉 href : #書籤名稱 ----------->目標標籤中有id=「書籤名稱」
用於跳轉的倆種方式之： id （這樣的定位能夠針對任何標籤來定位）
<a href="#456"> 第一</a>
<div id="456">內容</div>（目標標籤能夠是任意標籤）
用於跳轉的倆種方式之：name （使用name屬性只能針對a標籤來定位，而對div等其餘標籤就不能起到定位做用）
<a href="#5F">錨點5</a>
<a name="5F">1111</a>
四 列表標籤：
1、定義有序列表: <ol>
屬性：
type： 能夠設置排序的樣式 （只能放到ol中，由於放到li中不出效果）
start：列表起點 （只能放到ol中，不能放到li中）
1表示以 1,2,3,4 來表示
a 表示以 a,b,c,d 來表示
A 表示以 A,B,C,D 來表示
i 表示以 i,ii ,iii 來表示
I 表示以 I,II,III來表示
<li>:列表內容
2、定義無序列表：<ul>
屬性：
type：能夠設置排序的樣式 也能夠給li單獨加這個屬性
dise 實心圓(默認值)
circle 空心圓
square 實心方塊
<li>:列表內容
3、上下層列表標籤:<dl>..</dl>：
上層dt
下層dd
：封裝的內容會被自動縮進的效果
五 表格標籤: <table>:
border：用於設置表格線
rowspan: 單元格豎跨多少行（單元格縱向合併）
colspan: 單元格橫跨多少列（即合併單元格）（合併行）
tr 元素定義表格行
th 元素定義表頭（有加粗居中效果）
td 元素定義表格單元
六 表單標籤（django）<form>:（表單用於向服務器傳輸數據）
用來建立一個表單，在標籤對之間的表單控件都屬於表單的內容，表單能夠說是一個容器
一、<form>標籤屬性：
二、<form>標籤經常使用屬性詳解：
action屬性： 定義一個 URL。當點擊提交按鈕時，向這個 URL 發送數據。
method屬性： 用於向 action URL 發送數據的 HTTP 方法
method: 表單的提交方式 post/get 默認取值 就是 get（信封）
get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對 不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制
enctype屬性 ： 對錶單內容進行編碼的 MIME 類型
target屬性：目標顯示方式。target屬性用來指定目標窗口的打開方式
_blank是指將返回的信息顯示在新打開的窗口中
_parent是指將返回信息顯示在父級的瀏覽器窗口中
_self則表示將返回信息顯示在當前瀏覽器窗口
_top表示將返回信息顯示在頂級瀏覽器窗口中
表單元素
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!
DOCTYPE
html>
<
html
lang="en"> #定義語言爲英語 zh爲中文
<
head
>
<
meta
charset="UTF-8"> #編碼形式
<
title
>luxiaojun</
title
> #文檔標題
<
link
rel="icon" href="http://www.jd.com/favicon.ico"> #圖標log
</
head
>
<
body
>
<
h3
>登陸</
h3
> #普通標籤
<
form
action="" method="post" enctype="multipart/form-data"> #表單標籤 其中action後跟發送數據的地址 method爲數據提交方式 enctype="multipart/form-data"爲上傳文件時必須有
<
p
>用戶名:<
input
type="text" name="user"></
p
> #文本輸入框
<
p
>密碼:<
input
type="password" name="pwd"></
p
> #密碼輸入框
<
input
type="submit" value="登陸"> #文本提交按鈕
<
input
type="reset" value="從新輸入">#清除文本內容按鈕
<
p
>西瓜<
input
type="checkbox" name="shuiguo" value="1"></
p
> #多選框
<
p
>南瓜<
input
type="checkbox" name="shuiguo" value="2"></
p
> #多選框
<
p
>男<
input
type="radio" name="sex"></
p
> #單選框
<
p
>女<
input
type="radio" name="sex"></
p
> #單選框
選擇你的出生地:
<
select
name="bir" id="123" size="0"> #下拉標籤，size爲下拉標籤顯示幾行(默認一行),這裏還有一個參數multiple="multiple"（加上的話表示能夠多選，按住Ctrl，能夠簡寫爲multiple）
<
option
value="">--請選擇--</
option
>
<
optgroup
label="山西"> #表示定義選項組，把相關的選項組合在一塊兒，爲每一項加上分組
<
option
value="dt">大同</
option
> #下拉選中的每一項 屬性：value:表單提交項的值
<
option
value="ty">太原</
option
> ##下拉選中的每一項 屬性：value:表單提交項的值
</
optgroup
>
</
select
><
br
>
<
p
>請留言:<
textarea
name="qq" id="" cols="30" rows="10"></
textarea
></
p
> #文本域 name:表單提交項的鍵. cols:文本域默認有多少列 rows:文本域默認有多少行
<
p
>請選擇須要上傳的文件: <
input
type="file" name="myfile"></
p
> #提交文件：form表單須要加上屬性enctype="multipart/form-data"
</
form
>
</
body
>
</
html
>
|
<input>標籤經常使用屬性詳解：
type：
text 文本輸入框
password 密碼輸入框
radio 單選框
checkbox 多選框
submit 提交按鈕
reset 清除文本內容按鈕
button 按鈕(須要配合js使用.) button和submit的區別？
file 提交文件，form表單須要加上屬性enctype="multipart/form-data"
button與submit的區別：submit會把表單內容提交給後臺，而button按鈕與後臺不交互，如點一下按鈕會彈出一個框，或重新獲取驗證碼
<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>
<fieldset>
<legend>登陸吧</legend>
<input type="text">
< /fieldset>