HTML5的新功能

今天收jankuo 建议说：“1、文档类型用 <!doctype html> 2、字符集也要加上不然看起来怪怪的”。

确实是有那么一点怪怪的。昨天打VS，直接新建一个页面，也就没有去注意什么文档类型、字符集，忙着记录我的理解去了。

HTML5以前我们的文档是个啥样子呢？请见下面：

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

这条代码是啥意思呢？咱也了解过，但要我说出来，说实话，咱说不出。我相信没几个人会记这东西，新建一个页面时，这些编辑器都已经帮我们写好,就算没有写，去复制一个就OK了。
使用HTML5的DOCTYPE,浏览器默认以标准兼容模式显示页面。下面我们来看HTML5的文档类型的代码：

<!DOCTYPE html>

就这么几个字母，摆平了。这就是HTML5的一个设计准则之一——化繁为简。
字符集的声明也被大大的简化。下面是HTML5以前的声明方式：

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

HTML5的字符集声明：

<meta charset="utf-8">

HTML5引入了很多的新标记元素，根据内容类型的不同，这些元素被分成七大类。

内容类型	描述
内嵌	向文档中添加其他类型的内容，例如：audio、video、canvas和iframe等
流	在文档和应用的body中使用的元素，例如form、h1、和small等
标题	段落标题，例如：h1、h2和hgroup等
交互	与用户交互的内容，例如音频和视频控件、button和textarea等
元数据	通常出现在页面的head中，设置页面其他部分的表现和行为，例如script、style和titletffu
短语	文本和文本标记元素，例如mark、kbd/sub和sup等
片段	用于定义文档中片段的元素，例如article/aside/title等

上述所有类型都可能通过CSS控制样式。

　　HTML5中移除了很多在行内设置样式的标记元素，如big/center/font/basefont等，以鼓励我们使用CSS。

　　语义化标记

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

元素名	描述
header	标记头部区域的内容（用于整个页面或者页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或者页面中的一块区域）
section	Web页面中的一块区域
article	独立的文章内容
aside	相关内容或者引文
nav	导航类辅助内容

下面我们来看一个HTML5示例页面：

<!DOCTYPE thml />
<html>
<head>
    <title>HTML5Demo</title>
    <meta charset="urf-8" />
</head>
<body>
    <header>
        <h1>
            Header</h1>
        <h2>
            Subtitle</h2>
        <h4>
            HTML Rocks!</h4>
    </header>
    <div id="container">
        <nav>
            <h3>
                Nav</h3>
            <a href="javascript:void(0);">连接1</a> <a href="javascript:void(0);">连接2</a> <a href="javascript:void(0);">
                连接3</a>
        </nav>
        <section>
            <article>
                <header>
                    <h1>
                        Article Header</h1>
                </header>
                <p>敬恭恭敬敬恭恭敬敬恭恭敬敬恭恭敬敬恭恭敬敬。</p>
                <p>
                    very good.....劳而无功墈咖啡机分解解放军节哀款项村苦苦东奔西走 暮云春树 苦暮云春树。</p>
                <footer>
                    <h2>
                        Artcle Footer</h2>
                </footer>
            </article>
            <article>
                <header>
                    <h1>
                        Article Header</h1>
                </header>
                <p>
                    addf旷世奇才口若悬河莀手放开第三方第三方第三方裁夺劳而无功单放机蜀犬吠日KELFJADFF劳而无功裁夺劳而无功浊加菲喱国。</p>
                <footer>
                    <h2>
                        Article Footer</h2>
                </footer>
            </article>
        </section>
        <aside>
            <h3>
                Aside</h3>
            <p>
                a大发雷霆野草标明尘暴俚期刊有东奔西跑转暖法西斯加进恭恭敬敬恭恭敬敬恭恭敬敬恭恭敬敬恭恭敬敬恭恭敬敬恭恭敬敬。</p>
        </aside>
        <footer>
            <h2>
                Footer</h2>
        </footer>
    </div>
</body>
</html>

感觉还不错吧！
除了语义化元素外，HTML5还引入一种用于查找页面DOM元素的快捷方式。以后再介绍吧。

这一篇的写的感觉有点乱，但总体来说是简单介绍一下HTML5的一些特性。

posted @ 2012-10-09 00:00 追夢阅读(3537) 评论(0) 编辑收藏举报

刷新页面返回顶部

三秋邦

HTML5的新功能

公告