html
軟件的結構：
c/s(ClientServer)結構的軟件。比如：QQ、飛車、飛信
c/s結構的軟件的缺點：更新的時候需要用戶下載更新包然後再安裝，程序員則需要開發客戶端和服務端，
c/s結構的軟件的優點：減輕服務端的壓力，而且可以大量保存數據在客戶端。
B/S(BrowserServer)結構的軟件；比如：微博、webQQ、web飛信、web迅雷
優點：軟件版本升級的時候不需要用戶下載更新包，直接更新服務器的程序即可。程序員則只需要開發服務端而已。
缺點：增加了服務端的壓力，bs結構的軟件不能保存大量的數據在用戶機上。
網站的類別：
靜態網站：靜態網頁中的數據都是寫死的，如果需要修改網頁的內容是需要直接修改網頁的代碼。是沒有數據庫提供數據給他的。
動態網站：動態網站的數據是來自於數據庫的，背後是有一個後臺程序管理頁面中數據的。
html語言就是開發網頁的基礎語言：
html(超文本標記語言)：
標記：該門語言是由標籤構成的，學習html不用怎麼去理解，只需要記住標籤的作用即可。
html語言的特點：
1、html語言是與平臺無關的，任何平臺只要安裝了瀏覽器都可以運行；
2、html是不區分大小寫的；
html語言的結構：
<html> html語言的根標籤.
<head></head>網頁的頭信息
頭信息的作用：
1、可以設置網頁的標題；
2、可以通知瀏覽器使用指定的碼錶解釋html頁面
<body></body>網頁的體部分
</html>
html的註釋： <!-- 註釋的內容 -->
html常用的標籤：
<h1>~<h6> 表示是一個標題
<p> 段落標籤
<hr/> 水平線標籤
<br/> 換行標籤
<sub> 下標
<sup> 上標
<pre> 原樣標籤：原樣標籤會保留空格和換行符
<ol> <li> 有序的列表標籤
<ul> <li> 無序的列表標籤
項目列表標籤(dl dt dd)
行內標籤(span)
塊標籤<div> div標籤的內容會獨立佔一行內容的
html標籤的作用：用於描述一個網頁的結構的。
如果需要操作數據的樣式：通過標籤的屬性操作的。
標籤的類型：
1、有開始標籤和結束標籤。 <p></p> 需要把網頁中的數據內容封裝到標籤中
2、開始標籤和結束標籤都是在一個標籤體內的。 比如：<hr/> 功能單一，不需要封裝數據到標籤中。
爲什麼要學實體標籤？
因爲> < 等一些符號在html頁面中是有着特殊含義，這些字符如果需要在頁面中顯示，這時候就應該使用實體標籤。
常用的實體字符：
空格
小於號 <
大於號 >
& &
" "
人民幣 ¥
版權 ©
商標 ®
媒體標籤：
<embed></embed>
hidden 設置音樂插件是否隱藏
src 用於指定音樂的路徑
<marquee> 飄動標籤
direction 指定飄動的方向
scrollamount 指定飄動的速度
loop 指定飄動的次數
<a>超鏈接標籤：
<a>標籤常用的屬性：
href 用於指定連接的資源
target 設置打開新資源的目標 _Blank 在獨立的窗口上打開新資源 _self 在當前窗口打開新資源
file：file協議（文件協議）這種協議主要是用於搜索本地機器的資源文件的，
格式：file:\\\f\a.jpg
a標籤的原理：
1、a標籤的href屬性值如果是以http開頭的，那麼瀏覽器會馬上啓動http解析器去解析該網址，首先會在本地機器去找一個hosts文件，如果在hosts文件上該域名沒有對應的主機，那麼瀏覽器就去到對應的dns服務器去尋找該域名對應的主機號。如果找到了對應的主機，那麼該請求就會發給對應的主機。
2、如果a標籤的href屬性值沒有以任何協議開頭，那麼瀏覽器就會啓動file協議解釋器去解釋該資源路徑
3、如果a標籤的href屬性值並不是以http協議開頭的，而是其他的一些協議，那麼這時候瀏覽器就會去到我們本機的註冊表中去查找是否有處理這種協議的應用程序，如果有，那麼馬上啓動該應用程序處理該協議。
郵件的協議：mailTo
迅雷的協議：thunder
超鏈接標籤的作用：
1、可以用於連接資源
2、錨點定位
(1) 首先要編寫一個錨點。 錨點的寫法格式：<aname="錨點名字"> 數據 </a>
(2)使用a標籤的 href屬性連接到錨點處。 href="#錨點的名字"
<img>圖片標籤:
img標籤常用的屬性：
width 寬度
heigh 高度
alt 如果圖片資源無法找到，那麼就顯示對應的文字對圖片進行說明
熱點圖：
<table>表格標籤：
表格使用到的標籤：
<table> 表格
<tr> 行
<td> 單元格
<th> 表頭 默認的樣式是居中，加粗
<caption> 表格的標題
表格常用的屬性：
border 設置表格的邊框
width 設置表格的寬度
height 設置表格的高度
colspan 設置單元格佔據指定的列數
rowspan 設置單元格佔據指定的行數
以前的瀏覽器一旦遇到了一個<table>的開始標籤，就必須要等到遇到table標籤的結束標籤的時候，纔會在網頁中顯示一個表格的內容。
後來一個表格就被分成三個部分
<thead> 表頭 可以沒有存在thead
<tbody> 表體 一個表格至少要存在一個tbody，也可以存在多個
<tfoot> 表尾 可以不存在tfoot
一個瀏覽器只要遇到了一個網站的tbody標籤，那麼就可以顯示當前頁面的信息。
框架標籤：
frameSet 一個frameSet可以把一個頁面切割成多份，只能按照行或者列切割
frame 不能被切割的。frame是位於frameSet中。
注意：frameSet標籤不能用於body標籤體內容
iframe 在一個網頁中分隔一部分的位置顯示另外一個網頁的信息
表單標籤：表單標籤的作用是用於提交數據給服務器的。表單標籤的根標籤是<form>標籤
常用的屬性：
action：該屬性是用於指定提交數據的地址。
method：指定表單的提交方式
get：默認使用的提交方式 提交的數據會顯示在地址欄上
post：提交的數據不會顯示在地址欄上
注意：表單項的數據如果需要提交到服務器上面，那麼表單項必須要有name的屬性值
Day03(0602)
html 在一個網頁中負責的事情是一個頁面的結構。
css（層疊樣式表）在一個網頁中主要負責了頁面的數據樣式。
編寫css代碼的方式：
第一種：在style標籤中編寫css代碼。 只能用於本頁面中，複用性不強。
格式：
<style type="text/css">
編寫css的代碼
</style>
例子：
a{
color:#F00;
text-decoration:none;
}
第二種：可以引入外部的css文件 推薦使用
方式一：使用link標籤 推薦使用
格式：
<link href="css文件的路徑"rel="stylesheet">
例子：<linkhref="1css.css" rel="stylesheet"/>
方式二：使用<style>引入
格式：
<styletype="text/css">
@import url("css的路徑");
</style>
例子：<styletype="text/css">
@import url("1css.css");
</style>
第三種：直接在html標籤使用style屬性編寫 只能用於本標籤中，複用性較差。不推薦使用
例子：<astyle="color:#0F0; text-decoration:none;" href="#">新聞標題2</a>
選擇器：選擇器的作用就是找到對應的數據進行樣式化。
1、 標籤選擇器：就是找到所有指定的標籤進行樣式化。
格式：
標籤名{
樣式一;樣式2......
}
例子：
div{
color:#F06;
font-size:24px;
}
2、 類選擇器：使用類選擇器首先要給html標籤指定對應的class屬性值
格式：
.class的屬性值{
樣式一;樣式二....
}
例子：
.two{
background-color:#CCC;
color:#090;
font-size:36px;
}
類選擇器要注意的事項：
1、html元素的class屬性值一定不能以數字開頭
2、類選擇器的樣式是要優先於標籤選擇器的樣式
3、ID選擇器：使用ID選擇器首先要給html元素添加一個id的屬性值
ID選擇器的格式：
#id屬性值{
樣式一;樣式二......
}
例子：
#one{
background-color:#000;
color:#6F0;
font-size:16px;
}
ID選擇器要注意的事項：
1、ID選擇器的樣式優先級是最高，優先於類選擇器與標籤選擇器。
2、ID選擇器的屬性值也是不能以數字開頭的
3、ID的屬性值在一個html頁面中只能出現一次
4、交集選擇器：就是對選擇器1中的選擇器2裏面的數據進行樣式化
選擇器1 選擇器2{
樣式一;樣式二......
}
例子：
.two span{
background-color:#600;
font-size:24px;
}
5、並集選擇器：對指定的選擇器進行統一的樣式化
格式：
選擇器1,選擇器2..{
樣式一;樣式二...
}
例子：
span,a{
border-style:solid;
border-color:#936;
}
6、通用選擇器
格式：
*{
樣式一,樣式二...
}
例子：
*{
text-decoration:line-through;
background-color:#330;
}
僞類選擇器：僞類選擇器就是對元素處於某種狀態下進行樣式化的
注意：
1、a:hover 必須被置於 a:link和a:visited之後
2、a:active 必須被置於a:hover 之後
例子：
a:link{color:#F00} /*沒有被點擊過-----紅色//IE可以，谷歌不可以*/
a:visited{color:#0F0} /*已經被訪問過的樣式----綠色*/
a:hover{color:#00F;font-size:24px} /*鼠標經過的狀態-----藍*/
a:active{color:#FF0} /*點擊並沒有鬆開的時候*/
/*操作背景的屬性*/
body{
/*background-color:#999; 設置背景顏色*/
background-image:url(a.jpg);/*添加圖片*/
background-repeat:no-repeat;/*設置背景圖片是否要重複*/
background-position:370px 100px;/*設置背景圖片的位置，第一個參數是左上角的左邊距，第二個參數是左上角的上邊距*/
}
/*操作文本的樣式*/
div{
color:#F00;
/*direction:rtl;右對齊，right 右 left 左*/
font-size:16px;
line-height:40px;
letter-spacing:10px;
text-align:center;
text-decoration:underline;
text-transform:uppercase;
}
操作表格的屬性
table{
/*border-collapse:collapse;合併表格的邊框*/
border-spacing:20px;/*設置單元格的邊框與表格的邊框距離*/
empty-cells:show;
table-layout:fixed;
}
操作邊框的屬性
/*div默認是沒有邊框的*/
div{
width:100px;
height:100px;
border-style:dotted solid double;/*設置邊框的樣式 上 右 下 左*/
border-color:#F00;
border-bottom-color:#0FF;
border-top-width:100px;
}
盒子模型：盒子模型就是把一個html邊框比作成了一個盒子的邊框，盒子模型主要是用於操作數據與邊框之間的距離或者是邊框與邊框之間的距離
盒子模型主要是用於操作內邊距(padding)與外邊距(margin)
div{
border-style:solid;
width:100px;
height:100px;
/*內邊距*/
padding-left:10px;
padding-top:20px;
}
.one{
margin-bottom:30px;
}
.two{
margin-left:700px;
}
css的定位：
相對定位：相對定位是相對於元素原本的位置進行移動的。
使用方式： position:relative;
絕對定位：絕對定位是相對於整個頁面而言。
position:absolute;
top:200px;
left:380px;
固定定位：固定定位是相對於整個瀏覽器而言的
position:fixed;
top:380px;
left:900px;