`

HTML5新元素及其特性

 
阅读更多

 

HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。

本次学习HTML5的新标签元素有:

<header>定义页面或区段的头部;

<footer>定义页面或区段的尾部;

<nav>定义页面或区段的导航区域;

<section>页面的逻辑区域或内容组合;

<article>定义正文或一篇完整的内容;

<aside>定义补充或相关内容;

学习这些标签最好的方法当然就是试着使用它们。虽然现在有很多现成的网页布局的模板可以方便的拿来用,但是对于初学者来说,自己实现简单的页面布局绝对是有必要的。这里通过一个简单的页面布局的例子,来展示上述标签的使用方法。

示例:模仿博客首页布局

实现如图2-1的网页结构,这是一个非常典型的博客页面:头部、尾部、水平导航栏、侧边栏导航以及内容。

\"></p>
<p style=HTML5Beauty

分享到:
评论

相关推荐

    html5shiv.min.js

    html5shiv通过模拟这些元素的CSS渲染行为,使得IE8及其以下版本能够理解并处理这些新标签,从而实现基本的布局和样式支持。 另一方面,`respond.min.js` 是针对IE8及以下浏览器的另一个关键补丁,它实现了对CSS3...

    HTML5参考手册大全7本合集.chm

    1. **HTML5的新特性**:HTML5引入了许多新元素,如`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`、`&lt;article&gt;`等,用于结构化文档;`&lt;video&gt;`和`&lt;audio&gt;`元素使得在网页内嵌入多媒体内容变得简单;`&lt;canvas&gt;`元素提供了图形绘制...

    值得收藏的HTML5资源(学习html5的朋友可以收藏下)

    1. WTFisHTML5站点提供了HTML5的很多可视化信息资料,包括与Flash的对比、不同浏览器的支持情况以及HTML5的热门特性等。 2. DiveIntoHTML5是知名软件开发师Mark Pilgrim编写的在线书籍,内容专注于HTML5的编程功能...

    HTML5和朋友

    ### HTML5及其关键技术知识点 #### 一、HTML5概述 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,它是由万维网联盟(W3C)和WHATWG(Web Hypertext Application Technology Working Group)...

    Web前端开发案例教程(HTML5+CSS3)(微课版)_源代码.zip

    1. HTML5的新特性:学习如何使用HTML5新元素、API以及多媒体支持。 2. CSS3布局:掌握Flexbox和Grid布局系统,以创建灵活的网页布局。 3. 样式选择器:理解CSS3选择器的工作原理,并利用它们来更高效地编写样式。 4....

    Introducing HTML5, 2nd Edition .pdf 下载

    - 深入浅出地介绍了HTML5的新特性及其在实际开发中的应用。 - 提供了大量的代码示例和实战案例,帮助读者更好地理解HTML5的各项功能。 - 包括了多媒体元素、表单增强、离线存储、Canvas绘图、SVG矢量图形等内容。...

    html 5 问题

    【标题】:“HTML5技术详解及其在现代网页开发中的应用” 【描述】:“HTML5作为网页制作的新一代标准,其重要性和影响力不言而喻。本文将深入探讨HTML5的关键特性,以及它如何改变了Web开发的格局。” 【标签】:...

    What Is HTML5

    容器式的网页设计(Container-based Web Pages)是指利用HTML5提供的新元素和特性来构建更为模块化的网页布局。这种方式不仅让网页看起来更整洁有序,还提高了网页的可维护性和可扩展性。例如,`&lt;article&gt;`元素可以...

    HTML5智能手机UI布局浅谈

    ### HTML5新元素:结构化文档 HTML5引入了一系列新的结构化元素,如`header`、`footer`、`nav`、`aside`、`article`、`section`、`time`、`hgroup`等,这些元素帮助开发者更清晰地组织页面结构,提高了代码的可读性...

    让IE(包括IE6)支持HTML5元素

    标题“让IE(包括IE6)支持HTML5元素”指的是如何在旧版的Internet Explorer(尤其是IE6...通过学习这些内容,开发者可以了解到如何使他们的网站在保持向后兼容的同时,利用HTML5的新特性,提升网站的结构和用户体验。

    HTML5移动Web开发指南

    2. 第二部分:HTML5的新功能和新特性及其在移动浏览器中的应用 HTML5新增了大量功能和特性,例如Canvas API、Video和Audio元素、地理定位、拖放接口、Web存储、Web Worker等,这些为移动Web开发提供了强大的支持。...

    HTML5 - Reference guide

    - **新元素与属性**:列举并解释 HTML5 新增的元素和属性。 - **修改与缺失的元素**:探讨 HTML5 中被修改或不再推荐使用的元素。 2. **表单与多媒体**: - **新的输入字段类型**:介绍 HTML5 中新增的输入字段...

    【HTML5】\HTML5 Cookbook.(高清本文)pdf

    ### 知识点一:HTML5的基本语法与语义 #### 标题解析 - **标题**:“HTML5 Cookbook”表明这是一本关于HTML5的实用手册。...这些知识点对于任何希望深入了解HTML5及其强大特性的开发者来说都是非常宝贵的资源。

    HTML5程序设计-3期(KC014) 01 说明文档.doc

    在这个案例中,我们将关注一个名为“风动科技”的官方网站设计,以此来探讨HTML5的核心特性及其与CSS3和Bootstrap的结合使用。 1. **风格定位**: 风动科技的网站设计注重简约大气的风格,强调主题的清晰性,确保...

    蓝色的html5社交网站响应式后台管理模板

    HTML5是超文本标记语言的第五次重大修订,它引入了许多新元素和API,以改善网络应用的功能性和可用性。HTML5支持离线存储、多媒体元素(如video和audio)、画布(canvas)和SVG图形,以及地理定位等功能,这些使得...

    html5视频demo

    "html5视频demo"这个项目,显然是一个使用HTML5 `&lt;video&gt;` 标签及其相关API实现的自定义播放器示例。接下来,我们将深入探讨HTML5视频的核心特性、API以及如何利用它们来创建自定义播放器。 1. **HTML5 `&lt;video&gt;` ...

Global site tag (gtag.js) - Google Analytics