做前端工程师这么长时间了, 对HTML5的一些标签的用法还不是很熟悉。这篇随笔算是对学过的知识的梳理。常言道,温故而知新  ~哈哈。里面有不正确的地方还望各位大牛们指正,评论。

在做网页时习惯把网页分为三个部分: 头部,主体,尾部。

头部一般涉及到网站的登陆状态,提示信息等;尾部即底部,脚注部分;主体部分是网站的内容部分;

言归正传    以移动端为例。。。。。。

HTML5新增的一些常用标签:

主体部分常用的标签:

  section: 用于对网站或应用程序中页面上的内容进行分块,类似于DIV

  article: 独立内容,文章、博客、评论等

  nav: 导航  (注意nav是主体标签)

  time:书写与日期和时间相关内容(涉及到Data的地方)

       <p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>      我在情人节有个约会

  aside: 页面或文章的附属信息部分,它可以包含当前页面或主要内容相关的引用、侧边栏、广告,以及其他类似的用别于主要内容的部分(别于主要内容部分)

  small:  标签定义小型文本(和旁注) (HTML4的标签 )

  新增属性:

    pubdate:可选属性,boolean值的属性,它可以应用到 article 元素内的time元素上,用来定义一篇文章或整个网页的发布日期

        <article>  <time pubdate="true"></time>  </artile>

新增非主体标签

  header : 头部

  footer: 底部,脚注部分

  address:  用来文档中呈现联系信息,包括文档作者或文档维护者的名字,他们的网站链接、电子邮箱、真实姓名、电话号码等。

      (呈现联系信息,定义个人信息)

  hgroup: (header-group) 对多标题及其子标题分组      (一般用于文章中标题处:大标题-副标题-小标题)

========对于新增的块级元素,IE8是不识别的,自动转化为 div======

HTML5与HTML4的区别-----新增的常用标签的更多相关文章

  1. Html5 与 Html4 的区别

    HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...

  2. 面试中的一些小问题之html5和html4的区别?

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  3. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. HTML5与HTML4的区别-----文档结构

    HTML5在结构和语法上做了大量的简化.当然,也提供了语义化的标签 结构上区别: 1.简化了文档声明语句     HTML5仅规定了一种:       <!DOCTYPE html> 2. ...

  5. 翻译:HTML5与HTML4的区别

    本文选译自:W3C Working Group Note: HTML5 Differences from HTML4. 解释一下W3C Working Group Note,作为"工作组笔记 ...

  6. HTML5系列:HTML5与HTML4的区别

    1. 语法的改变 1.1 DOCTYPE声明 DOCTYPE声明在HTML文件中必不可少,位于文件第一行. HTML4中声明方法: <!DOCTYPE html PUBLIC "-// ...

  7. html5与html4的区别,如何一眼区分

    还是在面试过程中遇到的这个问题,但是当时感觉回答的不是很全面,回来以后自己做的总结: 以上这个问题如果教大家看源码,可能一眼很直观的就能认出,那个是html4,那个是html5,但是面试的时候问道这个 ...

  8. WEB前端之HTML5~HTML5与HTML4的区别

    推出的理由及目标 WEB浏览器存在的问题包括以下三点 世界知名浏览器厂商对HTML5的支持 语法的改变 DOCTYPE的声明 XHTML的DOCTYPE声明方式 HTML4的DOCTYPE声明方式 H ...

  9. HTML5 和HTML4的区别

    1.推出理由和目标 HTml5的出现,对于web来说意义是非常重大的,因为它的意图是想要把目前web 上存在的各种问题一并解决掉. (1)web之间的兼容性很低 (2)文档结构不明确 (3)web应用 ...

随机推荐

  1. word 发表博客

    发表博客大家可采用熟悉的word 编辑排版,然后发布博客.(这里我使用的是word 2013,其他版本大家可以自己测试) 使用word发布博客时,需要先配置一下: 1)单击文件---〉共享---〉发布 ...

  2. Scala实践11

    1.1泛型类 泛型类是将类型作为参数的类.它们对集合类特别有用. 定义泛类型:泛型类将类型作为方括号内的参数[].一种惯例是使用字母A作为类型参数标识符,但是可以使用任何参数名称. class Sta ...

  3. cogs 186. [USACO Oct08] 牧场旅行 树链剖分 LCA

    186. [USACO Oct08] 牧场旅行 ★★☆   输入文件:pwalk.in   输出文件:pwalk.out   逐字节对比时间限制:1 s   内存限制:128 MB n个被自然地编号为 ...

  4. 双射 - hash去重

    题目描述Two undirected simple graphs and where are isomorphic when there exists a bijection on V satisfy ...

  5. MySql笔记(二)

    目录 MySQL笔记(二) 一幅画,一次瞬间的回眸,就在那次画展上,那个眼神,温柔的流转,还是那干净的皮鞋,一尘不染,俊朗的眉宇性感的唇,悄悄走近,牵手一段浪漫 MySQL笔记(二) 13.条件查询 ...

  6. 匈牙利算法(Kuhn-Munkres)算法

    这个算法有点难度,一般比较标准的描述网页上也有相关的描述,我在这里就简单的用十分通俗的语言给大家入个门 主要可以结合https://blog.csdn.net/zsfcg/article/detail ...

  7. 关于neo4j初入门(5)

    neo4j和Java Neo4j提供JAVA API以编程方式执行所有数据库操作. 它支持两种类型的API: Neo4j的原生的Java API Neo4j Cypher Java API Neo4j ...

  8. git 查看修改账号密码

    git config user.name         查看用户名 git config user.email         查看用户邮箱 修改用户名和邮箱的命令 git config --glo ...

  9. redis 支持事务

    pipe = conn.pipeline(transaction=True) pipe.multi() pipe.set(') pipe.hset('k3','n1',666) pipe.lpush( ...

  10. oa办公系统是什么?对企业有什么作用?

    OA办公系统是指利用计算机网络帮助企业实现办公自动化,用系统软件代替传统的手工工作帮助企业处理内部事务,例如文档共享.部门协作.报销.业务流程等等,最终目的帮助企业提高工作效率,实现利益最大化. 随着 ...