接上 关于HTML/HTML5(一)http://www.jianshu.com/p/33fc7840c079
学习HTML5的最佳网站没有之一http://www.w3school.com.cn/html5/index.asp
HTML5简介:
HTML5 是最新的 HTML 标准, 它是专门为承载丰富的 web 内容而设计的,并且无需额外插件,它拥有新的语义、图形以及多媒体元素, 它提供的新元素和新的 API 简化了 web 应用程序的搭建,它是跨平台的,被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。
HTML5支持无属性值(disabled),支持属性值无引号,支持属性值用单引号引起来,支持属性值用双引号引起来。
以下 HTML 4.01 元素已从 HTML5 中删除:
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>
HTML5支持:
- HTML5 中新的语义元素。(如果使用 HTML4 的话,通过类属性来设置页面元素的样式:header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...)
article 文档内的文章。规定独立的自包含内容,可以独立于网站其他内容进行阅读。应用场景:论坛,博客,新闻,
aside 页面内容之外的内容(比如侧栏)。应该与周围内容相关。
details 用户可查看或隐藏的额外细节。
footer 文档或节的页脚,应该提供有关其包含元素的信息。
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。可以在一个文档中使用多个元素。
header 文档或节的页眉,应该被用作介绍性内容的容器。一个文档中可以有多个元素。
main 文档的主内容。
mark 重要或强调的内容。
nav 文档内的导航链接。旨在定义大型的导航链接块。不过,并非文档中所有链接都应该位于元素中!
section 文档中的节。(节(section)是有主题的内容组,通常具有标题),可以将网站首页划分为简介、内容、联系信息等节。
summary 是 details 元素的可见标题。
time 日期/时间。
figcaption 是figure元素的标题。
figure 自包含内容,比如图示、图表、照片、代码清单等。
HTML5的figcaption元素和figure元素
在书籍和报纸中,与图片搭配的标题很常见。
标题(caption)的作用是为图片添加可见的解释。
通过 HTML5,图片和标题能够被组合在<figure>元素中。
<img>元素定义图像,<figcaption>元素定义标题。
注意:<article>和
在 HTML5 标准中,
我们能够使用该定义来决定如何嵌套元素吗?不能!
在因特网上,您会发现
您还会发现
注释: Note Newspaper: The sports articles in the sports section, have a technical section in each article.
HTML4到HTML5改变的内容:
参考手册:http://www.w3school.com.cn/tags/html_ref_dtd.asp
1.文档类型 ()
2.编码 (,为了确保恰当的解释,以及正确的搜索引擎索引,在文档中对语言和字符编码的定义越早越好,在
3.为IE添加支持的脚本/shiv (后面有讲)
4.添加了语义化元素(
除了以上元素,还增加了以下元素:
与其他文本不同的文本方向。
ruby 注释(用于东亚字体)。
- 可以向 HTML 添加新元素,并为其定义样式(<
myHero>)( JavaScript 语句document.createElement("myHero"),仅适用于 IE。)
Internet Explorer 的问题
上述方案可用于所有新的 HTML5 元素,但是:
注意:Internet Explorer 8 以及更早的版本,不允许对未知元素添加样式。
幸运的是,Sjoerd Visscher 创造了 "HTML5 Enabling JavaScript","the shiv":
以上代码必须位于
元素内。所有浏览器,不论新旧,都会自动把未识别元素当做行内元素来处理。
建议始终使用小写
表单:
HTML5中新增表单元素:
type IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No
例子:
例子2:
datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:
Webpage:
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
目前,浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。
例子:
= = = = = = = = = = = =
HTML5新增输入类型:number,color,date,datetime,datetime-local,email,month,range,search,tel,time,url,week(注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。)
(Opera 对新的输入类型的支持最好。不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持,仍然可以显示为常规的文本域。)
type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No
数字输入:
PS:提示:iPhone 中的 Safari 浏览器支持 number 输入类型,并通过改变触摸屏键盘来配合它(显示数字)。
颜色输入:
滑块控件:
邮件输入(会自动验证 email 域的值):
PS:iPhone 中的 Safari 浏览器支持 email 输入类型,并通过改变触摸屏键盘来配合它(添加 @ 和 .com 选项)。
搜索输入:
电话输入:
URL输入(会自动验证 url 域的值):
PS:提示:iPhone 中的 Safari 浏览器支持 url 输入类型,并通过改变触摸屏键盘来配合它(添加 .com 选项)。
Date Pickers:
日期输入:
月份输入:(允许用户选择月份和年份。)
周/星期输入:(允许用户选择周和年。)
时间输入:
日期时间输入:(允许用户选择日期和时间(有时区)。)
日期时间输入:(允许用户选择日期和时间(无时区)。)
HTML新增表单属性:
新的属性:
autocomplete,autofocus,form,form overrides(formaction,formenctype,formmethod,formnovalidate,formtarget),height 和 width,list,min 和 max,step,multiple,pattern (regexp),placeholder,required
新的
Last name: form="form1">
表单重写属性(form override attributes)允许重写 form 元素的某些属性设定,有:
formaction 重写表单的action属性
formenctype 重写表单的enctype属性
formmethod 重写表单的method属性
formnovalidate 重写表单的novalidate属性
formtarget 重写表单的target属性
表单重写属性适用于以下类型的标签:submit 和 image。
formaction属性规定当提交表单时处理该输入控件的文件的 URL。适用于 type="submit" 以及 type="image"。(如"demo_admin.asp")
formenctype属性规定当把表单数据(form-data)提交至服务器时如何对其进行编码(仅针对 method="post" 的表单)。适用于type="submit" 以及 type="image"。(如设置为"multipart/form-data")
formmethod属性定义用以向 action URL 发送表单数据(form-data)的 HTTP 方法。适用于 type="submit" 以及 type="image"。(如post)
formnovalidate属性,如果设置,则规定在提交表单时不对 元素进行验证。可用于 type="submit"。(值为true/false)
formtarget属性规定的名称或关键词指示提交表单后在何处显示接收到的响应。可与 type="submit" 和 type="image" 使用。(如"_blank")
height 和 width属性,用于 image 类型的 input 标签的图像高度和宽度。(注释:请始终规定图像的尺寸。)
list属性,引用的
min 、max和step属性,用于为包含数字或日期的 input 类型规定限定(约束)。规定元素的最小值和最大值以及合法数字间隔。适用于以下类型的 标签:date pickers、number 以及 range。
multiple属性,规定输入域中可选择多个值。适用于以下输入类型:email 和 file。(值为true/false)
pattern (regexp)属性,规定用于验证 input 域的正则表达式。适用于以下输入类型:text、search、url、tel、email和 password。(提示:请使用全局的 title 属性对模式进行描述以帮助用户。)
placeholder属性,提供一种提示(hint),描述输入域所期待的值。该提示会在用户输入值之前显示在输入字段中,在输入域获得焦点时消失。适用于以下输入类型:text、search、url、tel、email 以及 password。
required属性,必须在提交之前填写输入域(不能为空)。适用于以下输入类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。(值为true/false)
novalidate属性,规定在提交表单时不应该验证 form 或 input 域。适用于