html5入门介绍（第一讲）——黄丹华

2011-06-03 21:59 danhuang 阅读(628) 评论(0) 编辑收藏举报

•HTML5

HTML5开发进程

•08年工作草案

•09年停滞一年

•10年重新启动

HTML5计划

•2012年发布候选推荐版

•2022年发布计划推荐版本

html5新的认识包括兼容性、实用性、互通性、通用访问性，其中兼容性主要是html5中有一个代码替换功能，就是如果浏览器不支持某种标签会自动的执行被替代的内容：示例代码如下——

<canvas>
    你的当前浏览器不支持canvas
</canvas>

大家可以试着把这段代码在每个浏览器中尝试一下，结果肯定是在IE中可以看到这句话，如果支持的话是不会看到任何东西的。

1、效率和用户优先

他把抽象层次分为4个，考虑最多的是用户、其次编程者、浏览器、规范者。例如：

<div id="html5"></div>
<div id='html5'></div>
<div id=html5></div>

html5支持以上三种情况，这对于用户和、编程者是一件非常好的事情，因为可以使用三种，同时降低编程错误率，但是对于浏览器和代码规范者就比较头疼了，因为这里涉及到三种，那么作为浏览器的话就必须兼容这三种，那样就会给浏览器带来负荷。

2、表现和内容分离

HTML5很大程度的将css与尽可能的分离例如：big、center、font、basefont这些标签都已经移除，也就是说在我们最新版本的HTML5浏览器中，这些标签都是已经失效的。

3、化繁为简

新的简化的DOCTYPE

新的简化字符集声明

HTML旧版DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 DOCTYPE

<!DOCTYPE html>

HTML旧版字符集申明

HTML5字符集

HTML旧版DOCTYPE

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5 DOCTYPE

 <!DOCTYPE html>

HTML旧版字符集申明

           <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

HTML5字符集

<meta charset=“gbk”>

可以看到我们的HTML5还是把用户和编程者放在首位。

4、无插件范式

HTML5提供了对很多功能的原生支持，不需要安装插件。主要是通过CSS和JavaScript的方式控制页面的布局。

HTML5新功能

html的新元素列表

其中前面两个，接下来详细讲解，第二个到倒数第二个都为新添加的html标签，主要是经过长期的使用而演化而来的，其主要是例如：

<div id="header"></div>
<div id="footer"></div>
<div id="section"></div>

接下来讲解一下这些标签的使用方法：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>HTML5</title>
  <link rel="stylesheet" href="html5.css">

</head>

<body>

   <header>
     <h1>Header</h1>
     <h2>Subtitle</h2>
     <h4>HTML5 Rocks!</h4>
   </header>

    <div id="container">

        <nav>
          <h3>Nav</h3>
          <a href="">Link 1</a>
          <a href="">Link 2</a>
          <a href="">Link 3</a>
        </nav>

        <section>
            <article>
                <header>
                    <h1>Article Header</h1>
                </header>
                <p>Lorem ipsum dolor HTML5 nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna.</p>
                <p>Per inceptos himenaeos. Quisque feugiat, justo at vehicula pellentesque, turpis lorem dictum nunc.</p>
                <footer>
                    <h2>Article Footer</h2>
                </footer>
            </article>
            <article>
                <header>
                    <h1>Article Header</h1>
                </header>
                <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio</p>
                <footer>
                    <h2>Article Footer</h2>
                </footer>
            </article>
        </section>

        <aside>
            <h3>Aside</h3>
            <p>HTML5: "Lorem ipsum dolor nunc aut nunquam sit amet, consectetur adipiscing elit. Vivamus at est eros, vel fringilla urna. Pellentesque odio rhoncus</p>
        </aside>
        <footer>
            <h2>Footer</h2>
        </footer>
    </div>
</body>

</html>

css如下：

/* html5 css file, Copyright ?Pro HTML5 Programming */

body {
    background-color:#CCCCCC;
    font-family:Geneva,Arial,Helvetica,sans-serif;
    margin: 0px auto;
    max-width:900px;
    border:solid;
    border-color:#FFFFFF;
}

header {
    background-color: #F47D31;
    display:block;
    color:#FFFFFF;
    text-align:center;
}

header h2 {
    margin: 0px;
}

h1 {
    font-size: 72px;
    margin: 0px;
}

h2 {
    font-size: 24px;
    margin: 0px;
    text-align:center;
    color: #F47D31;
}

h3 {
    font-size: 18px;
    margin: 0px;
    text-align:center;
    color: #F47D31;
}

h4 {
    color: #F47D31;
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 20px #888;
    -webkit-transform: rotate(-45deg);
    -moz-box-shadow: 2px 2px 20px #888;
    -moz-transform: rotate(-45deg);
    position: absolute;
    padding: 0px 150px;
    top: 50px;
    left: -120px;
    text-align:center;
    
}

nav {
    display:block;
    width:25%;
    float:left;
}

nav a:link, nav a:visited {
    display: block;
    border-bottom: 3px solid #fff;
    padding: 10px;
    text-decoration: none;
    font-weight: bold;
    margin: 5px;
}

nav a:hover {
    color: white;
    background-color: #F47D31;
}

nav h3 {
    margin: 15px;
    color: white;
}

#container {
    background-color: #888;
}

section {
    display:block;
    width:50%;
    float:left;
}

article {
    background-color: #eee;
    display:block;
    margin: 10px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

article header {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;

}

article footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 5px;
}

article h1 {
    font-size: 18px;
}

    
aside {
    display:block;
    width:25%;
    float:left;
}

aside h3 {
    margin: 15px;
    color: white;
}

aside p {
    margin: 15px;
    color: white;
    font-weight: bold;
    font-style: italic;
}
    

footer {
    clear: both;    
    display: block;
    background-color: #F47D31;
    color:#FFFFFF;
    text-align:center;
    padding: 15px;
}

footer h2 {
    font-size: 14px;
    color: white;
}


/* links */
a {
    color: #F47D31;
}

a:hover {
    text-decoration: underline;
}

其中重点是<h4>HTML5 Rocks!</h4>这里实现了旋转效果，主要是通过css3加html5实现的，效果如下：

会员力量，点亮园子希望

刷新页面返回顶部

danhuang

html5入门介绍（第一讲）——黄丹华

•HTML5

HTML5新功能

About