HTML5学习笔记

图片 2
永利皇宫402

Html5新特性:

HTML5学习笔记(一),HTML5学习笔记(

Html5新特性:

1.兼容性 2.合理性 3.效率 4.安全性 5.分离 6.简化 7.通用性 8.无插件  
HTML5组织: 1.WHATWG 2.W3C 3.IETF   HTML5功能:
Canvas、Channel消息传送、Cross-document消息传送、Geolocation、MathML、Microdata、Server-Sent
Events、Scalable Vector Graphics(SVG)、WebSocket API及协议、Web Origin
Concept、Web storage、web SQL database、Web Workers、XMLHttpRequest
Level2   HTML设计理念: 1.避免不必要的复杂性   如:<!DOCTYPE
html>     <meta charset=”UTF-8″> 2.支持已有的内容
3.解决现实的问题 4.求真务实 5.平稳退化 6.最终用户优先   简单的网页布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            header,nav,article,footer{
                border: solid 1px #666;
                padding: 10px;
                margin: 6px;
            }
            header{
                width: 500px;
            }
            nav{
                float: left;
                width: 60px;
                height: 100px;
            }
            article{
                float: left;
                width: 406px;
                height: 100px;
            }
            footer{
                clear: both;
                width: 500px;
            }
        </style>
    </head>
    <body>
        <header>导航</header>
        <nav>菜单</nav>
        <article>内容</article>
        <footer>底部说明</footer>
    </body>
</html>

图片 1

Html5新特性:
1.兼容性2.合理性3.效率4.安全性5.分离6.简化7.通用性8.无插件HTML5组织:1.WHATWG2.W3C3.IETFHT…

1.兼容性

2.合理性

3.效率

4.安全性

5.分离

6.简化

7.通用性

8.无插件

 

HTML5组织:

1.WHATWG

2.W3C

3.IETF

 

HTML5功能:

Canvas、Channel消息传送、Cross-document消息传送、Geolocation、MathML、Microdata、Server-Sent
Events、Scalable Vector Graphics(SVG)、WebSocket API及协议、Web Origin
Concept、Web storage、web SQL database、Web Workers、XMLHttpRequest
Level2

 

HTML设计理念:

1.避免不必要的复杂性

  如:<!DOCTYPE html>

    <meta charset=”UTF-8″>

2.支持已有的内容

3.解决现实的问题

4.求真务实

5.平稳退化

6.最终用户优先

 

简单的网页布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            header,nav,article,footer{
                border: solid 1px #666;
                padding: 10px;
                margin: 6px;
            }
            header{
                width: 500px;
            }
            nav{
                float: left;
                width: 60px;
                height: 100px;
            }
            article{
                float: left;
                width: 406px;
                height: 100px;
            }
            footer{
                clear: both;
                width: 500px;
            }
        </style>
    </head>
    <body>
        <header>导航</header>
        <nav>菜单</nav>
        <article>内容</article>
        <footer>底部说明</footer>
    </body>
</html>

图片 2

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图