每日思考(2020/01/04)
题目概览
- 对
<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 资源下载
- 渲染出页面
【转载文章务必保留出处和署名,谢谢!】