-
语言设置:
<body lang="en">
-
快捷键设置(使用Alt+所设字母):
<input type="text" name="txt" value="" accesskey="G"/>
作用:使用alt+G直接跳到文本框里
-
Tab切换(常用登录帐密切换):
<a href="http://www.baidu.com" accesskey="B" tabindex="2">百度</a>
<input type="text" name="txt" value="" accesskey="G" tabindex="1"/>
-
Xhtml简介:
是html的升级版,与html区别不大,为了兼容。
不同点:
Xhtml必须要加上命令头DOCTYPE文档类型,第一行设置文档版本,第二行文档类型定义,dtd文件中对每一个标签每一个属性都进行了约定,浏览器就遵循这些约定进行解析。第三行是引用命名空间,
作用:由于xml允许定义自己的标记,但你定义的标记和其他人定义的标记有可能相同,但表示不同的含义。当文档交换或者共享的时候就容易产生错误。为避免这种错误产生,xml采用名字空间声明,允许你通过一个网址来识别你的标记。
XHTML是HTML向xml过度的标记语言,它需要符合xml文档规则,因此,也需要定义名字空间,又因为XHTML1.0不能自定义标识,所以,它的名字空间都相同,就是:http://www.w3.org/1999/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
-
Xhtml与html升级的不同点(因为向xml过渡所以符合xml即是不同点)
语法:1.必须添加文档类型和命名空间
2.标签必须闭合
3.元素和属性必须小写,值必须双引,且必须有之(html可以没有如checked或readnoly)
-
Html5也是html的升级,较xhtml来说,它做了很多简化,例如命令头,<!DOCTYPE html>
<html></html>
Doctype不区分大小写,不用写那么长的标示,简化只有两个单词。Html也不用必须引用固定的命名空间了。
使用html,会使浏览器按照标准模式进行解析。
Html5为了做到最大兼容,会同时兼容html的写法和自创的简化写法。例如html版本:<meta http-equiv="Content-Type" Content="text/html charset=utf-8">
Html5版本:<meta charset="utf-8">
Html版本:标签必须闭合<br />
Html5版本:兼容<br>写法,也可以省略<li></li>为<li>.部分标签可以全部省略如<head><body><html>,也兼容无值得属性,如readonly等
html5简化
-
Html5元素:
新增元素
-
Html5的新规则:
HTML5 是 W3C 与 WHATWG 合作的结果。
新规则:
-
新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
-
减少对外部插件的需求(比如 Flash)
-
更优秀的错误处理
-
更多取代脚本的标记
-
HTML5 应该独立于设备
-
开发进程应对公众透明
新特性:
-
用于绘画的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
对本地离线存储的更好的支持
-
新的特殊内容元素,比如 article、footer、header、nav、section
-
新的表单控件,比如 calendar、date、time、email、url、search
- 新标签:Video,audio
<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持video标签(不支持会显示这里的内容)
</video>
Control属性供添加播放,暂停和音量控制。
兼容性:
使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,视频文件必须是 MPEG4 类型。
IE8不支持video,IE9将提供对使用 MPEG4 的 video 元素的支持
Dom方法属性:
Play(),pause(),load(),canPlayType
也可以这么写
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
- 新标签:drag 拖动
<div id="div1" ondrop="drop(event)"
οndragοver="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
οndragstart="drag(event)" width="336" height="69" />
- 新标签:Canvas 画布
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
- 新标签:SVG 矢量图
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
- 其他新元素参见w3School
-
Html新的表单元素
- Email 提交表单时,会自动验证 email 域的值。
- url 在提交表单时,会自动验证 url 域的值
- number在提交表单时,会自动验证是否数字
- range 滑动条
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
-
datalist 下拉框
-
keygen 密钥对生成器
-
output 脚本输出结果显示
新的 form 属性:
-
Autocomplete 提交一次后,显示以前填过的列表
-
Novalidate email等控件不验证了
新的 input 属性:
-
autofocus load页面后,自动获得焦点
-
form 某个form标签外,加上form id属性,即是一同提交
-
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
-
list 是输入域的选项列表
-
min, max 和 step
-
multiple 属性规定输入域中可选择多个值
-
pattern (regexp) email等控件不验证了
-
placeholder placeholder 属性提供一种提示(hint),描述输入域所期待的值。
-
required 非空
例子
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>