《HTML5实战》Lesson02

Week02     2016/09/21上午1-4节

一、Modernizr.js的作用

解决不支持css3+html5浏览器的兼容性

Modernizr.js:为HTML5和CSS3而生!-前端开发博客

Modernizr的介绍和使用-刘一痕-ChinaUnix博客

Modernizr.js入门指南 - 推酷

二、Modernizr.js的下载

官方网站:

Modernizr: the feature detection library for HTML5/CSS3

GitHub - Modernizr/Modernizr: Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

三、Lesson02创建表单

HTML 5 教程

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>&nbsp;</div>
                        <input name="address2" placeholder="Addrees Line 2">
                        <div>&nbsp;</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>&nbsp;</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以上

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个爱瞎折腾的程序猿

dotnet使用Selenium执行自动化任务

源码地址:https://coding.net/u/yimocoding/p/WeDemo/git/tree/SeleniumDemo/SeleniumDemo

1281
来自专栏听雨堂

从MapX到MapXtreme2004[2]-图层操作

Mapx中基本的图层操作还是比较简单的,集中在对Layers和Layer的处理上,对别的没有太多要求。   在MapXtreme中,要完成类似功能,发生了一点...

2258
来自专栏偏前端工程师的驿站

WPF一步一脚印系列(1):万事起头难

  一直从事Asp.Net的开发,而C/S的开发方面简直是一片空白,于是从上星期开始就痛下决心开始学习WPF。我采取的策略是网上看基础资料+做简单的demo练习...

2489
来自专栏流媒体人生

内嵌Activex的Activex插件开发

介绍:   如今在许多流媒体视频网站(youku,tudou......)我们都会发现,观看视频之前都会有一段时间的广告,甚至在观看视频途中也会插入一些 广...

983
来自专栏向治洪

iOS开发技巧篇

在iOS开发中,有一些技巧可以提高程序猿的开发效率。 1,Xcode真机调试 Xcode 7推出之前,想要真机调试,iOS开发者必须花$99购买苹果开发者账号,...

2709
来自专栏青山绿水

新版Begin主题侧边栏和两栏标题美化

这个美化教程原先是在朱曙明博客看到的,他文章里提到6.27之后的begin主题无法使用这个教程,我就自己琢磨琢磨,看了下css,对比对比,就让我琢磨出了新版本的...

772
来自专栏码神联盟

【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?

不是说下大雨吗?玩儿呐?搁哪呢?大雨搁哪呢?下丢啦?哗啦到海里去啦?让五娃给吞啦?南方整的那老大,看不起副中心咋的?还能不能 雨~露~均~沾~?你说我小...

3796
来自专栏QQ音乐技术团队的专栏

一个循环动画引起的内存泄露问题总结

本文主要记录项目中遇到的一个内存泄露问题:由于一个循环动画引起的内存泄露,并且这个问题也是偶现的,在后面的隐藏问题里会说明。

4442
来自专栏高性能服务器开发

用两张图告诉你,为什么你的App会卡顿?

有什么料? 从这篇文章中你能获得这些料: 知道setContentView()之后发生了什么? 知道Android究竟是如何在屏幕上显示我们期望的画面的? 对A...

7998
来自专栏编程微刊

ztree实现左边动态生成树,右边为具体信息功能

7722

扫码关注云+社区

领取腾讯云代金券