HTML & CSS►HTML & CSS

html and css

HTML

1、doctype的作用是什么

声明文档类型，告知浏览器用什么文档标准解析这个文档

怪异模式：浏览器使用自己的模式解析文档，不加doctype时默认为怪异模式
标准模式：浏览器以W3C的标准解析文档

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2、存储

HTTP 协议是一种无状态协议，即每次服务端接收到客户端的请求，都是一个全新的请求，服务器并不知道客户端的历史请求记录；Session 和 Cookie 的主要目的就是为了弥补 HTTP 的无状态特性

Session（非前端）

如何判断是否是同一会话（单点登录设计多了token用户认证）：

接收到客户请求 -> 创建Session对象 -> 生成 sessionId -> 设置响应头的 Set-Cookie：JSESSIONID=XXXXXXX命令， -> 向客户端发送要求设置 Cookie 的响应

客户端收到响应 -> 本机客户端设置 JSESSIONID=XXXXXXX的 Cookie 信息 -> Cookie 的过期时间为浏览器会话结束

客户端每次发送请求 -> 请求头带上该 Cookie信息 -> 服务器读取请求头中的 Cookie 信息 -> 获取 JSESSIONID 值

缺点:

A 服务器存储了 Session，负载均衡后， A 的访问量激增，会转发到 B ，但 B 并没有存储 A 的 Session，导致 Session 失效

Cookies

  • 兼容性好，大小4k

  • 服务端可设置 cookie 选项：name、value、expires、max-age、domain、path、secure、HttpOnly

  • 客户端可设置：name、value、expires、max-age、domain、path、secure

  • 当name、domain、path 这3个字段都相同cookie才被覆盖，不同则会产生键值副本（开发中这里特别容易出问题）

  • 用encodeURIComponent()来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值)

name & value

1
document.cookie='name=value;'

domain

设置Domain=exmple.com，则子域名（developer.exmple.com）也会存在

1
document.cookie='name=value;domain=exmple.com;'

path

1
document.cookie='name=value;path=/;'

path这个属性默认是’/‘，这个值匹配的是web的路由，设置 path=/docs，则匹配：

1
2
3
/docs
/docs/Web/
/docs/Web/HTTP

name & value & domain & path

1
document.cookie='name=value;path=/;domain=exmple.com;'

expires & max-age

1
2
3
4
5
// expires
document.cookie='myname=laihuamin;path=/;domain=juejin.im;expires=Thu, 05 Nov 2020 16:51:41 GMT;'

// max-age
"myname=laihuamin;path=/;domain=juejin.im;max-age=160886;"

  • 一般浏览器的cookie都是默认储存的，当关闭浏览器结束这个会话的时候，这个cookie也就会被删除

  • 如果你想要cookie存在一段时间，Expires 设置时间，逐渐被Max-Age取代(单位秒）；

　　正数时，cookie会在Max-Age秒之后被删除；

　　负数时，表示的是临时储存，不会生出cookie文件，只会存在浏览器内存中；

　　为0时，删除cookie；

HttpOnly

  • 是否能通过 js(document.cookie) 去访问。默认不设置，js 可以操作

  • 客户端是不能通过js代码去设置一个httpOnly类型的cookie的，这种类型的cookie只能通过服务端来设置

  • 缺少 HttpOnly 属性会导致攻击者可以通过程序(JS脚本、Applet等)获取到用户的 Cookie 信息，跨站脚本攻击威胁

secure

这个属性译为安全，http不仅是无状态的，还是不安全的协议，容易被劫持，当这个属性设置为true时，此cookie只会在https和ssl等安全协议下传输

1
document.cookie='myname=laihuamin;path=/;domain=juejin.im;expires=Thu, 05 Nov 2020 16:51:41 GMT;secure'

localStorage： 持久性存储，页面关闭不会被清除，以键值对的方式存储，chrome限制大小5M

sessionStorage： sessionStorage在选项卡被关闭时即清除，且不同选项卡之间的sessionStorage不互通，chrome限制大小5M

3、href 和 src

href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为 css 文档，并行下载，不会停止对当前文档的处理，非阻塞，加载css建议使用 link，而不采用 @import

src 是 source 的缩写，src 的内容是页面必不可少的一部分，是引入

4、meta

元数据（metadata）： 是关于数据的信息

  • 标签提供关于 HTML 文档的元数据

  • 元数据不会显示在页面上，但是对于机器是可读的

  • 标签始终位于 head 元素中

  • 如果设置了 name 属性，meta 元素提供的是文档级别的元数据，应用于整个页面

  • 如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的HTTP头部相同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
// charset是声明文档使用的字符编码，解决乱码问题，charset一定要写第一行
<meta charset="utf-8">

// 设置后请求头会带上对应参数
<meta http-equiv="expires" content="31 Dec 2008">

// 5秒钟后就重定向到http://www.baidu.com
<meta http-equiv="Refresh" content="5;url=http://www.baidu.com" />

// 这个meta标签的意思就是告诉浏览器，用webkit内核进行解析，前提是浏览器有webkit内核
<meta name="renderer" content="webkit">

// viewport主要是影响移动端页面布局的
<meta name="viewport" content="width=device-width, initial-scale=1.0">

// 百度会自动对网页进行转码，这个标签是禁止百度的自动转码
<meta http-equiv="Cache-Control" content="no-siteapp" />

<!-- ios 禁止自动探测并格式化手机号码 -->
<meta name="format-detection" content="telephone=no">


// 移动端大全
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

  • 如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码

  • 如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

  • 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

  • 常见应用，规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据

CSS

1、什么是BFC

  • 页面上的一个隔离的独立容器，不受外界干扰或干扰外界

2、标准和IE

同：

  • 二者盒模型包括 margin,border,padding,content 四块内容

异：

  • ie 盒模型 content 包含 border 和 padding

  • 标准盒模型 content 只有 content

3、css 设置

1
2
box-sizing: content-box;
box-sizing: border-box;

4、BFC与边距重叠和高度塌陷

BFC（块级格式化上下文），页面上的一个隔离的独立容器，该区域有一套渲染规格来约束块级盒子，不受外界干扰或干扰外界

创建BFC

  • float不为 none

  • overflow的值不为 visible

  • position 为 absolute 或 fixed

  • display的值为 inline-block 或 table-cell 或 table-caption 或 grid

BFC的渲染规则

  • 计算BFC的高度时，浮动子元素也参与计算（即内部有浮动元素时也不会发生高度塌陷）

  • BFC的区域不会与float的元素区域重叠

  • BFC内部的元素会在垂直方向上放置

  • BFC内部两个相邻元素的margin会发生重叠

  • 不同BFC之间不会发生重叠

BFC的应用场景

  • 清除浮动： 清除浮动，防止高度塌陷

  • 避免某元素被浮动元素覆盖：BFC的区域不会与浮动元素的区域重叠

  • 阻止外边距重叠：属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠

层叠上下文

以用户正面向浏览器视窗或网页为准，而 HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，HTML 元素基于其元素属性按照优先级顺序占据这个空间，面向z轴层层排列

规则

在层叠上下文中，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元

  • 层叠上下文可以包含在其他层叠上下文中，并且一起创建一个层叠上下文的层级

  • 每个层叠上下文都完全独立于它的兄弟元素：当处理层叠时只考虑子元素

  • 当一个元素的内容发生层叠后，该元素将被作为整体在父级层叠上下文中按顺序进行层叠

在ios中，如果父级A 的z-index 高于 父级B 则无论 B 的子级如何设置z-index都无法覆盖 A 的内容，此时可以用 transform: translateZ(42px);来调整层级关系

5、多行隐藏

1
2
3
4
5
6
7
8
.more-line {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

js方式

getClientRects 和 getBoundingClientRect

  • getClientRects 返回一个TextRectangle集合，就是TextRectangleList对象

  • getBoundingClientRect返回 一个TextRectangle对象，即使DOM里没有文本也能返回TextRectangle对象

使用场景差异

出于浏览器兼容的考虑，现在用得最多的是getBoundingClientRect，经常用来获取一个element元素的viewport坐标

6、async和defer

async

  • 普通脚本，会被并行请求，并尽快解析和执行

  • 模块脚本，脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行

  • 避免 Javascript 阻塞页面

defer

  • 这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行

  • 有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成

返回
顶部