《HTML5实战》Lesson02
Week02 2016/09/21上午1-4节
一、Modernizr.js的作用
解决不支持css3+html5浏览器的兼容性
Modernizr.js:为HTML5和CSS3而生！-前端开发博客
Modernizr的介绍和使用-刘一痕-ChinaUnix博客
二、Modernizr.js的下载
官方网站：
Modernizr: the feature detection library for HTML5/CSS3
三、Lesson02创建表单
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)实体符号：
(10)在dreamwaver内添加Goolge 浏览器
四、运行代码-----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 元素定义标题（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>五、运行效果：IE10.0 ,Google Chrome10.0,FireFox 4.0以上
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016.09.21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读