HTML5基础和语义化标签

Author: 刘老师(Aaron Lau) 武汉长乐教育，武汉PHP培训课程，版权所有，转载请注明！

HTML5基础和语义化标签

本课摘要

HTML5概述

HTML5多了些什么新特性?

HTML5难学吗?

HTML5做有动画的网页是如何实现的?

HTML5页面的基础架构

语义化的标签

HTML5 示例页面

1. HTML5概述

HTML5 发展到今天, 其实还有相当多的问题. 尤其是各个浏览器厂商的标准不统一. 这里面最拖后腿的, 依然是所有开发人员深恶痛绝的IE... :(

看一下HTML5规范的计划时间

1.2012年发布候选推荐版 2.2022年发布计划推荐版 3.正式版? 遥遥无期

虽说时间上看上去还早呢, 计划推荐版都得到2022年, 那是否可以到2022年再开始学HTML5呢? 你要是这么觉得那就大错特错了. 毕竟google 和 apple 两家也不是吃素的, 他们推出的浏览器chrome和safari, 有着共同的内核 webkit, 已经支持了相当多的HTML5 特性. 如果你做移动web开发或者只考虑支持HTML5 浏览器的桌面web开发, 那你完全现在就可以开始使用HTML5了.

2. `HTML5`多了些什么新特性?

HTML5 其实就是多了一些新的标签和一些些的API(例如播放视频和定位的API).

3. `HTML5`难学吗?

HTML5一点都不难, 把几个新标签用会即可.

新的API对javascript有一定的基础要求, 除了cavas外, 别的都还是比较好掌握的.

4. `HTML5`做有`动画`的网页是如何实现的?

亲, HTML5和HTML4一样, 只是个页面结构而已.

动画的实现和页面的布局, 都是依靠CSS3的, CSS3相对学起来稍微难一些.

5. `HTML5`页面的`基础架构`

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5页面基础架构</title>
        <meta charset="utf-8" />
    </head>

    <body>
    </body>
</html>

是否非常清爽?

6. `语义化`的标签

过去大量使用的<div id="footer"></div> 现在请使用 <footer></footer>代替!

<!-- 头部, 一个页面可有多个header -->
<header></header>

<!-- 尾部, 一个页面可有多个footer -->
<footer></footer>

<!-- section, web中的一块区域或内容组合 -->
<section></section>

<!-- article, 独立的文章内容 -->
<article></article>

<!-- aside, 相关内容, 引文或补充内容 -->
<aside></aside>

<!-- nav, 页面或区域导航 -->
<nav></nav>

7. `HTML5` 示例页面

<!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>

html5.css

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;
}

没有更多了下一篇课程

在线课堂