侯策《前端开发核心知识进阶》读书笔记——html与css难点

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: 110@govn.com">发邮件给警察局</a>
<a href="mailto: 110@govn.com?cc=baba@family.com">发邮件给警察局，并抄送给我爸爸</a>
<a href="mailto: 110@govn.com?cc=baba@family.com&bcc=mama@family.com">发邮件给警察局，并抄送给我爸爸，密送给我妈妈</a >
<a href="mailto: 110@govn.com; 120@govn.com">发邮件给警察局，以及 120 急救</a>
<a href="mailto: 110@govn.com?subject=SOS">发邮件给警察局，并添加救命主题</a>
<a href="mailto: 110@govn.com?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

https://blog.csdn.net/wwegezi/article/details/83748475

https://www.cnblogs.com/wangking/p/8405689.html

posted @ 2020-05-03 00:33 姚啊姚阅读(724) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

姚啊姚