HTML

HTML –pre、font、特殊字元、列表、color屬性、width/meta/target屬性

文字相關：
pre: 			段落文字  保留html源文件的格式(空格,換行,標籤)

特殊字元：
空格      		 
商標(™)  	 	™
黑桃心❤   		♥
字型：
   	基本結構: <font >文字</font>
   	顏色: color(屬性)   屬性值 顏色的英文單詞或者RGB值
   	大小: size(屬性)    數字  1~7之間.
列表：
有序列表: ol
    無序列表: ul
列表中每一項: li
換行+分割線：
   換行: `<br/>`
   分割線: `<hr/>`
   屬性: color:
width：	①數字.px	  畫素 ②X%  百分比（height無百分比的屬性）
meta：	在head標籤內，可以設定編碼格式：<meta charset=”utf-8” />
target：	
		可選值：
①”_self”				本頁跳轉
			②”_blank”			建立新的頁面跳轉
			③”_parent”			上級頁面跳轉
			④”_top”				頂級視窗顯示
			⑤”frame的name值” 	自定義值：規定頁面的跳轉，下面的iframe標籤講解
 

HTML –表格table、表單form(input/select/textarea…)、iframe框架集、Emmet急速開發外掛

（1）表格：table
    標題區: thead
        行: tr
        單元格: th
    資料區: tbody
        行:tr
        單元格: td
	<table>
		<!-- 標題區 -->
		<thead>
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>性別</th>
				<th>年齡</th>
			</tr>	
		</thead>
		<!-- 資料區 -->
		<tbody>
			<tr>
				<td>101</td>
				<td>于謙</td>
				<td>女</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>
常見屬性:
-table標籤的屬性
①align: 		表格顯示在網頁橫向位置(居左顯示  居中顯示   居右顯示)
   				可選值: 'left'   'center'   'right'
②border: 	邊框寬度   預設值0 
③width: 	寬度  值='數字px'   值='90%'
④height: 	設定表格高度.   值='數字px'
-td標籤常見屬性:
①colspan:跨列顯示: 值 數字.
②rowspan: 跨多行顯示  值 數字
③align: 單元格內部內容的水平對齊方式   
	可選值: 'left'   'center'   'right'

-tr標籤的常見屬性：
bgcolor: 背景色
（2）表單：form 
     	作用:
    		指明當前表單內的資料提交到哪兒?
    		表名當前form內的元素總體是一個表單.
		表單屬性：
			action：提交表單資料到的地址
			method：提交的方式
			id：表單的id
	    表單元素的重要屬性：
			name：辨別元素，如果沒有的name的元素不被提交
			value：表單元素的預設值，多用於單選框、下拉框、複選框
		重要元素：
①input:	<input  … /> 
	type屬性：指明input的型別 例如<input type=”text”/>
		  值：text：單行文字輸入框
			  password：密碼文字框
			  button：按鈕
			  submit：提交
			  radio：單選按鈕
			  checkbox：複選框
			  reset：重置按鈕
	readOnly屬性：只讀屬性
			true、false
	size屬性：   文字框長度1--12
	value屬性：	文字對應的值、也可以設定預設值
			hidden屬性：隱藏
					true、false
			name屬性：	名字，在多個單選按鈕和複選框中的分組依據
			checked屬性：是否被選中、可設定預設選中，多用於複選框和單選框
					true、false
			disabled屬性：是否可用
					true、false
		②多行文字textarea：<textarea …></textarea>
			name屬性：名字
			cols屬性：文字框的列寬（字數）
			rows屬性：文字框的行高（行數）
			注意：一般在標籤內的沒有內容
		③下拉框select：<select><option></option></select>
			name屬性：名字
			option屬性：
				selected：是否被選中、可以設定預設值；true、false
 表單提交資料方式(請求方式)[筆試]
預設可選值：get(預設提交方式)、post、put
get：
 	語義: 獲取資料.(查詢功能,搜尋,檢視,檢視詳情) 
 	方式: 預設提交方式.
   		① 將提交的資料追加的瀏覽器的位址列
   		② 格式: **form的action地址?name=value&name=value...**
 	相對不安全.
提交資料量比較小.(不同瀏覽器有差異)
優點: get請求方式獲得靜態資源會被瀏覽器快取.
post：
①語義: 提交資料(新增,修改)
②方式: 將資料打包傳送,不會顯示在位址列中.
③相對安全.
④提交資料量大(應用: 檔案上傳)
（3）iframe框架集
在網頁內巢狀顯示另一張頁面
語法: <iframe src="要顯示的頁面的路徑" name=”本框架的名字”></iframe>
屬性:
src: 引用的網頁路徑
height: 高度
width: 寬度
frameborder: 是否顯示邊框: 1 顯示錶框   0 不顯示邊框
name: frame名字
	  用法：
			<iframe name=”t1” src=”預設顯示的頁面路徑”></iframe>
			<a href=”頁面路徑”  target=”iframe框架的name值t1”></a> //將頁面載入到t1內
（4）Emmet急速開發外掛
匯入：將jar包拷貝myeclipse或者eclipse安裝目錄下的dropins目錄下
作用: 開發快，智慧補全
核心: 用短語+快捷鍵生成html標籤或者xml標籤
常用短語:
html:5					生成html5的基本框架
標籤名					生成標籤
父標籤>子標籤			生成標籤及子標籤，例如select>option
標籤名*數字				生成標籤及個數，例如tr*3>td*3  三行三列
input:type的屬性值 		生成對應的文字或按鈕，例如input:password
input#username			生成id為username的input
table>thead+tbody			生成table下同級的thead和tbody標籤

		確定快捷鍵：Enter、ctrl+e、tab鍵…
 

HTML –span、盒子div、頁面佈局

（1）span
特徵: ①沒有任何特徵.
          ②是行級元素.
應用: 對網頁的內容,在不改變格局情況下,樣式微調.
示例: 
<span style="font-size: 100px;color:blue;">G</span>
（2）div
 	樣式: width height 邊框
內補白(內間距) padding: 內容和盒子內壁之間的距離.
邊框 border: 盒子厚度.
外補白(外間距) margin: 盒子和外部元素距離.
定位：
絕對定位: 相對於父容器(父標籤)的位置
樣式:
position:absolute; 相對父標籤的位置,忽略同級別元素的位置.
left: 與父容器左邊的距離
top:與父容器上邊的距離
z-index: 數字, 距離使用者的層級.
浮動定位:
float: left; 將div浮動展示,變成行內元素.
（3）網頁 格局劃分(佈局)
①table 完成佈局.
   		優點: 簡單
   		缺點: 效率低,效能差,使用者體驗差.
②div
   		優點: 一個div一個載入,效能好.
特點:
a.沒有效果.
b.是塊級元素