教程目录

语义化标签

2021年12月20日更新

HTML5 概述

HTML5 发展到今天，其实还有相当多的问题。尤其是各个浏览器厂商的标准不统一。
这里面最拖后腿的，依然是所有开发人员深恶痛绝的 IE 浏览器，好在微软自己也干不下去了，连它自己都放弃了 IE 浏览器。

看一下 HTML5 规范的计划时间

  • 2012 年，发布候选推荐版
  • 2022 年，发布计划推荐版
  • 正式版? 遥遥无期

虽说时间上看上去还早呢，计划推荐版都得到 2022 年，那是否可以到 2022 年再开始学 HTML5 呢？你要是这么觉得那就大错特错了。毕竟 Google 和 Apple 两家也不是吃素的，他们推出的浏览器 Chrome 和 Safari，有着共同的内核webkit，已经支持了相当多的 HTML5 特性。随着时代变迁，现在市面上所有项目几乎全都是 HTML5 的了。

HTML5 多了些什么新特性？

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

HTML5 难学吗？

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

新的 API 对 JavaScript 有一定的基础要求，除了 canvas 外，别的都还是很容易好掌握的。

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

亲，HTML5 和 HTML4 一样，只是个页面结构而已。

动画的实现和页面的布局，是依靠的 CSS3。

HTML5 页面的基础架构

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

<body>
</body>
</html>

语义化的标签

过去大量使用的<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>

HTML5 示例页面

index.html

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

image.png

已添加到喜欢了