# 1 如何理解HTML语义化
- 用正确的标签做正确的事情!
HTML语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;- 在没有样式
CSS情况下也以一种文档格式显示,并且是容易阅读的。 - 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于
SEO。 - 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
# 2 H5的新特性有哪些
- 画布(
Canvas) API - 地理(
Geolocation) API - 音频、视频API(
audio,video) localStorage和sessionStoragewebworker,websocket- 新的一套标签
header,nav,footer,aside,article,section web worker是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用这个线程执行复杂的数据操作,然后把操作结果通过postMessage传递给主线程,这样在进行复杂且耗时的操作时就不会阻塞主线程了HTML5 History两个新增的API:history.pushState和history.replaceState,两个API都会操作浏览器的历史记录,而不会引起页面的刷新
Hash就是url中看到#,我们需要一个根据监听哈希变化触发的事件(hashchange) 事件。我们用window.location处理哈希的改变时不会重新渲染页面,而是当作新页面加到历史记录中,这样我们跳转页面就可以在hashchange事件中注册ajax从而改变页面内容。 可以为hash的改变添加监听事件:
window.addEventListener("hashchange", funcRef, false)
@前端进阶之旅: 代码已经复制到剪贴板
WebSocket使用ws或wss协议,Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080');
// 打开Socket
socket.onopen = function(event) {
// 发送一个初始化消息
socket.send('I am the client and I\'m listening!');
// 监听消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
};
// 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
};
// 关闭Socket....
//socket.close()
};
@前端进阶之旅: 代码已经复制到剪贴板
# 3 说一下 HTML5 drag api
dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触
