html5新增特性

一、html5新增特性

▶html5新属性

1、元素内容可被编辑属性：contenteditable="true"

2、所有支持contenteditable的元素都可被编辑：全局变量（写在script标签里）doucument.designMode="on"

3.input元素的新增属性：hidden=“hidden”

▶input元素type的新增属性值

   1、email，tel，url，time，datetime-local,number

   2、search（chrome下输入文字后，会多出一个关闭的X）

       

   3.time,datetime,datetime-local

      代码如下：<input type="time" value="time"/>
   <input type="datetime" value="datetime"/>

   <input type="datetime-local" value="datetime-local"/>

                     

    4、range:特定范围内的数值选择器

        <input type="range" name="range1" min="0" max="100" step="5"/>

         

     5、color:颜色选择器

         <input type="color"/>

        

▶HTML5新的表单控件

  1、属性autofocus="autofocus"

    定义给指定表单获取输入焦点

    如果给多个input标签设置autofocus="autofocus"，则只有第一个有焦点。

▶标签的语义化

 1、<header></header>

 2、<footer></footer>

 3、<article>//一篇文章，用户提交的评论内容，可互动的页面模块控件
      <section>1</section>
      <section>2</section>
      <section>3</section>
      <section>4</section>
      <aside>侧边栏</aside>//侧边栏：友情链接，附属导航或广告单元
   </article>

   4、 <nav>//导航，包含链接的的一个列表

       <h2>新卓越计算机课程</h2>
       <ul>
           <li><a href="#">javascript</a></li>
           <li><a href="#">html+css</a></li>
       </ul>

          </nav> 

        

  5.<figure>//图文
    <figcaption>新卓越计算机</figcaption>
       <img src="aaa.png"/>
       <img src="bbb.png"/>
       <img src="ccc.png"/>

        </figure>

      

  6、 time双标签

       <p> 我在 <time datetime="2008-02-14">情人节</time> 有个约会。 </p>

  7、选项列表

            <input type="text" list="valList" />
   <datalist id="valList">
       <option value="javascript" label="脚本">javascript</option>
       <option value="html" label="内容">html</option>
       <option value="css"  label="样式">css</option>
   </datalist> 

                   

   8、用于摘录引用

       <details open="open">
       <summary>新卓越计算机</summary>
       <p>西安邮电的培训教育</p>
        <p>西安邮电的培训教育</p>
         <p>西安邮电的培训教育</p>

        </details>

       

  9、黄色标记

      <mark>标记</mark>

  10、hgroup（双标签）：页面上的一个标题组合，一个标题和一个子标题，或者标语的组合

         <hgroup>

        <h1>h1</h1>
        <h2>h2</h2>

         </hgroup>

  11、address（双标签）

        定义文章或页面作者的详细内容，为斜体显示

  12、计数仪表//如剩余电量、速度表

        low指定计数仪表指定范围的最小值，必须大于min

   high指定计数仪表指定范围的最大值，必须小于max

   optimum计数仪表有效范围内的最佳值，如果大于high则越大越好，如果小于low则越小越好

        <meter min="2" max="50" low="10" high="40" optimum="45" value="47"></meter>

       

       注意：value值必写，不写默认为0

  13、定义进度条

       <progress max="100" value="76">//无min属性
       <span>76</span>%
        </progress>

      

 14、秘钥对生成器，提供一种验证用户的可靠方法。

   当我们提交表单时，它生成两个键，一个私钥，一个公钥。

   私钥储存于客户端，公钥则被发到服务器，公钥可用于之后验证用户的客户端证书。

        <form action="demo_******.asp" method="get">
       Username: <input type="text" name="usr_name" />
       Encryption: <****** name="security" />// 选择高级或中级，点击提交按钮，自动生成
       <input type="submit" />

         </form>

   ok!!!如有不对的，望大家指正！！！