TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

H5&C3之初认识

zyz
2018-06-13
/
0 评论
/
806 阅读
/
正在检测是否收录...
06/13

JavaScript库CDN加速:

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

一、新特性

  • 用于绘画的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" />`
赞(0)
评论 (0)