做前端工程师这么长时间了, 对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. Ant Design中根据用户交互展示不同的标签

    Ant Design中根据用户交互展示不同的标签 Ant Design使用的是React框架,那么我们先看代码: <Fragment> <a onClick={() => th ...

  2. Web 3D是否需要WebAssembly?

    大家好,本文讨论了Web 3D是否需要WebAssembly,结论是: 对于使用原生3D技术的程序员,需要: 对于使用Javascript语言的前端程序员,不需要,有其它方法可以达到接近WebAssd ...

  3. matlab读取excel文件中的数据

    1.读取sheet1中的所有数据 1.1首先我们建立一个sheet表,表名为‘111’ 1.2 默认这些文本以及数字都放在sheet1中,我们将此excel选入当前工作目录(必要步骤), 选入当前工作 ...

  4. OpenStack Identity API v3 extensions (CURRENT)

    Table Of Contents Identity API v3 extensions (CURRENT) OS-ENDPOINT-POLICY API Associate policy and e ...

  5. 【移动测试】你的测试用例中,是否包含App前后台切换

    App前后台切换是我们平时常用的一个操作,比如:按手机的home键将应用置于后台.直接按手机电源键关闭屏幕或者通过最近打开的应用列表切换应用等,由此,我们可以得出结论:当app置于前台时,它的页面对我 ...

  6. stars-one原创工具——m3u8视频下载合并器(kotlin)

    一款可以下载m3u8.解密ts文件及合并ts文件的视频下载工具 蓝奏云下载地址 github地址 软件对你有帮助的话,不妨赞赏一波!感谢! 程序说明 采用多线程下载,可有效的提高下载速度 内置解密程序 ...

  7. szTom's Code Style

    介绍szTom在C++中使用的代码风格. 头文件 必须使用using namespace std; 如果是C头文件,必须使用c前缀文件名. #include <cstdio> 而不是 #i ...

  8. .net Core 使用IHttpClientFactory请求

            导读:本文已添加在晨曦微服务之旅,现在自己在尝试微服务架构,一边学边做项目快速的进入状态.当然在学习的过程中会将自己学到的知识进行分享. 一.为什么不用HttpClient       ...

  9. Babel+vscode实现APICloud开发中兼容ES6及以上代码

    本文出自APICloud官方论坛, 感谢论坛版主 penghuoyan 的分享.   使用APICloud开发时,考虑到兼容问题一直使用ES5开发,时间越久感觉越落后,整理了一个兼容ES6的开发环境, ...

  10. Educational Codeforces Round 80 (Rated for Div. 2)

    A. Deadline 题目链接:https://codeforces.com/contest/1288/problem/A 题意: 给你一个 N 和 D,问是否存在一个 X , 使得 $x+\lce ...