【html】html5新特性有哪些
<p><strong>一、html5新特性——canvas元素</strong></p><p>canvas元素用于在网页上绘制图形，有多重绘制路径、矩形、圆形、字符以及添加图像的方法</p>
<p>svg元素用于描述二维是矢量图形的一种图形格式。</p>
<p>（1）把svg直接当成图片放在网页上</p>
<p>（2）实现动画</p>
<p>（3）svg图片的交互和滤镜效果</p>
<p>不同点：canvas是通过js来绘制2d图形，逐像素进行渲染的，假若在图片完成后进行修改，整个场景就会重新绘制</p>
<p>svg元素是使用XML描述2d图形的语言，svg dom中的每一个元素都是可用的，可以为其添加js处理器。每一个被绘制的图形均被视为对象，如果发生变化，浏览器就会自动重新绘制图形</p>
<p><strong>二、html5新特性——表单元素</strong></p>
<p><em>新增的表单元素</em></p>
<p><datalist>：元素规定输入域的选项列表，使用<input>元素的list元素与<datalist>元素的id绑定</p>
<p><keygen>：提供一种检验用户的可靠方法，标签规定用于表单的密钥对生成器字段</p>
<p><output>：用于不用类型的输出，比如计算或脚本输出</p>
<p><em>新增的表单属性<br></em></p>
<p>placehoder属性：简短的提示在用户输入值前会显示在输入域上，既默认框提示</p>
<p>required属性：是一个boolean属性，要求填写的输入域不为空</p>
<p>pattern属性：描述了一个正则表达式用于验证<input>元素的值</p>
<p>max / min属性：最大最小值</p>
<p>step属性：为输入域规定合法的数字间隔</p>
<p>height / width属性：用于image类型的<input>标签的图像高度和宽度</p>
<p>autofocus属性：是一个boolean属性，在页面加载时自动获得焦点</p>
<p>multiple属性：是一个boolean属性，规定<input>元素中选择多个值</p>
<p><strong>三、html5新特性——媒体元素</strong></p>
<p><em>播放音频文件的元素<audio>————<audio controls></em></p>
<p>（1）control属性提供播放暂停和音量控件</p>
<p>（2）<audio>和<audio/>之间插入浏览器不支持的<audio>元素的提示文本</p>
<p>（3）允许使用多个<source>元素用来链接不同的音频文件，浏览器使用第一个支持的音频文件</p>
<p>（4）支持三种音频格式文件：mp3、wax、ogg</p>
<p><em>播放视屏文件的元素<video></em></p>
<p>（1）control属性提供播放暂停和音量控件，也可以使用dom操作：play()和pause()</p>
<p>（2）video元素提供了width和height控制视频的尺寸。如果设置了就会在页面加载时保留，没设置就不保留，页面根据原始视频改变</p>
<p><strong>四、html5新特性——地理定位</strong></p>
<p>HTML5 Geolocation（地理定位）用于定位用户的位置</p>
<p><strong>五、html5新特性——html5拖放</strong></p>
<p><strong>六、html5新特性——web存储</strong></p>
<p>（1）localStrorage——没有时间限制的数据存储，存在本地</p>
<p>（2）sessionStrorage——有时间限制的数据存储，针对一个session，本次会话结束（关闭浏览器）数据删除</p>
<p><strong>七、html5新特性——应用程序缓存（Application Cache）</strong></p>
<p>引入应用程序缓存，意味着web应用可进行缓存，并可以在没有网络是访问</p>
<p>优势：</p>
<p>（1）离线浏览——用户可在应用离线时使用</p>
<p>（2）速度——已缓存的加载更快</p>
<p>（3）减少服务器负载——浏览器将只从服务器下载更新过或更改过的资源</p>
<p><strong>八、html5新特性——html5 Web Workers<br></strong></p>
<p>当HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。但是web workers是运行在后台的js，不会影响页面的性能，可以一直在后台运行</p>
<p><strong>九、html5新特性——html5服务器发送事件<br></strong></p>
<p>允许网页获得来自服务器的更新，现在可以做到自动更新</p>
<p><strong>十、html5新特性——html5 WebSocket<br></strong></p><br><br>
来源：https://www.cnblogs.com/RikkaXl/p/15349895.html
頁:
[1]