19>menu元素,表示菜单列表,当希望列出表单控件时使用该标签 Red> Blue新增的input元素的类型 1>email类型,表示必须输入E-mail地址的文本输入框 2>url类型,表示必须输入URL地址的文本输入框 3>range类型,表示必须输入一定范围内数字值的文本输入框 4>Date Pickers拥有多个可供选取日期和时间的新型输入文本框 date选取日,月,年 month选取月、年 week选取周和年 time选取时间(小时和分钟) datetime选取时间、日、月、年(UTC时间) datetime-local选取时间、日、月、年(本地时间)废除的元素
1>能使用css替代的元素 对于basefont,big,center,font,s,strike,tt,u这些元素,由于它们的功能都是纯粹为画面展示服务的,而HTML5中提倡把画面展示×××放在css样式表中统一编辑,所以将这些元素废除了 2>不再使用frame框架,只支持iframe框架,或者用服务器 方创建的由多个页面组成的复合页面的形式, 3>只有部分浏览器支持的元素,对开applet,bgsound,blink,marquee等元素,由于只有部分浏览器支持这些元素,特别是bgsound元素以及marquee元素,只被Internet Explorer所支持,所以在HTML5中被废除,其中applet元素可由embed元素或object元素替代,bgsound元素可由audio元素替代,marquee可以由JavaScript编程的方式所替代 4>其他被废除的元素, 1.rb元素使用ruby元素替代 2.acronym,使用abbr元素替代 3.dir元素,使用ul元素替代 4.isindex,使用form元素与input元素相结合的方式替代 5.listing元素,使用pre元素替代 6.xmp元素,使用code元素替代 7.nextid元素,使用GUIDS替代 8.plaintext元素,使用"text/plian" MIME类型替代新增的属性和废除的属性
1新增的属性 1.表单相关的属性 1>可以对input(type=text),select,textarea与button元素指定autofocus属性,它以指定属性的方式 让元素在画面打开时自动获得焦点 2>可以对input(type=text) 与textarea元素指定的placeholder属性,它会对用户的输入进行提示,提示用户可以输入的内容 3>可以对input,output,select,textarea,button与feildset指定from属性,声明它属于哪个表单,然后将其放置在页面上任何位置,而不是表单之内 4>可以对input(type=text)与textarea元素指定required属性,该属性表示在用户提交的时候进行检查,检查该元素内一定要有输入内容 5>为input元素增加了几个新的属性:autocomplete,min,max,multiple,pattern与step 6>为input元素与button元素增加了新属性formaction,formenctype,formmethod,formnovalidate与formtarget,他们可以重载from元素的action,enctype,method,novalidate与target属性.为fieldset元素增加了disabled属性,可以把它的子元素设为disabled(无效状态) 7>为input元素、button元素、form元素增加了novalidate属性,该属性可以取消提交时进行的有关检查,表单可以被无条件地提交 2.链接相关的属性 1>为a与area元素增加了media属性,该属性规定目标URL是为什么类型的媒介/设备进行优化的,只能在href属性存在时使用 2>为area元素增加了hreflang属性与rel属性,以保持与a元素、link元素的一致性 3>为link元素增加了sizes属性。该属性可以与icon元素结合使用(通过rel属性),该属性指定关联图标(icon元素)的大小 4>为base元素增加了target属性,主要目的是保持与a元素的一致性 3.其他属性 1>为ol元素增加了reversed属性, 2>meta元素增加charset属性 3>为menu元素增加了两个新的属性,type与label.label为菜单定义一个可见的标注,type属性让菜单可以以上下文菜单,工具条与列表菜单的三种形式出现 4>为style元素增加scoped属性,用来规定样式的作用范围 5>为script元素增加了async属性,定义脚本是否异步执行 6>为html元素增加manifest,开发离线Web应用程序时它与API结合使用,定义一个URL,在这个URL上描述文档的缓存信息 7>为iframe元素增加三个属性sandbox,seamless与srcdoc,用来提高页面安全性,防止不信任的Web页面执行某些操作四.全局属性
HTML5新增了一个"全局属性"的概念,指可以对任何元素都使用的属性. 一>.contentEditable属性 该属性值是一个布尔值属性,可以被指定为true或false 二>.designMode属性用来指定整个页面是否可编辑 该属性只能在JavaScript脚本里被修改。该 属性有两个值 "on"和"off". 修改方法: document.designMode="on" 三>.hidden属性,在HTML5中,所有的元素都有一个hidden属性.该属性类似于input元素中的hidden元素. 四>.spellcheck属性是HTML5针对input元素(type=text)与textarea这两个文本输入框提供的一个新属性,它的功能为对用户输入的文本内容进行拼写和语法检查。它书写在一个特殊的地方,就是必须明确声明属性值为true或false,书写方法如下
一.新增的主体结构元素 1>article元素代表文档,页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以 是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件,或其他任何独立的内容.除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注 e.g: My Fruit Spinner 2>section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及标题组成(注意:标题部分位于它的内部,而不是它的前面)。但section元素并非一个普通的容器元素,如果一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素 苹果 苹果 .植物类水果,多次花果...("苹果" 文章正文)
section元素没有标题是不合理的,但是nav元素或aside元素没有标题是合理的 最后,关于section元素的使用禁忌,总结如下: (1)不要将section元素用作设置样式的页面容器,那是div元素的工作 (2)如果article元素、aside元素或nav元素更符合使用条件,不要使用section元素 (3)不要为没有标题的内容区块使用section元素 3>nav元素,是一个可以用作页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的链接组都要被放进nav元素,只需要将主要的、基本的链接组放进nav元素即可. nav元素可用于以下场合 (1)传统导航条 (2)侧边栏导航条 (3)页内导航,页内导航的作用是在本页面的几个主要的组成部分之间进行跳转 (4)翻页操作 注意:在html5中不要用menu元素代替nav元素,menu元素是用在一系列发出命令的菜单上的,是一种交互性的元素,常使用在Web应用程序中 4>aside元素用来表示当前页面或文章的附属信息部分,它可以包含当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分 5>time元素与微格式,微格式是一种利用html的class属性来对网页添加附加信息的方法,time元素明确地对机器的日期和时间进行编码,并且以让人易读的方式来展现它2010年11月13日 编码时机器读到的部分在datetime属性里,而元素开始标记和结束标记中间的部分则显示在网页上.datetime属性中日期与时间之间要用"T"文字分隔 6>pubdate属性是一个可选的、boolean值的属性,它可以用到article元素中的time元素上,意思是time元素代表了文章(article元素的内容)或整个网页的发布日期二.新增的非主体结构元素 1>header元素是一种具有引导和导航作用的结构元素,通常用来旋转整个页面或页面内的一个内容区块的标题,但也可以包含其他内容,例如数据表格、搜索表单或相关的logo图片 header元素通常包括至少一个heading元素(h2-h7),或包括hgroup元素,或包括其他元素(table或form),还可以包括nav元素 2>hgroup元素是将标题及子标题进行分组的元素。通常会将h2-h7元素进行分组。譬如一个内容区块的标题及其子标题算一组 3>footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等 4>address元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子愚笨、真实地址、电话号码等。三.HTML5结构
1>大纲 ,简单来说是文档中各内容区块的结构编排。内容区块可以使用标题元素(h2-h7)来展示各级内容区块的标题。综合运用各级内容区块的标题创建好文档的目录后,该目录就是一个大纲了 关于内容区块的编排,可分为"显示编排" 与"隐匿编排"两种方式 (1)显式编排批明确使用section等元素创建文档结构,在每个内容区块内使用标题(h2-h7,hgroup等) (2)隐式编排内容区块,指不明确使用section等元素,而是根据页面中所书写的各级标题(h2-h7,hgroup)等把内容区块自动创建出来。因为html5分析器只要看到书写了某个级别的标题,就会判断存在相应的内容区块。 (3)标题分级,h2级别最高,h7级别最低 为了使用文档结构清晰,请尽量使用显式编排 (4)不同的内容区块可以使用相同级别的标题2>对新的结构元素使用样式 我们需要使用css追加如下声明, (1) 追加block声明 article,aside,dialog,figure,footer,header,legend,nav,section{display:block;} 然后就可正常使用样式 nav{float:left;width:20%} article{float:right;width:79%} (2)IE8及之前的浏览器不支持用css的方法使用这些尚未支持的结构元素,需要使用JavaScript脚本,如下所示: 3>article元素的样式 一个网页中可能有多个独立的article元素,每一个article元素都允许有自己的标题与脚注,并允许对自己的从属元素单独使用样式。 如: header{display:block;color:red;text-align:right;} article header{color:blue;text-align;center}
本文名称:HTML5与CSS3
标题路径:http://myzitong.com/article/gigidc.html