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)

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

• 页眉 【用于页面头部的信息介绍】

  

    ![](logo.png)
  

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

    
标题1
    
标题2

• 导航

    首页
    财经
    体育

• 页脚 【页面的底部或版块底部】

   我是底部声明

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

  

      // 主体内容
      

      // 侧边栏
      

  

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

  

      ![](test.png)
      
图片内容的描述
  

• 表现时间或日期

  
 我们在每天早上 9:00 开始营业。 

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

  // 注意id要一致
  
  

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

  

    
联系方式:
    // 显示的具体内容
    
1380013800
  

• 定义一段对话

  

    
老师:
    
1+1=?
                
    
学生:
    
等于3
                
    
老师:
    
非常好，答对了。

• 详细联系信息

  
联系方式: 1380013800

• 需要标记的词或句子

  
 
    你的名字:  张三 
  

• 定义进度条

三、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文件

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

• 新的输入型控件

  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中可以提交到不同地址中】

为了手机方便查看: