马上秋招了,储备一点干货,为自己加油! fighting!
html相关问题
1.doctype(文档类型) 的作用是什么?
此标签可告知浏览器文档使用哪种HTML或XHTML规范。该标签可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的HTML文档。
HTML 4.01规定了三种文档类型:Strict、Transitional以及Frameset。
XHTML 1.0规定了三种XML文档类型:Strict、Transitional以及Frameset。
Standards(标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。
在js中如何判断当前浏览器正在以何种方式解析?
document对象有个属性compatMode,它有两个值:BackCompat对应quirks mode,CSS1Compat对应strict mode。
2.浏览器标准模式(standards mode)、几乎标准模式(almost standards mode)和怪异模式(quicks mode)之间区别是什么?
标准模式是指浏览器按W3C标准解析执行代码。怪异模式是指使用浏览器自己的方式解析,几乎标准模式的浏览器特性都是符合标准的,不标准的地方主要体现在处理图片间隙的时候。Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,而 Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页
3.HTML 和 XHTML 有什么区别?
XHTML 元素必须被正确地嵌套 XHTML 元素必须被关闭,空标签也必须被关闭,如 <br> 必须写成 <br /> XHTML 标签名必须用小写字母 XHTML 文档必须拥有根元素 XHTML 文档要求给所有属性赋一个值 XHTML 要求所有的属性必须用引号""括起来 XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示 XHTML 文档不要在注释内容中使“--” XHTML 图片必须有说明文字 XHTML 文档中用id属性代替name属性
4.页面使用‘application/xhtml+xml’会有什么问题?
content类型分为text/html和application/xhtml+xml 两种,前面一种表示HTML文档的类型,后一种是xhtml系列文档的类型。若使用‘application/xhtml+xml’要求比较严格,一些老的浏览器会不支持。
5.如果网页内容需要支持多语言,你会怎么做?
编码使用UTF-8,空间域名需要支持多浏览地址,准备多套模板。
下面这些问题需要考虑:
应用字符集的选择,选择UTF-8编码
语言书写习惯&导航结构
数据库驱动型网站
6.使用 data-
属性的好处是什么?
data-* 属性用于存储页面或应用程序的私有自定义数据。data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)。
data-* 属性包括两部分:
属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
这些属性集可以通过对象的dataset属性获取,不支持该属性的浏览器可以通过 getAttribute方法获取。
<div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div> div.dataset.commentNum; // 10
7.如果把 HTML5 看作做一个开放平台,那它的构建模块有哪些?
- 语义 - 提供更准确地描述内容。
- 连接 - 提供新的方式与服务器通信。
- 离线和存储 - 允许网页在本地存储数据并有效地离线运行。
- 多媒体 - 在 Open Web 中,视频和音频被视为一等公民(first-class citizens)。
- 2D/3D 图形和特效 - 提供更多种演示选项。
- 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。
- 设备访问 - 允许使用各种输入、输出设备。
- 外观 - 可以开发丰富的主题。
8.请描述 cookies
、sessionStorage
和 localStorage
的区别。
共同点:都是保存在浏览器端,且同源的。
区别:
- cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。
- 存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
- 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
- 作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。
- Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
- Web Storage 的 api 接口使用更方便。
9.请解释 <script>
、<script async>
和 <script defer>
的区别。
1.defer和async在网络加载过程是一致的,都是异步执行的;
2.两者的区别在于脚本加载完成之后何时执行,< script async>是加载完之后自动执行,< script defer>需要等到页面加载之后再执行。
3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。
其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。
10.为什么通常推荐将 CSS <link>
放置在 <head></head>
之间,而将 JS <script>
放置在 </body>
之前?你知道有哪些例外吗?
浏览器从上到下依次解析html文档。将 css 文件放到头部, css 文件可以先加载。
避免先加载 body 内容,导致页面一开始样式错乱,然后闪烁。将 javascript 文件放到底部是因为:
若将 javascript 文件放到 head 里面,就意味着必须等到所有的 javascript 代码都被 下载、解析和执行完成
之后才开始呈现页面内容。这样就会造成呈现页面时出现明显的延迟,窗口一片空白。
为避免这样的问题一般将全部 javascript 文件放到 body 元素中页面内容的后面。
页面加载的问题,先把页面加载出来,然后再去加载效果,提高用户体验度
11.什么是渐进式渲染 (progressive rendering)?
渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度),以尽快呈现页面的技术。
在以前互联网带宽较小的时期,这种技术更为普遍。如今,移动终端的盛行,而移动网络往往不稳定,渐进式渲染在现代前端开发中仍然有用武之地。
一些举例:
- 图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时,JavaScript将加载并显示图像。
- 确定显示内容的优先级(分层次渲染)——为了尽快将页面呈现给用户,页面只包含基本的最少量的CSS、脚本和内容,然后可以使用延迟加载脚本或监听
DOMContentLoaded
/load
事件加载其他资源和内容。- 异步加载HTML片段——当页面通过后台渲染时,把HTML拆分,通过异步请求,分块发送给浏览器
12.html5中有哪些新的标签
首先HTML5的特点是更加简洁以及更加语义化,html5中新增的标签有如:nav,header,footer,artical,section,aside,canvas,details,mark,audio,video。
13.你用过哪些不同的 HTML 模板语言?
Django的模板语言、PHP的smarty模板语言(没用过)