前端面试笔记-HTML篇

HTML

行内元素、块级元素以及inline-block

行内元素和块级元素的具体区别是什么？inline-block是什么？（面试题目）

• 行内元素与块级元素区别

  • 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
  • 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
  • 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
  • 行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

• inline-block

  • inline-block 的元素（如input、img)既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效） 属性。
  • HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙

• 设置：

  display:block; 
  display:inline;
  display:inline-block;
  

• 取消inline-block产生的间隙

  • 负margin(chrome margin:-3px;IE -2px;火狐 -4px;)
  • 父元素css中设置负的word-spacing(chrome:word-spacing:-6px)

• 常见块级元素

  • h1-h6 div form table dl dt li ol ul p th tr td

• 常见行内元素

  • a b big br em i img input lable span strong

HTML5

特性：

• 语义化，web内容有序规范，便于阅读，爬虫解析，维护
• 网络标准统一，减少不需要的插件，跨平台
• webSocket，WebStorage，webworker独立线程

webStorage

Web Storage的目的是为了克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：

• 提供一种在cookie之外存储会话数据的途径。
• 提供一种存储大量可以跨会话存在的数据的机制。

包括：

• SessionStorage：同源同窗口，浏览器没关闭一直存在
• localStorage：永久存储
• HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的，区别在于 sessionStorage 在关闭页面后即被清空，而 localStorage 则会一直保存。
  • localStorage 是 HTML5 本地存储的 API ，使用键值对的方式进行存储数据，存取的数据只能是字符串。
  • 存储方式：以键值对的方式存储字符串
  • 主要应用：购物车、客户登录、游戏存档等

websocket

• 来源：
  • HTTP 无状态协议 request->response 每次都要带鉴别信息
  • websocket 持久化协议 一次握手
• 特点：
  • 事件驱动：建立连接后，允许服务端主动向客户端发东西
  • 异步
  • 使用ws或wss协议的客户端socket
  • 推送

webWorker

• 为单线程的js创造多线程环境
• 后台、解决计算密集型和高延迟任务，结果返回主线程