做前端工程师这么长时间了, 对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. oracle mysql sql 根据一张表更新另一张表

    update CDINFO.Dept_Dict tab1 set PART_FLAG = (select PART_FLAG from DICT.DEPARTMENT_DICT@zyhis4 tab2 ...

  2. FlashFXP中文破解 指南

    flashfxp是一款使用非常广泛,功能非常更强大的FXP/FTP软件.它拥有显示彩色文字.比较CuteFTP的目录.上传和下载文件.共享文件等众多功能,其中深受用户喜爱的便是目录比较功能,它能够有效 ...

  3. 深入理解协程(二):yield from实现异步协程

    原创不易,转载请联系作者 深入理解协程分为三部分进行讲解: 协程的引入 yield from实现异步协程 async/await实现异步协程 本篇为深入理解协程系列文章的第二篇. yield from ...

  4. vue兄弟组件传值——事件总线

    1.创建一个js文件,例如msg.js,放到合适位置,例如components中,或者其他位置也行.然后在兄弟两个组件中分别引入msg.js文件 msg.js: import Vue from 'vu ...

  5. linux下解压缩文件中文乱码问题的解决

    在windows上压缩的文件,是以系统默认编码中文来压缩文件.由于zip文件中没有声明其编码,所以linux上的unzip一般以默认编码解压,中文文件名会出现乱码. 虽然2005年就有人把这报告为bu ...

  6. JSP九大内置对象之session以及eclispe如何关联源码

    一.session的特点及其实例 session:同一次会话共享 a.浏览网站:开始->关闭 b.购物:浏览.付款.退出 c.电子邮件:浏览.写邮件.退出  从一次开始到一次结束,是一次会话.  ...

  7. 区间dp - 送外卖

    When we are focusing on solving problems, we usually prefer to stay in front of computers rather tha ...

  8. poj 2689 区间素数筛

    The branch of mathematics called number theory is about properties of numbers. One of the areas that ...

  9. spark和strom优劣分析

    对于Storm来说:1.建议在那种需要纯实时,不能忍受1秒以上延迟的场景下使用,比如实时金融系统,要求纯实时进行金融交易和分析2.此外,如果对于实时计算的功能中,要求可靠的事务机制和可靠性机制,即数据 ...

  10. ORM基础5

    一.一对一 场景:字段多,且一部分字段使用率高 优点:提高效率 实质:唯一的外键 # Person表 class Person(models.Model): id = models.AutoField ...