1.????表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
<style type="text/css">
</style>
<script type="text/javascript">
/*
window.onload = function(){
var qq = document.getElementById('qq');
qq.onfocus = function(){
this.placeholder='';
}
qq.onblur = function(){
if(qq.value == ""){
this.placeholder='郵箱/手機號/QQ號';
}
}
}
*/
</script>
</head>
<body>
<!--
表單的作用就是用來將用戶信息提交給服務(wù)器的
比如：百度的搜索框 注冊 登錄這些操作都需要填寫表單
使用form標簽創(chuàng)建一個表單
form標簽中必須指定一個action屬性，該屬性指向的是一個服務(wù)器的地址
當我們提交表單時將會提交到action屬性對應(yīng)的地址
-->
<!--? 設(shè)置請求方式：method="post" -->
<!--? 需要上傳文件時要加屬性： enctype="multipart/form-data" -->
<form action="demo075_target.html">
<!-- 表單的隱藏域 -->
<input type="h idden" name="page" value="2">
<!--
使用form創(chuàng)建的僅僅是一個空白的表單，我們還需要向form中添加不同的表單項
-->
<!--
在表單中可以使用fieldset來為表單項進行分組，可以將表單項中的同一組放到一個fieldset中
-->
<fieldset>
<!-- 在fieldset可以使用legend子標簽，來指定組名 -->
<legend>用戶信息</legend>
<!--
使用input來創(chuàng)建一個文本框，它的type屬性是text
如果希望表單項中的數(shù)據(jù)會提交到服務(wù)器中，還必須給表單項指定一個name屬性
name表示提交內(nèi)容的名字
用戶填寫的信息會附在url地址的后邊以查詢字符串的形式發(fā)送給服務(wù)器
url地址?查詢字符串
格式：
屬性名=屬性值&屬性名=屬性值&屬性名=屬性值&……
在文本框中也可以指定value屬性值，該值將會作為文本框的默認值顯示
-->
<!--
在html中還為我們提供了一個專門用來選中表單中的提示文字的label標簽
該標簽可以指定一個for屬性，該屬性的值需要指定一個表單項的id值
-->
<label for="um">用戶名</label>
<!--
value是默認值，
提示信息用：placeholder="用戶名/郵箱/手機號"
autocomplete="off"不保存緩存記錄
-->
<input id="um" type="text" name="username" value="我是value" autocomplete="off"><br><br>
<label for="qq">賬號</label>
<input id="qq" type="text" name="loginName" placeholder="郵箱/手機號/QQ號" onfocus="this.placeholder=''" onblur="this.placeholder='郵箱/手機號/QQ號'"><br><br>
<!--
密碼框
使用input創(chuàng)建一個密碼框，它的type屬性值是password
-->
<label for="pwd">密碼</label>
<input id="pwd" type="password" name="password"><br><br>
</fieldset>
<fieldset>
<legend>用戶愛好</legend>
<!--
單選按鈕
- 使用input來創(chuàng)建一個單選按鈕，它的type屬性使用radio
- 單選按鈕通過name屬性進行分組，name屬性相同是一組按鈕
- 像這種需要用戶選擇但是不需要用戶直接填寫內(nèi)容的表單項，還必須指定一個value屬性，這樣被選中的表單項的value屬性值將會最終提交給服務(wù)器
如果希望在單選按鈕或者是多選框中指定默認選中的選項，則可以在希望選中的項中添加checked="checked"屬性
-->
性別<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
<input type="radio" name="gender" value="female" checked="checked" id="female"><label for="female">女</label>
<br><br>
<!--
多選框
- 使用input創(chuàng)建一個多選框，它的type屬性使用checkbox
-->
愛好<input type="checkbox" name="hobby" value="zq">足球
<input type="checkbox" name="hobby" value="lq">籃球
<input type="checkbox" name="hobby" value="ymq" checked="checked">羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked">乒乓球
<br><br>
</fieldset>
<!--
下拉列表
- 使用select來創(chuàng)建一個下拉列表
下拉列表的name屬性需要指定給select，而value屬性需要指定給option
可以通過在option中添加selected="selected"來將選項設(shè)置為默認選中
當為select添加一個multiple="multiple"，則下拉列表變?yōu)橐粋€多選的下拉列表
-->
你喜歡的明星
<select name="start">
<!--
在select中可以使用optgroup對選項進行分組
同一個optgroup中的選項是一組
可以通過label屬性來指定分組的名字
-->
<optgroup label="女明星">
<!-- 在下拉列表中使用option標簽來創(chuàng)建一個一個列表項 -->
<option value="fbb">范冰冰</option>
<option value="lxr">林心如</option>
<option value="zw">趙薇</option>
</optgroup>
<optgroup label="男明星">
<option value="zbs" selected="selected">趙本山</option>
<option value="ldh">劉德華</option>
<option value="zjl">周杰倫</option>
</optgroup>
</select>
<br><br>
<!-- 使用textarea創(chuàng)建一個文本域 -->
自我介紹<textarea name="info"></textarea>
<br><br>
<!--
提交按鈕可以將表單中的信息提交給服務(wù)器
使用input創(chuàng)建一個提交按鈕，它的type屬性值是submit
在提交按鈕中可以通過value屬性來指定按鈕上的文字
-->
<input type="submit" value="注冊" />
<!-- <input type="reset">可以創(chuàng)建一個重置按鈕，點擊重置按鈕以后表單中內(nèi)容將會恢復(fù)為默認值 -->
<input type="reset">
<!-- 使用input type=button可以用來創(chuàng)建一個單純的按鈕，這個按鈕沒有任何功能，只能被點擊 -->
<input type="button" value="按鈕">
<br><br>
<!--
除了使用input，也可以使用button標簽來創(chuàng)建按鈕
這種方式和使用input類似，只不過由于它是成對出現(xiàn)的標簽，使用起來更加的靈活
-->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按鈕</button>
</form>
</body>
</html>
2.? 框架集
? ? ? 1. 框架集和內(nèi)聯(lián)框架的作用類似，都是用于在一個頁面中引入其他的外部的頁面
框架集可以同時引入多個頁面，而內(nèi)聯(lián)框架只能引入一個
? ? 在h5標準中，推薦使用框架集，而不使用內(nèi)聯(lián)框架
? ? 使用frameset來創(chuàng)建一個框架集，注意? frameset不能和body出現(xiàn)在同一個頁面中
? ? 所以要使用框架集，頁面中就不可以使用? ? body標簽
? ? 屬性：
? ? rows，指定框架集中的所有的框架，一行一行的排列
? ? cols， 指定框架集中的所有的頁面，一列一列的排列
? ? 這兩個屬性frameset必須選擇一個，并且需要在屬性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一樣，它里邊的內(nèi)容都不會被搜索引擎所檢索
? ? 所以如果搜索引擎檢索到的頁面是一個框架頁的話，它是不能去判斷里邊的內(nèi)容的
使用框架集則意味著頁面中不能有自己的內(nèi)容，只能引入其他的頁面
? ? 而我們每單獨加載一個頁面，瀏覽器都需要重新發(fā)送一次請求，引入幾個頁面就需要發(fā)送幾次請求，用戶的體驗比較差
? ? 如果非得用建議使用frameset而不使用? ? ? iframe
? ? 2. 在frameset中使用frame子標簽來指定要引入的頁面
? ? 引入幾個頁面就寫幾個frame
3.? IE6中png圖片的修復(fù)
? ? ? 在IE6中對圖片格式png24支持度不高，如果使用的圖片格式是png24，則會導(dǎo)致透明效果無法正常顯示。
? ? ? 解決方法：
? ? ? ? ? ? 1.可以使用png8來代替png24，即可解決問題，但是使用png8代替png24以后，圖片的清晰圖會有所下降
? ? ? ? ? ? 2.使用JavaScript來解決該問題，需要向頁面中引入一個外部的JavaScript文件，然后在寫一下簡單的JS代碼，來處理該問題
4.? 條件HACK
? ? ? 假設(shè)在IE6中需要將背景顏色設(shè)置為黃色才能達到和其它瀏覽器相同的效果
? ? ? 希望黃色背景只在IE6中生效
? ? ? 在樣式前添加一個下劃線，則該樣式只有IE6及以下的瀏覽器才可以識別
? ? ? _background-color: yellow;
? ? ? 添加了*的樣式只有IE7及以下的瀏覽器認識
? ? ? background-color: yellow;
? ? ? 在樣式最后添加一個\0，則只有IE8及以上的瀏覽器才能識別
? ? ? background-color: yellow\0;
? ? ? CSS Hack不到萬不得已的情況盡量不要使用
5.? 屬性_選擇符HACK
? ? ? /*
? ? ? 在選擇器前添加* html 則該選擇器只有IE6可以識別
? ? ? */
? ? ? * html body{
? ? ? background-color: #bfa;
? ? ? }
6.? CSS3過度動畫
? ? ? transition: property? duration? timing-? ? function? delay 同時設(shè)置四個屬性
? ? ? transition-property 設(shè)置過渡的屬性，比如：width height background-color
? ? ? transition-duration 設(shè)置過渡的時間，比如：1s 500ms
? ? ? transition-delay 設(shè)置動畫的延遲
? ? ? transition-timing-function 設(shè)置過渡的運動方式
? ? ? linear 勻速
? ? ? ease 開始和結(jié)束慢速
? ? ? ease-in 開始是慢速
? ? ? ease-out 結(jié)束時慢速
? ? ? ease-in-out 開始和結(jié)束時慢速
? ? ? cubic-bezier(n,n,n,n)
? ? ? 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
