前端 html css HTML
一個完整的網頁是由html（超文字標記語言），css（層疊樣式表）JavaScript（動態指令碼語言）三部分組成
一、html
概念：超文字標記語言，“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素
結構構造：超文字標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的資訊，“主體”部分提供網頁的具體內容
宣告<!DOCTYPEhtml>
html也有多個不同的版本，只有完全明白頁面中使用的確切HTML版本，瀏覽器才能正確地顯示HTML頁面，這就是用處
什麼是標籤:
1、有尖括號包圍的關鍵詞
2、通常是成對出現的
3、也有單獨呈現的標籤，如：<img src="百度百科.jpg" />等。
4、標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫
5、標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
6、一般成對出現的標籤，其內容在兩個標籤中間。單獨呈現的標籤，則在標籤屬性中賦值。如<h1>標題</h1>和 <input type="text" value="按鈕" />
7、有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉和標籤.例如: <br/> <hr/> <input /> <img />
8、標籤可以巢狀.但是不能交叉巢狀. <a><b></a></b>
標籤的屬性:
1、屬性是用來修飾標誌的
2、通常是以鍵值對形式出現的. 例如 name="alex"
3、屬性只能出現在開始標籤 或 自閉和標籤中.
4、屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
5、如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
html文件樹形結構圖
1、html中head標籤：
<head>標籤中：標題、字元格式、語言、相容性、關鍵字、描述等資訊
<body>標籤中：而網頁需展示的內容需巢狀在。某些時候不按標準書寫程式碼雖然可以正常顯示，但是作為職業素養，還是應該養成正規編寫習慣
定義和用法：
用於描述文件的各種屬性和資訊（文件的標題、編碼方式、在wed中的位置、以及其他文件的關係等），文件頭部所包含的的資訊不會作為主體內容顯示給讀者
下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定義文件的標題，它是 head 部分中唯一必需的元素
提示和註釋：
提示：應該把 <head> 標籤放在文件的開始處，緊跟在 <html> 後面，並處於 <body> 標籤或 <frameset> 標籤之前。
提示：請記住始終為文件規定標題
<meta>標籤（提供有關頁面的元資訊）的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性
1、name屬性
name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的
meta標籤的name屬性語法格式是：
其中name屬性主要有以下幾種引數：A、Keywords(關鍵字)
說明：keywords用來告訴搜尋引擎你網頁的關鍵字是什麼
B、description(網站內容描述)說明：description用來告訴搜尋引擎你的網站主要內容
2、http-equiv屬性
http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值
meta標籤的http-equiv屬性語法
A、Expires(期限)
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸
B、Refresh(重新整理)
說明：自動重新整理並指向新頁面
<title> 標籤用於定義文件的標題
<link> 標籤最常見的用途是連結樣式表（用於引入網頁標題前面的圖示log）
| 1 |
<
link
rel="icon" href="http://www.jd.com/favicon.ico">
|
2、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>
四 列表標籤：
一、定義有序列表: <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>:列表內容
二、定義無序列表：<ul>
屬性：
type：可以設定排序的樣式 也可以給li單獨加這個屬性
dise 實心圓(預設值)
circle 空心圓
square 實心方塊
<li>:列表內容
三、上下層列表標籤:<dl>..</dl>：
上層dt
下層dd
：封裝的內容會被自動縮排的效果
五 表格標籤: <table>:
border：用於設定表格線
rowspan: 單元格豎跨多少行（單元格縱向合併）
colspan: 單元格橫跨多少列（即合併單元格）（合併行）
tr 元素定義表格行
th 元素定義表頭（有加粗居中效果）
td 元素定義表格單元
六 表單標籤（django）<form>:（表單用於向伺服器傳輸資料）
用來建立一個表單，在標籤對之間的表單控制元件都屬於表單的內容，表單可以說是一個容器
1、<form>標籤屬性：
2、<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>
一個完整的網頁是由html（超文字標記語言），css（層疊樣式表）JavaScript（動態指令碼語言）三部分組成
一、html
概念：超文字標記語言，“超文字”就是指頁面內可以包含圖片、連結，甚至音樂、程式等非文字元素
結構構造：超文字標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的資訊，“主體”部分提供網頁的具體內容
宣告<!DOCTYPEhtml>
html也有多個不同的版本，只有完全明白頁面中使用的確切HTML版本，瀏覽器才能正確地顯示HTML頁面，這就是用處
什麼是標籤:
1、有尖括號包圍的關鍵詞
2、通常是成對出現的
3、也有單獨呈現的標籤，如：<img src="百度百科.jpg" />等。
4、標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫
5、標籤對中的第一個標籤是開始標籤，第二個標籤是結束標籤
6、一般成對出現的標籤，其內容在兩個標籤中間。單獨呈現的標籤，則在標籤屬性中賦值。如<h1>標題</h1>和 <input type="text" value="按鈕" />
7、有些標籤功能比較簡單.使用一個標籤即可.這種標籤叫做自閉和標籤.例如: <br/> <hr/> <input /> <img />
8、標籤可以巢狀.但是不能交叉巢狀. <a><b></a></b>
標籤的屬性:
1、屬性是用來修飾標誌的
2、通常是以鍵值對形式出現的. 例如 name="alex"
3、屬性只能出現在開始標籤 或 自閉和標籤中.
4、屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="alex"
5、如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
html文件樹形結構圖
1、html中head標籤：
<head>標籤中：標題、字元格式、語言、相容性、關鍵字、描述等資訊
<body>標籤中：而網頁需展示的內容需巢狀在。某些時候不按標準書寫程式碼雖然可以正常顯示，但是作為職業素養，還是應該養成正規編寫習慣
定義和用法：
用於描述文件的各種屬性和資訊（文件的標題、編碼方式、在wed中的位置、以及其他文件的關係等），文件頭部所包含的的資訊不會作為主體內容顯示給讀者
下面這些標籤可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定義文件的標題，它是 head 部分中唯一必需的元素
提示和註釋：
提示：應該把 <head> 標籤放在文件的開始處，緊跟在 <html> 後面，並處於 <body> 標籤或 <frameset> 標籤之前。
提示：請記住始終為文件規定標題
<meta>標籤（提供有關頁面的元資訊）的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性
1、name屬性
name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜尋引擎機器人查詢資訊和分類資訊用的
meta標籤的name屬性語法格式是：
其中name屬性主要有以下幾種引數：A、Keywords(關鍵字)
說明：keywords用來告訴搜尋引擎你網頁的關鍵字是什麼
B、description(網站內容描述)說明：description用來告訴搜尋引擎你的網站主要內容
2、http-equiv屬性
http-equiv顧名思義，相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的資訊，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值
meta標籤的http-equiv屬性語法
A、Expires(期限)
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到伺服器上重新傳輸
B、Refresh(重新整理)
說明：自動重新整理並指向新頁面
<title> 標籤用於定義文件的標題
<link> 標籤最常見的用途是連結樣式表（用於引入網頁標題前面的圖示log）
| 1 |
<
link
rel="icon" href="http://www.jd.com/favicon.ico">
|
2、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>
四 列表標籤：
一、定義有序列表: <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>:列表內容
二、定義無序列表：<ul>
屬性：
type：可以設定排序的樣式 也可以給li單獨加這個屬性
dise 實心圓(預設值)
circle 空心圓
square 實心方塊
<li>:列表內容
三、上下層列表標籤:<dl>..</dl>：
上層dt
下層dd
：封裝的內容會被自動縮排的效果
五 表格標籤: <table>:
border：用於設定表格線
rowspan: 單元格豎跨多少行（單元格縱向合併）
colspan: 單元格橫跨多少列（即合併單元格）（合併行）
tr 元素定義表格行
th 元素定義表頭（有加粗居中效果）
td 元素定義表格單元
六 表單標籤（django）<form>:（表單用於向伺服器傳輸資料）
用來建立一個表單，在標籤對之間的表單控制元件都屬於表單的內容，表單可以說是一個容器
1、<form>標籤屬性：
2、<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
|