一、HTML
什么是HTML?
- HTML是一種用來描述網頁的一種語言，是一套規則，被瀏覽器認識的規則
- HTML指的是超文本標記語言（
Hyper Text Markup Languag
對於開發者來說
學習HTML規則
開發后台程序：
-寫HTML文件（充當模板的作用）
-把從數據庫中獲取的數據和HTML文件進行渲染（web框架）
編寫HTML文件
HTML標簽分為
-自動閉合標簽（也就是沒有內容的標簽如：<br />）
<meta charset="UTF-8" /> 注意后面有沒有斜杠"/"都是真正確的，但是在后面加上"/"為了擁有更長遠的保障
-主動閉合標簽
<title>這是個標題</title>主動閉合標簽沒有"/"的我們叫做開始標簽（開放標簽）和后面有斜杠的"/"我們叫做結束標簽（閉合標簽）
<!DOCTYPE>聲明必須是HTML文檔的第一行，它不屬於HTML標簽，它是告訴web瀏覽器關於頁面使用哪個版本的HTML進行編寫的指令
HTML標簽可以擁有屬性，屬性總是寫在開始標簽里面，屬性總是以名稱/值對的形式出現的，如name="value"。
標簽的屬性
寫在head標簽元素里面的一些標簽
注意：<head>content</head> zaihe，說的屬性一般都是寫在開始標簽里面<head name="value>
每一個標簽都可以嵌套其他的標簽
所有的標簽可以分為：
塊級標簽：div標簽, H系列標簽， p標簽
行內標簽：span標簽
塊級標簽就是不管寫多少內容它都是占整整的一行。
行內標簽就是寫多少內容就占據這行多少位置。
后面會學到的可以把塊級標簽變為行內標簽。
一些寫在head標簽元素里面的常用標簽介紹
<meta />標簽一般起到編碼，跳轉，刷新，關鍵字，描述，IE兼容等作用
刷新：<meta http-equiv="refresh" content="3"/> #有這個就表示這個頁面每三秒就刷新一次
跳轉：<meta http-equiv="refresh" content="3; url=http://www.oldboyedu.com"/> # 當訪問到這個頁面的時候三秒后跳轉到后面url的網頁
關鍵字：<meta name="keywords" content="LOL" /> # 搜尋關鍵詞為LOL提供給搜索引擎等關鍵字
編碼：<meta charset="UTF-8"/> # 告訴瀏覽器這個頁面使用的編碼格式
IE兼容：<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" /> # 兼容IE瀏覽器的版本這個表示兼容IE9，IE8
<title>標簽就是打開一個網頁的標簽的名稱
<link /> 標簽定義文檔與外部資源的關系
<link rel="shortcut icon" href="1.jpg"\> # href就是你要顯示圖標的位置
<link rel="stylesheet" type="text/css" href="theme.css" /> # 最常見的用途是鏈接樣式表
<style>標簽就是用來定義css樣式信息的地方
一些寫在body標簽元素里面的標簽常用的標簽介紹
圖標：就是當我們需要空格大於號小於號的時候或這個多個空格的時候我們不能直接打空格鍵或者大小於號符號
不斷行的空白 > 大於號或顯示標記 < 小於號或顯示標記
記得后面有分割符號這個特殊字符可以到網上查找或http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html
p標簽：定義的是一個段落。會自動在其前后創建一個空白（塊級標簽、主動閉合標簽）
br標簽：表示的是換行（塊級標簽、自動閉和標簽）
div標簽：是一個白板（塊級標簽、主動閉合標簽）
H標簽：文字加大加粗 <hx><h> x的取值范圍是1-6 1表示的是最大一次類推6最小（塊級標簽、主動閉合標簽）
span標簽：白板（行內標簽、主動閉合標簽）
form標簽是用於提交input標簽里面的內容的
input系列標簽：input標簽里面的內容用於提交到后台的數據，（行內標簽、自閉和標簽）
input標簽的一些屬性使用：
輸入框
<input type="text" name="username" value="test"/>
上面會顯示一個輸入框，同時name屬性常用后台數據的提取，value屬性表示這個輸入框直接有默認值為test，這個可以在輸入框中可以刪除。
<input type="password" >
這個是輸入框不會顯示你輸入的值，就是我們登錄網頁是的輸入密碼一樣輸入值不可見，上面的屬性在這里面也適用。
還有一個屬性就是placeholder這個只有在新版本的瀏覽器上才會有效，就是輸入框中提示我們輸入什么值，當我們輸入的時候這個提示就沒了。
效果圖：
表單提交按鈕
<input type="submit" value="提交"/>
這個是用來提交表單中的數據是配合form標簽把數據提交到后台。value屬性是是在按鈕上顯示文字
效果圖：
按鈕
<input type="button" value="確認" />
這個就是一個按鈕，value就是按鈕顯示的字
這個效果圖和上面的一樣只是功能不一樣而已
單選框
<input type="radio" name="test" checked="checked" value='1'/>
上面就是我們有時候在網頁上填寫信息是有一個如性別的選項，當name值一樣的時候表示這個選項是唯一選項，而checked屬性表示的是默認選該項，如果都有cheched那么以最后一個為准。value是用來后來數據獲取的
效果圖：
復選框
<input type="checkboox" name="test" checked="checked" value="1"/>
這個就是我們選擇興趣一樣可以有多個選項，checked也是表示默認這個選擇，name屬性可以批量獲取數據。value和上面的一樣
效果圖：
文件上傳
<input type="file" />
這個就上上傳文件的時候使用的，要想上傳form標簽一定要有屬性值enctype="multipart/form-data"
效果圖：
重置按鈕
<input type="reset" > 重置這個只會重置同一個form標簽元素里面的值
文本框(這個是主動閉合標簽，行內標簽)
<textarea name="test">content<textarea>
這個標簽就是我們在看博客的時候看到的評價框一樣。其中content表示的是默認寫的一些數據，name用於后台數據的獲取
下拉框（主動閉合標簽，行內標簽）
<select name="test" multiple="multiple" size='2'>
<optgroup label="安徽">
<option selected="selected" value='1'>合肥</option>
</select>
select里面的屬性中的name用於后台獲取數據，multiple表示的這個下拉框可以多選，size表示的下拉框顯示幾個值
但是有的瀏覽器設置不一樣所以size設置一樣的值在有的瀏覽器上顯示的也不一樣
optgroup表示的是一個分組，這個是不可選的
option里面的selected表示的是默認選擇這個，value是為了后台數據的提取。
效果圖：
form標簽（主動閉合標簽）
<form action="url" method='post' enctype="multipart/form-data"></form>
這個標簽主要是用於把input標簽、select標簽、文本框中的數據提交到后台的。action屬性是把數據提交的地址，method是表示提交的方式，
enctype="multipart/form-data"這個主要是針對文件上傳的，當沒有這個的時候文件就不會上傳到后台。
a標簽()
1：跳轉<a href="url" target="_blank"></a>
href表示的是要跳轉的url，
target屬性等於 "_blank"表示在新的頁面打開這個url
2：錨 （就是網頁上的目錄點那一章節它就會跳到該頁相應的位置）
<a href='#i1'>第一章</a>
<div id='i1'>content</div>
上面就是當我們給這個設置為#i1那么當我們點擊這個的時候，就會跳轉到id等於i1的那個標簽
img標簽
這個標簽主要是頁面插入圖片
<img src='location' alt='content' title='content1'>
lsrc: location代表的是圖片存放的位置
alt: content代表當我們到指定的位置沒有找到圖片顯示的內容
title：content1當我們把鼠標移到插入的圖片上的時候就會顯示該信息
列表
<ul>
<li>content</li>
</ul>
<ol>
<li>content</li>
</ol>
上面的列表的不同之處是ul標簽以點開頭的列表，而ol標簽是以數字開頭的列表
效果圖：
<dl>
<dt>水果</dt>
<dd>西瓜</dd>
<dd>草莓</dd>
<dt>蔬菜</dt>
<dd>青菜</dd>
<dd>西紅柿</dd>
</dl>
效果圖：
表格
table標簽
<table border='1'>
<thead>
<tr>
<th>content</th>
<th>content2</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan='num'>content</td>
<td rowspan='num'>content</td>
</tr>
</tbody>
</table>
table標簽里面的元素border表示給表格加上一個框框
thead表示的是表頭
tbody表示的是表格的內容
colspan表示合並相鄰的列數
rowspan表示合並相鄰的行數
效果圖：
label標簽
該標簽主要是和input標簽一起使用點擊該標簽使之關聯的input標簽出現光標
<label for='username'>content</label>
<input id='username' type='text'/>
使label的for屬性值和input的id屬性值一樣，就可以使之關聯起來。
fieldset標簽
<fieldset>
<legend>content</legend>
</fieldset>
上面顯示出來的就是一個框框不過content就是鑲嵌在框框的線上面內容
效果圖：
上面就是一些日常能夠用到的一些HTML標簽
二、css
css是英文Cascading Style Sheets的縮寫，稱為層疊樣式表，用來美化頁面的
有三種存在方式：元素內聯、頁面嵌入和外部引入
- 在標簽中使用style='key1:value1;key2:value2;...'
- 頁面中嵌入<style type='text/css'></syule>
- 外部引入css文件
在標簽上設置style屬性：
background-color: #2459a2 這個是表示設置背景顏色
height: 48px； 這個是表示設置高度
關於更多的style屬性可以在網上查看相關的信息
編寫css樣式：
第一種是寫在標簽里面的style屬性
第二種是在head元素里面的style標簽中寫樣式
id選擇區
<style> #i1{ background-color: #2459a2; height: 48px; } </style>
調用的方式為在標簽的屬性中寫上id="i1"
class選擇器
<style> .i1{ background-color: #2459a2; height: 48px; } </style>
調用的方式為在標簽的屬性中寫上class="i1,這個在日常中推薦使用這種方式。
標簽選擇器
<style> div{ background-color: #2459a2; height: 48px; } </style>
這個表示給所有的div標簽設置這個樣式
層級選擇器
<style> .c1 .c2 div{ background-color: #2459a2; height: 48px; } </style>
每一個都是通過空格來隔開，上面的表示給id='c1' 標簽下面 找 id='c2'標簽，再從這個標簽里面給div標簽設置這個樣式
組合選擇器
<style> #c1,.c2,div{ background-color: #2459a2; height: 48px; } </style>
上面通過英文逗號(,)隔開。這個表示給class='c1',id='c2',div標簽設置上這個樣式
屬性選擇器
<style> .c1[name='test']{ background-color: #2459a2; height: 48px; } </style>
上面表示找id='c1'的標簽，並且再找到屬性name='test'的標簽給這個標簽設置這個樣式
css樣式的優先級為：
1、寫在標簽上的style優先
2、編寫的順序：就近原則(誰離得近就是誰生效)
css樣式可以單獨寫在一個文件，這樣通過調用其他的都能使用
調用的方式為：寫在head標簽里面的 <link rel="stylesheet" href="commons.css" />
邊框的設置：
- 寬度，樣式，顏色 (border: 4px dotted red;)
# border(邊框): 4px(邊框的線條的寬度) dotted(邊框為虛線 solid:為實線) red(邊框的顏色)
下面是一些關於css里面寫的一些樣式
height： 高度 百分比
width： 寬度 像素，百分比
text-align:ceter： 水平方向居中
line-height：垂直方向居中，根據標簽高度
color： 字體顏色
font-size： 字體大小
font-weight： 字體加粗
float屬性（也叫浮動）
使設置的標簽產生浮動的效果，脫離標簽在頁面原本的頁面的標准輸出
<div style="width: 20%;background-color: red;float: left">1</div> <div style="width: 20%;background-color: black;float: right">2</div>
上面的效果
把原本的塊級標簽變為了行內標簽，並設置了標簽浮動的位置
display屬性
display: none; -- 讓標簽消失,也就是含有這個屬性的標簽讓它沒有效果。 display: inline; display: block;
display: inline-block;
具有inline,默認自己有多少占多少
具有block，可以設置高度，寬度
行內標簽：無法設置高度，寬度，
塊級標簽：設置高度，寬度，
上面所說的行內標簽和塊級標簽指的是原本標簽的所屬的屬性，不是后面通過的display改變的