1.什么是 HTML5?
HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。
HTML5 是下一代 HTML 标准。
HTML 4.01的上一个版本诞生于 1999 年.
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5是下一代 HTML 标准,由万维网联盟(W3C)在2014年10月完成标准制定,为了在移动设备上支持多媒体,仍处于完善之中。
2.HTML5的标志
Html5的标志就是<!doctype html> 声明标记
必须位于 HTML5 文档中的第一行
注意:对于中文网页需要使用<meta charset="utf-8">
声明编码,否则会出现乱码。
HTML5 的改进
在上一代HTML 4.01的规范上,抛弃一些标记属性,然后在新增一些标记和属性。
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym> <applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>
以下是在html5中新增的元素
1、新元素
2、新属性
3、完全支持 CSS3
4、Video 和 Audio
5、2D/3D 制图
6、本地存储
HTML5 新元素
1.<bdi>
允许您设置一段文本,使其脱离其父元素的文本方向设置。
2.<details>
用于描述文档或文档某个部分的细节
任何形式的内容都能被放在 <details>
标签里边。
详细信息的内容隐藏之后不会占用物理空间。<details>
元素的内容默认对用户是不可见的,我们可以设置 open 属性展示出来。
3.<summary>
标签包含 details 元素的标题
4.<dialog>
定义对话框,比如提示框
open属性–规定 dialog 元素是有效的,用户可以与它进行交互。
5.<mark>
定义带有记号的文本。
6.<meter>
定义度量衡。仅用于已知最大和最小值的度量
7.<progress>
定义任何类型的任务的进度。
请将 标签与 JavaScript 一起使用来显示任务的进度。
max属性 规定需要完成的值。
value属性 规定进程的当前值。
8.<ruby>
定义 ruby 注释(中文注音或字符)。
9.<rt>
定义字符(中文注音或字符)的解释或发音。
10.<rp>
在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
在东亚使用,显示的是东亚字符的发音。
将 <ruby>
标签与 <rt>
和 <rp>
标签一起使用:
<ruby>
元素由一个或多个需要解释/发音的字符和一个提供该信息的<rt>
元素组成,还包括可选的 <rp>
元素,定义当浏览器不支持 “ruby” 元素时显示的内容。
11.<wbr>
规定在文本中的何处适合添加换行符。
如果单词太长,或者您担心浏览器会在错误的位置换行,那么您可以使用 <wbr>
元素来添加 Word Break Opportunity(单词换行时机)。
HTML5新的表单元素
<datalist>
定义输入控件的预定义选项
<datalist>
元素为 <input type=”text”>
元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input>
元素的 list 属性必须引用 <datalist>
元素的 id 属性。
<input list=”xxxxx”> == <datalist id=”xxxxx”>
HTML5新的input元素
Input 类型: color – color类型用在input字段主要用于选取颜色
Input 类型: email–email 类型用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值是否合法有效
Input 类型: url–url 类型用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。
Input 类型: date----date类型允许你从一个日期选择器选择一个日期。
Input 类型: datetime—datetime类型允许你选择一个日期(UTC 时间)。[google浏览器不支持]
Input 类型: datetime-local—datetime-local 类型允许你选择一个日期和时间 (无时区).
Input 类型: month–month 类型允许你选择一个月份。
Input 类型: time–time 类型允许你选择一个时间。
Input 类型: week–week 类型允许你选择周和年。
Input 类型: number–number 类型用于应该包含数值的输入域。
还能够设定对所接受的数字的限定
使用下面的属性来规定对数字类型的限定:
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
Input 类型: search–search 类型用于搜索域,比如站点搜索或 Google 搜索
HTML5 新的表单属性
autocomplete 可以作用在<form>
和 <input>
标签,拥有自动完成功能,有可能在 form元素中是开启的,而在input元素中是关闭的。
autocomplete
适用于 <form>
标签,以及以下类型的 <input>
标签:text, search, url, telephone,email, password, datepickers, range 以及 color。
novalidate
novalidate 属性是一个 boolean(布尔) 属性.
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
HTML5 新的input元素的属性
autocomplete
autofocus–规定在页面加载时,input元素自动地获得焦点。
formaction
formaction 属性用于描述表单提交的URL地址.
formaction 属性会覆盖<form>
元素中的action属性.
formaction 属性用于 type=“submit” 和 type=“image”.
formenctype
formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)
formenctype 属性覆盖 form 元素的 enctype 属性。
该属性与 type=“submit” 和 type=“image” 配合使用。
formmethod
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 元素的 method 属性。
该属性可以与 type=“submit” 和 type=“image” 配合使用。
formnovalidate
novalidate 属性是一个 boolean 属性.
novalidate属性描述了 <input>
元素在表单提交时无需被验证。
formnovalidate 属性会覆盖 <form>
元素的novalidate属性.
formnovalidate 属性与type="submit一起使用
formtarget
formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。
The formtarget 属性覆盖 <form>
元素的target属性.
formtarget 属性与type=“submit” 和 type="image"配合使用.
height 与 width
height 和 width 属性规定用于 image 类型的 <input>
标签的图像高度和宽度。
height 和 width 属性只适用于 image 类型的<input>
标签。
图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度,图像所需的空间 在加载页时会被保留。如果没有这些属性, 浏览器不知道图像的大小,并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 (尽管图片已加载)。
multiple
multiple 属性是一个 boolean 属性.
multiple 属性规定<input>
元素中可选择多个值。
multiple 属性适用于以下类型的 <input>
标签:email 和 file
pattern (regexp)
pattern 属性描述了一个正则表达式用于验证 <input>
元素的值。
pattern 属性适用于以下类型的 <input>
标签: text, search, url, tel, email, 和 password.
placeholder
placeholder 属性提供一种提示(hint),描述输入域所期待的值。
简短的提示在用户输入值前会显示在输入域上。
placeholder 属性适用于以下类型的<input>
标签:text, search, url, telephone, email 以及 password。
required
required 属性是一个 boolean 属性.
required 属性规定必须在提交之前填写输入域(不能为空)。
required 属性适用于以下类型的<input>
标签:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。