HTML5系列：HTML5与HTML4的区别
1. 语法的改变
1.1 DOCTYPE声明
DOCTYPE声明在HTML文件中必不可少，位于文件第一行。
HTML4中声明方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5中声明方法：
<!DOCTYPE html>
1.2 字符编码
HTML4指定方式：
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
HTML5指定方式：
<meta charset="utf-8" />
1.3 元素标记
不允许写结束标记的元素：br、embed、hr、img、input、link、meta、param。
不允许写结束标记的元素是指不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>。
示例：
错误方式：<br></br> 正确方式：<br/>
1.4 具有boolean值的属性
<!--只写属性不写属性值，属性为true-->
<input type="checkbox" checked />
<!--不写属性，属性为false-->
<input type="checkbox" />
<!--属性值=属性名，属性为true-->
<input type="checkbox" checked="checked" />
<!--属性值=空字符串，属性为true-->
<input type="checkbox" checked="" />
2. HTML5新增元素
2.1 HTML5新增结构元素
在HTML5中新增的结构元素：
section元素
section元素表示页面中的一个内容区块，如章节、页眉或页面中的其他部分，可以与h1、h2、h3、h4、h5、h6等元素结合使用，标示文档结构。
<section></section>
article元素
article元素表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章。
<article></article>
aside元素
aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。
<aside></aside>
header元素
header元素表示页面中一个内容区块或整个页面的标题。
<header></header>
hgroup元素
hgroup元素用于对整个页面中一个内容区块的标题进行组合。
<hgroup></hgroup>
footer元素
footer元素表示整个页面或页面中一个内容区块的脚注。一般会包含作者姓名、创作日期以及作者联系方式等。
<footer></footer>
section、article、aside、header、hgroup、footer都对应于HTML4中的div元素。
nav元素
nav元素表示页面中导航链接的部分。
HTML5示例：
<nav></nav>
HTML4示例：
<ul></ul>
figure元素
figure元素表示一段独立的流内容，一般表示文档主题流内容的一个独立单元。使用figcaption元素为figure元素组添加标题。
<figure>
<figcaption></figcaption>
<p></p>
</figure>
2.2 HTML5新增的其他元素
video元素
video元素定义视频。
<video src="" controls="controls">Video元素</video>
audio元素
audio元素定义音频
<audio src="">audio元素</audio>
embed元素
embed元素用于插入各种多媒体，格式可以是Midi、wav、MP3等。
<embed src="" />
mark元素
mark元素主要用来在视觉上向用户呈现需要突出或高亮显示是文字。mark元素的一个比较经典的应用是在搜索结果中向用户高亮显示搜索关键词，与HTML4中span使用方式相同。
<mark></mark>
time元素
time元素表示日期、时间或同时表示日期时间。与HTML4中span使用方式相同。
<time></time>
canvas元素
canvas元素表示图形，如图表或图像。这个元素本身没有行为，仅提供一块画布，它把一个绘制API展现给JavaScript，以使JavaScript能够进行绘制。
<canvas id="id" width="200" height="200"></canvas>
details元素
details元素表示用户要求得到并且可以得到的细节信息。可以与summary元素配合使用。summary元素提供标题或图例。summary元素是details元素的第一个子元素。
<details>
<summary>HTML5</summary>
Content
</details>
datalist元素
datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。
<datalist></datalist>
datagrid元素
datagrid元素表示可选数据的列表，可以树形列表的形式来显示。
<datagrid></datagrid>
menu元素
menu元素表示菜单列表。
<menu>
<li></li>
<li></li>
</menu>
2.3 新增input元素的类型
email类型表示必须输入Email的文本输入框。
<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属性，让元素在页面打开时自动获得焦点。
<input type="text" autofocus />
placeholder属性
对input（type=text）、textarea元素设置placeholder属性，提示用户可以输入的内容。
<input type="text" placeholder="请输入" />
required属性
对input（type=text）、textarea元素设置required属性，检查必须输入。
<input type="text" required="required" />
HTML5系列：HTML5与HTML4的区别的更多相关文章
- html5与html4的区别，如何一眼区分
还是在面试过程中遇到的这个问题,但是当时感觉回答的不是很全面,回来以后自己做的总结: 以上这个问题如果教大家看源码,可能一眼很直观的就能认出,那个是html4,那个是html5,但是面试的时候问道这个 ...
- Html5 与 Html4 的区别
HTML5是HTML标准的下一个版本.虽然HTML5没有完全颠覆HTML4,但是它们也有一些不同.最新最全的HTML5-HTML4对比信息 请看http://dev.w3.org/html5/html ...
- HTML5系列目录
1. HTML5与HTML4的区别 2. HTML5结构 3. HTML5表单 4. HTML5文件 5. HTML5绘图 6. HTML6本地存储
- 初学HTML5系列一：简单介绍
最近很闲,就想着学点东西,然后就瞄中了html5,以前只看过很简单的一些,这次是系统的学下,顺便也记录下.废话不多说,开始正题. 稍微介绍下html5,html5是W3C和WHATWG 合作的结果. ...
- HTML5系列一（属性概述）
HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...
- html5，html5教程
html5,html5教程 1.向后兼容 HTML5是这样被定义的:能向后兼容目前UA处理内容的方式.为了让语言更简单,一些老的元素和Attribute被舍弃.比如一些纯粹用于展现的元素(译注:即非语 ...
- IT兄弟连 HTML5教程 HTML5和HTML的关系
HTML5开发现在很火爆,是一门技术,更是一个概念.可以让我们的工作模式.交互模式以及对应用和游戏的体验有了翻天覆地的变化,很多人都知道HTML5这门技术,也常把HTML5读作H5(简称).其实一些外 ...
- HTML5之一HTML5简介
1.什么是HTML5? HTML5是HTML的新一代标准.以前版本的HTML标准4.01发布于1999. 自1999年以后,web已经有了翻天覆地的变化. 实际上HTML5仍旧是开发中的一个标准.但是 ...
- HTML4，HTML5，XHTML 之间有什么区别？
原始日期:2014-10-25 14:12 我来从HTML的历史谈谈他们3者的区别.在HTML的早期发展中,W3C成立之前,很多标准的制定都是在浏览器的开发者们互相讨论的情况下完成的,比如HTML 2 ...
随机推荐
- Xmarks Hosts
使用 Chrome 浏览器,但实在是没精力去各种FQ和寻找 Google 的 hosts 来同步书签,没办法只好折中使用 Xmarks 来单独同步书签,没想到最近 Xmarsks 又不好使了.再次标记 ...
- java-并发-高级并发对象2
浏览以下内容前,请点击并阅读 声明 并发集合 java.util.concurrent包包含了许多对于java集合框架的补充,根据提供的接口可以将这些集合分为以下几类: BlockingQueue 定 ...
- 【NEUQACM OJ】1017: 平面切割（特别版）
1017: 平面切割(特别版) 题目描述 我们要求的是n条闪电型折线分割平面的最大数目.比如,一条闪电型折线可以将平面分成两部分,两条最多可以将平面分成12部分,三条最多可将平面分成31部分,四条最多 ...
- Cannot attach the file ‘{0}' as database '{1}'
EF使用CodeFirst,当使用localDB时,删除mdf文件,会报“Cannot attach the file ‘{0}' as database '{1}'”错误. 解决方法如下: 1.打开 ...
- js基础2
什么是DOM? DOM:文档对象模型(Document Object Model),又称为文档树模型.是一套操作HTML文档的API. 什么是文档对象模型? DOM将html文档看成了一个对象,htm ...
- js库
lanchpad用的js库 http://lesscss.org/ https://github.com/EightMedia/hammer.js/wiki/Getting-Started http: ...
- session跟cookie的区别
这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...
- VIPM 发布功能总结
前言 上一篇中,我们分析介绍了LabVIEW自带的安装发布功能,今天总结一下VIPM的发布功能. VIPM 提到LabVIEW,不能不提VI Package Manager (VIPM)这个工具包 ...
- Visual Studio 2015 如何将全英界面转成中文
1 启动VS2015程序,在菜单栏中找到tools 2 在弹出的下拉窗口中选中options 3 此时弹出的对话框,选中Environment下的international setting 4 点击获 ...
- 【实战Java高并发程序设计 5】让普通变量也享受原子操作
[实战Java高并发程序设计 1]Java中的指针:Unsafe类 [实战Java高并发程序设计 2]无锁的对象引用:AtomicReference [实战Java高并发程序设计 3]带有时间戳的对象 ...