HTML5
html规范常识,HTML 规范是 W3C 与 WHATWG 合作共同产出的:
- W3C 指 World Wide Web Consortium
- WHATWG 指 Web Hypertext Application Technology Working Group
那么 HTML5 给开发者提供了哪些便利呢?简单列举有:
- 用于绘画的 canvas 元素
- 用于媒介播放的 video 和 audio 元素
- 对本地离线存储更好的支持(localStorage、sessionStorage)
- 新的语义化标签(article、footer、header、nav、section…)
- 新的表单控件(calendar、date、time、email、url、search…)
- 给汉字加拼音
<ruby> 前端开发核心知识进阶 <rt> qianduankaifahexinzhishijinjie </rt> </ruby>
- 实现collapse的功能
<details> <summary>前端开发核心知识进阶</summary> 前端领域,入门相对简单,可是想要“更上一层楼”却难上加难,也就是我们常说的“职业天花板较低”,君不见——市场上高级/资深前端工程师凤毛麟角。这当然未必完全是坏事,一旦突破瓶颈,在技能上脱颖而出,便是更广阔的空间。那么,如何从夯实基础到突破瓶颈? </details>
- 原生进度条和度量
<progress value="22" max="100"></progress>
- 打电话发邮件
<a href="tel: 110">打电话给警察局</a> <a href="sms: 110">发短信给警察局</a> <a href="mailto: [email protected]">发邮件给警察局</a> <a href="mailto: [email protected][email protected]">发邮件给警察局,并抄送给我爸爸</a> <a href="mailto: [email protected][email protected]&[email protected]">发邮件给警察局,并抄送给我爸爸,密送给我妈妈</a > <a href="mailto: [email protected]; [email protected]">发邮件给警察局,以及 120 急救</a> <a href="mailto: [email protected]?subject=SOS">发邮件给警察局,并添加救命主题</a> <a href="mailto: [email protected]?subject=SOS&body=快来救我">发邮件给警察局,并添加救命主题和内容</a>
- 移动端 300 毫秒点击延迟以及点击穿透现象
这是由于历史原因造成的,一般解决手段为禁止混用 touch 和 click,或者增加一层“透明”蒙层,也可以通过延迟上层元素消失来实现。
- 点击元素禁止产生背景或边框
-webkit-tap-highlight-color: rgba(0,0,0,0);
- 禁止长按链接与图片弹出菜单
-webkit-touch-callout: none;
- 禁止用户选中文字
-webkit-user-select:none;
user-select: none;
- 取消 input 输入时,英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
- 语音和视频自动播放
// JS 绑定自动播放(操作 window 时,播放音乐) $(window).on('touchstart', () => { video.play() }) // 微信环境 document.addEventListener("WeixinJSBridgeReady", () => { video.play() }, false)
- 视频全屏播放
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src=""></video>
- 开启硬件加速
transform: translate3d(0,0,0);
- fixed 定位问题
这个问题主要体现在 iOS 端,比如软键盘弹出时,某些情况下,会影响 fixed 元素定位;配合使用 transform、translate 时,某些情况下,也会影响 fixed 元素定位。一般解决方案是模拟 fixed 定位,或者使用 iScroll 库。
- 怎么让 Chrome 支持小于 12px 的文字?
-webkit-text-size-adjust:none;
Web components
web components通过一种标准化的非侵入的方式封装一个组件,每个组件能组织好它自身的 HTML 结构、CSS 样式、javascript 代码,并且不会干扰页面上的其他代码。
优点:
- 原生规范,无需框架
- 原生使用,无需编译
- 真正的 CSS scope
基础问题梳理
1、link 和 @import 的区别
引用的方式不同:
link(外部引用): <link rel="stylesheet" href="xxx.css" type="text/css" />
@import(导入式): @import url(xxx.css);
放置的位置不同:link 一般放在 head 标签中,而 @import 必须放在 <style type="text/css"> 标签中。
加载方式不同:link 会和 dom 结构一同加载渲染,而 @import 只能等 dom 结构加载完成以后才能加载渲染页面。
兼容性不同:@import 只能在 IE6 以上才能识别,而 link 是 XHTML 标签,无兼容问题。
样式权重不同:link 方式的样式的权重高于 @import。
改变样式:link 支持使用 JavaScript 改变样式,而 @import 不可以。
加载内容不同:link 除了可以加载 css 文件以外,还可以加载 MIME 类型的文件;而 @import 只能加载 css 文件。
2、CSS3 新增选择符有哪些
3、CSS 如何定义权重规则
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下:
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
4、如何使用纯 CSS 创建一个三角形
用border边框实现三角形的效果
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid blue; }
5、CSS3 如何写出一个旋转的立方体
<style type="text/css"> body{ padding: 0; margin:0; perspective:800px; } @keyframes rotate{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } } .box{ margin:200px auto; width:300px; height:300px; position:relative; transform-style: preserve-3d; transform:rotateX(-45deg) rotateY(-45deg); animation:rotate 5s infinite linear; } .box>div{ width:100%; height:100%; text-align:center; line-height:300px; font-size:60px; font-weight:bold; color:#FFFFFF; border:1px solid #FFFFFF; position:absolute; top:0; left:0; /* transition:transform 5s ease-in; */ } .one{ transform:translateX(150px) rotateY(90deg); background:red; opacity:.5; } .two{ transform:translateX(-150px) rotateY(-90deg); background:green; opacity:.5; } .three{ transform:translateZ(-150px); background:yellow; opacity:.5; } .four{ transform:translateZ(150px); background:blue; opacity:.5; } .five{ transform:translateY(-150px) rotateX(90deg); background:purple; opacity:.5; } .six{ transform:translateY(150px) rotateX(-90deg); background:pink; opacity:.5; } </style> <body> <div class="box"> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <div class="six">6</div> </div> </body>
6、localStorage ,sessionStorage,cookies 的区别是什么
共同点:都是保存在浏览器中并且是同源的。
从生命周期的角度讲:cookie可以设置失效时间,localstorage除非被手动清除,不然永久保存;sessionstorage仅在当前网页会话下有效,关闭页面或者浏览器之后就会被清除。
从存放数据角度讲:cookie可以存放4k左右,而且值属于某个路径下的,localstorage和sessionstorage可以保存5M的信息
从http请求的角度讲:cookie每次都会携带在http头当中和服务器做交互,如果使用cookie保存过多数据会带来性能问题,localStroage和sessionStorage仅在客户端中保存,不参与和服务器的通信。
从易用性讲:cookie需要程序员自己封装,其他两个可以采用原生的接口。
应用场景:cookie用于保存用户的登陆状态等,sessionstorage将某些用户信息保存,便于不同页面之间的传递等。
7、如何实现浏览器内多个标签页之间的通信
- websocket通讯定时器
全双工(full-duplex)通信自然可以实现多个标签页之间的通信
- setInterval+cookie
在页面A设置一个使用 setInterval 定时器不断刷新,检查 Cookies 的值是否发生变化,如果变化就进行刷新的操作。
由于 Cookies 是在同域可读的,所以在页面 B 审核的时候改变 Cookies 的值,页面 A 自然是可以拿到的。
- 使用localStorage
localstorage是浏览器多个标签共用的存储空间,所以可以用来实现多标签之间的通信(ps:session是会话级的存储空间,每个标签页都是单独的)。
直接在window对象上添加监听即可:
window.onstorage = (e) => {console.log(e)}// 或者这样window.addEventListener('storage', (e) => console.log(e))
- html5浏览器的新特性SharedWorker
普通的webworker直接使用new Worker()即可创建,这种webworker是当前页面专有的。然后还有种共享worker(SharedWorker),这种是可以多个标签页、iframe共同使用的。
SharedWorker可以被多个window共同使用,但必须保证这些标签页都是同源的(相同的协议,主机和端口号)
8、渐进增强和优雅降级概念区别是什么
渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
.transition { /*渐进增强写法*/ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .transition { /*优雅降级写法*/ transition: all .5s; -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; }
*前缀CSS3(-webkit- / -moz- / -o-)和正常CSS3在浏览器中的支持情况是这样的:
1.很久以前:浏览器前缀CSS3和正常CSS3都不支持;
2.不久之前:浏览器只支持前缀CSS3,不支持正常CSS3;
3.现在:浏览器既支持前缀CSS3,又支持正常CSS3;
4.未来:浏览器不支持前缀CSS3,仅支持正常CSS3.
如果低版本用户居多,当然优先采用渐进增强的开发流程;
如果高版本用户居多,为了提高大多数用户的使用体验,那当然优先采用优雅降级的开发流程。
绝大多数的大公司都是采用渐进增强的方式,因为业务优先,提升用户体验永远不会排在最前面。
9、如何实现 CSS3 动画
参考博客:https://blog.csdn.net/charlene0824/article/details/50705931
CSS 变量和主题切换
CSS 变量
实例:
body { background: white; color: #555; } a, a:link { color: #639A67; } a:hover { color: #205D67; }
变量转换:
:root { --bg: white; --text-color: #555; --link-color: #639A67; --link-hover: #205D67; } body { background: var(--bg); color: var(--text-color); } a, a:link { color: var(--link-color); } a:hover { color: var(--link-hover); }
我们使用--变量名
的方式定义变量,使用var(--变量名)
的方式消费变量。
主题切换
再定义一个粉色的主题:
.pink-theme { --bg: hotpink; --text-color: white; --link-color: #B793E6; --link-hover: #3532A7; }
切换主题代码:
const toggleBtn = document.querySelector('.toggle-theme') toggleBtn.addEventListener('click', e => { e.preventDefault() if (document.body.classList.contains('pink-theme')) { // 当前主题为粉色主题,需要移除 pink-theme class document.body.classList.remove('pink-theme') toggle.innerText = '切换正常主题色' } else { document.body.classList.add('pink-theme') toggle.innerText = '切换为粉色少女主题' } })
利用 localStorage 实现主题的保存:
const toggleBtn = document.querySelector('.toggle-theme') if (localStorage.getItem('pinkTheme')) { document.body.classList.add('pink-theme') toggle.innerText = '切换为粉色少女主题' } toggleBtn.addEventListener('click', e => { e.preventDefault() if (document.body.classList.contains('pink-theme')) { // 当前主题为粉色主题,需要移除 pink-theme class document.body.classList.remove('pink-theme') toggle.innerText = '切换正常主题色' localStorage.removeItem('pinkTheme') } else { document.body.classList.add('pink-theme') toggle.innerText = '切换为粉色少女主题' localStorage.setItem('pinkTheme', true) } })
CSS Modules
CSS Modules
项目中所有 class 名称默认都是局部起作用的。CSS Modules 并不是一个官方规范,更不是浏览器的机制。它依赖我们的项目构建过程,因此实现往往需要借助 Webpack。借助 Webpack 或者其他构建工具的帮助,可以将 class 的名字唯一化,从而实现局部作用。
.test { color: red; } <div class="test">This is a test</div> //编译之后,class 名是动态生成的,全项目唯一的。因此通过命名规范的唯一性,达到了避免样式冲突的目的。 ._style_test_309571057 { color: red; } <div class="_style_test_309571057"> This is a test </div>
compose关键字的样式复用
.common { color: red; } .test { composes: common; font-size: 18px; } <div class="${style.test}"> This is a test </div> //编译后 <div class="_style__test_0980340 _style__common_404840"> This is a test </div>
参考文献:
https://blog.csdn.net/Dora_5537/article/details/92792949
https://www.cnblogs.com/libingql/p/4375354.html
https://www.cnblogs.com/Tony100/p/10038860.html
https://www.jianshu.com/p/5f0e6d8fd36a