零基礎必看的前端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教程

您的項目需求