2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成。这是互联网的一次重大变革,这也许是一个时代的来临!

总结一些h5新增的语义化标签,记录下来方便自己学习及使用:

1、<header></header> 页眉:主要用于页面的头部的信息介绍,也可用于板块头部;

2、<hgroup></hgroup> 页面上的一个标题组合:一个标题和一个子标题,或者标语的组合;

3、<nav></nav> 导航:包含链接的一个列表;

4、<section> <section> 页面上的版块:用于划分页面上的不同区域,或者划分文章里不同的节;

5、<article></ article > 用来在页面中表示一套结构完整且独立的内容部分:可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇博客,用户提交的评论内容,可互动的页面模块挂件等;

6、<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分:①aside 的内容应该与 article 的内容相关,② 被包含在<article>中作为主要内容的附属信息部分,其中的内容 以是与当前文章有关的引用、词汇列表等,③在<article>之外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏(sidebar),其中的内容可以是友情链接、附属导航或广告单元等;

7、<figure> < figure > 用于对元素进行组合:一般用于图片或视频;

8、<figcaption> <figcaption> figure的子元素:用于对figure的内容 进行说明;

9、<time></time>用来表现时间或日期;

10、<datalist></datalist>选项列表:与 input 元素配合使用,来定义 input 可能的值;

11、<details></details>用于描述文档或文档某个部分的细节:①该元素用于摘录引用等,应该与页面的主要内容区分开的其他内容,②Open属性默认展开;

12、< summary></summary> details 元素的标题;

13、<dialog></dialog>定义一段对话;

14、<address></address> 定义文章或页面作者的详细联系信息;

15、<mark></mark> 需要标记的词或句子;

16、<keygen>给表单添加一个公钥;

17、<progress><progress>定义进度条;

18、<footer></footer>页脚:页面的底部或者版块底部。

Html5新增的语义化标签(部分)的更多相关文章

  1. html5新增的语义化标签极其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  2. HTML5学习之语义化标签(一)

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  3. HTML5学习之语义化标签

    一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...

  4. 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. HTML新增的语义化标签及其作用

    在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...

  6. HTML5常用的语义化标签

    快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页.服务信息页面. ...

  7. [HTML知识体系]语义化标签概论

    1.什么是语义化 语义化(Semantic)在HTML5中被大量提起,就是语义化标签向浏览器和开发者展示了它所包裹内容的类型与意思,可是至今我看了好多代码,HTML5新增的语义化标签的使用率还是挺低的 ...

  8. HTML5语义化标签重构页面

    在HTML5未出现之前我们都用div+css来构建页面,比如<div id=”header”>,div的滥用,使得代码的可读性和可维护性很差,现在用本文来介绍一下用HTML5′干净的’语义 ...

  9. 第二季第十一天 html5语义化标签 css透明度

    span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...

随机推荐

  1. bzoj 1257: [CQOI2007]余数之和sum 数学 && 枚举

    1257: [CQOI2007]余数之和sum Time Limit: 5 Sec  Memory Limit: 162 MBSubmit: 1779  Solved: 823[Submit][Sta ...

  2. FLASH 存储学习-串行SPI NOR FLASH

    1.1 SST25VF080B简介1.1.1 主要特性 关键点:容量.速度(时钟速度.读写速度).功耗. l 容量:8MBit: l 最高SPI时钟频率:50MHz: l 低功耗模式下电流消耗:5uA ...

  3. css学习笔记一

    1.在css开头用* {margin:0;padding:0;}可以清除所有样式 2.在css中table,th,td {padding:0;}效果等同于cellpadding="0″. 3 ...

  4. uva 11731 - Ex-circles

    题意:已知三角形ABC的3条边长,求三角形ABC 的面积,以及阴影部分的总面积. #include<iostream> #include<cstdio> #include< ...

  5. 悟透Javascript之 原型prototype

    构造函数的Prototype上定义的方法确实可以通过对象直接调用,而且代码是共享的.我表示我不懂.太难理解了,艹.在Javascript中,prototype不但能让对象共享自己的财富,而且proto ...

  6. bzoj1009

    设f[i,j]为准考证号上第i位匹配到不吉祥数字第j位的方案数,显然j∈[0,m-1]下面我们就要想到怎么把f[i-1]转移到f[i]也就是当前匹配到第k位,那么下一位可能会匹配到哪一位显然我们可以穷 ...

  7. Spring - Web MVC简介

    Web MVC简介 1.1.Web开发中的请求-响应模型: 在Web世界里,具体步骤如下: 1.  Web浏览器(如IE)发起请求,如访问http://www.cnblogs.com 2.  Web服 ...

  8. eclipse常见错误

    1.The superclass “javax.servlet.http.httpservlet” is not found in the build path 原因:未添加server librar ...

  9. unity3d Hair real time rendering 真实头发实时渲染

    先放上效果 惊现塞拉酱 算法是Weta Digital根据siggraph2003的论文加以改进,改进之前使用的是Kajiya and Kay’s 模型,它能量不守恒,也就是说不是基于物理的,不准确 ...

  10. poj 1740 A New Stone Game(博弈)

    A New Stone Game Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 5338   Accepted: 2926 ...