1. HTML的簡介
概述: Hyper Text Markup Language, 超文本标記語言.
超文本: 比普通文本的功能更加強大, 裡邊可以放一些圖檔, 音頻, 視訊等.
标記語言: 由标簽(由尖括号括起來的關鍵字)組成, 可以被浏覽器識别.
//記憶: HTML語言不是程式設計語言, 而是一種标記語言.
作用:
用來設計(靜态)頁面的, 可以被浏覽器識别.
特點:
1. html語言是不區分大小寫的, 為了閱讀友善, 建議全部小寫.
2. html檔案的字尾名可以是.html,也可以是.htm, .htm是老的命名規範, .hmtl是新的命名規範.
3. html是由标簽組成(尖括号括起來的關鍵字), 例如:
<font>這個是字型标簽</font>
4. 上述類型的标簽, 第一個标簽叫: 開始标簽(開放标簽), 第二個标簽叫: 結束标簽(閉合标簽).
5. 如果一個标簽沒有閉合标簽, 這類标簽叫: 自閉合标簽. 例如:
<br />, <hr />, <img />
6. 标簽可以有屬性, 屬性值要用引号括起來. 單雙引号均可.
屬性名="屬性值", 屬性名='屬性值'
7. HTML語言的基本結構是: 由<html>标簽包括, 裡邊有: <head>(頭标簽)和<body>(體标簽)标簽.
8. HTML語言中注釋的寫法:
<!--注釋的文字-->
9. 寫HTML标簽的時候, 最好包裹嵌套, 不建議交叉嵌套.
2. HTML的編寫方式(開發工具)
作業系統自帶的記事本工具,
進階記事本開發工具(Editplus,Notepad++),
Dreamweaver,
HBuilder.
3. HTML的結構
<html>
<head>
<meta charset="utf-8"></meta>
<title>頁面的标題</title>
</head>
<body>
<!--這裡寫的是給使用者展示資訊的地方-->
</body>
</html>
4. HTML标簽之字型标簽: <font>
<font>
屬性:
size: 設定字型大小的, size的值的範圍是:1-7, 字型最小的是1.
//實際開發中, 我們都是通過樣式去設定字型大小的, 上述的設定方式一般不用.
color: 設定字型顔色.
//可以通過 英文字母 進行設定.
//也可以通過 RGB 三原色進行設定. Red:紅色, Green:綠色, Blue:藍色
face: 設定字型格式的.
示範：
<html>
<head>
<meta charset="UTF-8">
<title>字型标簽</title>
</head>
<body>
<font color="blue" size="7" face="楷體">故人西辭富士康</font> <br />
<font color="red" size="7" face="楷體">為學技術到藍翔</font> <br />
<font color="yellow" size="7" face="楷體">藍翔畢業包配置設定</font> <br />
<font color="green" size="7" face="楷體">尼瑪還是富士康</font> <br />
</body>
</html>
5. HTML标簽之排版标簽:
<h數字>: 标題标簽, 數字的範圍是:1-6
<p>: 段落标簽
<b>: 加粗
<i>: 斜體
<u>: 下劃線
<br /> 換行符
<hr /> 分割線(自帶換行功能)
6. HTML标簽之清單标簽: <ul>,<ol>
<ul>,<ol>
無序清單: <ul>
<ul>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ul>
type屬性:
disc: 實心圓點
circle: 空心圓點
square: 實心正方形
有序清單: <ol>
<ol>
<li>北京</li>
<li>上海</li>
<li>廣州</li>
</ol>
屬性:
type:
數字
大小寫字母
大小寫羅馬數字
strat: 設定從哪個數字開始, 隻針對數字類型有效.
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>秦皇島</li>
<li>安陽</li>
<li>北京</li>
<li>石家莊</li>
</ul>
<ul type="circle">
<li>秦皇島</li>
<li>安陽</li>
<li>北京</li>
<li>石家莊</li>
</ul>
<ul type="square">
<li>秦皇島</li>
<li>安陽</li>
<li>北京</li>
<li>石家莊</li>
</ul>
</body>
</html>
7. HTML标簽之圖檔标簽: <img>
<img>
屬性:
src: 設定圖檔的路徑.
注意: 圖檔路徑的問題.
如果圖檔在該html檔案的上級: ../表示上一級.
如果圖檔和該html檔案在同一級: 直接檔案名即可.
如果圖檔是該html檔案的子集: 也是直接寫路徑即可.
border: 設定圖檔的邊框.
height: 設定圖檔的高度.
width: 設定圖檔的寬度.
alt: 圖檔不存在的時候顯示的内容.
8. HTML标簽之超連結标簽: <a>
<a>
屬性:
href: 超連結的路徑.
相對路徑: 跳轉項目内部的頁面.
絕對路徑: 跳轉到外部頁面. 需要寫: http://
target: 頁面的打開方式
_self: 在自身頁面中打開.
_blank: 建立頁面打開.
_parent:在指定的界面中打開.
注意: parent是标簽名字, 寫哪個名字就在哪個标簽中打開.
9. HTML标簽之表格标簽: <table>
<table>
屬性:
border:
height:
width:
align: 設定表格居中(center),左對齊(left), 右對齊(right).
bgcolor: 設定表格的背景色
<tr>: 表示行
<td>: 表示列
colspan: 跨列.
rowspan: 跨行.
<th>: 表示列, 在<td>的基礎上,多了居中和加粗的功能.
10. HTML标簽之塊标簽:
<div> 預設具有換行功能.
<span> 預設沒有換行功能.
11. HTML标簽之架構标簽: <frameset>
<frameset>
<frameset>
屬性:
cols: 縱向切割.
rows: 橫向切割.
<frame>: 切割後的每一個子產品.
頁面布局:
>
<
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="25%,*">
<frame src="top.html" />
<frameset cols="25%,*">
<frame src="left.html"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
</html>
12. HTML标簽之表單标簽: <form>
<form>
概述: 就是将現實生活中的表單變為"頁面形式"的表單.
記憶:
A: 表單标簽是<form>标簽, 寫在<form>标簽中的标簽是: 表單項.
B: 表單項必須放在<form>标簽中才能送出.
表單項分類:
輸入項: //輸入項都是<input>标簽, 根據輸入項的類型不同, 輸入項也不同.
//格式: <input type="輸入項的類型"/>
text: 文本框
password: 密碼框
radio: 單選框 //根據name屬性區分是否是同一組資料.
checkbox: 複選框 //根據name屬性區分是否是同一組資料.
file: 檔案框(就是讓你選擇檔案的路徑的)
submit: 送出按鈕
reset: 重置按鈕
image: 圖檔按鈕
button: 普通按鈕, 沒有任何自帶的功能, 功能需要使用者自定義.
hidden: 隐藏域, 例如: 某些資訊是指向給背景(程式員)看, 不想提示給使用者, 就可以用該輸入項.
下拉清單: <select>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
</select>
文本輸入域: <textarea>
屬性: rows:設定行數 cols:設定列數
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="02_測試送出.html" method="post">
使用者名:
<input type="text" name="username" readonly="readonly" value="汪"/><br />
密碼:
<input type="password" name="password"/><br />
性别：
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女" />女<br />
愛好：
<input type="checkbox" name="hobby" value="羽毛球"/>羽毛球
<input type="checkbox" name="hobby" value="小說"/>小說
<input type="checkbox" name="hobby" value="LOL"/>LOL
<input type="checkbox" name="hobby" value="敲代碼"/>敲代碼<br />
請選擇省份：
<select name="">
<option value="" selected="selected">--請選擇--</option>
<option value="">河北</option>
<option value="">河南</option>
<option value="">山西</option>
<option value="">山東</option>
</select>
<br />
個人說明：
<textarea rows="4" cols="20"></textarea>
<br />
<input type="submit" name="submit"/>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>測試送出</title>
</head>
<body>
有緣人，看到這裡，說明你走投無路了呀！
</body>
</html>
13. 表單項的屬性:
name: 表單項的名稱(用于接收資料)
value: 表單項的值.
readonly:隻讀
預設被選中:
單選框和複選框: checked
下拉清單: selected
14. 表單标簽的屬性:
action: 要送出資料到哪個頁面, 預設是送出到目前頁面.
路徑的劃分:
絕對路徑: 網站外部的頁面, 必須寫http://
相對路徑: 網站内部的頁面.
method: 送出方式
get: 送出方式不安全, 資料會顯示在位址欄中.
送出的資料有大小限制.
post: 送出方式相對安全, 資料封裝在"請求體".
送出的資料沒有大小限制.
15. CSS的簡介
概述: Cascading Style Sheets, 層疊樣式表.
作用:
用來美化頁面的.
//html相當于人的骨骼, css是給人化妝, js是讓人(局部)動起來.
分類:
行内樣式: //直接寫在元素(html的标簽)中的樣式.
内部樣式: //寫在<head>标簽的,<style>标簽中.
外部樣式: //寫在字尾名為.css的檔案中.
16. CSS的引入方式之: 行内樣式.
格式:
<div style="屬性名:屬性值; 屬性名:屬性值"></div>
作用: 隻針對于目前元素有效.
17. CSS的引入方式之: 内部樣式.
格式: //寫在<head>标簽的,<style>标簽中.
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
作用: 針對于目前頁面内的部分元素有效.
18. CSS的引入方式之: 外部樣式.
格式: //字尾名為.css的檔案中
選擇器{
屬性名:屬性值;
屬性名:屬性值;
}
作用: 可以用來統一整個網站的風格.
19. CSS中的選擇器:
//記憶: 後邊我們學習JQuery的時候, 選擇器和現在講的這三種是一樣的, 早晚都得記憶, 要求現在記.
//後邊學JQuery的時候會輕松一點.
元素選擇器:
格式:
元素名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 針對于該類元素有效.
id選擇器:
格式:
#選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 給指定id(id名和選擇器名一樣的元素)設定樣式的.
//記憶: 每個标簽都有id屬性, id屬性盡量保證唯一.
類選擇器:
格式:
.選擇器名{
屬性名: 屬性值;
屬性名: 屬性值;
}
作用: 用來設定某類元素(class屬性的值為 選擇器名的元素)的樣式的.
後代選擇器: //了解
(元素,id,類)選擇器 元素名{
//樣式
}
作用: 設定指定的元素内的 指定的"子标簽"的樣式的.
僞類選擇器: //了解
a:link{} //未選中連接配接
a:active{} //標明的連結
a:visited{} //已通路的連結
a:hover{} //滑鼠移動到連結上
作用: 主要用來操作超連結的.
20. CSS的樣式
背景:
background-color: 設定背景色
字型:
font-size: 設定字型大小
文本:
text-decoration:将其值設定為:none,可以取消超連結字型的下劃線.
color: 設定字型的顔色
邊框:
border: 1px solid blue; //1像素, 藍色實線
//solid: 單實線, double:雙實線 dotted:(點)虛線 dashed:(-)虛線
width: 設定标簽的寬度
height: 設定标簽的高度
21. CSS的浮動
概述: 通常情況下頁面的布局: 從上往下逐行分布. 有些時候我們需要頁面中的布局方式是從左往右, 或者從右往左之類的自定義頁面布局, 就需要用到: 窗體浮動.
float: //設定浮動.
屬性值: left, right
clear: //清除浮動.
屬性值: both
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: px solid;
height: px;
width: px;
}
</style>
</head>
<body>
<div style="color: red; float: left;">111</div>
<div style="color: blue ; float: left;">222</div>
<!--c從這裡開始不浮動-->
<div style="clear: both;"></div>
<div style="color: yellow; ">333</div>
</body>
</html>
22. CSS的盒子模型
概述: 也是用于布局的. 正常的一個頁面可能有多個div, 每個div的裡邊可能有其他元素(元素和div之間的間距叫内邊距), div與div之間有可能也是有間隙的(外邊距).
外邊距: margin
内邊距: padding
margin: 值1 值2 值3 值4; //離上,右,下,左的間距分别是: 值1 值2 值3 值4;
margin: 值1(上下) 值2(左右); //離上,右,下,左的間距分别是: 值1 值2 值1 值2;
margin: 值1; //離上,右,下,左的間距分别是: 值1 值1 值1 值1;
如果說不足以滿足四個邊距的值, 參考: 上左.