html5

HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search

video 元素支持三种视频格式:Ogg MP4 WebM
<video src="movie.ogg" controls="controls"></video>

audio 元素支持三种音频格式:Ogg M3 Wav
<audio src="song.ogg" controls="controls"></audio>

Canvas :<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成(区别svg)
适合图像密集型的游戏
依赖分辨率
不支持事件处理器

SVG 指可伸缩矢量图形,是一种使用 XML 描述 2D 图形的语言(区别canvas)
用于定义用于网络的基于矢量的图形,图像在放大或改变尺寸的情况下其图形质量不会有损失
适合带有大型渲染区域的应用程序(比如谷歌地图)
不依赖分辨率
支持事件处理器

Canvas 和 SVG 都允许在浏览器中创建图形

两种在客户端存储数据的新方法:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储 当用户关闭浏览器窗口后,数据会被删除。
之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
HTML5 使用 JavaScript 来存储和访问数据。

应用程序缓存(IE不支持)为应用带来三个优势:
如需启用应用程序缓存,请在文档的 <html> 标签中包含 manifest 属性:
manifest 文件的建议的文件扩展名是:".appcache"。
manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置。
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

Server-Sent 事件指的是网页自动获取来自服务器的更新。


Input 类型
email ---在提交表单时,会自动验证 email 域的值。
url ---提交表单时,会自动验证 url 域的值。(如网址)
number --<input type="number" name="points" min="0" max="10" step="3" value="6" />
默认6最大10最小0数数相差3
range ---range 类型显示为滑动条。
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

option 元素永远都要设置 value 属性。

表单元素:
datalist
keygen
output

新的 form 属性:
autocomplete --规定 form 或 input 域应该拥有自动完成功能
autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。
novalidate
form表单中写novalidate="true" 则表单中的验证不需要了

新的 input 属性:
autocomplete ---"ON"在页面加载时,浏览器应该在该域中显示填写的选项 "OFF"则不显示
autofocus ---在页面加载时,域自动地获得焦点。适用于所有 <input> 标签的类型。
<input type="text" name="user_name" autofocus="autofocus" />
form --利用form表单id实现form标签对外的标签也属于form表单**【好,布局】
<form id="aaa"></form> <input form="aaa"> 则form内部提交也会把次in普通提交
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)【重!表单重写】
<input type="submit" formnovalidate="true" value="Submit without validation" />
注释:表单重写属性适用于以下类型的 <input> 标签:submit 和 image。
结合<button>标签
height 和 width
<input type="image" src="/i/eg_submit.jpg" width="99" height="99" />
list
min, max 和 step
multiple ----multiple 属性规定输入域中可选择多个值。
适用于以下类型的 <input> 标签:email 和 file。
Select images: <input type="file" name="img" multiple="multiple" />
pattern (regexp) 【正则 难】
placeholder
【search标签】
<input type="search" name="user_search" placeholder="Search W3School" />
required
提交之前填写输入域(不能为空)【相当于简单的验证限制】
<input type="text" name="usr_name" required="required" />

bgcolor 是标签body的属性


新标签:
<article>
<aside> 标签定义其所处内容之外的内容。
<audio>
<h1> - <h6> 来表示标题,使用 <em> 标签来表示强调的文本,<i>,应该使用 <strong> 标签来表示重要文本,应该使用 <mark> 标签来表示标注的/突出显示的文本。
<b> 标签规定粗体文本。 CSS "font-weight" 属性来设置粗体文本。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

caption 元素定义表格标题。
caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<cite> 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

<datalist> 标签定义下拉选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。【select标签】
datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
请使用 input 元素的 list 属性来绑定 datalist。

<dd> 在定义列表中定义条目的定义部分。

<del> 定义文档中已被删除的文本。 下划线的形式显示

<fieldset> 标签没有必需的或唯一的属性。 --- 可能有特殊的边界
将表单内的相关元素分组
<legend> 标签为 fieldset 元素定义标题。
<form>
<fieldset>
<legend>health information</legend>
height: <input type="text" />
weight: <input type="text" />
</fieldset>
</form>

<figcaption> 标签定义 figure 元素的标题(caption)
<figure>用作文档中插图的图像:
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

<frame> 一个特定的窗口
<frame scrolling="auto">在需要的时候显示滚动条。
区别<iframe>


<input type="value">
button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
checkbox 定义复选框。
file 定义输入字段和 "浏览"按钮,供文件上传。
hidden 定义隐藏的输入字段。
image 定义图像形式的提交按钮。 必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
<input type="image" src="submit.gif" alt="Submit" />
password 定义密码字段。该字段中的字符被掩码。
radio 定义单选按钮。
reset 定义重置按钮。重置按钮会清除表单中的所有数据。 请单击重置按钮,可以清空表单【登陆注册ok】
submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

<ins> 标签定义已经被插入文档中的文本。【改 下划线】
请与 <del> 一同使用,来描述文档中的更新和修正。【删 删除线】

<mark>
<p>Do not forget to buy <mark>milk</mark> today.</p>

<option>
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

<output> 标签定义不同类型的输出 IE不支持

<progress value="5" max="100"></progress> 默认初始5 最大100 【下载进度】

wrap属性 当在表单中提交时,textarea 中的文本换行必须结合cols属性
<textarea rows="1" cols="10" wrap="hard"></textarea> 【rows控制高 cols控制宽 超出显示滚动条】

<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。
用于规定字幕文件或其他包含文本的文件,当媒介播放时,这些文件是可见的。
目前所有主流浏览器都不支持 <track> 标签。

原文地址:https://www.cnblogs.com/fenglee/p/7258532.html