Logan 如果前面还有路，答应我，跑下去...

学习HTML5--HTML5标签变化

2017-09-06
Logan
HTML
 

<!DOCTYPE>标签

  • 定义和用法

    <!DOCTYPE>声明必须是HTML文档的第一行，位于<html>标签之前

  • 不是HTML标签

    指示web浏览器关于页面使用哪个HTML版本进行编写的指令

文档类型定义（DTD）

  • DTD

    DTD可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构

  • 在HTML中

    DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容
    HTML的DTD中，使用XML定义html标签规范

  • HTML5

    HTML5不基于SGML，所以不需要引用DTD

  • HTML元素和文档类型

    HTML元素和文档类型

HTML5新增标签

结构标签

结构标签（块状元素）—-可以理解为有意义的div

  • <article> —–标记定义一篇文章

  • <header> —–标记定义一个页面或者一个区域的头部

  • <nav> —–标记定义导航链接

  • <section> —–标记定义一个区域

  • <aside> —–标记定义页面内容部分的侧边栏

    <aside> 常与 <article> 配合使用

  • <hgroup> —–标记定义文件中一个区块的相关信息

  • <figure> —–标记定义一组媒体内容以及它们的标题

  • <figcaption> —–标记定义<figure>元素的标题

      <figure>
      <figcaption>标题</figcaption>
      <p>内容</p>
      ...
  </figure>

  • <footer> —–标记定义一个页面或者一个区域的底部

  • <dialog> —–标记定义一个对话框（会话框）类似微信

  • 补充说明

    header/section/aside/article/footer 标签不嵌套使用
    header/section/footer 标签优先级最高，置于外层
    aside/article/figure/hgroup/nav 标签优先级次之，至于内层
    之后的嵌套块状元素用div

多媒体标签

  • <audio>标签 —–标记定义一个音频

      <audio src="../xxx.mp3" autoplay="autoplay" loop="-1" controls="controls"></audio>

    autoplay:自动播放
    loop:重复次数，-1为无限循环
    controls:控制器

      <audio autoplay="autoplay">
      <source src="../xxx.mp3" type="audio/mpeg" />
  </audio>

    type属性表示转码
    为了解决不同浏览器对不同音频格斯的兼容性

  • <video>标签 —–标记定义一个视频

       <video src="../xxx.mp4" autoplay="autoplay" controls="controls" width="1024" height="768"></video>

    autoplay:自动播放
    controls:控制器
    width:宽度
    height:高度

       <video controls="controls">
       <source src="../xxx.mp4" type="audio/mp4" />
   </video>

    type属性表示转码
    为了解决不同浏览器对不同视频格斯的兼容性

  • <source>标签 —–标记定义媒体资源

  • <canvas>标签 —–标记定义图片(画布)

  • <embed>标签 —–标记定义外部的可交互的内容或插件，比如flash

      <embed src='../xxx.swf' allowFullScreen='true' quality='high' width='220' height='140' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>

  • 多媒体标签的意义

    多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

Web应用标签

状态标签

  • <meter> —–状态标签（实时状态显示：气压、气温等）

    当前兼容Chrome、Opera

      <meter value="220" min="20" max="380" low="200" high="240" optimum="220">sad</meter>

    meter标签

    value:当前值
    min:最小值，默认值是0
    max:最大值，默认值是1
    low:定义度量的值位于哪个点，被界定为低的值
    high:定义度量的值位于哪个点，被界定为高的值
    optimum:最佳值.如果该值高于high属性，则意味着值越高越好。如果该值低于 low 属性的值，则意味着值越低越好。

  • <progress> —–状态标签（任务过程：安装、卸载）

    当前兼容Chrome、Firefox、Opera

      <progress value="80" max="100">80%</progress>

    progress标签

    value:当前值
    max:最大值，默认值是1

列表标签

  • <datalist> —–为input标记定义一个下拉列表，配合option

    当前兼容Firefox、Opera、Chrome

      <input placeholder="请选择您喜欢的手机品牌" list="phoneList" />
  <datalist id="phoneList">
      <option value="iPhone">iPhone</option>
      <option value="Samsung">Samsung</option>
      <option value="Huawei">Huawei</option>
      <option value="hTC">hTC</option>
      <option value="Meizu">Meizu</option>
  </datalist>

    datalist标签

  • <details> —–标记定义一个元素的详细内容，配合summary

    当前兼容Chrome

      <details open="open">
      <summary>树下的猫</summary>
      <p>我是一只坐在树下的貓，每天我都坐在树下，看花花世界，人海茫茫……
  我每天都会做相同的梦，梦里看到一位公子，身患重病，危在旦夕。公子身边有一名女子，她的眼里尽是关切和深深的依恋。梦里，她喂药给他，他流着泪拉着她的手对他说：“谢谢你，下辈子我一定好好待你，来世还要娶你……” 
  </p>
  </details>

    关闭状态

    details标签

    打开状态

    details标签

    open:默认打开状态

  • <menu> —–命令列表（目前所有主流浏览器都不支持）

      <menu type="toolbar">
      <li>
          <menu label="File">
              <button type="button">New...</button>
              <button type="button">Open...</button>
              <button type="button">Save...</button>
          </menu>
      </li>
      <li>
          <menu label="Edit">
              <button type="button">Cut...</button>
              <button type="button">Copy...</button>
              <button type="button">Paste...</button>
          </menu>
      </li>
  </menu>

  • <menuitem> —–menu命令列表标签（只有Firefox8.0+支持）

  • <command> —–menu标记定义一个命令按钮（只有IE9支持）

其他标签

注释标签

  • <ruby> —–标记定义注释或音标
  • <rt> —–标记定义对ruby的注释内容文本

  • <rp> —–告诉那些不支持ruby元素的浏览器如何去显示

      <p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>

    ruby标签

    <rp>标签不要放在<rt>标签内

其他标签

  • <mark> —–标记定义有标记的文本（黄色选中状态）

      <p>妈妈叫我回家的时候顺路买一盒<mark>牛奶</mark>，需要很新鲜的那种。</p>

    mark标签

  • <output> —–标记定义一些输入类型，计算表单结果配合<form>标签的oninput属性使用

      <form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
      <input type="text" id="price" value="5000">
      *<input type="number" id="number" value="1">
      =<output name="totalPrice" for="price number"></output>
  </form>

    output标签

  • <keygen> —–标记定义表单里一个生成的键值（加密信息传送）
  • <time> —–标记定义一个日期/时间（目前所有主流浏览器都不支持）

删除的标签

纯表现的元素(结构与表现分离)

<basefont> <big> <center> <font> <s> <strike> <tt> <u>

对可用性产生负面影响的元素

<frame> <frameset> <noframes>

产生混淆的元素

<acronym> <applet> <isindex> <dir>

重定义标签

显示不变，只是表达的含义进行了重新定义的标签

  • <b> —–代表内联文本， 通常是粗体， 没有传递表示重要的意思
  • <i> —–代表内联文本， 通常是斜体， 没有传递表示重要的意思
  • <dd> —–可以同<details>与<figure> 一同使用，定义包含文本, <dialog>也可用
  • <dt> —–可以同<details>与<figure> 一同使用，汇总细节, <dialog>也可用
  • <hr> —–表示主题结束，而不是水平线，虽然显示相同
  • <menu> —–重新定义用户界面的菜单，配合<commond>或者<menuitem>使用
  • <small> —–表示小字体，例如打印注释或者法律条款
  • <strong> —–表示重要性而不是强调符号

新布局意义

  • 语义化

    HTML5可以让很多更语义化的结构化代码标签代替大量无意义的div标签

    1. 这种语义化的特性提升了网页的质量和语义
    2. 减少了以前用于CSS调用的class和id属性
  • 对搜索引擎的友好

    新的结构标签带来的是网页布局的改变及其提升对搜索引擎的友好

上一篇 前端PS切图

下一篇 学习HTML5--HTML5属性变化

留言

目录