HTML5对各个标签的定义与规定：aside

需积分: 50 201 浏览量 2011-11-21 15:35:14 上传评论收藏 29KB DOC 举报

对aside标签的定义与规定 <aside> 用来装载非正文类的内容。（DOM接口、可设置属性）。例如广告，成组的链接，侧边栏等等。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5论坛 www.htmlv.cn aside标签示例</title> </head> ### HTML5中的`<aside>`标签详解 #### 一、`<aside>`标签的基本概念在HTML5中，`<aside>`元素被设计用于表示页面或文档中的旁注信息，这些信息与页面主要内容相关但又可以独立于主要内容之外。简单来说，`<aside>`标签用来包含那些与页面主题相关但又不是核心内容的信息。这些信息可以是侧边栏、广告、引用、脚注、版权声明等，它们虽然与当前页面内容有关联，但是即使没有这些信息也不会影响到页面主要内容的理解。 #### 二、`<aside>`标签的语法 `<aside>`标签是一个容器型标签，其基本语法结构如下： ```html <aside>  </aside> ``` #### 三、`<aside>`标签的使用示例以下是一个使用`<aside>`标签的简单示例： ```html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5论坛 www.htmlv.cn aside标签示例</title> </head> <body> <aside> 热门文章 </aside> <aside> 广告 </aside> <article> <h1>文章标题</h1> 这是一篇文章 <article>评论1</article> <article>评论2</article> </article> </body> </html> ``` 在这个示例中，`<aside>`标签被用来表示与主要文章内容（由`<article>`标签包裹）相关的非主要内容。其中，第一个`<aside>`标签包含了“热门文章”信息，而第二个`<aside>`标签则用来表示广告信息。 #### 四、`<aside>`标签的DOM接口及可设置属性 `<aside>`元素作为HTML5中的一个标准元素，支持所有通用的HTML属性以及特定于`<aside>`的一些属性。它还支持DOM（Document Object Model）接口，这意味着可以通过JavaScript来操作这个元素，包括获取和修改其内容、样式等。 ##### DOM接口： - `document.createElement("aside")`: 创建一个新的`<aside>`元素。 - `element.querySelector("aside")`: 在指定元素中查找第一个匹配的`<aside>`元素。 - `element.querySelectorAll("aside")`: 在指定元素中查找所有匹配的`<aside>`元素。 ##### 可设置属性： - **Class**: 用于定义CSS类。 - **ID**: 用于定义唯一标识符。 - **Title**: 为元素提供额外的信息。 - **Style**: 直接设置内联样式。 - **Data-* attributes**: 用于存储页面或应用程序的私有自定义数据。 #### 五、`<aside>`标签的注意事项 1. **位置灵活性**：`<aside>`元素可以在页面中的任何位置使用，并且它可以包含在`<article>`、`<section>`或直接包含在`<body>`标签中。 2. **语义化**：使用`<aside>`时要注意保持良好的语义化，确保其内容真正是非主要内容，这样有助于提高网页的可读性和搜索引擎优化。 3. **样式设计**：由于`<aside>`通常是用于展示辅助信息，因此在样式设计上应该考虑与主要内容区分开来，避免混淆用户。通过以上介绍，我们可以看到`<aside>`标签在HTML5中扮演着非常重要的角色，合理地使用它可以帮助我们构建更加清晰、有序的网页结构。

资源推荐

资源详情

资源评论