08-29
1. HTML簡(jiǎn)介
概述: Hyper Text MarkUp Language, 超文本標(biāo)記語言.
超文本:
比普通文本的功能更加強(qiáng)大, 里邊可以放: 圖片, 音頻, 視頻等.
標(biāo)記語言:
由標(biāo)簽組成, 可以被瀏覽器識(shí)別.
作用:
用來設(shè)計(jì)(靜態(tài))頁面的.
靜態(tài)頁面: 指的是頁面中的內(nèi)容是固定不變的, 不管什么時(shí)候看到的內(nèi)容都是一樣的.
//例如: html, js
動(dòng)態(tài)頁面: 指的是頁面中的內(nèi)容是 由程序自動(dòng)生成(讀取數(shù)據(jù)庫, 然后展示) , 不同時(shí)間點(diǎn)看到的數(shù)據(jù)不一樣.
//例如: 12306賣票
//JSP, Servlet這些技術(shù)是用來開發(fā)動(dòng)態(tài)頁面的.
特點(diǎn):
1) HTML不區(qū)分大小寫, 但是為了閱讀方便, 建議小寫.
2) HTMl是由標(biāo)簽組成, 可以被瀏覽器識(shí)別.
//例如: <font color="red" size='6'>我是字體標(biāo)簽</font>
3) 上述的標(biāo)簽中, 前邊的標(biāo)簽叫: 開始標(biāo)簽(也叫開放標(biāo)簽), 后邊的標(biāo)簽叫結(jié)束標(biāo)簽(也叫閉合標(biāo)簽)
4) 沒有閉合標(biāo)簽的標(biāo)簽叫: 自閉合標(biāo)簽.
//例如: <br />, <hr />
5) 標(biāo)簽可以有屬性, 屬性值用引號(hào)引起來. //單雙引均可.
6) html文件的后綴名可以是.htm, .html, 前者是老的命名規(guī)范, 后者是新的命名規(guī)范.
7) HTML的基礎(chǔ)格式是: 有<html>標(biāo)簽包裹, 由頭標(biāo)簽<head>和體標(biāo)簽<body>組成.
<html>
<head>
<title>這里寫標(biāo)題</title>
</head>
<body>
//俗稱的頁面的大白部分
這里寫的是給用戶展示信息的地方
</body>
</html>
8) HTML中注釋的寫法:
<!--注釋的內(nèi)容-->
9) 如果涉及到標(biāo)簽的嵌套了, 建議包裹嵌套, 不建議交叉嵌套.
2. HTML標(biāo)簽之字體標(biāo)簽: <font>
屬性:
size: 設(shè)置字體大小的, size的值的范圍是:1-7, 字體最小的是1.
//實(shí)際開發(fā)中, 我們都是通過樣式去設(shè)置字體大小的, 上述的設(shè)置方式一般不用.
color: 設(shè)置字體顏色.
//可以通過 英文字母 進(jìn)行設(shè)置.
//也可以通過 RGB 三原色進(jìn)行設(shè)置. Red:紅色, Green:綠色, Blue:藍(lán)色
face: 設(shè)置字體格式的.
3. HTML標(biāo)簽之排版標(biāo)簽:
<h數(shù)字>: 標(biāo)題標(biāo)簽, 數(shù)字的范圍是:1-6
<p>: 段落標(biāo)簽
<b>: 加粗
<i>: 斜體
<u>: 下劃線
<br /> 換行符
<hr /> 分割線(自帶換行功能)
4. HTML標(biāo)簽之列表標(biāo)簽: <ul>,<ol>
無序列表: <ul>
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
type屬性:
disc: 實(shí)心圓點(diǎn).
circle: 空心圓點(diǎn).
square: 實(shí)心正方形.
有序列表: <ol>
<ol>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ol>
屬性:
type:
數(shù)字,
大小寫字母,
大小寫羅馬數(shù)字.
strat: 設(shè)置從哪個(gè)數(shù)字開始, 只針對(duì)數(shù)字類型有效.
5. HTML標(biāo)簽之圖片標(biāo)簽: <img>
屬性:
src: 設(shè)置圖片的路徑.
注意: 圖片路徑的問題.
如果圖片在該html文件的上級(jí): ../表示上一級(jí).
如果圖片和該html文件在同一級(jí): 直接文件名即可.
如果圖片是該html文件的子集: 也是直接寫路徑即可.
border: 設(shè)置圖片的邊框.
height: 設(shè)置圖片的高度.
width: 設(shè)置圖片的寬度.
alt: 圖片不存在的時(shí)候顯示的內(nèi)容.
6. HTML標(biāo)簽之超鏈接標(biāo)簽: <a>
屬性:
href: 超鏈接的路徑.
相對(duì)路徑: 跳轉(zhuǎn)項(xiàng)目?jī)?nèi)部的頁面.
絕對(duì)路徑: 跳轉(zhuǎn)到外部頁面. 需要寫: http://
target: 頁面的打開方式
_self: 在自身頁面中打開.
_blank: 新建頁面打開.
_parent:在指定的界面中打開.
注意: parent是標(biāo)簽名字, 寫哪個(gè)名字就在哪個(gè)標(biāo)簽中打開.
7. HTML標(biāo)簽之表格標(biāo)簽: <table>
屬性:
border:
height:
width:
align: 設(shè)置表格居中(center),左對(duì)齊(left), 右對(duì)齊(right).
bgcolor: 設(shè)置表格的背景色
<tr>: 表示行
<td>: 表示列
colspan: 跨列.
rowspan: 跨行.
<th>: 表示列, 在<td>的基礎(chǔ)上,多了居中和加粗的功能.
案例:
單表格標(biāo)簽的使用.
表格的嵌套使用.
8. HTML標(biāo)簽之框架標(biāo)簽: <frameset>
<frameset>
屬性:
cols: 縱向切割.
rows: 橫向切割.
<frame>: 切割后的每一個(gè)模塊.
頁面布局:
空格
> 大于號(hào)
< 小于號(hào)
08-30
1. HTML標(biāo)簽之表單標(biāo)簽: <form>
概述: 就是將現(xiàn)實(shí)生活中的表單變?yōu)?頁面形式"的表單.
A: 表單標(biāo)簽是<form>標(biāo)簽, 寫在<form>標(biāo)簽中的標(biāo)簽是: 表單項(xiàng).
B: 表單項(xiàng)必須放在<form>標(biāo)簽中才能提交.
表單項(xiàng)分類:
1.輸入項(xiàng): //輸入項(xiàng)都是<input>標(biāo)簽, 根據(jù)輸入項(xiàng)的類型不同, 輸入項(xiàng)也不同.
//格式: <input type="輸入項(xiàng)的類型"/>
text: 文本框
password: 密碼框
radio: 單選框 //根據(jù)name屬性區(qū)分是否是同一組數(shù)據(jù).
checkbox: 復(fù)選框 //根據(jù)name屬性區(qū)分是否是同一組數(shù)據(jù).
file: 文件框(就是讓你選擇文件的路徑的)
submit: 提交按鈕
reset: 重置按鈕
image: 圖片按鈕
button: 普通按鈕, 沒有任何自帶的功能, 功能需要用戶自定義.
hidden: 隱藏域, 例如: 某些信息是指向給后臺(tái)(程序員)看, 不想提示給用戶, 就可以用該輸入項(xiàng).
2.下拉列表: <select>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</select>
3.文本輸入域: <textarea>
屬性: rows:設(shè)置行數(shù) cols:設(shè)置列數(shù)
2. 表單項(xiàng)的屬性:
name: 表單項(xiàng)的名稱(用于接收數(shù)據(jù))
value: 表單項(xiàng)的值.
readonly:只讀
默認(rèn)被選中:
單選框和復(fù)選框: checked
下拉列表: selected
3. 表單標(biāo)簽的屬性:
action: 要提交數(shù)據(jù)到哪個(gè)頁面, 默認(rèn)是提交到當(dāng)前頁面.
路徑的劃分:
絕對(duì)路徑: 網(wǎng)站外部的頁面, 必須寫http://
相對(duì)路徑: 網(wǎng)站內(nèi)部的頁面.
method: 提交方式
get: 提交方式不安全, 數(shù)據(jù)會(huì)顯示在地址欄中.
提交的數(shù)據(jù)有大小限制.
post: 提交方式相對(duì)安全, 數(shù)據(jù)封裝在"請(qǐng)求體"中.
提交的數(shù)據(jù)沒有大小限制.
擴(kuò)展:
標(biāo)準(zhǔn)Http協(xié)議支持六種請(qǐng)求方法，即：
1、GET
2、POST
3、PUT
4、Delete
5、HEAD
6、Options
但其實(shí)我們大部分情況下只用到了GET和POST。如果想設(shè)計(jì)一個(gè)符合RESTful規(guī)范的web應(yīng)用程序，則這六種方法都會(huì)用到。不過即使暫時(shí)不想涉及REST，了解這六種方法的本質(zhì)仍然是很有作用的。大家將會(huì)發(fā)現(xiàn)，原來web也是很簡(jiǎn)潔明了的。下面依次說明這六種方法。
1，GET：GET可以說是最常見的了，它本質(zhì)就是發(fā)送一個(gè)請(qǐng)求來取得服務(wù)器上的某一資源。資源通過一組HTTP頭和呈現(xiàn)據(jù)（如HTML文本，或者圖片或者視頻等）返回給客戶端。GET請(qǐng)求中，永遠(yuǎn)不會(huì)包含呈現(xiàn)數(shù)據(jù)。
2，HEAD：HEAD和GET本質(zhì)是一樣的，區(qū)別在于HEAD不含有呈現(xiàn)數(shù)據(jù)，而僅僅是HTTP頭信息。有的人可能覺得這個(gè)方法沒什么用，其實(shí)不是這樣的。想象一個(gè)業(yè)務(wù)情景：欲判斷某個(gè)資源是否存在，我們通常使用GET，但這里用HEAD則意義更加明確。
3，PUT：這個(gè)方法比較少見。HTML表單也不支持這個(gè)。本質(zhì)上來講， PUT和POST極為相似，都是向服務(wù)器發(fā)送數(shù)據(jù)，但它們之間有一個(gè)重要區(qū)別，PUT通常指定了資源的存放位置，而POST則沒有，POST的數(shù)據(jù)存放位置由服務(wù)器自己決定。
舉個(gè)例子：如一個(gè)用于提交博文的URL，/addBlog。如果用PUT，則提交的URL會(huì)是像這樣的”/addBlog/abc123”，其中abc123就是這個(gè)博文的地址。而如果用POST，則這個(gè)地址會(huì)在提交后由服務(wù)器告知客戶端。目前大部分博客都是這樣的。顯然，PUT和POST用途是不一樣的。具體用哪個(gè)還取決于當(dāng)前的業(yè)務(wù)場(chǎng)景。
4，DELETE：刪除某一個(gè)資源。基本上這個(gè)也很少見，不過還是有一些地方比如amazon的S3云服務(wù)里面就用的這個(gè)方法來刪除資源。
5，POST：向服務(wù)器提交數(shù)據(jù)。這個(gè)方法用途廣泛，幾乎目前所有的提交操作都是靠這個(gè)完成。
6，OPTIONS：這個(gè)方法很有趣，但極少使用。它用于獲取當(dāng)前URL所支持的方法。若請(qǐng)求成功，則它會(huì)在HTTP頭中包含一個(gè)名為“Allow”的頭，值是所支持的方法，如“GET, POST”。
以上的六種方法，我們可以跟數(shù)據(jù)庫的CRUD增刪改查操作對(duì)應(yīng)起來： CREATE ：PUT READ：GET UPDATE：POST DELETE：DELETE 這樣一來就實(shí)現(xiàn)了HTTP和數(shù)據(jù)庫操作（其實(shí)不光是數(shù)據(jù)庫，任何數(shù)據(jù)如文件圖表都是這樣）的完美統(tǒng)一，這也是REST的精髓之一
4. CSS的簡(jiǎn)介
概述: Cascading Style Sheets, 層疊樣式表.
作用:
用來美化頁面的.
//html相當(dāng)于人的骨骼, css是給人化妝, js是讓人(局部)動(dòng)起來.
分類:
行內(nèi)樣式: //直接寫在元素(html的標(biāo)簽)中的樣式.
內(nèi)部樣式: //寫在<head>標(biāo)簽的,<style>標(biāo)簽中.
外部樣式: //寫在后綴名為.css的文件中.
5. CSS的引入方式之: 行內(nèi)樣式.
格式:
<div style="屬性名:屬性值; 屬性名:屬性值"></div>
作用: 只針對(duì)于當(dāng)前元素有效.
6. CSS的引入方式之: 內(nèi)部樣式.
格式: //寫在<head>標(biāo)簽的,<style>標(biāo)簽中.
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
作用: 針對(duì)于當(dāng)前頁面內(nèi)的部分元素有效.
7. CSS的引入方式之: 外部樣式.
格式: //后綴名為.css的文件中
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
作用: 可以用來統(tǒng)一整個(gè)網(wǎng)站的風(fēng)格.
8. CSS中的選擇器:
元素選擇器:
格式:
元素名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 針對(duì)于該類元素有效.
id選擇器:
格式:
#選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 給指定id(id名和選擇器名一樣的元素)設(shè)置樣式的.
//記憶: 每個(gè)標(biāo)簽都有id屬性, id屬性盡量保證唯一.
類選擇器:
格式:
.選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 用來設(shè)置某類元素(class屬性的值為 選擇器名的元素)的樣式的.
后代選擇器: //理解
(元素,id,類)選擇器 元素名{
//樣式
}
作用: 設(shè)置指定的元素內(nèi)的 指定的"子標(biāo)簽"的樣式的.
偽類選擇器: //理解
a:link{} //未選中連接
a:active{} //選定的鏈接
a:visited{} //已訪問的鏈接
a:hover{} //鼠標(biāo)移動(dòng)到鏈接上
作用: 主要用來操作超鏈接的.
9. CSS的樣式
背景:
background-color: 設(shè)置背景色
字體:
font-size: 設(shè)置字體大小
文本:
text-decoration:將其值設(shè)置為:none,可以取消超鏈接字體的下劃線.
color: 設(shè)置字體的顏色
邊框:
border: 1px solid blue; //1像素, 藍(lán)色實(shí)線
//solid: 單實(shí)線, double:雙實(shí)線 dotted:(點(diǎn))虛線 dashed:(-)虛線
width: 設(shè)置標(biāo)簽的寬度
height: 設(shè)置標(biāo)簽的高度
10. CSS的浮動(dòng)
概述: 通常情況下頁面的布局: 從上往下逐行分布. 有些時(shí)候我們需要頁面中的布局方式是從左往右, 或者從右往左之類的自定義頁面布局,
就需要用到: 窗體浮動(dòng).
float: //設(shè)置浮動(dòng).
屬性值: left, right
clear: //清除浮動(dòng).
屬性值: both
11. CSS的盒子模型
概述: 也是用于布局的. 正常的一個(gè)頁面可能有多個(gè)div, 每個(gè)div的里邊可能有其他元素
(元素和div之間的間距叫內(nèi)邊距), div與div之間有可能也是有間隙的(外邊距).
外邊距: margin
內(nèi)邊距: padding
margin: 值1 值2 值3 值4; //離上,右,下,左的間距分別是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右); //離上,右,下,左的間距分別是: 值1 值2 值1 值2;
margin: 值1; //離上,右,下,左的間距分別是: 值1 值1 值1 值1;
如果說不足以滿足四個(gè)邊距的值, 參考: 上左.