前端档案

HTML

  • [ ] 语义化标签
  • [ ] 音视频处理
  • [ ] canvas/WebGL
  • [ ] history API
  • [ ] requestAnimationFrame
  • [ ] 地理位置
  • [ ] web socket
  • [ ] ......
  1. Doctype 作用?严格模式与混杂模式如何区分?它们有何意义?
  2. HTML5 为什么只需要写?
  3. 行内元素有哪些?块级元素有哪些?空(void)元素有那些?
  4. 页面导入样式时，使用 link 和@import 有什么区别?
  5. 介绍一下你对浏览器内核的理解?
  6. 常见的浏览器内核有哪些?
  7. html5 有哪些新特性、移除了那些元素?如何处理 HTML5 新标签的浏览器兼容问题?
  8. 如何区分 HTML 和 HTML5?
  9. 简述一下你对 HTML 语义化的理解?
  10. HTML5 的离线储存怎么使用，工作原理能不能解释一下?

谈谈你对 HTML5 的理解？

暂无

语义化标签

合理的标签干合适的事情。

  • 块级（block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

  • 行级（inline）：a、span、small、strong、em、i、code、

  • 行内块（inline-block）：img、input

区别：

  1. 行内元素与块级函数可以相互转换，通过修改 display 属性值来切换块级元素和行内元素，行内元素 display：inline，块级元素 display：block。
  2. 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
  3. 行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距 margin 上下无效，左右有效，内填充 padding 上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
  4. 块级元素可以包含行内元素和块级元素，还可以容纳内联元素open in new window和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

渲染机制

  • 什么是 DOCTYPE 及作用

DOCTYPE 是用来声明文档类型和 DTD（文档类型定义）规范的，一个主要用途就是文件的合法性验证。

HTML 5

  • 浏览器渲染过程

DOM Tree、CSSom Tree、layout、Render Tree

  • 重排 Reflow

定义：DOM 结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为 reflow。

  • 重绘 Repaint

DOM 改变、CSS 改变

  • 布局 Layout

H5 新特性

面试： H5 新特性：十个新特性open in new window

  1. 语义标签 header footer nav section article aside details summary dialog figure main mark time

  2. 增强型表单

  3. 视频和音频

  4. Canvas 绘图

  5. SVG 绘图

  6. 地理定位 navigator.geolocation.getCurrentPosition(function(position){})

  7. 拖放 API

  8. WebWorker web worker 是运行在后台的 JS，独立于其他脚本，不会影响页面的性能。

  9. WebStorage

    • cookie 技术（ 兼容性好，数据不能超 4kb，操作复杂）：
    • sessionStorage（兼容性差，数据 8MB，操作简单）：页面会话结束即删除
    • localStorage：不会自己删除

  10. WebSocket

    WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

H5 适配(自适应方案)

编写响应式？

  1. 声明 viewport 元标签
  2. 使用流式布局
  3. 所有容器使用相对尺寸，不用绝对尺寸
  4. （最重要原则）使用 CSS3 Media Query 技术
  • 设置 viewport
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>

<!-- 设置页面内核 -->
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
  • 媒体查询
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}
上次更新:
Contributors: kyxiao