Html5笔记

来源：互联网发布：华通云数据业界排名编辑：程序博客网时间：2024/05/16 02:08

HTML5新增知识点总结

HTML5几大知识点

1、 video

2、 audio

3、 canvas

4、 svg

5、 Geolocation （地理定位）

6、 LocalStorate和sessionStorage （存储）

7、 Cache manifest （应用缓存）：除了IE其他浏览器都支持

8、 Web Worker

9、服务器发送事件（Server-Sent）

10、 HTML5标签、属性、事件

11、 web socket

Video

Video标签中含有src、poster、preload、autoplay、loop、controls、width、height等几个属性，还有一个内部使用标签

1） src属性用来执行播放视频的位置. Poster属性用于指定一张图片，在当前视频数据无效时显示预览图

2） preload属性用于定义视频是否预加载。属性有三个可选值：none、metadata（部分加载）、auto。默认值是auto。

3） autoplay属性用于设置视频是否自动播放，是一个布尔值属性，当出现该属性时表示自动播放。

4） loop属性，用于指定视频是否循环播放，同样是布尔值属性

5） controls属性用于向浏览器指明页面制作者没有使用脚本生成播放器，需要浏览器启用自身的播放控制栏。控制栏必须包括播放暂停控制，播放进度控制，音量控制等。

6） source标签用于给媒体指定多个可选择的文件地址，且只能在媒体标签没有使用src属性时使用

浏览器按source标签的顺序检测指定的视频是否能够播放，如果不能则换下一个，此方法多用于兼容不同的浏览器。Source标签包含src、type、media三个属性

注意，audio,canvas,svg,等几个标签属性可以参考
https://jontylu.github.io/jonty_blog/2017/04/06/HTML5新增标签/#more（转载）

HTML5 Geolocation(地理定位)：

IE9,Firefox，chrome,Safari, Opera支持

HTML5 Geolocation API用于获取用户的地理位置。

getCurrentPosition() 方法来获得用户的位置

LocalStorate和sessionStorage （存储）

Html5提供了两种在客户端的存储数据的新方法：

LocalStorage: 没有时间限制的数据存储

SessionStorage: 针对一个session 的数据存储

在此之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为他们由每个对服务器的请求来传递，速度慢效率低。

应用缓存

应用程序提供了离线下载的使用功能，让应用程序可以huoqu 本地的网站内容，例如HTML,Css,图片以及javascript.这个特性可以提高网站性能，它的实现借助于manifest文件如下

<html manifest=”…”>

与浏览器缓存相比，它不强制用户访问的网站内容被缓存。

应用缓存为应用带来三个优势

离线浏览：用户可在应用离线时使用他们

速度：已缓存资源加载得更快

减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。

Web worker （除了IE，其他浏览器都支持web worker）

什么是web worker：

在HTML页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

Web work是运行在后台的javascript，独立于其他脚本，不会影响其他页面的性能。

注意：由于web worker 位于外部文件中，他无法访问window,document,parent对象。

HTML5服务器发送事件

Server-Sent事件—单向信息传递

Server-Sent事件指的是网页自动获取来自服务器的更新。（除了IE,其他主流浏览器均支持服务器发送事件。）

接收Server-Sent事件通知

EventSource对象用于接收服务器发送事件通知

var source=newEventSource("demo_sse.php");source.onmessage=function(event){document.getElementById("result").innerHTML+=event.data+ "<br/>";};

HTML 5 服务器发送事件创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL（本例中是 “demo_sse.php”）
每接收到一次更新，就会发生 onmessage 事件
当 onmessage 事件发生时，把已接收的数据推入 id 为 “result” 的元素中

关于html5的一些面试题

1、 html5有哪些新特性、移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题

a、新特性、新增元素（需要了解下）

内容元素：article、footer、header、nav、section

表单元素：calendar、date、time、email、url、search

控件元素：webworker、websockt、Geolcation
b、移除元素
显现层元素：basefont , big, center, font , s , strike, tt, u
性能较差元素：frame, frameset，noframes

c、处理兼容性的两种方法（需要了解下）
1）IE6/7/8 支持通过dicument 方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签
2）使用html5shim框架
另外，DOCTYPE声明的方式是区别HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构，功能元素加以区分

2、如何区分HTML和HTML5

1）在类型申明上，

2）结构语义上不同

HTML:没有体现结构语言话的标签，通常都是这样来命名的<div id=”header”></div>,这样表示网站的头部

HTML5:在语义上有很大的优势，提供了一些新的标签，比如：<header><article><footer><nav><aside><section>

3、10个重要的表单元素

Color、Date、Datetime-local、Email、Time、Url、Range、Telephone、Number、Search

4、 HTML5中的canvas

Canvas是HTML中你可以绘制图形的区域

如何使用canvas（具体参考链接中的内容）

首先定义canvas区域

<canvas id=”mycanvas” width=”600” height=”500”style=””></canvas>

其次获取访问canvas上下文区域的关联

Var c=document.getElementById(“mycanvas”)Var ctx=c.getContext(“2d”)

最后绘制图形

5、Html5和html的区别

1、在文档类型申明

2、在结构语义上

3、 Html5有强大的新增功能(需要了解)

6、Canvas和SVG的区别

Canvas SVG 依赖分辨率不依赖分辨率弱的文本渲染能力适合带有大型渲染区域的应用程序一旦绘制完成，你不能访问像素和操作它使用svg的形状能被记忆和操作，浏览器可以再次显示没有记住以后事情的意向，所以更快为了之后的操作，需要记录坐标，操作比较缓慢不适合游戏应用不支持事件处理器支持事件处理器

7、HTML5提供了哪些新的API

Html5提供的应用程序API主要有

Media API

Text track API

Application Cache API

User interaction

Data Transfer API

Command API

Constraint Validation API

History API

8、HTML5应用程序缓存和浏览器缓存有什么区别

<html manifest=”…”>

与浏览器缓存相比，它不强制用户访问的网站内容被缓存。

参考链接：https://wenku.baidu.com/view/308939f3e2bd960591c67746.html

阅读全文

0 0