html5新增的结构化元素

1.主题结构元素: article section time  pubdate属性  nav aside

  article用法:常用来表示一个独立的结构;

  section用法:一个东西可能会有几部分,每一个可用一个section组成;

  article和section的区别:article是section的特例,article更强调与其他部门的独立,section强调分段和分块。

  time  用法:

<time pubdate datetime="2014/09/01T21:51Z">我的博客记录时间是9月1日</time>

  pubdate属性 是要说明 这个time元素代表了文章或整个网页的发布日期。

2.非主体结构元素: header footer hggroup address

  非主体结构比较常见且语义较为清晰,不太熟悉的可能是hggroup元素,它的应用场景是:文章同时需要标题 子标题 或者 再低一级的标题

注意:以上结构元素只是为了表示结构,要用div及其他的常用标签表示内容

以上元素的实例:

 1 <html>
 2 <head>
 3     <meta charset="utf-8">
 4     <title></title>
 5     <style type="text/css">
 6         body {border: dotted 1px gray;}
 7         article,header {width:800px;margin:0 auto;}
 8         ul li {list-style-type: none; display: table-cell; padding: 10px; font: 20px bold;}
 9         ul li>a{ text-decoration: none; }
10     </style>
11 </head>
12 <body>
14     <article style="">
15         <header>
16             <hgroup>
17                 <h1>文章主标题</h1>
18                 <h2>文章子标题</h2>
19                 <p><time pubdate datetime="2014/09/01">2014/09/01</time></p>
20             </hgroup>
21         </header>
22         <section>
23             <h2>中国民生银行</h2>
24             <p>客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经           理助理客户经理助理客户经理助理客户经理助理客户经理助理</p>
25         </section>
27         <section>
28             <h2>中国民生银行</h2>
29             <p>客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经理助理客户经           理助理客户经理助理客户经理助理客户经理助理客户经理助理</p>
30         </section>
31     </article>
32 </body>
33 </html>
时间: 2024-10-06 03:46:02

html5新增的结构化元素的相关文章

HTML5新增的非主体结构元素

-------------------siwuxie095 HTML5 新增的非主体结构元素 1.header 元素 header 元素是一种具有引导和导航作用的结构元素,通常 用来放置整个页面 或 页面内的一个内容区块的标题,但是 也可以包含其它内容,如:数据表格.搜索表单.或相关的 logo 图片 2.footer 元素 footer 元素可以作为其上层父级内容区块 或 是一个根区块 的脚注 footer 元素通常包括其相关区块的脚注信息,如:作者.相 关阅读链接.版权信息等 3.hgrou

第一章: 新的结构化元素

事实再一次证明了,选一本好的书是多么的重要啊!弃掉一开始的坑,换一本书来继续我们的学习吧. (1) 结构化构建块 div: 这是我们都知道且喜爱的一种一般性容器.它是一种无附加语义含义的流式内容元素. section: 这是文档或应用程序的一般性小节. article: 这是文档或网站的一个独立的小节. 听起来十分的相似对吧?确实.但是我们区分一下: div是没有任何的语义的,比如<div class="nav">和<div class="mick"

opencv_形态学结构化元素对形态学图像处理的影响

场景 对大米预处理之后的二值图像做开运算再做canny边缘检测. python代码: 1 # kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE,(3,3)) # 椭圆的核 2 3 kernel = np.ones((3,3),np.uint8) # 去除白色噪点,形态学开运算,3x3线性核 4 5 opening = cv2.morphologyEx(thresh, cv2.MORPH_OPEN, kernel, iterations =

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景: 在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的元素. 核心内容:1.Article2.Section3.Nav4.Aside5.Time6.Pubdate 7. header 元素8. footer 元素9. hgroup 元素10. address 元素 article 元素 article 元素代表文档,页面或应用程序中独立的.完整的.可以独自被外部引用的内容. section 元素 本课时讲解 HMTL5 新增的主体结构元素

HTML5新增的语义化标记元素

H5中定义了一组新的语义化标记来描述元素的内容.虽然语义化标记也可以使用HTML标记进行替换,但是他可以简化HTML页面设计,并且搜索引擎在抓取和索引网页的时候,也会利用这些元素.在目前主流的浏览器中已经可以使用这些元素了,新增的语义化标记元素如下: header--标记头部区域的内容(用于整个页面或页面中的一块区域) footer--标记脚部区域的内容(用于整个页面或页面中的一块区域) section--Web页面中的一块区域 article--独立的文章内容 aside--相关内容或者引文

HTM5新增结构化元素&amp;非结构化元素&amp;新增属性详解

(1)HTML5 新增的主体结构元素 (2)HTML5 新增的的非主体结构元素 (3)HTML5 表单新增元素与属性 (4)HTML5 改良的 input 元素的种类

使用html5结构化元素

显示的效果如上边这样,但是有没有发现内容的外侧没有边线(这个难道是因为浏览器不同吗?有待测试) html5中新增加的元素<header>可以明确的告诉浏览器此处是页头,<nav>标记用于构建页面的导航,<article>标记用于构建页面内容的一部分,<footer>元素表明页面已到页脚或根元素部分,并且这些标记可以重复使用,极大的提高了开发者的效率. 代码如下: <!DOCTYPE html><html lang="en"

HTML5 常用的结构化标签整理

结构化标签优点: 1.方便浏览器处理和识别,提升了网页的质量和语义. 2.减少了大量无意义的div标签,增强代码的可读性. 结构化标签:(header,nav,body,article,section,aside,hgroup,figure,figcaption,footer) <article>定义外部的内容,可以是一篇新的文章 <aside>定义article以外的内容,aside的内容可用作文章的侧边栏 <figure>用于对元素进行组合,使用figcaption

Html5新增的语义化标签(部分)

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习及使用: 1.<header></header> 页眉:主要用于页面的头部的信息介绍,也可用于板块头部: 2.<hgroup></hgroup> 页面上的一个标题组合:一个标题和一个子标题,或者标语的组合: 3.<nav></nav> 导