你的努力

Posted by:
努力记

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

4,356

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 ↑

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