Week02???? 2016/09/21上午1-4節(jié)
一、Modernizr.js的作用
解決不支持css3+html5瀏覽器的兼容性
Modernizr.js:為HTML5和CSS3而生！-前端開發(fā)博客
Modernizr的介紹和使用-劉一痕-ChinaUnix博客
二、Modernizr.js的下載
官方網(wǎng)站：
Modernizr: the feature detection library for HTML5/CSS3
三、Lesson02創(chuàng)建表單
1，index.html
(1)引用外部css文件
(2)引用外部js文件
(3)form:name,method(get,post),action
(4)input:name,id,type,value,placeholder,required,autofocus
(5)fieldset,legend
(6)ul,li
(7)select,option
(8)input type:email,tel
(9)實(shí)體符號(hào)：
(10)在dreamwaver內(nèi)添加Goolge 瀏覽器
四、運(yùn)行代碼-----P42：代碼清單2-2
<!DOCTYPE HTML>
<html>
<head>
??? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
??? <title>Order Form</title>
?<link rel="stylesheet" href="style.css"><!--使用樣式表-->
??? <script src="modernizr-1.7.js"></script>
??? <script src="app.js"></script>
</head><body>
?<form name="order" method="post" action="/submit">
??? ?<h1>Order Form</h1>
??????? <fieldset><!--分組-->
??????? ?<legend>Contact Details</legend><!--legend 元素為 fieldset 元素定義標(biāo)題（caption）。-->??????
??????????? <ul>
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>FULL Name</div>
??????????????????????? <input name="name" required autofocus>
??????????????????? </label>
??????????????? </li><!--Full Name-->
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>Email Address</div>
??????????????????????? <input name="email" type="email" required>
??????????????????? </label>
??????????????? </li><!--Email Address-->
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>Postal Address</div>
??????????????????????? <input name="address1" placeholder="Addrees Line 1">
??????????????????????? <div> </div>
??????????????????????? <input name="address2" placeholder="Addrees Line 2">
??????????????????????? <div> </div>
??????????????????????? <input name="city" class="city" placeholder="Town/City">
??????????????????????? <input name="state" class="state" placeholder="State">
??????????????????????? <input name="zip" class="zip" placeholder="Zip Code">
??????????????????????? <div> </div>
??????????????????????? <select name="country">
??????????????????????????? <option value="0">Country</option>
??????????????????????????? <option value="CN">China</option>
??????????????????????????? <option value="US">United States</option>
??????????????????????????? <option value="CA">Canada</option>
??????????????????????? </select>
??????????????????? </label>
??????????????? </li><!--Postal Address-->
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>Home Phone No.</div>
??????????????????????? <input name="homephoe" type="tel">
??????????????????? </label>
??????????????? </li><!--Home Phone No.-->
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>Cell Phone No.</div>
??????????????????????? <input name="cellphoe" type="tel">
??????????????????? </label>
??????????????? </li><!--Cell Phone No.-->
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>Skype Name</div>
??????????????????????? <input name="skype">
??????????????????? </label>
??????????????? </li><!--Skype Name-->
??????????????? <li>
??????????????????? <label class="required">
??????????????????????? <div>Twitter</div>
??????????????????????? <span class="twitter_prefix">@</span>
??????????????????????? <input name="Twitter" class="twitter">
??????????????????? </label>
??????????????? </li><!--Twitter-->
??????????? </ul>
???????? </fieldset>
??????
??????? <div class="buttons">
??????? ?<input type="submit" value="Submit Order">
??????????? <input type="submit" id="saveOrder" value="Save Order">
??????? </div>
??? </form>
</body>
</html>
五、運(yùn)行效果：IE10.0 ,Google Chrome10.0,FireFox 4.0以上
