WEB学习笔记(二):HTML5比常用的HTML多了哪些?

html5使得文档更加具有语义,内容更加多样化,表现力更强。

1.基本标签扩充:

   语义标签扩充:写一篇文章不需要div构建就能完成

   <html>

     <head>

         <title>

         </title>

    </head>

     <body>

        <article><!--新增的文章标签,用于定义文章,与以前的<h><p><br>标签很好的结合-->

              <header><!--用于定义文档的头部,更具有语义-->

               <h1></h1>

              <header>

              <section><!--用于定义文档的中的节,功能与div差不多,更具有语义-->

                  <details><!--定义元素的细节。-->

                     <summary>

                     </summary><!--为 <details> 元素定义可见的标题。-->

                 </details>

                 <dialog> </dialog><!--定义对话框或窗口。-->

                   <p>

                           <bdo dir="rtl"><bdi></bdi></bdo></p><!--定义文字方向。-->

                    <p>

                            <mark></mark><!--定义有记号的文本。比用span或者样式包裹更加方便-->

                            <br/>

                     </p>

              </section>
          <footer><!--用于定义文档的尾部,比用div定义更具有语义-->

              <time></time><!--用于定义时间-->

           </footer>

         </article>

         <aside>

         </aside>

     </body>

   </html>

2.多媒体标签扩充:

   让object退出功成身退 

 <html>

     <head>

         <title>

         </title>

    </head>

     <body>

         <audio></audio><!--定义音频文件-->

         <video></video><!--定义视频文件-->

         <wbr></wbr><!--定义视频文件-->

        <canvas></canvas><!--定义画布文件,跟windows系统带的画板一样-->

        <progress></progress><!--进度条-->

        <source></source><!--媒体来源-->

       <track></track>><!--定义用在媒体播放器中的文本轨道。-->

        <svg></svg><!--定义矢量图形-->

     </body>

   </html>

3.编程扩展

     <embed> </embed>

     <rp></rp> 

     <rt></rt>

     <ruby></ruby>

  1. 存储

  本地存储

     localStorage 

     <script type="text/javascript">

          localStorage.lastname="Smith";

          document.write("Last name: " + localStorage.lastname);

     </script>


     sessionStorage

       <script type="text/javascript">

sessionStorage.lastname="Smith";

document.write(sessionStorage.lastname);

       </script>

应用缓存

       <html manifest="/example/html5/demo_html.appcache">

  1. 地理位置

   Geolocation

       <script>

var x=document.getElementById("demo");

function getLocation()

  {

  if (navigator.geolocation)

    {

    navigator.geolocation.getCurrentPosition(showPosition);

    }

  else{x.innerHTML="Geolocation is not supported by this browser.";}

  }

function showPosition(position)

  {

  x.innerHTML="Latitude: " + position.coords.latitude + 

  "<br />Longitude: " + position.coords.longitude;

  }

        </script>

  1. 本地服务与服务器交互

web worker

server-sent event

 7.还加了一些属性和事件
         事件基本是js操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值