零基础必看的前端HTML+CSS教程

为久经沙场的打工人，我们肯定经历过一次次难忘的面试，这其中有愉快的交谈，也有尴尬的对话，甚至还会有崩溃的瞬间...可以说，人类的面试悲欢喜乐，并不相通！近日看到一位程序员网友发帖吐槽：前端面试太难了，问啥啥不会，都快面哭了。

即使隔着手机屏幕，都已经感觉到了这位小伙伴的“崩溃瞬间”。当面对面试官的连环问题而完全不知所云，无法解答的时候，可能那时的我们只求找个地缝钻进去吧。

其实，上面这位网友的尴尬遭遇，在面试的时候并不少见。很多情况下是由于我们的技术基础并不扎实，也没有形成自己的知识体系，导致我们在面对新行业、新领域的问题时，无法快速适应和解决。

就拿前端学科举例，随着新形势下企业对于前端的综合能力要求更加高，物联网、大数据可视化、云计算、VR/AR、5G等新技术接踵而至，现在的前端工程师更是承担了更多责任，而这些都取决于扎实的基础之上，没有系统的理论基础，没有成体系的技术架构，完全无法真正形成自己的技术竞争力。

因此推荐所有的前端er一门必备的课程《浠浠呀老师html+css前端入门教程，快乐学习，小白必看》。课程由浠浠呀老师为小白入门前端倾力打造的前端基础教程。是零基础小白入门前端开发的不二之选。

先来隆重介绍一下浠浠呀老师吧：

千锋教研院执行院长，千锋学科部总监，小狮视觉总监，前端培训届扛把子-千锋HTML5大前端学科创建者。毕业于布列斯特普希金国立大学，曾任北京市属高校师资培训中心特邀讲师，多年担任北京市属高校师资培训工作。著有《HTML5从入门到精通》、《Jquery从入门到实战》、《PhotoShop CC实战入门》、《Unity虚拟现实开发实践》、《数据结构与算法（C语言篇）》、《Nginx 高性能 Web 服务器应用与实战（微课版）》等多本书籍，被500多所高校选用，深受好评。深耕IT职业教育行业十多年，学生遍布各大互联网大厂，热爱教育事业。对于教学研究、教学管理工作有深刻的理解。

视频不同于以往传统的前端教学视频。摒弃了传统教程填鸭式课堂讲授的方式，用最直观的动画效果解释原理，用最真实的案例巩固知识。是一种全新的讲课方式，对小白友好，能让前端入门变得清晰简单。

课程从最基础开始，讲解无废话不反复，节奏明快，直击痛点，直截了当地输出干货。将复杂的前端问题拆解成简单的知识点。将前端知识点系统整理，结合实用案例，以讲解+动画的形式展现，让学生真正地看到即学到。

课程设计十分用心，认真分析了小白们的日常学习习惯，思维习惯，知识背景。甚至对每一个小白可能出现疑问的地方做了预判。每个案例都悉心打磨，简单而典型。用前期大量的教研时间换取学生们的接收知识时间。

本课程共包括2季，内容涵盖，HTML，CSS和HTML5、CSS3。本次发布视频第一季上半部分——HTML。课程共 50 集，16个部分，58个知识点，30个案例。

这里分享一个我平时常用的水波特效步骤，加在按钮上特好使。

首先，是直接创建一个div盒子，不需要在里面添加其他内容，我们直接对盒子本身添加css就能形成水波效果。

html部分，我们div添加白色的波纹，所以在这里设置html背景为蓝色。

<body style="background-color: cadetblue ;"> 
  <div class="video"></div>
</body>

css部分，先设置好div的基本属性

.video {
  /* 基本属性 */
  width: 100px;
  height: 100px;
  border-radius: 50px;

  /* 给背景颜色添加不透明度 */

  /* 不透明度还可以通过添加opacity属性修改 */
  background-color: rgb(255, 255, 255, 0.6);
}

然后就是在video中添加这个特效中重中之重的内容，在css中设置animation。

Animation 是由三部分组成。

关键帧(keyframes) – 以帧的形式定义动画在不同阶段的状态。

如果是不同时间下形状发生的变化大多可以用动画的0%，50%，100%表示不同帧对象的变化
如果是不同时间下位置发生的变化大多可以用from，to来表示不同帧对象的变化

动画属性(properties) – 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。

语法：name duration timing-function delay iteration-count direction fill-mode play-state;

css属性 – 就是css元素来表示不同关键帧下的状态。

.video {
  /* 添加ripple动画效果 */
  /* -webkit-animation适配-webkit内核的浏览器*/
  -webkit-animation: ripple 1s linear infinite;
  animation: ripple 1s linear infinite;
}

/* 定义ripple动画效果 */
@-webkit-keyframes ripple {
  /* 关键帧播放到0%时的状态 */
  0% {
    /* 在box四周添加三层白色阴影 */
    box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
    0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%);
  }
  
  /* 关键帧播放到100%时的状态 */
  100% {
    /* 分别改变三层阴影的距离
    形成两帧的动画,然后在transition的过渡下形成动画 */
    box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%), 
    0 0 0 40px rgba(50, 100, 245, 0);
  }
}

/* 多种浏览器兼容性设置 */
@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
    0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%);
  }

  100% {
    box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
    0 0 0 20px rgb(255 255 255 / 25%), 
    0 0 0 40px rgba(50, 100, 245, 0);
  }
}

其中，linear是表示动画的timing-function，其总共大致有以下几种效果。

图源水印

为了实现按钮的响应式操作，我们可以给div再加上一个hover选择器

/* 鼠标悬浮时的状态 */
.video:hover {
  /* 背景颜色不透明度变化 */
  background-color: #FFFFFF;  

  /* 将对象放大1.2倍 */
  transform: scale(1.2); 
}

再给div添加一个transition属性，让div在鼠标移动的时候能自然过渡，其原理跟animation类似。

.video {
  /* 添加动画的过渡效果 */
  transition: all 0.3s ease-in-out;
}

然后就能得到我们的结果，整体的代码如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .video {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        background-color: rgb(255, 255, 255, 0.6);
        transition: all 0.3s ease-in-out;
        -webkit-animation适配-webkit内核的浏览器*/
        -webkit-animation: ripple 1s linear infinite;
        animation: ripple 1s linear infinite;
      }

      .video:hover {
        background-color: #FFFFFF;
        transform: scale(1.2);   
      }
      @-webkit-keyframes ripple {
        0% {
          /* 在box四周添加三层白色阴影 */
          box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
          0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%);
        }
        
        100% {
          /* 分别改变三层阴影的距离
          形成两帧的动画,然后在transition的过渡下形成动画 */
          box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%), 
          0 0 0 40px rgba(50, 100, 245, 0);
        }
      }
      @keyframes ripple {
        0% {
          box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
          0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%);
        }
        100% {
          box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
          0 0 0 20px rgb(255 255 255 / 25%), 
          0 0 0 40px rgba(50, 100, 245, 0);
        }
      }
    </style>
  </head>
  <body style="background-color: cadetblue ;"> 
    <div class="video"></div>
  </body>
</html>

效果图

ypora 是一款支持实时预览的 Markdown 文本编辑器。它有 OS X、Windows、Linux 三个平台的版本，目前完全免费。

https://typora.io/#

Markdown是一种轻量级标记语言，创始人为约翰·格鲁伯（英语：John Gruber）。它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。这种语言吸收了很多在电子邮件中已有的纯文本标记的特性。
由于Markdown的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，目前许多网站都广泛使用Markdown来撰写帮助文档或是用于论坛上发表消息。如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap 、SourceForge、简书等，甚至还能被使用来撰写电子书。

在使用Dreamweaver编写网页时，遇到需要插入代码块、流程图、数学公式时，总是显得很无力，效率很低，效果不好，使用Typora会让这些问题迎刃而解，且轻便，简单。

直接看一个demo：

导出为html:

html网页源代码：

其可以导出的格式有：

流程图样式包括：

1、标准流程图源码格式（横向）：

```flow
st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

2 mermaid语言库绘流程图

Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。
Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码，因此安全许多。
官网：https://mermaidjs.github.io/
Github 项目地址：https://github.com/knsv/mermaid

2.1 横向流程图源码格式：

graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]

2.2 竖向流程图源码格式：

sequenceDiagram
Title: 标题：复杂使用
对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象B->小三: 你好吗
小三-->>对象A: 对象B找我了
对象A->对象B: 你真的好吗？
Note over 小三,对象B: 我们是朋友
participant C
Note right of C: 没人陪我玩

2.3 时序图源码复杂样例

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

2.4 甘特图样例：

        gantt
        dateFormat  YYYY-MM-DD
        title 软件开发甘特图
        section 设计
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI设计                     :         des3, after des2, 5d
    未来任务                     :         des4, after des3, 5d
        section 开发
        学习准备理解需求                      :crit, done, 2014-01-06,24h
        设计框架                             :crit, done, after des2, 2d
        开发                                 :crit, active, 3d
        未来任务                              :crit, 5d
        耍                                   :2d
        section 测试
        功能测试                              :active, a1, after des3, 3d
        压力测试                               :after a1  , 20h
        测试报告                               : 48h

教程：

Markdown 高级技巧 | 菜鸟教程（使用 Typora 编辑器讲解 Markdown 的语法）

https://www.runoob.com/markdown/md-advance.html

ref

1 Typora 完全使用详解

https://sspai.com/post/54912/

2 用什么软件画流程图好？-悟空问答

https://www.wukong.com/question/6809962012198568195/

3 Mermaid 实用教程

https://blog.csdn.net/fenghuizhidao/article/details/79440583

－End－

在线咨询

上一篇：HTML5简介
下一篇：适用于PHP的可视化HTML编辑器推荐

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

零基础必看的前端HTML+CSS教程

您的项目需求