前端工做面试HTML相关问题

前端工做面试HTML相关问题

• Q: doctype（文档类型）的做用是什么？

  A: 在HTML中 doctype 有两个主要目的。

  • 对文档进行有效性验证:

  它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动做是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。

  • 决定浏览器的呈现模式:

  对于实际操做，通知浏览器读取文档时用哪一种解析算法。若是没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响HTML 排版布局。浏览器有三种方式解析HTML文档。

  • 非怪异（标准）模式
  • 怪异模式
  • 部分怪异（近乎标准）模式

  关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE标签，可详细阅读模式？标准！的内容。

• Q: 浏览器标准模式和怪异模式之间的区别是什么？

  A: 在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早以前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪一种渲染模式；若是存在一个完整的DOCTYPE则浏览器将会采用标准模式，而若是它缺失则浏览器将会采用怪异模式。

  强烈建议阅读加深理解：怪异模式（Quirks Mode）对 HTML 页面的影响，这里列下浏览器标准模式和怪异模式的区别：

  1. 盒模型：

     在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C 盒模型：在 IE 盒模型中，
     box width = content width + padding left + padding right + border left + border right，
     box height = content height + padding top + padding bottom + border top + border bottom。
     而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。

  2. 图片元素的垂直对齐方式:

     对于inline元素和table-cell元素，在 IE Standards Mode 下 vertical-align 属性默认取值为baseline。而当inline元素的内容只有图片时，如table的单元格table-cell。在 IE Quirks Mode 下，table单元格中的图片的 vertical-align 属性默认为bottom，所以，在图片底部会有几像素的空间。

  3. <table>元素中的字体:

     CSS 中，描述font的属性有font-family，font-size，font-style，font-weigh,上述属性都是能够继承的。而在 IE Quirks Mode 下，对于table 元素，字体的某些属性将不会从body或其余封闭元素继承到table中，特别是 font-size属性。

  4. 内联元素的尺寸:

     在 IE Standards Mode 下，non-replaced inline 元素没法自定义大小，而在 IE Quirks Mode 下，定义这些元素的width和height 属性，可以影响该元素显示的大小尺寸。

  5. 元素的百分比高度:

     CSS 中对于元素的百分比高度规定以下，百分比为元素包含块的高度，不可为负值。若是包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。因此百分比的高度必须在父元素有声明高度时使用。

     当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。

  6. 元素溢出的处理：

     在 IE Standard Mode 下，overflow取默认值 visible，即溢出可见，这种状况下，溢出内容不会被裁剪，呈如今元素框外。而在 Quirks Mode 下，该溢出被当作扩展box来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

  另可参考阅读：https://www.cs.tut.fi/~jkorpela/quirks-mode.html

• Q: 使用 XHTML 的局限有哪些？

  • 若是页面使用 'application/xhtml+xml' 会有什么问题吗？

  A: xhtml 语法要求严格，必须有head、body 每一个dom 必需要闭合。空标签也必须闭合。例如<img />, <br/>, <input />等。另外要在属性值上使用双引号。一旦遇到错误，马上中止解析，并显示错误信息。
  若是页面使用'application/xhtml+xml',一些老的浏览器会不兼容。

• Q: 若是网页内容须要支持多语言，你会怎么作？

  • 在设计和开发多语言网站时，有哪些问题你必需要考虑？

  A: 编码使用UTF-8，空间域名须要支持多浏览地址,准备多套模板。
  在设计和开发多语言网站时，须要考虑

  • 应用字符集的选择
  • 语言书写习惯&导航结构
  • 数据库驱动型网站
  • css 盒子会由于内容尺寸不同出现不对齐偏移

• Q: data-属性的做用是什么？

  A: data-为前端开发者提供自定义的属性，这些属性集能够经过对象的dataset属性获取，不支持该属性的浏览器能够经过getAttribute方法获取:

  <div data-author="david" data-time="2011-06-20" data-comment-num="10">...</div>

  div.dataset.commentNum; // 10

  须要注意的是，data-以后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。并非全部的浏览器都支持.dataset属性，测试的浏览器中只有Chrome 和Opera 支持。

  即：当没有合适的属性和元素时，自定义的 data 属性是可以存储页面或 App 的私有的自定义数据。

  Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

• Q:若是把 HTML5 看做作一个开放平台，那它的构建模块有哪些？

  A: 开放网络平台:

  The Open Web Platform is the collection of open (royalty-free) technologies which enables the Web. Using the Open Web Platform, everyone has the right to implement a software component of the Web without requiring any approvals or waiving license fees.

  开放网络平台（Open Web Platform）是一些开放的（免版权）技术的集合，这些技术激活了互联网。使用开放网络平台时，每一个人都有权实现 Web 上的一个组件，而不用向任何人索取许可和证书。

  将 HTML5 看作开放网络平台，那它的构建模块有哪些？我想，所谓构建模块，指的应该是开放网络平台这个技术集合中的技术。

  • HTML
  • DOM
  • CSS
  • SVG
  • MathML
  • Web APIs
    
    
    • Canvas WebGL
    • Audio
    • Web Storage
    • File, File System
    • History, contentEditable, Drag & Drop, HTML Editing Commands
    • Web Sockets
    • Web Workers
    • Server-Send Events
    • XMLHttpRequest
    • Geolocation, Device Orientation
    • DOM Events, Touch Events, Progress Events
    • Custom application development
    • Clipboard and events
    • Web Notifications, Web Messaging
    • Offine Web Applications
    • Media Capture API
    • Timing control for script-based animations, Page Visibility, Navigation + Timing, Resource Timing
    • Selectors
    • DOM Traversal, DOM XPath, Element Traversal
    • EcmaScript / JavaScript
    • HTTP
    • URI
    • Media Accessibility Checklist

  该答案引自: http://witcher42.github.io/2014/06/03/open-web-platform/

• Q: 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

  A: sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能够方便的在web请求之间保存数据。有了本地数据，就能够避免数据在浏览器和服务器间没必要要地来回传递。

  sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。sessionStorage 是在同源的同学口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即便刷新页面或进入同源另外一页面，数据仍然存在。关闭窗口后，sessionStorage 即被销毁。同时“独立”打开的不一样窗口，即便是同一页面，sessionStorage 对象也是不一样的

  cookies会发送到服务器端。其他两个不会。

  Microsoft 指出 Internet Explorer 8 增长cookie 限制为每一个域名50个，但IE7 彷佛也容许每一个域名50个cookie。Firefox 每一个域名cookie 限制为50个。Opera每一个域名cookie 限制为30个。Firefox 和Safari 容许cookie 多达4097个字节，包括名（name）、值（value）和等号。Opera 许cookie 多达4096个字节，包括：名（name）、值（value）和等号。Internet Explorer 容许cookie 多达4095个字节，包括：名（name）、值（value）和等号。

  • Cookie
    
    
    • 每一个域名存储量比较小（各浏览器不一样，大体4K）
    • 全部域名的存储量有限制（各浏览器不一样，大体4K）
    • 有个数限制（各浏览器不一样）
    • 会随请求发送到服务器
  • LocalStorage
    
    
    • 永久存储
    • 单个域名存储量比较大（推荐5MB，各浏览器不一样）
    • 整体数量无限制
  • SessionStorage
    
    
    • 只在 Session 内有效
    • 存储量更大（推荐没有限制，可是实际上各浏览器也不一样）

• 请描述一下 GET 和 POST 的区别?

  A: 区别以下：

  • get 向指定的资源请求数据,请求的数据会附在URL 以后,就是把数据放置在请求行（request line）中），以?分割URL和传输数据，多个参数用&链接；
  • post 向指定的资源提交要被处理的数据。get 方法，查询请求是在url中显示的，有长度限制，get 方法是安全幂等的。而post 方法请求是封装在http 消息包体中

&	get	post
后退/刷新	无害	请求从新提交
书签	可作书签	不可作
缓存	可被缓存	不能被缓存
历史	保留在浏览器记录里	不保留
对数据长度限制	限制（2048字符）	不限制
安全性	url中暴露数据	相对安全
可见性	url中可见	不可见

总结：

• 对于get 来讲，是向服务器端请求数据，其请求在url 中可见，其长度有限制（2048字符）个体方法是安全幂等，这里的安全是指用于获取信息而非修改信息，幂等是指每次请求获得的结果都同样。
• 对于post 来讲，是向服务器端提交数据，每次刷新或者后退都会从新提交，post 请求的数据封装在http 请求的首部里。

tips: 以上部分答案参考自：

• paddingme
• Witcher42
• 郑州网建