11-HTML5新增
HTML5 新增
什么是 HTML5?
HTML5 是下一代 HTML 标准
HTML , HTML 4.01 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持
<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单
对于中文网页需要使用 声明编码，否则会出现乱码
HTML5 的语法
内容类型（ContentType）
HTML5 的文件扩展符与内容类型保持不变，仍然为".html"或".htm"
DOCTYPE 声明
不区分大小写
指定字符集编码
meta charset="UTF-8"
可省略标记的元素
不允许写结束标记的元素：br、col、embed、hr、img、input、、link、meta
可以省略结束标记的元素：li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
可以省略全部标记的元素：html、head、body、colgroup、tbody
省略引号
属性值可以使用双引号，也可以使用单引号
HTML5 中的语义化标签
HTML5 提供了新的语义元素来明确一个 Web 页面的不同部分
<!-- 定义文档的头部区域 -->
<header></header>
<!-- 定义导航链接的部分 -->
<nav></nav>
<!-- 定义独立的内容 -->
<article></article>
<!-- 定义文档中的节（section、区段） -->
<section></section>
<!-- 定义页面主区域内容之外的内容（比如侧边栏） -->
<aside></aside>
<!-- 定义文档的底部区域 -->
<footer></footer>
<!-- 定义独立的流内容（图像、图表、照片、代码等等） -->
<figure></figure>
<!-- 定义被置于 "figure" 元素的第一个或最后一个子元素的位置 -->
<figcaption></figcaption>
<!-- 定义带有记号的文本 -->
<mark></mark>
额外的表单元素
<!-- <datalist> 元素规定输入域的选项列表
使用 <input> 元素的列表属性与 <datalist> 元素绑定 -->
<input list="check" />
<datalist id="check">
<option value="男"></option>
<option value="女"></option>
<option value="未知"></option>
</datalist>
HTML5 中的 input type 类型
验证类型
<!-- 验证是否是一个邮箱地址 -->
<input type="email" />
<!-- 验证是否是一个手机号 -->
<input type="tel" />
<!-- 验证是否是一个url地址 -->
<input type="url" />
取值类型
<!-- 取一个数字（滑块的方式） -->
<input type="range" />
<!-- 取一个数字（微调的方式） -->
<input type="number" />
<!-- 取一个颜色 -->
<input type="color" />
<!-- 取一个日期 -->
<input type="date" />
<!-- 取一个月份 -->
<input type="month" />
<!-- 取一个周数 -->
<input type="week" />
<!-- 取一个时间 -->
<input type="time" />
<!-- 取一个本地时间 -->
<input type="datetime-local" />
<!-- 产生一个搜索意义的表单 -->
<input type="search" />
HTML5 中的表单属性
form 新属性
<!-- autocomplete 属性规定 form 或 input 域应该拥有自动完成功能 -->
<form autocomplete="on"></form>
<!-- novalidate 属性规定在提交表单时不应该验证 form 或 input 域 -->
<form novalidate></form>
input 新属性
<!-- autocomplete属性-->
<input autocomplete="on" />
<!-- placeholder 属性提供一种提示文本（hint），描述输入域所期待的值 -->
<input type="text" placeholder="请输入您的账号" />
<input type="password" placeholder="请输入您的密码" />
<!-- required 属性规定必须在提交之前填写输入域（不能为空） 必填项-->
<input type="text" required />
<!-- autofocus 属性规定在页面加载时，域自动地获得焦点 需要注意的是：一个页面只能有一个-->
<input type="text" autofocus />
<!-- min、max 和 step 属性
适用于以下类型的 <input> 标签：date、number 以及 range-->
<input type="number" name="quantity" min="1" max="5" />
<!-- multiple 属性规定<input> 元素中可选择多个值，在选择过程中
用于以下类型的<input> 标签：email 和 file -->
<input type="file" name="img" multiple />
<!-- pattern 属性描述了一个正则表达式用于验证<input> 元素的值
适用于以下类型的<input> 标签: text, search, url, tel, email, 和 password -->
<input type="text" pattern="[A-Za-z]{3}" />
HTML5 中的关联文本
点击文本时也可以控制表单元素的选择情况
第一种方案
第二种方案
HTML5 中的音频和视频
1、音频
src 音频文件的 URL
controls 向用户显示音频控件（比如播放/暂停按钮）
autoplay 音频在就绪后马上播放
loop 每当音频结束时重新开始播放
muted 音频输出为静音
preload 当网页加载时，音频是否默认被加载以及如何被加载
2、视频
src 音频文件的 URL
controls 向用户显示音频控件（比如播放/暂停按钮）
autoplay 音频在就绪后马上播放
loop 每当音频结束时重新开始播放
muted 音频输出为静音
preload 当网页加载时，音频是否默认被加载以及如何被加载
poster 视频正在下载时显示的图像，直到用户点击播放按钮
width 视频播放器的宽度
height 视频播放器的高度
HTML5 中的Canvas
什么是 canvas?
HTML5
HTML5 中的内联 SVG
什么是 SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 优势
与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 与 Canvas 区别
SVG 适用于描述 XML 中的 2D 图形的语言
Canvas 随时随地绘制 2D 图形（使用 javaScript）
SVG 是基于 XML 的，意味这可以操作 DOM，渲染速度较慢
在 SVG 中每个形状都被当做是一个对象，如果 SVG 发生改变，页面就会发生重绘
Canvas 是一像素一像素地渲染，如果改变某一个位置，整个画布会重绘
| Canvas | SVG |
|---|---|
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 能够以.png 或.jpg 格式保存结果图像 | 复杂度会减慢搞渲染速度 |
| 文字呈现功能比较简单 | 适合大型渲染区域的应用程序 |
| 最合适图像密集的游戏 | 不适合游戏应用 |
浙公网安备 33010602011771号