该篇是web综合部分,主要包含了HTML(HTML5)、http、跨域、页面优化及其他一些概念性的问题 doctype是什么?标准模式与兼容模式各有什么区别? 声明必须处于HTML文档的头部,在标签之前,HTML5中不区分大小写,它告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 行内元素、块级元素、空(void)元素分别是什么?常用的有那些? 行内元素:行内元素不形成新内容块,即在其左右可以有其他元素,常见的有:a、span、img、b、i、em、strong、label、input、textarea、select、button、sub、sup、q 块级元素:块级元素占据其父元素(容器)横向的整个内容区域,常见的有:div、ul、ol、li、dl、dt、dd、h1-h6、p、table、form、hr、iframe、pre,html5增加的有:header、nav、section、article、aside、footer、audio、video 空元素:没有内容的 HTML 元素,常见的空元素: br、hr、img 、input 、link 、meta href和src区别? title和alt href: 指定网络资源的位置(超文本引用),从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系,在 link和a 等元素上使用 src: 属性仅仅嵌入当前资源到当前文档元素定义的位置,是页面必不可少的一部分,是引入。在 img、script、iframe 等元素上使用 title: 既是html标签,又是html属性,title作为属性时,用来为元素提供额外说明信息,通常当鼠标滑动到元素上的时候显示 alt: alt是html标签的属性,alt属性则是用来指定替换文字,只能用在img、area和input元素中(包括applet元素),用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息 iframe有那些缺点? iframe会阻塞主页面的Onload事件; 搜索引擎的检索程序无法解读这种页面,不利于SEO; iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。 html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5? HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。 绘画 canvas; 用于媒介回放的 video 和 audio 元素; 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失; sessionStorage 的数据在浏览器关闭后自动删除; 语意化更好的内容元素,比如 article、footer、header、nav、section; 表单控件,calendar、date、time、email、url、search; 新的技术webworker, websocket, Geolocation; 移除的元素: 纯表现的元素:basefont,big,center,font, s,strike,tt,u; 对可用性产生负面影响的元素:frame,frameset,noframes; 支持HTML5新标签: IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式。 也可以直接使用成熟的框架、比如html5shim
如何区分HTML5: DOCTYPE声明\新增的结构元素\功能元素 HTML5的离线储存怎么使用,工作原理? 在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件。 原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。 如何使用: 1、 页面头部像下面一样加入一个manifest的属性; 2、 在cache.manifest文件的编写离线存储的资源; CACHE MANIFEST v0.11 CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、 在离线状态时,操作window.applicationCache进行需求实现。 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢? 在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。离线的情况下,浏览器就直接使用离线存储的资源。 如何理解HTML结构的语义化? HTML结构的语义化是指通过使用包含语义的标签恰当地表示文档结构,语义化的好处: 搜索引擎友好 便于团队开发和维护 去掉样式或样式丢失后,页面也能呈现清晰的结构 可以更好的被屏幕阅读器可以读出网内容 渐进增强和优雅降级? 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容 HTTP中GET与POST的区别? 关于这个题目,曾经有一篇文章一度很火:99%的人都理解错了HTTP中GET与POST的区别,后来剧情反转,知乎出现一篇:听说『99% 的人都理解错了 HTTP 中 GET 与 POST 的区别』?? 下面引用w3schools的解答: GET 方法 可被缓存 保留在浏览器历史记录中 可被收藏为书签 不应在处理敏感数据时使用 有长度限制 只应当用于取回数据 POST 方法 不会被缓存 不会保留在浏览器历史记录中 不能被收藏为书签 对数据长度没有要求
|