《HTML5经典实例》读书笔记二
来源:互联网 发布:flac那个播放软件好 编辑:程序博客网 时间:2024/06/05 06:01
第二章:增强性标记和技术
HTML5更加强以语义的方式应用标记,所以废弃了一些表现性的元素和属性:
HTML5中废弃的元素和属性的完整列表
让IE识别HTML5元素:
IE不会将CSS应用于它不识别的元素。IE9之前的版本还不识别大多数的HTML5元素。解决方案:
css方面:将元素设置为display:block;
js方面:创建与你想要使用的HTML5元素相同名称的一个DOM元素。
<script> document.createElement("header"); document.createElement("nav");</script>
这个技术有效,但是为页面上所有的HTML5元素创建DOM元素,还是会变得很麻烦。
还可以从http://remysharp.com/2009/01/07/html5-enabling-script/ 下载脚本,将其放在HTML文件的头部。或者,从Google代码库中链入该脚本;
<!--[if It IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
使用javascript检测HTML5功能
Modernizr—一个javascript库,可以用过来检测HTML5和CSS3功能在用户浏览器中是否可用,并且,当该功能当前并不被支持时,允许创建备用方案。步骤:
首先,从http://modernizr.com下载Modernizr JavaScript库。将这个文件的引用包含在HTML文档的<head>
之中。该脚本必须使用一个常规的<script>
标签。不能使用脚本装载器技术动态地加载它.
一旦运行了这段脚本,就会检测浏览器是否支持audio(例子)元素,然后做两件事:
- 给javascript属性Modernizr.audio分配一个值(true或者false)。
- 给HTML标签添加一个类。如果浏览器支持audio元素,它将会添加一个名为“audio”的类;如果不支持,就会添加一个名为“no-audio”的类。
然后:
javascript:
<script> if(Modernizr.audio){ //如果支持则运行 ... }</script>
css:
.no-audio{ display:none;}.audio{ ...}
Modernizr并非可以用来评估和解决这一问题的唯一工具,Modernizr支持的每个功能的示例代码通常,UA嗅探(即用户代理嗅探)或浏览器嗅探技术用来确定用户使用的是哪个浏览器。然而这两个方法不是很可靠,Modernizr会特定检查支持哪些功能,所以更加可靠。
验证HTML5
大多数Web浏览器尝试并修补无效的编码,如果你的代码是无效的,则浏览器可能尝试以不可意料的方式来修补错误。此外,移动浏览器对于错误代码的容忍性差一些。因此,在桌面浏览器中能够很好地显示的一个无效页面,可能在手机上崩溃。
W3C的“Unicorn”Unified验证器—-验证HTML5和CSS3.
Validator.nu HTML5验证器
第三章:表单
与表单有关的input的type值
除了tel,其他的格式不对都会由用户代理警告用户,并且不会提交表单数据。
如果用户代理不支持输入类型,则它会显示一个文本输入字段。
定制默认的错误消息,给每个输入字段添加一个title属性,例如:
<input type="url' name="website" title="That doesn't look like a valid web address.">
要准确测试浏览器的支持,加在Mike Taylor的支持测试页面,该页面位于http://www.miketaylr.com/code/input-type-attr.html
创建可编辑的下拉列表
datalist元素来创建一个建议选项的列表,其中的建议选项使用option元素,并且通过list属性将该列表与一个input元素关联起来。因为有可能会碰到没有实现datalist的浏览器(显示文本输入字段),所以添加select元素。
<form> <label for="donation">Donation amount</label><input type="text" name="donation" list="donations"> <datalist id="donations"> <select name="donation"> <option value="10.00">10.00</option> <option value="20.00">20.00</option> <option value="30.00">30.00</option> </select> </datalist></form>
要求必须添写一个表单字段
required属性,在表单上的0个或多个表单字段上指定required属性。当用户提交表单的时候,任何必须的字段如果留有空白,都会导致浏览器停止提交并且显示一条错误消息。
<input type="text" required>
页面加载时,自动聚焦一个表单字段
autofocus属性,只能针对每个文档指定一次该属性,不是针对每个表单。
<input type="text" autofocus>
显示占位符文本
placeholder属性,用来指定当用户没有聚焦到表单字段的时候所显示的提示文本。
<input type="text" placeholder="put something here">
关闭自动填充
autocomplete属性,设置值为off。默认情况下,autocomplete对于所有的表单字段来说都是打开的(on)。如果是on,则当你登陆曾经访问过的Web站点的时候,可能要依赖浏览器的功能来记住你的密码,并且实现自动填充的功能。
<input type="password" name="pwd" autocomplete="off">
限定输入值
pattern属性,用来指定一个正则表单式,它将用来验证用户的验证。用于pattern的正则表达式,必须使用与Javascript中相同的语法。并且pattern属性必须匹配整个值,否则用户将会看到错误消息。
<input type="tel" name="phone" pattern="[2-9][0-9]{2}-[0-9]{3}-[0-9]{4}" title="North American format:xxx-xxx-xxxx">
“`
- 《HTML5经典实例》读书笔记二
- 《HTML5经典实例》读书笔记一
- 《HTML5经典实例》读书笔记三
- HTML5读书笔记(二)
- HTML5 WebSocketAPI实例(二)
- PHP经典实例读书笔记--字符串
- PHP经典实例读书笔记--数字
- PHP经典实例读书笔记--变量
- PHP经典实例读书笔记--函数
- PHP经典实例读书笔记--表单
- PHP经典实例读书笔记 (数组)
- PHP经典实例读书笔记 (变量)
- HTC经典实例二
- HTML5与JQuery炫酷经典实例
- Apache 经典实例读书笔记1---- 安装
- PHP经典实例读书笔记--日期和时间
- PHP经典实例读书笔记--类和对象
- PHP经典实例读书笔记--Web基础
- 基于Zxing的二维码扫描解析库——ZxingPlus
- 蓝桥杯-入门训练-Fibonacci数列
- Android框架之Butterknife的使用
- Cron 触发器及相关内容 (第三部分)
- java 泛型基础概念
- 《HTML5经典实例》读书笔记二
- web前端性能优化总结
- Loadrunner视频教程汇总
- jrtplib项目的了解
- Cron 触发器及相关内容 (第四部分)
- Java中使用OpenSSL生成的RSA公私钥进行数据加解密
- LeetCode 35 Search Insert Position
- android根据uri或文件绝对路径获取文件基本信息
- Android框架之EventBus的使用