（一）响应式web设计。。。freecodecamp笔记

HTML基础#

HTML 的全称是 HyperText Markup Language（超文本标记语言），它是一种用来描述网页结构的标记语言。

h1用作主标题，h2用作副标题，还有h3、h4、h5、h6元素分别用作不同级别的标题。用 p 元素代表段落。注释的开始标记是。
<img src="图片地址" alt="替代文本">。如果图片是纯装饰性的，用一个空的alt是最佳实践。
网页建跳转<a href="地址">显示文字</a>内部跳转<a href="#节点id">Contacts</a>直接填#创建固定链接
无序列表ul、有序列表ol输入框<input type="text">。为输入框添加占位符文本placeholder=""。form表单<form action="提交地址"></form>。设置必填项required。
单选按钮type="radio"同一组name相同，复选框type="checkbox"同一组name相同，添加默认选中checked。input最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。
声明HTML文档类型<!DOCTYPE html>对应的就是 HTML5。

  <!DOCTYPE html>
  <html>
   <head></head>
   <body></body>
  </html>

CSS基础#

CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。

内联样式style=""。head中添加样式<style><s/tyle>
元素选择器（直接使用元素名称），class选择器（.class）,id选择器（#id），属性选择器（[type=‘radio’]）
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">引入外部字体
长度px 固定长度像素，em相对于元素字体的font-size值，rem相对于根元素的font-size
优先级：元素直接设置大于继承样式，ID选择器大于class选择器，内联样式高于ID选择器内联样式》ID选择器》class选择器》继承父级样式
#000000十六进制编码，#F00缩写十六进制编码，rgb(255, 255, 255) RGB 值
你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。因为层叠的效果，CSS 变量通常会定义在:root元素里。

  :root {
    --penguin-skin: gray;
    --penguin-belly: pink;
    --penguin-beak: orange;
  }
  
  body {
    background: var(--penguin-belly, #c6faf1);
    //var中第二个元素意为当第一个元素没有找到时生效
  }

基本样式简介

属性	意义
color:red	颜色
font-size:30px	字体大小
font-family: Helvetica,sans-serif;	设置字体，可以设置多个逗号分隔第一个不能用用第二个
width:500px	宽度
border-color，border-width,border-style	边框颜色，边框粗细，边框样式solid（实线）dotted（点线）dashed（虚线）double（双线）
border-radius:10px	设置圆角，，50%圆形图片
background-color: green;	添加背景颜色
padding，margin，border	内边距、外边距、边框
color: red !important;	确保元素一定为红色，最高优先级
@media (max-width: 350px)	媒体查询设置样式，宽度小于350px时。

应用视觉设计#

视觉设计在 Web 开发中是一个非常广泛的话题。它结合了排版、色彩理论、图形、动画和页面布局等。在 Web 开发中，HTML 为页面的内容提供结构和语义，CSS 控制页面的布局和外观。

属性	意义
text-align	控制文本的对齐方式，justify两端对其，center居中，left左对齐，right右对齐
width	设置元素宽度
height	设置元素的高度
<strong>	文本加粗
<u>	下划线
<em>	强调文本
<s>	删除线
<hr>	创建水平线
background-color: rgba(45, 45, 45, 0.1)	r：红色 g：绿色 b：蓝色 a：透明度
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);	元素添加阴影，（阴影的水平偏移量阴影的垂直偏移量模糊距离(可选) 阴影尺寸(可选) 颜色）。左边放了两个就是添加了两层阴影
opacity	设置元素的透明度
text-transform	使文本大写显示
font-weight	设置字体粗细
line-height	行距
:hover	伪类选择器定义它的悬停状态样式
position: relative;	不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。相对于原来文档流中的位置变换
position: absolute;	会将元素从当前的文档流里面移除，元素的定位参照于最近的已定位祖先元素（一般可以为父元素添加position: relative）。如果父元素没有添加定位规则，浏览器会继续寻找直到默认的 body 标签。
position:fixed;	相对于浏览器窗口，不会随着其他元素滑动改变位置
float:left;	浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。
z-index:2;	使用该属性指定元素堆叠次序，取值为整数，数值大的元素优先于数值小的元素显示。
margin:auto;	设置元素居中显示。
background-color:hsl(0, 100%, 50%)	HSL 色彩空间模型，（色相，饱和度，亮度）色相是色彩的基本属性，取值为色环里面颜色对应的从0-360度的角度值。饱和度是指色彩的纯度，也就是颜色里白色或者黑色的占比，越高色彩越纯，低则逐渐变灰。亮度决定颜色的明暗程度，100%是白色0%是黑色。
background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));	线性渐变，90edg垂直渐变，从red->yellow->rgb(204, 204, 255),颜色数量可以是任意个
repeating-linear-gradient	创建条纹元素，demo见freecodecamp
background:url(https://i.imgur.com/MJAkxbh.png);	背景使用图片
transform:scale(2);	将元素变为原来的2倍
transform: skewX(24deg);	沿X轴旋转24度
transform: skewX(24deg);	沿Y轴选装24度

改变按钮的悬停状态

button:hover {
    animation-name: background-color;	//名称
    animation-duration: 500ms;	//变换时间
    animation-fill-mode: forwards;	//保持变化后状态
  }
  @keyframes background-color {
    100% {
      background-color: #4791d0;
    }
  }