HTML5之结构元素

最新推荐文章于 2022-08-17 09:54:17 发布
最新推荐文章于 2022-08-17 09:54:17 发布
阅读量135 收藏 1
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/chenguiya/p/3542961.html
版权

1：文档结构元素

      1.1 文章语义 --  article、header和footer元素

          article元素在页面中用来表示结构完整且独立的内容部分，如论坛的一个帖子，杂志或者报纸的一篇文章。

           article元素是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。例如，一篇博客文章与针对该文章的评论一起可以使用嵌套article的方式，这时

用来呈现评论的article元素被包含在文章内容的article里面。

         header元素是一种具有引导和导航作用的辅助元素，通常，header元素可以包含一个区块的标题，但也可以包含其他的内容。

         footer元素可以作为其直接父级内容区块或是一个根区块的尾部内容，通常包括其相关区块的附加信息，如文档的作者、文档的创作日期，相关阅读链接以及

  版权信息等。

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5. <meta charset="gb2312">  
  6. <title>Sample</title>  
  7. <style>  
  8. body {  
  9.     font-family: 'Microsoft YaHei', '微软雅黑',  'SimSun', '宋体';  
  10. }  
  11. header {  
  12.     background: #ADB96E;  
  13. }  
  14. footer {  
  15.     padding: 10px 0;  
  16.     background: #EADCAE;  
  17.     clear: both;  
  18.     text-align:right;  
  19. }  
  20. h1, h2, h3, h4, h5, h6, p {  
  21.     margin-top: 0;  
  22.     padding-right: 15px;  
  23.     padding-left: 15px;  
  24. }  
  25. header, section, footer, aside, nav, article, figure {  
  26.     display: block;  
  27. }  
  28. </style>  
  29.   
  30. </head>  
  31.   
  32. <body>  
  33. <article>  
  34.   <header>  
  35.     <h1>HTML5规范学习指南</h1>  
  36.     <p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>  
  37.   </header>  
  38.   <p>日志正文简介放在这里</p>  
  39.   <p>日志正文简介放在这里</p>  
  40.   <a href="?show=detail">阅读全文...</a>  
  41.   <footer>  
  42.      <a href="?show=comments">显示评论...</a>  
  43.   </footer>  
  44. </article>  
  45.   
  46. </body>  
  47.   
  48. </html>  

效果图：

 

1.2 内容区块语义---section元素

    该元素用来表现普通的文档内容区块或者应用区块，一个区块通常由内容及其标题组成，

       <section>

             <h1>标题</h1>

             ..............其他内容....................

       </section>

        <section>

            <h1>第1章</h1>

            <p>这里是第1章的内容</p>

         </section>

         <section>

 

            <h1>第2章</h1>

            <p>这里是第2章的内容</p>

         </section>

  1. <!DOCTYPE HTML>  
  2. <html>  
  3.   
  4. <head>  
  5. <meta charset="gb2312">  
  6. <title>Sample</title>  
  7. <style>  
  8. body {  
  9.     font-family: 'Microsoft YaHei', '微软雅黑',  'SimSun', '宋体';  
  10. }  
  11. header {  
  12.     background: #ADB96E;  
  13. }  
  14. footer {  
  15.     padding: 10px 0;  
  16.     background: #EADCAE;  
  17.     clear: both;  
  18.     text-align:right;  
  19. }  
  20. h1, h2, h3, h4, h5, h6, p {  
  21.     margin-top: 0;  
  22.     padding-right: 15px;  
  23.     padding-left: 15px;  
  24. }  
  25. header, section, footer, aside, nav, article, figure {  
  26.     display: block;  
  27. }  
  28. </style>  
  29. </head>  
  30.   
  31. <body>  
  32. <article>  
  33.   <header>  
  34.     <h1>HTML5规范学习指南</h1>  
  35.     <p><time pubdate datetime="2010-11-20T15:28-08:10"></time></p>  
  36.   </header>  
  37.   <p>日志正文全文放在这里</p>  
  38.   <p>日志正文全文放在这里</p>  
  39.   <section>  
  40.     <h1>评论</h1>  
  41.     <article>  
  42.        <header>  
  43.           <p>Posted by: 王三</p>  
  44.           <p><time pubdate datetime="2010-12-10T19:10-08:00">  
  45.               </time></p>  
  46.        </header>  
  47.        <p>HTML5 is good thing.</p>  
  48.     </article>  
  49.     <article>  
  50.        <header>  
  51.          <p>Posted by: 李老四</p>  
  52.          <p><time pubdate datetime="2009-10-10T19:15-08:00">  
  53.              </time></p>  
  54.        </header>  
  55.        <p>正在学习HTML5，非常棒！</p>  
  56.     </article>  
  57.   </section>  
  58. </article>  
  59. </body>  
  60.   
  61. </html>  

效果图：

1.3 侧栏和导航

     <aside>用来表示当前页面或者文章的附属信息部分，它可以包含与当前页面或者主要内容无关的引用、侧边栏、广告、导航元素组，

以及其他类似的有别于主要内容的部分。

    导航一般用nav元素来实现，因此，一般使用如下的代码来实现左侧导航栏：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>导航</title>  
  6. <style type="text/css">  
  7.    aside#leftside { float: left; width: 180px; background: #EADCAE; padding-bottom: 10px;}  
  8.      
  9. </style>  
  10. </head>  
  11.   
  12. <body>  
  13.    <aside id="leftside">  
  14.         <nav>  
  15.              <ul>  
  16.                 <li><a href="#">Link One</a></li>  
  17.                 <li><a href="#">Link two</a></li>  
  18.                 <li><a href="#">Link three</a></li>  
  19.                 <li><a href="#">Link four</a></li>  
  20.              </ul>  
  21.         </nav>  
  22.    </aside>  
  23. </body>  
  24. </html>  

效果图：

1.4  address元素

    address元素一般被作者用来提供该文档的联系人信息，一般放在一个网页的开头或者结尾，最常用的是和其他内容包含在footer元素内。

    如果address元素位于article元素内部，则它表示<article>元素所包含文章内容的作者的联系信息，如果直接位于body元素内，那么表示该网页的作者的

联系信息。

 

2：浏览器的兼容性

      对于IE浏览器，也可以输入下面的代码，这是一个HTML5爱好者编写的实现，可以便利的让IE9以前的浏览器支持结构元素，并且支持打印功能:

     <!--[if lt IE9]>

         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif] -->  

共支持如下的html 5元素：

     abbr  article   aside   audio   canvas   details   figcaption  figure   footer   header   hgroup  mark   meter  

    nav  output   progress   section     summary   time   video

转载于:https://www.cnblogs.com/chenguiya/p/3542961.html

date25000
关注
html结构元素
w_45678910的博客
10-06 1241
header元素 header元素是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。通常用来放置整个页面或页面内的一个内容区块的标题，也可以包括网站logo图片、搜索表单或者其他相关内容。 基本语法格式： <header> <h1>网页主题</h1> … </header> header元素不是head元素 在HTML网页中不限制header元素的个数，一个网页中可以使用多个header元素，也可以为每一个内容块
HTML5结构元素总结
abcyh999的博客
03-04 3379
HTML5结构元素： HTML 5中新增了section、article、nav、aside、header和footer等结构元素。运用这些结构元素，可以让网页的整体布局更加直观和明确、更富有语义化。 nav 表示页面中导航链接的部分。描绘一个含有多个超链接的区域，这个区域包含转到其他页面，或者页面内部其他部分的链接列表。并不是所有的连接组都要被放进nav元素，只需要将主要的、基本的链接组放进na...
HTML结构元素
six6de6的博客
07-07 1101
简单了解结构元素
HTML5的结构元素
weixin_40763897的博客
04-16 4663
要
HTML5的结构和语义(3):语义性的块级元素
09-28
HTML5的结构和语义性块级元素是其对网页设计和开发的重要改进，旨在提高内容的可读性和机器可解析性。在这篇文章中，主要关注了三个新增的语义化块级元素：`aside`、`figure` 和 `dialog`。 首先，`aside` 元素用于...
HTML5结构元素
web前端开发教程htmlcssjs
01-10 1295
几年前，用于网页布局一般都用div元素，但语义化并不好。HTML5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性结构、容易维护，并且对数据挖掘服务更友好。本文将详细介绍HTML5结构元素 概述 结构元素，又称为区块型元素，是用来定义区块内容范围的元素。之前，区块型元素只有一个，HTML5新增了7个语义化结构元素，包括<article>、<aside>、<...
HTML5新增的8个结构元素
u014150445的博客
10-11 3801
1.新增结构元素： （1）section元素：section定义文档中的节，表示页面的内容区块，例如页眉，页脚，页面中的其他部分内容也可以。html4全是用div结构来写内容，很难分清主次 （2）artical元素：规定了独立的内容，比如论坛的一篇帖子，文章，博客，用户评论等 （3）aside元素：表示与其附近的内容相关的，可以做侧边栏。 （4）header元素：定义文档的页眉 （5）f
HTML页面结构元素
qq_45844919的博客
11-30 1200
1、headder元素 是一种具有引导和导航作用的结构元素，该元素可以包含所有通常放在页面头部的内容。通常用来放置整个页面或页面内的一个内容区块的标题。 基本语法格式为： 网页主题 2、nav元素 用于定义导航链接，可以将具有导航性质的链接归纳在一个区域中，使页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面。 列如: 首页 公司概况 产品展示 联系我们 3、article...
HTML5新增文档结构元素
leng_nuan的博客
02-28 1954
HTML5新增文档结构元素 为了更好的表达HTML文档和语义，HTML5新增了许多用于表达文档结构方面的元素，用以取代HTML4中的DIV元素。HTML5提提供的文档结构元素主要有header、article、section、nav、aside和footer等元素。 header元素 元素定义了页面或内容区域的头部信息，例如：放置页面的站点名称、logo和导航栏、搜索框等放置在页面头部的内...
HTML5文档结构
crystal_hst的博客
11-13 1218
HTML5提供的文档结构元素主要有header,article.section,nav,aside和footer等。
html5文档结构元素,HTML第2章 HTML 5的文档结构元素.ppt
weixin_39926016的博客
06-04 203
HTML5+CSS3 Web 前端开发技术 HTML5+CSS3 Web 前端开发技术(2版) LOGO HTML5+CSS3 Web 前端开发技术(2版) LOGO * * 第2章 HTML 5的文档结构元素 HTML的元素和属性 1 HTML文档的基本结构元素 2 HTML5新增的结构元素 3 2.1 HTML的元素和属性 HTML元素 HTML元素指的是从开始标记(start tag)到结束...
前端-HTML结构元素
zhuzhiqiang_zhu的博客
11-26 562
有了这张图，width，innerWith，outWidth等等就不会再困扰你了。
HTML5中文档结构相关元素
第十七签
05-29 1323
<html> <head> <title>文档结构元素</title> </head> <body> <article> <!--帖子的头部--> <header> <h1>总统<mark>普京</mark>，够硬吗</h1> <div
HTML5之主体元素结构
spb111的博客
08-31 408
主体结构元素 主体结构元素，压实为了语义可以结构化，说白了就是为了更好的SEO,再直白一点就是为了浏览器更好的抓数据，包含的元素：article、section、nav、aside、time （1）article 使用频率低 从语义上理解是文章、页面。通常的用法：一遍文章，一个页面和独立完整的内容。这个标签强调的是内容的独立性。同时，一般article元素里面会嵌套一个header art
HTML基本文件结构和元素
彭世瑜的博客
05-03 1372
HTML HyperText Markup Language 超文本标记语言 文件结构 <!DOCTYPE html> // 起始行 <html> // 开始标签 <head> // 文档描述信息 <title></title> </head> <body> // 网页内容 </body&...
前端提高篇(五十九)HTML进阶2常用元素(一):html5结构元素
安之ccy的博客
03-17 262
html5结构元素 1.header整个页面的头部，某块区域的标题、页眉 2.footer文档或者某一块的底部、页脚 3.main主要内容区域 4.nav导航链接部分 5.section页面中一个内容区域 6.article代表一个独立的、完整的相关内容块 7.aside元素表示一个页面的一部分，它的内容跟整个页面的其他内容的关联性不强，或者没有关联、单独存在 8.figure标签规定独立的流内容（图像、图表、照片、代码等等） 写一个小案例，大概写一下，使用了header、main、nav、section、
HTML的元素5
m0_65504942的博客
08-17 390
1.文档的主体。在 HTML 5 中，删除了所有 的特殊属性。而那些属性在 HTML 4.01 中是不被赞成使用的。2.aside与周围元素相关的内容，但分开显示aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。......
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值