学习笔记0408

一、HTML与前端

1、什么是前端

• 解决GUI人机交互问题
• 跨终端
• Web技术栈

2、前端重点关注

美观、功能、体验、安全、性能、兼容、无障碍。

3、前端边界

• NodeJS-- 开发服务器端的应用
• ELECTRON、React Native-- 开发客户端应用
• Web RTC-- P2P数据传输、多人视频会议
• WebGL-- 大型3D游戏
• WEBASSEMBLY-- 将其他语音编译成浏览器可以运行的程序

4、HTML语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合，如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、readonly

5、语义化的好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

二、了解CSS

1、在页面中使用CSS

• 外联

<link rel="stylesheet" href="/assets/style.css">

• 嵌入

<style>
p {margin:1em 0;}
</style>

• 内联

<p style="margin:1em 0">demo</p>

2、CSS选择器

通配选择器、标签选择器、id选择器、类选择器、属性选择器、伪类（状态伪类、结构性伪类）、组合器。

三、深入CSS

1、选择器的优先级

选择器的优先级由选择器的特异度决定，高优先级会覆盖低优先级。

2、继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。例如有关文字的属性值，也可通过inherit设置从父元素继承。

3、布局相关

四、CSS进阶

1、动画

1.1 transform变形

对元素进行平移、旋转、缩放、倾斜，transform不会对其他元素布局产生影响

• translate
• rotate
• scale
• skew

1.2 transition过渡

指定从一个状态到另一个状态如何过渡，属性如下：

• transition-property
• transition-duration
• transition-timing-function
• transtion-delay

1.3 animation

可以实现更复杂的变化效果，使用方法：定义关键帧样式；应用动画到元素上。属性如下：

• animation-name 关键帧名字
• animation-duration 持续的时间
• animation-timing-function
• animation-delay
• animation-iteration-count 播放次数
• animation-direction 动画播放方向

2、响应式设计

同一个也没可以适应不同屏幕大小设备的设计方案。

• 设置viewport

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

• 设置图片尺寸

• 背景图片
  backgroung-size:cover/contain
• media-query
  针对不同的屏幕尺寸，应用不同的样式。

@media screen and (min-width: 480px) {
  .box {
    font-size: 16px;
  }
}