题目概览
- 对
<meta>标签的理解 - rgba()和opacity这两个的透明效果有什么区别?
- 为浏览器元素添加一个随机颜色的边框
- 在浏览器中输入url到页面显示出来的过程发生了什么
题目解答
对<meta>标签的理解
定义：元素可提供相关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词等等。标签位于文档的头部
<head></head>标签内，不包含任何内容。 标签的属性定义了与文档相关联的【名称/值对】。HTML 4.01 ：<meta http-equiv="content-type" content="text/html; charset=UTF-8"> HTML5 ：<meta charset="UTF-8">属性
属性 值 描述 content（必需） some_text 定义与 http-equiv 或 name 属性相关的元信息 http-equiv content、type-expires、refresh、set-cookie 把 content 属性关联到 HTTP 头部。 name author、description、keywords、generator、revised、others 把 content 属性关联到一个名称。 scheme some_text 定义用于翻译 content 属性值的格式。 常用属性：
name属性：
<meta name="author" content="说明：标注网站的作者,及作者的相关信息"> <meta name="keywords" content="说明：用来说明搜索引擎网站关键字，允许多个关键字，中间用逗号隔开"> <meta name="description" content="用来告诉搜索引擎你的网站主要内容"> <meta name="topic" content="用来告诉搜索引擎你的网站主旨"> <meta name="subject" content="用来告诉搜索引擎你的网站主题"> <meta name ="viewport" content ="为移动设备添加 viewport，content 参数"> <meta name="robots" content="用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引"> <meta name="generator" content="用来说明网页是用什么软件生成的"> <meta name="copyright" content="copyright用来说明网站版权信息">http-equiv属性
<meta http-equiv="content-type" content="用来设定页面使用的字符集"> <meta http-equiv="X-UA-Compatible" content="对文档兼容模式的定义"> <meta http-equiv="content-language"content="zh-cn(显示语言的设定)"/> <meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18 GMT(设定网页的到期时间)"> <meta http-equiv="pragma" content="no-cache(浏览器缓存机制)"> <meta http-equiv="refresh" content="2;url=https://www.baidu.com/（自动刷新并指向新页面）"> <meta http-equiv="set-cookie" content="cookie value=xxx;expires=Fri,12 Jan 2001 18:18:18 GMT;path=/（如果网页过期，那么存盘的cookie将被删除,expires的时间格式必须为GMT）"> <meta http-equiv="window-target" content="_top（显示窗口的设定）"> <meta http-equiv="imagetoolbar" content="false（指定是否显示图片工具栏）"/>自定义meta
Facebook / Open Graph
<meta property ="og:url" content="https://www.example.com/"> <meta property ="og:title" content="title"> <meta property ="og:description" content="description"> <meta property ="og:site_name" content="website name"> <meta property ="og:image" content="https://example.com/image.jpg"> <meta property ="og:type" content="website"> <meta property ="og:phone_number" content="650-123-4567"/> <meta property ="og:fax_number" content="+1-415-123-4567"/> <meta property ="og:locale" content="en_US"> <meta property ="og:region" content="CA"/> <meta property="og:country-name" content="CHINA"/> <meta property ="og:postal-code" content="94304"/> <meta property ="og:street-address" content="1601 S California Ave"/> <meta property ="fb:app_id" content="Facebook numeric ID"> <meta property ="fb:admins" content="Facebook numeric ID">Apple
<meta name="apple-mobile-web-app-title" content="MyApp"/> <!-- New in iOS6 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 从桌面icon启动IOS Safari是否进入全屏状态（APP模式） --> <meta name="apple-touch-fullscreen" content="yes" > <!-- 添加到主屏幕“后，全屏显示 --> <meta name="format-detection" content="telephone=no"> <!-- ios设备上禁止默认的将数字识别为可点击的telephone link --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 指定状态栏的颜色 -->个人自定义
<meta name="my" content="XXXX"/>
标签优化：细化监控范围和内容；使用动态的，语义化的meta描述；极大化配合搜索引擎的工作
rgba()和opacity这两个的透明效果有什么区别
opacity是属性，rgba()是函数，计算之后是个属性值；opacity作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；rgba()一般作为背景色background-color或者颜色color的属性值，透明度由其中的alpha值生效，取值0-1；
为浏览器元素添加一个随机颜色的边框
[].forEach.call($$("*"), function (a) {
a.style.outline = "1px solid #" + (~~(Math.random() * (1 << 24))).toString(16)
})
//[].forEach.call() => 调用引用数组的forEach方法
//$$('*') => document.querySelectorAll('*')
//~~a => parseInt(a)
//1<<24 => 对二进数1小数点右移24位
//(parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数，也就是随机颜色，再使用toString(16)将它转化为十六进制数在浏览器中输入url到页面显示出来的过程发生了什么
- 用户在浏览器中输入网址后，浏览器会先对输入的地址进行解析。比如用的协议
http还是https - 之后会根据域名进行 IP 的寻址
- 寻址先从缓存开始，如 host
- 之后再访问 DNS 服务器，一层一层直至访问到根服务器
- 服务器再把 IP 告诉客户端
- 客户端拿到 IP 后发起请求
- 与服务器进行 HTTP 连接建立（3 次握手）
- 建立成功后服务器返回数据，浏览器进行渲染
- DOM 树构建、CSSOM 树的构建、JavaScript 资源下载
- CSS 的重排重绘，CSSOM 与 DOM 一起进行绘制
- JavaScript 资源的阻塞
- DOM 树构建、CSSOM 树的构建、JavaScript 资源下载
- 渲染出页面