Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

1,408

HTML5:语法改变

  • 2013-05-09
  • 暂无评论
  1. DOCTYPE的声明不用写很长的版本信息<!DOCTYPE HML>即可(当使用工具时,可以加入system识别符<!DOCTYPE HTML STSTEM "about:legacy-compat"> 不区分大小写,不区分单引号双引号)
  2. 字符编码的设置
    可以简化为<meta charset="UTF-8">原先的继续可以使用<meta http-equiv="Content-Type" comtent="text/html;charset=UTF-8">以下方式被认为是错误的<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">
  3. 不允许写结束标记的元素(<br />的形式,不能写成<br></br>,后者被认为是错误的):area、base、br、col、command、embed、hr、img、input、keygen、link、meta‘param、source、track、wbr
  4. 可以省略结束标记的元素:li、dt、dd、p、rt、rp‘optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
  5. 可以省略全部标记的元素(不写,但还是隐式存在,可以通过节点访问):html、head、body、colgroup、tbody
  6. 具有boolean值的属性可以不写属性值,只写属性名:disabled、readonly、checked等
    以前的写法有 checked、checked=”checked”、checked=””等
  7. 省略引号:当属性值不包括空字符串、<、>、=、单引号、双引号等特殊字符时,可以省略两边引号<input type=”text”> <input type=’text’ > <input type=text>
  8. 新增的结构元素:
    1. a)Section:表示页面重点额一个内容区块、比如章节、页眉、页脚、页面中的其他部分
    2. b)Article:表示页面中的一块与上下文不想管的独立内容,譬如博客中的文章
    3. c)Aside:表示article元素的内容之外的、与article元素的内容相关的辅助信息
    4. d)Header:表示页面中一个内容区块或整个页面的标题
    5. e)Hgroup:用于对整个页面或页面中的一个内容区块的标题进行组合
    6. f)Footer:表示整个页面或页面中一个内容区块的脚注
    7. g)Nav:表示页面中导航链接的部分
    8. h)Figure:表示一段独立的流内容,一般表示文档主体流内容中的一个i额独立单元。使用figcaption为figure元素组添加标题
  9. 新增的其他元素
    1. a)Video:定义视频,比如电影片段或其他视频流
    2. b)Audio:定义音频,比如音乐或其他音频流
    3. c)Embed:用来插入各种多媒体,可以是midi、wav、aiff、au、MP3
    4. d)Mark:用来在视觉上向用户呈现需要突出显示或高亮显示的文字。
    5. e)Progress:表示运行中的进程,可以使用progress来显示javascript中耗费时间的函数的进程
    6. f)Time:表示日期或时间
    7. g)Ruby:表示注释(中文注音或字符)
    8. h)Rt:表示注释(中文注音或字符ruby)的解释或发音
    9. i)Rp:ruby注释使用,定义不支持ruby元素的浏览器所显示的内容
    10. j)Wbr:表示软换行,与br区别在,br表示此处必须换行,wbr在浏览器窗口或父级元素足够宽时不进行换行,不够时进行换行。
    11. k)Canvas:表示图形。本身没有行为,但提供一个绘图API给javascript,使脚本可以把想绘制的图形绘制在该区域。
    12. l)Command:表示命令按钮,如单选按钮、复选框或按钮。
    13. m)Details:表示用户要求得到并且可以得到细节信息,与summary配合使用,summary提供标题或图例,当用户点击标题时会显示出细节信息,summary是details的第一个子元素。
    14. n)Datagrid:表示可选数据的列表,以树形列表形式来显示
    15. o)Keygen:表示生成密钥
    16. p)Output:表示不同类型的输出,如脚本输出
    17. q)Source:为媒介元素(video、audio)定义媒介资源
    18. r)Menu:表示菜单列表,当希望列出表单控件时使用该标签
  10. 新增的input类型:
    1. a)Email:表示必须输入e-mail地址的输入框
    2. b)url:表示必须输入URL地址的输入框
    3. c)number:表示必须输入数值的输入框
    4. d)range:表示必须输入一定范围内数值的输入框
    5. e)date pickers:可供选取日期和时间的新型输入框
      • i.date:日、月、年
      • ii.month:月、年
      • iii.week:周、年
      • iv.time:时间:小时和分钟
    6. v.datetime:时间、日、月、年(UTC时间)
    7. vi.datetime-local:时间、日、月、年(本地时间)
  11. 废除的元素:
    1. a)能使用css替代的元素:basefont、big、center、font、s、strike、tt、u
    2. b)不再使用frame框架:frameset、frame、noframes,继续支持iframe框架
    3. c)只有部分浏览器支持的元素:applet、bgsound、blink、marquee
    4. d)其他被废除的元素:
      • i.Rb:用ruby代替
      • ii.Acronym:用abbr代替
      • iii.Dir:用ul代替
      • iv.Isindex:用form与input结合的方式代替
      • v.Listing:用pre代替
      • vi.Xmp:用code代替
      • vii.Nextid:用guids代替
      • viii.Plaintext:用“text/plian”MIME类型代替
  12. 新增的属性:
    1. a)表单属性:
      • i.autofocus:自动获得焦点,input(type=text)、select、textarea、button
      • ii.placeholder:对用户提示可以输入内容,input(type=text)、textarea
      • iii.form:执行属于哪个表单,可以放置在任意位置,input、output、select、textarea、button、fieldset
      • iv.required:必填表单,input(type=text)、textarea
      • v.multiple:允许在上传文件时一次上传多个文件
      • vi.autocomplete、main、max、multiple、pattern、step:input元素
      • vii.formaction、enctype、method、novalidate、target:重置form元素的对应属性,input、button
      • viii.novalidate:取消提交时进行有关检查,input、button、form
    2. b)链接属性:
      • i.Media:规定目标url是为什么类型的媒介设备进行优化,只能在href存在时使用
      • ii.Hreflang,rel:保持与a、link的一致,area
      • iii.Sizes:可以与icon结合使用(通过rel)指定关联图标(icon)的大小
      • iv.Target:保持与a的一致,base
    3. c)其他属性:
      • i.Reversed:指定列表倒序显示,ol
      • ii.Charset:编码设定,meta
      • iii.Type:让菜单可以以上下文菜单、工具条、列表菜单3种形式,menu
      • iv.Label:为菜单定义一个可见的标注,menu
      • v.Scoped:规定样式的作用范围,style
      • vi.Async:定义脚本是否异步执行,script
      • vii.Mainifest:开发理线web应用程序时它与api结合使用,定义一个url,在这个url上描述文档的缓存信息,html
      • viii.Sanbox、seamless、srcdoc:提高页面安全性,防止不信任的web页面执行某些操作,iframe
    4. d)废除的属性:
      • i.Rev:用rel替换,link、a
      • ii.Charset:目标资源的http头中Content-type,link、a
      • iii.Shape、coords:使用area代替a,a
      • iv.Longdesc:使用a元素链接到较长描述,img、iframe
      • v.Target:省略,link
      • vi.Nohref:省略,area
      • vii.Profile:省略,head
      • viii.Version:省略,html
      • ix.Name:用id替换,img
      • x.Scheme:职位某个表单域使用scheme,meta
      • xi.Archive、classid、codebase、codetype、declare、standby:使用data与type属性类调用插件,需要使用这些属性来设置参数时,使用param属性,object
      • xii.Valuetype、type:用name与value属性,不声明MIME,param
      • xiii.Axis、abbr:可以使用更详细的title,td、th
      • xiv.Scope:目标资源的http头中Content-type,td
      • xv.Align:使用css样式,caption、input、legend、div、h1~h6、p
      • xvi.Alink、link、text、vlink、background、bgcolor:使用css样式,body
      • xvii.Align、bgcolor、border、cellpadding、cellspacing、frame、rules、width:使用css样式,table
      • xviii.Align、char、charoff、height、nowrap、valign:使用css样式,tbody、thead、tfoot
      • xix.Align、bgcolor、char、charoff、height、nowrap、valign、width:使用css样式,td、th
      • xx.Align、bgcolor、char、charoff、valign:使用css样式,tr
      • xxi.Align、char、charoff、valign、width:使用css样式,col、colgroup
      • xxii.Align、border、hspace、vspace:使用css样式,object
      • xxiii.Clear:使用css样式,br
      • xxiv.Compact、type:使用css样式,ol、ul、li
      • xxv.Compact:使用css样式,dl、menu
      • xxvi.Width:使用css样式,pre
      • xxvii.Align、hspace、vspace:使用css样式,img
      • xxviii.Align、noshade、size、width:使用css样式,hr
      • xxix.Align、frameborder、scrolling、marginheight、marginwidth:使用css样式,iframe
      • xxx.Autosubmit:menu
    5. e)全局属性:全新概念,可以对任意元素使用的属性
      • i.contentEditable:允许用户标记元素中的内容,所以该元素必须是可以获得鼠标焦点的元素,该属性可以被继承,相对应的还有isContentEditable进行控制
      • ii.designMode:指定整个页面是否可编辑,各浏览器的支持不同
      • iii.hidden:可见不可见状态,所有元素都允许使用
      • iv.spellcheck:拼写检查,针对input(type=text)、textarea使用,IE不支持,需明确声明属性值true或false
      • v.tabindex:html5对于空间的遍历是由元素所处的位置决定的,所以不需要该属性了,但也有可能出现开发者不想要的结果,可以通过设置该值为-1来避免元素被选中,html4中,负值是无效的


back up ↑

无觅相关文章插件,快速提升流量