01、HTML5-初认识

JavaScript库CDN加速:

  百度: http://cdn.code.baidu.com/
  七牛云: http://www.staticfile.org/

zeptojs: http://www.zeptojs.cn/

一、新特性

• 用于绘画的canvas元素
• 用于媒体播放的video和audio元素
• 对本地离线存储的更好的支持
• 新的特殊内容元素(例如article、footer、header、nav、section)
• 新的表单控件(例如calendar、date、time、email、url、search)

二、新的结构化元素(语义化标签)

• <header></header>页眉 【用于页面头部的信息介绍】

  <header>
    ![](logo.png)
  </header>

• <hgroup><hgroup>页面中标题组合 【一个标题和一个子标题或标语组合】

<hgroup>
    <h1>标题1</h1>
    <h2>标题2</h2>
</hgroup>

• <nav></nav>导航

<nav>
    <a href="#">首页</a>
    <a href="#">财经</a>
    <a href="#">体育</a>
</nav>

• <footer></footer>页脚 【页面的底部或版块底部】

<footer>
   我是底部声明
</footer>

• <section></section>页面上的版块 【划分页面中不同区域】
  <article></article>页面中一套结构完整且独立的内容部分 【可以用来呈现论坛的一个帖子、杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可浮动的页面模块挂件】
  <aside></aside>主要内容相关的应用、侧边栏、广告、nav元素组

  <section>
      // 主体内容
      <article></article>
      // 侧边栏
      <aside></aside>
  </section>

• <figure></figure>对元素进行组合，一般用于图片或视频
  <figcaption></figcaption>figure的子元素，用于对figure的内容进行说明

  <figure>
      ![](test.png)
      <figcaption>图片内容的描述</figcaption>
  </figure>

• <time></time>表现时间或日期

  <p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>

• <datalist></datalist>选项列表，与input元素配合使用，来定义input可能的值(即提示内容)

  // 注意id要一致
  <input type="text" list="valList" />
  <datalist id="valList">
    <option value="javascript">javascript</option>
    <option value="html">html</option>
    <option value="css">css</option>
  </datalist>

• <details></details>描述文档或文档某个部分的细节
  <summary></summary>details元素的标题

  <details>
    <summary>联系方式:</summary>
    // 显示的具体内容
    <p>1380013800</p>
  </details>

• <dialog></dialog>定义一段对话

  <dialog>
    <dt>老师:</dt>
    <dd>1+1=?</dd>
                
    <dt>学生:</dt>
    <dd>等于3</dd>
                
    <dt>老师:</dt>
    <dd>非常好，答对了。</dd>
</dialog>

• <address></address>详细联系信息

  <address>联系方式: 1380013800</address>

• <mark></mark>需要标记的词或句子

  <p> 
    你的名字: <mark> 张三 </mark>
  </p>

• <progress></progress>定义进度条

  <progress max="100" value="73"></progress>

三、IE下的兼容(语义化标签的兼容)

• 添加自定义标签的方法1

  // 即先创建对应的自定义标签(对应标签中添加display: block;)
  document.createElement('haha');
  document.createElement('header');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('section');
  document.createElement('footer');
  // 在IE中是没有这些语义化标签的，所以在自定义好标签后，显示还是有问题。因为这些标签都是没有默认样式的！！！！ 

• 通过Google中的一个JS文件

  <!-- 通过Google的一个js文件来解决IE语义化兼容问题(带有功能的语义化标签还是不支持，如果需要功能自己JS添加)-->
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>

四、新增表单控件和表单属性

• 新的输入型控件

  1、email: 电子邮箱文本框，与普通的没有区别
      当输入不是邮箱时，验证不通过
      移动端的键盘会有变化
  2、tel: 电话号码
  3、url: 网页的url
  4、search: 搜索引擎
  5、range: 特定范围内的数值选择器
      属性: min、max、step(步进值)
      例如: 用JS来显示当前数值
  6、number: 只能包含数字的输入框
  7、color: 颜色选择器
  8、date: 日期
  9、datetime-local: 显示完整日期，不含时区
  10、time: 显示时间，不含时区
  11、month: 显示月

• 新增表单属性

  1、placeholder: 输入框提示信息
  2、autocomplete: 是否保存用户输入值
      默认为on，关闭提示选择off
  3、autofocus: 指定表单获取输入焦点
  4、list和datalist: 为输入框构造一个选择列表
        list值为datalist标签的id
  5、required: 此项必填，不能为空
  6、pattern: 正则验证 pattern=“\d{1,5}” 
  7、formaction: 在submit中定义提交地址 【在同一个form中可以提交到不同地址中】

为了手机方便查看: <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />