html5新增的功能

时间:2022-11-06 14:26:28

首先html5已经不像html4了,html5已经不是SGML的子集

html5主要是关于图像、位置、储存,多任务等功能的增加

绘画canvas;

绘画主要是由JavaScript来控制是一种绘图工具

<script>

onload=function(){
                canvas=document.getElementById("canvas");
                var pen=canvas.getContext("2d");
                function (){
                    pen.clearRect(0,0,70,70);
                    pen.beginPath();
                    for (var i=0;i<5;i++) {
                        pen.arc(0,0,i*10, 0,0.5*Math.PI,false);
                        pen.lineWidth=4;
                        pen.strokeStyle="#008000";
                        pen.stroke();
                    }
                    pen.stroke();
                    pen.closePath();
                    
                }

</script>

<body>
        <canvas id="canvas" width="600px" height="500px">
            
        </canvas>
    </body>

本地储存localstorage和sessionstorage

以前的本地储存(cookie)很小只有4k,cookie数据始终在同源的http请求中携带(就是会在浏览器和服务器之间来回传递)

而localstorage和sessionstorage不会不会把自己的数据传递给服务器,仅仅是在本地保存。

储存大小:

cookie数据仅有4k

localstorage和sessionstorage虽然有大小限制,但是比cookie大得多,达到了5M

有期时间:

localstorage存储持久数据,浏览器关闭后数据不消失除非主动删除数据

sessionstorage储存的数据在当前浏览器窗口关闭后自动删除

coolie设置的cookie过期时间之前一直有效,即使关闭窗口和浏览器也是一样

语义化标签更好的内容元素如:article、footer、header、nav、section、aside

片段类的内容类型包含许多HTML5元素。HTML5定义了一种新的语义化标记来描述元素的内容。语义化标记不会记我们马上感受到什么好处,但是他简化了HTML页面设计将来搜索引擎在抓取和索引网页的时候,也绝对会利用到这些元素的优势。

header:标记头部区域的内容(用于整个页面或者页面中的一块区域)

footer:标记脚部区域的内容(用于整个页面或者页面中的一块区域)

section:Web页面中的一块区域

article:独立的文章内容

nav:导航类辅助内容

aside:相关内容或者引文

      <header>
            <nav id="nav1">
                <a href="# " id="aa1"><img id="img1" src="img/home.png"/>INTRODUCTION</a>
                <a href="# " id="aa"><img id="img2" src="img/dropdown.png"/>DROPDOWN</a>
                <a href="# " id="aa2"><img id="img3" src="img/leftslider.png"/>LEFT SIDEBAR</a>
                <a href="# " id="aa3"><img id="img4" src="img/q4.png"/>RIGHT SIDEBAR</a>
                <a href="# " id="aa4"><img id="img5" src="img/noslider.png"/>NO SIDEBAR</a>
            </nav>
            <h1>SIDEBAR TYPED</h1>
            <p>Cause you're not here with me.Cause I'm lonely as can be.</p>
            <br />
            <div id="div1"></div>
        </header>



    <footer id="foo">
            <h3>If you could see me now. you would know just how. </h3>
            <aside id="as5">
                <p>
                    Cause I know I'll never breathe your love again.
                </p>
                <ul>
                    <li><img src="img/birds.png"/>
                        <span>
                            Cause I know I'll never  
                        </span>
                    </li>
                </ul>
            </aside>
            <p id="pp">
                If you could see me now. you would know just how.
            </p>
        </footer>

表单控件,calendar、date、time、email、URL、search;