h5新特性和viewport

h5新特性

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

h5新表单

<input type="text" name="username">
<input type="number" name="" required="">
<input type="tel" name="">
<input type="search" name="" disabled="" placeholder="sdasdsaddsaddsa">
<input type="url" name="">
<input type="email" name="">
<input type="date" name="">
<input type="month" name="">
<input type="week" name="">
<input type="time" name="">
<input type="range" name="">
<input type="color" name="">
<input type="image" name="" src="sss.jpeg">

h5表单属性

• required 必须要填写的项目
• placeholder 用户提示
• disabled 禁用
• form 可以通过id名把一个表单控件关联到某个form

h5新标签

• details

  <details open="">
    <summary>标题一</summary>
    <summary>标题二</summary>
    <summary>标题三</summary>
  

  </details>

open属性可以展开列表

detail

• dialog

  <dialog open>This is a 对话框</dialog>
  

dialog

• figure

    <figure>
    <figcaption>图表标题</figcaption>
    <div>tu1</div>
    <div>tu2</div>
    <div>tu3</div>
    </figure>
  

figure

• map

  ![](sss.jpeg)
         <map name="planetmap" id="planetmap">
    <area shape="rect" coords="100,100,200,200" href="h5新表单.html" alt="eye">
          </map>
  

• meter

  <meter min="0" max="100" value="50"></meter>
  

meter

• progress

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

progress

• ruby

  <ruby>
  漢 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
  </ruby>
  

ruby

• abbr (有seo优化功能的标签)

  The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
  

abbr

• 有关引入，引用的标签

     <cite>引入：cite</cite>
  <blockquote>引入：blockquote</blockquote>
  <q>引入：q</q>
  

• code 显示正常文字

        <code>var sum = 0;
      sum=a+b;</code>
  

• pre 保留换行和空格

  <pre>var sum = 0;
  sum=a+b;
  </pre>
  

viewport

• width:可以设置html的宽度，在移动端一般设置为device-width。initial-scale: 第一次进入页面的时候，整个页面的缩放比例。
• minimum-scale:2.0;最小缩放比例.最小缩放比例2.0页面最小是原来的两倍
• user-scalable=no 设置是否允许用户缩放，no不允许缩放，yes允许缩放
• maximum-scale: 2.0;最大缩放比例.最大缩放比例2.0页面最大是原来的两倍