新元素header、hgroup、nav标签

XQstreamnetwork 2023-01-12 14:55:59

课时名称	课时知识点
新元素header、hgroup、nav标签

...全文

125 回复打赏收藏转发到动态举报

写回复

回复

切换为时间正序

请发表友善的回复…

发表回复

我们结合移动设备（手机和平板电脑）的特性，介绍HTML5中新增的语义化标签元素，以及在移动Web浏览器下Web页面布局的知识及例子。在HTML5标准添加的新元素中，用于常见页面结构的包括header footer footer nav aside aside article section hgroup 。下面简单介绍一下这个元素： 1.header header>元素定义文档的页面组合，通常是一些引导和导航信息，标签内通常包含 secti- on的头部信息，如h1~h6 或 hgroup等。复制代码代码如下:<header> 　　

HTML5布局学习

html5使用文档，简单描述了html5使用过程中的注意事项

HTML 5 特性官方详细的文档是寻找 HTML5 特性的最好地方，当然你还可以轻松通过 W3Schools 来学习HTML5 标签。我们将会在文章中涉及到以下的特性： • 语义化标记 • Form 表单增强功能 • 视频 / 音频 • 画布（Canvas） • 可编辑内容 • 拖放 • 稳健的数据存储检测浏览器支持在你开始尝试 HTML5之前，需要知道各主流浏览器的支持状况。这些有用的资源，将可以帮助你向着正轨走： • 何时能用 • 网页设计师的浏览器支持列表 • HTML5 测试 • 布局引擎对比你还可以运行 Javascript（用Javascript 检测浏览器特性）来检测 HTML5 特性的支持。你还应该用用Modernizr：一个非常不错的检测 HTML5/CSS3 本地支持的 Javascript 库。如果你选择用 Mootools可以使用MooModernizr (MooTools port of Modernizr)。你可能也会想留意不断变化的"浏览器市场份额分享" — 这些信息对于你决定用何种解决或折衷的方法将会是非常必要的。值得注意的变更点除了新的特征，你还应该记下这些重要的变更点： • 简洁的 DOCTYPE HTML5 只需一个简洁的文档类型：。它有意不使用版本，因此文档将会适用所有版本的HTML。 • 简单易记的语言标签你并不需要在 <html> 中使用 xmlns 或 xml:lang 标记。 <html lang="en"> 将对 HTML5 有效。 • 简单易记的编码类型你现在可以在 meta 标签中使用 "charset"：<meta charset="utf-8″ /> • 不需要闭合标签在 HTML5 中，空标签（如：br、img 和 input ）并不需要闭合标签。 • 废弃的标签下面这些标签并不被 HTML5 支持： <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<s>、<strike>、<tt>、<u> 和 <xmp> 简单代码示例: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Document</title> </head> <body> </body> </html> 你可以使用HTML5 Validator 或 W3C Markup Validation Service 来测试你的 HTML5 文档。语义化标记 HTML5 新增的一些新标签除了不仅仅是更具语义的标签的替代品，并不提供额外的功能。这些都是新增的标签：、、、、<header>,、、、、和。这些标签被除了IE 外的所有现代浏览器（Firefox 3+、Safari 3.1+、Chrome 2+、and Opera 9.6+）支持。Javascript 提供了document.createElement(tagName) 的方法，让你可以用来创建新的 HTML5 标签。代替自己创建这些元素，你还可以用HTML5 Enabling Script 或 IE Print Protector — 这些脚本将帮助 IE 正常处理 HTML5 元素的渲染。你可能会想到添加 CSS Reset 到这些新元素上。这里是一些可以用在你以 HTML5 为基础的项目的CSS Reset： • HTML5 Reset CSS • Reset5 简单代码示例: 兼容 IE 的 HTML5 页面布局 <html lang="en"> <head> <meta charset="utf-8" /> <title>HTML5 Semantic Markup Demo: Cross Browser</title> <link rel="stylesheet" href="html5reset.css" type="text/css" /> <link rel="stylesheet" href="html5semanticmarkup.css" type="text/css" /> <!--[if lt IE 9]> [removed][removed] header> Page Header Page Sub Heading </header> Home Projects Portfolio Profile Contact <header> Article Heading May 5th, 2010 </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <header> Section Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Section Footer: Pellentesque volutpat, leo nec auctor euismod <header> Section Heading </header> Lorem ipsum dolor sit amet, consectetur adipiscing elit. FigCaption: Club, Heart, Spade and Diamond Ut sapien enim, porttitor id feugiat non, ultrices non odio Section Footer: Pellentesque volutpat, leo nec auctor euismod est. Article Footer <header> Siderbar Heading </header> Ut sapien enim, porttitor id feugiat non, ultrices non odio. Page Footer </body> </html> 注意：没有一个 div 标签，id 或 class 属性被使用到 — 简洁、小巧和更语义化的标记 (View Demo)。你仍可以用 HTML5 Validator 或 W3C Markup Validation Service 来检测你的 HTML5 文档。

HTML5新语义及基本布局: HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似

和标签，但有一定含义，例如 <nav>（网站导航块）和

谢青的课程社区_NO_1

1

社区成员

210

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章