第十三天学习：Html5新增/删除标签

关键字：html5新增/删除标签

晨跑计划：

 

学习计划：

• 学习html5中新增/删除的标签

学习记录：

• 新增的标签：
  • 结构标签（将之前的div划分成各种有具体语义的标签）
    • section
      • 表示页面中的一个内容区块，比如章节、页面、页脚或页面的其他部分，可以和h1、h2...等标签结合使用，表示文档结构
      • 属性：cite 值：url  假如section有摘自web的话要用到
      • 注意：不要将section作为用来设置样式或行为的“钩子”容器，那是div的工作
        • 如果article、aside或nav更符合状况，不要使用section
        • 不要为没有标题的内容区块使用section
    • article
      • 表示页面中一块与上下文不相关的独立内容，比如一篇文章
      • article的潜在来源有论坛帖子、报纸文章、博客条目、用户评论
    • aside
      • 表示article标签内容之外的、与article标签相关的辅助信息
      • aside的内容可作为文章的侧栏

      • 1）被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、名次解释，等等。

        <article>
          <h1>…</h1>
          <p>…</p>
          <aside>…</aside>
        </article>

        2）在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以使友情链接，博客中的其它文章列表、广告单元等。

        <aside>
          <h2>…</h2>
          <ul>
            <li>…</li>
            <li>…</li>
          </ul>
          <h2>…</h2>
          <ul>
            <li>…</li>
            <li>…</li>
          </ul>
        </aside>

    • header
      • 表示页面中的一个内容区块或整个页面的标题
    • hgroup
      • 表示对整个页面或页面中的一个内容区块的标题进行组合
    • footer
      • 表示整个页面或页面中一个内容区块的脚注，一般来说，它会包含创作者的姓名、创作日期以及创作者的联系方式
      • footer元素内的联系方式应该位于address标签中
    • nav
      • 表示页面中导航链接的部分
      • 如果文档中有“前后”按钮，则应该把它们放在nav元素中
    • figure
      • 表示一段独立的流内容，一般表示文档主体内容中的一个独立单元，使用figcaption标签为figure标签组添加标题
      • figure元素的内容应该与主内容相关，但如果被删除，则不应该对文档流产生影响

• • • main
      • 表示页面中的主要内容
  • 表单控件标签（input属性）
    • email
      • 必须输入email
    • url
      • 必须输入url地址
    • number
      • 必须输入数量
    • range
      • 必须输入一定范围内的数值，显示为滑动条
    • Date Pickers
      • 拥有多个可供选取日期和时间的新输入类型：
      • date-选取日、月、年
      • month-选取月、年
      • week-选取周和年
      • time-选取时间（小时和分钟）
      • datetime-选取时间，日、月、年（UTC时间）
      • datetime-local-选取时间，日、月、年（本地时间）
    • search
      • 用于搜索域，域显示为常规的文章域
    • color
  • 媒体标签
    • video
      • 定义视频，想电影片段或者其他视频流
      • 属性：
        • autoplay  值：autoplay 描述：视频在就绪后马上播放
        • controls 值：controls 描述：向用户显示控件，比如播放按钮
        • height 值：pixels 描述：设置视频播放器的高度
        • lop 值：lop 描述：自动循环播放视频
        • muted 值：muted 描述：规定视频的音频输出应该被静音
        • poster 值：url 描述：规定下载时显示的图像，或者在用户点击播放按钮前显示的图像
        • preload 值：preload 描述：加载完视频在播放
        • src 值：url 描述：要播放视频的url
        • width 值：pixels 描述：设置视频播放的宽度
    • audio
      • 定义音频，如音乐或者其他音频流
      • 属性
        • autoplay、controls、loop、muted、preload、src
    • embed
      • 用来嵌入内容（包括各种媒体），格式可以是midi、wav、aiff、wu、mp3、flash等
      • 属性
        • height、src、type（定义嵌入内容的类型）、width
  • 其他功能标签
    • mark
      • 定义有记号文本，用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字
    • progress
      • 表示运行中的进程，可以使用progress元素显示JS中消耗时间的函数的进程
      • 属性
        • max  值：number 描述：规定任务一共需要多少工作
        • value  值：number 描述：规定已经完成多少任务
    • time
      • 表示时间或日期，也可以同时表示两个
      • 该元素能够以机器可读的方式对日期和时间进行编码，举例说，用户代理能够把把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果
      • 属性
        • datetime  值：datetime 描述：规定日期/时间，由元素的内容给定日期/时间
        • pubdate 值：pubdate 描述：指示<time>元素中的日期/时间是文档的发布日期
    • ruby
      • 表示ruby注释
    • wbr
      • 该元素表示软换行
    • canvas
      • 表示图形，比如图表和其他图像，元素本身没有行为，仅提供一块画布，但它会把一个绘图API展现给客户端JS以使脚本能够把想绘制的东西绘制到这块画布上
      • 属性：height、width
    • command
      • 表示命令按钮，比如单选按钮、复选按钮、或按钮
      • 只有当command位于menu元素内，该元素才是可见的，否则不会显示这个元素，但可以用它规定键盘快捷键
    • detalis
      • 表示用户要求得到并且可以得到的细节信息，它可以与sunmmary元素配合使用，summary元素提供标题或图例，标题是可见的，用户点击标题时，会显示细节信息，summary元素应该是details元素的第一个子元素
      • 属性：open 值：open 描述：定义detalis是否可见
    • detalist
      • 表示可选数据的列表，与input元素配合使用，可以制作植入值的下拉列表
    • keygen
      • 表示生产密钥
      • 属性：
        • autofocus  值：autofocus 描述：使keygen字段在页面加载时获得焦点
        • challenge  值：challenge 描述：将keygen的值设置为在提交时询问
        • disabled  值：disabled 描述：禁用keytag字段
        • form  值：formname  描述：定义该keygen字段所属的一个或多个表单
        • keytype 值：rsa 描述：rsa生成RSA密钥
        • name  值：fieldname 描述：定义元素的唯一名称，name属性用于在提交表单时搜集字段的值
    • output
      • 定义不听类型的输出
      • 属性：
        • for   值：element_id 描述：定义输出域相关的一个或多个元素
        • form  值：form_id 描述：定义输入字段所属的一个或多个表单
        • name 值：name 描述：定义对象的唯一名称（表单提交时使用）
    • menu
      • 表示菜单菜单列表，当希望列出表单控件时使用该标签
      • 属性：
        • label  值：text  描述：规定菜单的可见标签
        • type  值：popup/toolbar  描述：规定要显示哪种菜单类型 
• 删除的标签：
  • 可以用CSS代替的标签
    • basefont、big、font、s、strick、tt、u
  • 不在使用frame
    • frameset、frame、noframes，只支持iframe框架，或者用服务器创建由多个页面组合的符合页面的样式
  • 只有个别浏览器支持的标签
    • applet、bgsound、blink、marquee
  • 其他不常用标签
    • 废除rb，改用buby
    • 废除acronym，改用abbr
    • 废除dir，改ul
    • 废除isindex，改用form与input相结合的方式
    • 废除filsting，改用per
    • 废除xamp，改用code
    • 废除nextid，改用guids
    • 废除plaintex，改用“text/plain”mime类型替代

扩展阅读：

• 关于html5
  • html5出现的意图
    • web浏览器之间的兼容性很低，文档结构不够明确，web应用程序的功能受到了限制
• 

问题的记录与解答：

• 怎样理解移除figure标签对网页其他内容无影响?
  • figure标签用于对元素进行组合
  • 新的html标签header、footer、dialog、aside、figure等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div
  • 就好比以前容器都是div，但是在html5里，头部的容器就是header，脚部的容器就是footer，这些标签功能上和div并没有什么区别，但是可以增加代码的可读性
• html5与html4的语法区别：
  • DOCTYPE声明：原版本需要明确声明版本，现在只需要<!DOCTYPE html>
  • 字符编码：html4需要声明很多，html则很省略，<meta charset="utf-8">
  • 可以进行省略的标签
    • 
  • 具有boolean值得属性
  • 省略引号
• br与wbr的区别：
  • br元素表示此处必须换行，而wbr元素是浏览器窗口或父级元素的宽度足够宽时，不进行换行，而当宽度不够时，主动在此处换行
• article和section的异同
  • section和article可以互相嵌套，也就是说它们没有上下级关系，section可以包含article，article也可以包含section，使用上差不多，都可以用h1-h6，都有一个主体
  • article是文章，文章就是一段完整的独立的内容
  • section就是块，某种意义上可以理解为div，但是比div的意思更加明确一点