1. 语法的改变

1.1 DOCTYPE声明

　　DOCTYPE声明在HTML文件中必不可少，位于文件第一行。

　　HTML4中声明方法：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　HTML5中声明方法：

  1. <!DOCTYPE html>

1.2 字符编码

　　HTML4指定方式：

  1. <meta http-equiv="content-type" content="text/html;charset=utf-8" />

　　HTML5指定方式：

  1. <meta charset="utf-8" />

1.3 元素标记

　　不允许写结束标记的元素：br、embed、hr、img、input、link、meta、param。

　　不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>。

　　示例：

　　错误方式：<br></br>    正确方式：<br/>

1.4 具有boolean值的属性

  1. <!--只写属性不写属性值，属性为true-->
  2. <input type="checkbox" checked />
  3. <!--不写属性，属性为false-->
  4. <input type="checkbox" />
  5. <!--属性值=属性名，属性为true-->
  6. <input type="checkbox" checked="checked" />
  7. <!--属性值=空字符串，属性为true-->
  8. <input type="checkbox" checked="" />

2. HTML5新增元素

2.1 HTML5新增结构元素

　　在HTML5中新增的结构元素：

　　section元素

　　section元素表示页面中的一个内容区块，如章节、页眉或页面中的其他部分，可以与h1、h2、h3、h4、h5、h6等元素结合使用，标示文档结构。

  1. <section></section>

　　article元素

　　article元素表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章。

  1. <article></article>

　　aside元素

　　aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。

  1. <aside></aside>

　　header元素

　　header元素表示页面中一个内容区块或整个页面的标题。

  1. <header></header>

　　hgroup元素

　　hgroup元素用于对整个页面中一个内容区块的标题进行组合。

  1. <hgroup></hgroup>

　　footer元素

　　footer元素表示整个页面或页面中一个内容区块的脚注。一般会包含作者姓名、创作日期以及作者联系方式等。

  1. <footer></footer>

　　section、article、aside、header、hgroup、footer都对应于HTML4中的div元素。

　　nav元素

　　nav元素表示页面中导航链接的部分。

　　HTML5示例：

  1. <nav></nav>

　　HTML4示例：

  1. <ul></ul>

　　figure元素

　　figure元素表示一段独立的流内容，一般表示文档主题流内容的一个独立单元。使用figcaption元素为figure元素组添加标题。

  1. <figure>
  2.     <figcaption></figcaption>
  3.     <p></p>
  4. </figure>

2.2 HTML5新增的其他元素

　　video元素

　　video元素定义视频。

  1. <video src="" controls="controls">Video元素</video>

　　audio元素

　　audio元素定义音频

  1. <audio src="">audio元素</audio>

　　embed元素

　　embed元素用于插入各种多媒体，格式可以是Midi、wav、MP3等。

  1. <embed src="" />

　　mark元素

　　mark元素主要用来在视觉上向用户呈现需要突出或高亮显示是文字。mark元素的一个比较经典的应用是在搜索结果中向用户高亮显示搜索关键词，与HTML4中span使用方式相同。

  1. <mark></mark>

　　time元素

　　time元素表示日期、时间或同时表示日期时间。与HTML4中span使用方式相同。

  1. <time></time>

　　canvas元素

　　canvas元素表示图形，如图表或图像。这个元素本身没有行为，仅提供一块画布，它把一个绘制API展现给JavaScript，以使JavaScript能够进行绘制。

  1. <canvas id="id" width="200" height="200"></canvas>

　　details元素

　　details元素表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用。summary元素提供标题或图例。summary元素是details元素的第一个子元素。

  1. <details>
  2.     <summary>HTML5</summary>
  3.     Content
  4. </details>

　　datalist元素

　　datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。

  1. <datalist></datalist>

　　datagrid元素

　　datagrid元素表示可选数据的列表，可以树形列表的形式来显示。

  1. <datagrid></datagrid>

　　menu元素

　　menu元素表示菜单列表。

  1. <menu>
  2.     <li></li>
  3.     <li></li>
  4. </menu>

2.3 新增input元素的类型

　　email

　　email类型表示必须输入Email的文本输入框。

  1. <input type="email" />

　　url

　　url类型表示必须输入URL的文本输入框。

　　number

　　number类型表示必须输入数值的文本输入框。

　　range

　　range类型表示必须输入一定范围内数字值的文本输入框。

　　Date Pickers

　　date 选取日、月、年

　　month 选取月、年

　　week 选取周、年

　　time 选取时间（小时、分钟）

　　datetime 选取时间、日、月、年（UTC时间）

　　datetime-local 选取时间、日、月、年（本地时间）

3. HTML5新增属性

3.1 新增表单属性

　　autofocus属性

　　对input（type=text）、select、textarea元素设置autofocus属性，让元素在页面打开时自动获得焦点。

  1. <input type="text" autofocus />

　　placeholder属性

　　对input（type=text）、textarea元素设置placeholder属性，提示用户可以输入的内容。

  1. <input type="text" placeholder="请输入" />

　　required属性

　　对input（type=text）、textarea元素设置required属性，检查必须输入。

  1. <input type="text" required="required" />

HTML5系列：HTML5与HTML4的区别的更多相关文章

  1. html5与html4的区别，如何一眼区分

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

  2. Html5 与 Html4 的区别

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

  3. HTML5系列目录

    1. HTML5与HTML4的区别 2. HTML5结构 3. HTML5表单 4. HTML5文件 5. HTML5绘图 6. HTML6本地存储

  4. 初学HTML5系列一：简单介绍

    最近很闲,就想着学点东西,然后就瞄中了html5,以前只看过很简单的一些,这次是系统的学下,顺便也记录下.废话不多说,开始正题. 稍微介绍下html5,html5是W3C和WHATWG 合作的结果. ...

  5. HTML5系列一（属性概述）

    HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...

  6. html5，html5教程

    html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...

  7. IT兄弟连 HTML5教程 HTML5和HTML的关系

    HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...

  8. HTML5之一HTML5简介

    1.什么是HTML5? HTML5是HTML的新一代标准.以前版本的HTML标准4.01发布于1999. 自1999年以后,web已经有了翻天覆地的变化. 实际上HTML5仍旧是开发中的一个标准.但是 ...

  9. HTML4，HTML5，XHTML 之间有什么区别？

    原始日期:2014-10-25 14:12 我来从HTML的历史谈谈他们3者的区别.在HTML的早期发展中,W3C成立之前,很多标准的制定都是在浏览器的开发者们互相讨论的情况下完成的,比如HTML 2 ...

随机推荐

  1. SOAPUI使用教程-了解REST参数

    1.2.资源参数 在这一节中,我们更为详细的看看提供给你不同类型的REST参数.有五种类型的可用参数:QUERY, HEADER, TEMPLATE, MATRIX and PLAIN. 所有参数可以 ...

  2. Python3.5 day3作业二：修改haproxy配置文件。

    需求: 1.使python具体增删查的功能. haproxy的配置文件. global log 127.0.0.1 local2 daemon maxconn 256 log 127.0.0.1 lo ...

  3. redis的面试题，没答出来，直接被pass

    redis 内存数据集大小上升到一定大小的时候,就会施行数据淘汰策略.redis 提供 6种数据淘汰策略:  volatile-lru:从已设置过期时间的数据集(server.db[i].expire ...

  4. #ifdef _DEBUG #undef THIS_FILE static char THIS_FILE[]=__FILE__; #endif

    情况1:#ifdef _DEBUGvirtual void AssertValid() const;                 //assert(断言)valid(有效的,正确的)virtual ...

  5. 用Node.js发送邮件

    本文讲的是用Node.js通过一个开启smtp的已有的邮箱账号发送邮件,而不是如何创建一个邮件服务器 开启smtp服务 首先要去要使用的邮箱中设置开启smtp,才能正常发送邮件 这边以163邮箱为例 ...

  6. py2exe

    1- 生成单一的exe文件: pyinstaller.py -F d:\open_txt\t.py 2- 添加必要的搜索路径: pyinstaller.py -F -p D:\python27\Lib ...

  7. 华为oj 刷题记录之合唱团

    华为OJ-合唱队 描述 计算最少出列多少位同学,使得剩下的同学排成合唱队形 说明: N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队形. 合唱队形是指这样的一种队 ...

  8. 《Linux内核设计与实现》读书笔记 第三章 进程管理

    第三章进程管理 进程是Unix操作系统抽象概念中最基本的一种.我们拥有操作系统就是为了运行用户程序,因此,进程管理就是所有操作系统的心脏所在. 3.1进程 概念: 进程:处于执行期的程序.但不仅局限于 ...

  9. SQL Server定时自动抓取耗时SQL并归档数据发邮件脚本分享

    SQL Server定时自动抓取耗时SQL并归档数据发邮件脚本分享 第一步建库和建表 USE [master] GO CREATE DATABASE [MonitorElapsedHighSQL] G ...

  10. SQL语句优化（转载）

    一.操作符优化 1.IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格.但是用IN的SQL性能总是比较低的,从Oracle执行的步骤来分析用IN的SQL与不用 ...