在你的hexo博客中使用nodeppt，一款迄今為止

在你的hexo博客中使用nodeppt，一款迄今為止最好的網頁版演示庫

家好，我是明說網絡的小明同學。

今天我和大家分享一個非常酷的網頁PPT工具，NODEPPT

NODEPPT這可能是迄今為止最好的網頁版演示庫

一開始看到這個庫的時候，我就喜歡上了。因為他效果非常的棒，而且能夠非常好的和hexo結合。這樣我們能夠一次生成，到哪都可以演示PPT，還能配上相應的技術文檔，是不是很酷啊！

NODEPPT Demo

項目的演示網址在這：https://nodeppt.js.org/#slide=1

主要說明了這個庫包含什么樣的功能

NODE PPT Github

官網地址：https://github.com/ksky521/nodeppt

Hexo中使用PPT Demo

以下是我使用官網的demo制作的一個PPT，注意它是嵌入在我這個網頁中的，以下網頁你可以左右滑動。

https://dianwoshishi.github.io/nodeppt/slides.html

如果你覺得這個功能很酷，想要添加到你的站點里面去，那么就和我一起往下走吧。

如何在Hexo中添加Nodeppt

前提，確保你的noteppt能夠正常使用。這是前提，至于怎么熟練的玩好nodeppt，額…… 還是去官網吧，這里不誤導人了。

整體的思路是，兩步走：

第一步先使用nodeppt在相應的public目錄生成相應的文件,如html,js,img等等
在post中引用相應的文件

首先熟悉nodeppt的build方法

輸入nodeppt build --help

Usage: nodeppt build [options] [entry]

build html file

Options:
  -m, --map         Release sourcemap
  -d, --dest <dir>  output directory
  -h, --help        output usage information
  Examples:

    nodeppt build slide.md

我們需要使用的就是這個-d參數。目的是將生成的文件放入網站的public目錄下

源文件目錄說明

存放源文件的目錄結構如下所示

root/public
        ├──nodeppt
root/source
├── slideshare
│   ├── another.md
│   ├── build.sh
│   ├── buildlist.txt
│   ├── makefile
│   └── slides.md

buildlist.txt 代表等待生成的ppt文件列表

slides.md
another.md%

build.sh

在slideshare目錄下運行本文件，作用是使用nodeppt按上面文件內容的順序構建，輸出目錄為public/nodeppt

NODEPPT=/usr/local/Cellar/node/17.5.0/bin/nodeppt
Destination=../../public/nodeppt/
build_files=$(cat buildlist.txt | xargs)
for file in $build_files
do
    # echo $file
    $NODEPPT build ./$file -d $Destination
done

makefile 本文件主要用于使用一個腳本完成所有的工作

all:
        bash build.sh

至此，你使用在當前目錄make就能將生成好的PPT網頁放入public目錄的noteppt目錄中。

那么怎么使用呢？

在上一步中，我們生成了ppt文件，放在了public/nodeppt/中，假設文件名為slides.html

那么我們可以在hexo的post中簡單的使用如下命令，就可以引用我們的PPT

<iframe src="../nodeppt/slides.html" width="100%" height="500" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame"></iframe>

需要修改的部分就是iframe中的src部分。

最后放下一個一鍵上線部署的腳本

all:
    make nodeppt
    hexo g 
    hexo d 

nodeppt:
    $(MAKE) -C source/slideshare/

test:
    make nodeppt
    hexo g
    hexo s

deploy:
    make nodeppt
    hexo g 
    hexo d

最后附上本次示例的PPT

試試看左右滑動

https://dianwoshishi.github.io/nodeppt/use-nodeppt-in-hexo-demo.html

參考資料

靜態壓縮

https://hasaik.com/posts/495d0b23.html

使用Hexo-Neat成功https://github.com/rozbo/hexo-neat

Hexo靜態資源壓縮https://www.jianshu.com/p/5e48e532ae58

https://rye-catcher.github.io/2019/10/21/Nodeppt-%E5%85%A5%E5%9D%91%E6%8C%87%E5%8D%97/

給博客文章嵌入 PPT 演示https://hexo.fluid-dev.com/posts/hexo-nodeppt/

添加自定義網頁

https://www.jianshu.com/p/524b073f9b37

原文的體驗更好

https://dianwoshishi.github.io/post/NODEPPT%E8%BF%99%E5%8F%AF%E8%83%BD%E6%98%AF%E8%BF%84%E4%BB%8A%E4%B8%BA%E6%AD%A2%E6%9C%80%E5%A5%BD%E7%9A%84%E7%BD%91%E9%A1%B5%E7%89%88%E6%BC%94%E7%A4%BA%E5%BA%93?dianwoshishi.github.io/post/NODEPPT%E8%BF%99%E5%8F%AF%E8%83%BD%E6%98%AF%E8%BF%84%E4%B

文主要內容

過渡：transition
2D 轉換 transform
3D 轉換 transform
動畫：animation

過渡：transition

transition的中文含義是過渡。過渡是CSS3中具有顛覆性的一個特征，可以實現元素不同狀態間的平滑過渡（補間動畫），經常用來制作動畫效果。

補間動畫：自動完成從起始狀態到終止狀態的的過渡。不用管中間的狀態。
幀動畫：通過一幀一幀的畫面按照固定順序和速度播放。如電影膠片。

transition 包括以下屬性：

transition-property: all; 如果希望所有的屬性都發生過渡，就使用all。
transition-duration: 1s; 過渡的持續時間。
transition-timing-function: linear; 運動曲線。屬性值可以是：
linear 線性
ease 減速
ease-in 加速
ease-out 減速
ease-in-out 先加速后減速
transition-delay: 1s; 過渡延遲。多長時間后再執行這個過渡動畫。

上面的四個屬性也可以寫成綜合屬性：

 transition: 讓哪些屬性進行過度 過渡的持續時間 運動曲線 延遲時間;
 transition: all 3s linear 0s;

其中，transition-property這個屬性是尤其需要注意的，不同的屬性值有不同的現象。我們來示范一下。

如果設置 transition-property: width，意思是只讓盒子的寬度在變化時進行過渡。效果如下：

如果設置 transition-property: all，意思是讓盒子的所有屬性（包括寬度、背景色等）在變化時都進行過渡。效果如下

案例：小米商品詳情

效果如下：

2D 轉換

轉換是 CSS3 中具有顛覆性的一個特征，可以實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式。

轉換再配合過渡和動畫，可以取代大量早期只能靠 Flash 才可以實現的效果。

在 CSS3 當中，通過 transform 轉換來實現 2D 轉換或者 3D 轉換。

2D轉換包括：縮放、移動、旋轉。

1、縮放：scale

格式：

 transform: scale(x, y);
 transform: scale(2, 0.5);

參數解釋： x：表示水平方向的縮放倍數。y：表示垂直方向的縮放倍數。如果只寫一個值就是等比例縮放。

取值：大于1表示放大，小于1表示縮小。不能為百分比。

格式舉例：

效果：

上圖可以看到，給 box1 設置 2D 轉換，并不會把兄弟元素擠走。

2、位移：translate

格式：

 transform: translate(水平位移, 垂直位移);
 transform: translate(-50%, -50%);

參數解釋：

參數為百分比，相對于自身移動。
正值：向右和向下。負值：向左和向上。如果只寫一個值，則表示水平移動。

格式舉例：

效果：

上圖中，因為我在操作的時候，鼠標懸停后，立即進行了略微的移動，所以產生了兩次動畫。正確的效果應該是下面這樣的

應用：讓絕對定位中的盒子在父親里居中

我們知道，如果想讓一個標準流中的盒子在父親里居中（水平方向看），可以將其設置margin: 0 auto屬性。

可如果盒子是絕對定位的，此時已經脫標了，如果還想讓其居中（位于父親的正中間），可以這樣做：

 div {
 width: 600px;
 height: 60px;
 position: absolute; 絕對定位的盒子
 left: 50%; 首先，讓左邊線居中
 top: 0;
 margin-left: -300px; 然后，向左移動寬度（600px）的一半
 }

如上方代碼所示，我們先讓這個寬度為600px的盒子，左邊線居中，然后向左移動寬度（600px）的一半，就達到效果了。

現在，我們還可以利用偏移 translate 來做，這也是比較推薦的寫法：

div {
 width: 600px;
 height: 60px;
 background-color: red;
 position: absolute; 絕對定位的盒子
 left: 50%; 首先，讓左邊線居中
 top: 0;
 transform: translate(-50%); 然后，利用translate，往左走自己寬度的一半【推薦寫法】
 }

3、旋轉：rotate

格式：

 transform: rotate(角度);
 transform: rotate(45deg);

參數解釋：正值順時針；負值：逆時針。

效果：

注意，上方代碼中，我們給盒子設置了 transform 中的 rotate 旋轉，但同時還要給盒子設置 transition 過渡。如果沒有這行過渡的代碼，旋轉會直接一步到位，效果如下：（不是我們期望的效果）

案例1：小火箭

上方代碼中，我們將 transform 的兩個小屬性合并起來寫了。

案例2：撲克牌

rotate 旋轉時，默認是以盒子的正中心為坐標原點的。如果想改變旋轉的坐標原點，可以用transform-origin屬性。格式如下：

 transform-origin: 水平坐標 垂直坐標;
 transform-origin: 50px 50px;
 transform-origin: center bottom; //旋轉時，以盒子底部的中心為坐標原點

我們來看一下 rotate 結合 transform-origin 的用法舉例。

代碼如下：

效果如下：

4、傾斜

3D 轉換

1、旋轉：rotateX、rotateY、rotateZ

3D坐標系（左手坐標系）

如上圖所示，伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。拇指、食指和中指分別代表X、Y、Z軸的正方向，這樣我們就建立了一個左手坐標系。

瀏覽器的這個平面，是X軸、Y軸；垂直于瀏覽器的平面，是Z軸。

旋轉的方向：（左手法則）

左手握住旋轉軸，豎起拇指指向旋轉軸的正方向，正向就是其余手指卷曲的方向。

從上面這句話，我們也能看出：所有的3d旋轉，對著正方向去看，都是順時針旋轉。

格式：

 transform: rotateX(360deg); //繞 X 軸旋轉360度
 transform: rotateY(360deg); //繞 Y 軸旋轉360度
 transform: rotateZ(360deg); //繞 Z 軸旋轉360度

格式舉例：

（1）rotateX 舉例

效果：

上方代碼中，我們最好加個透視的屬性，方能看到3D的效果；沒有這個屬性的話，圖片旋轉的時候，像是壓癟了一樣。

而且，透視的是要加給圖片的父元素 div，方能生效。我們在后面會講解透視屬性。

（2）rotateY 舉例：

效果：

（3）rotateZ 舉例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .rotateZ {
 width: 330px;
 height: 227px;
 margin: 100px auto;
 /* 透視*/
 perspective: 200px;
 }
 img {
 transition: all 1s;
 }
 .rotateZ:hover img {
 transform: rotateZ(360deg);
 }
 </style>
</head>
<body>
<div class="rotateZ">
 <img src="images/z.jpg" alt=""/>
</div>
</body>
</html>

效果：

案例：百度錢包

現在有下面這張圖片素材：

要求做成下面這種效果：

上面這張圖片素材其實用的是精靈圖。實現的代碼如下：

2、移動：translateX、translateY、translateZ

格式：

 transform: translateX(100px); //沿著 X 軸移動
 transform: translateY(360px); //沿著 Y 軸移動
 transform: translateZ(360px); //沿著 Z 軸移動

格式舉例：

（1）translateX 舉例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .box {
 width: 200px;
 height: 200px;
 background: green;
 transition: all 1s;
 }
 .box:hover {
 transform: translateX(100px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

（2）translateY 舉例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .box {
 width: 200px;
 height: 200px;
 background: green;
 transition: all 1s;
 }
 .box:hover {
 transform: translateY(100px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

（3）translateZ 舉例：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 body {
 /* 給box的父元素加透視效果*/
 perspective: 1000px;
 }
 .box {
 width: 250px;
 height: 250px;
 background: green;
 transition: all 1s;
 margin: 200px auto
 }
 .box:hover {
 /* translateZ必須配合透視來使用*/
 transform: translateZ(400px);
 }
 </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

效果：

上方代碼中，如果不加透視屬性，是看不到translateZ的效果的。

3、透視：perspective

電腦顯示屏是一個 2D 平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。

透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。但僅僅只是視覺呈現出3d 效果，并不是正真的3d。

格式有兩種寫法：

作為一個屬性，設置給父元素，作用于所有3D轉換的子元素
作為 transform 屬性的一個值，做用于元素自身。

4、3D呈現（transform-style）

3D元素構建是指某個圖形是由多個元素構成的，可以給這些元素的父元素設置transform-style: preserve-3d來使其變成一個真正的3D圖形。屬性值可以如下：

 transform-style: preserve-3d; //讓 子盒子 位于三維空間里
 transform-style: flat; //讓子盒子位于此元素所在的平面內（子盒子被扁平化）

案例：立方體

動畫

動畫是CSS3中具有顛覆性的特征，可通過設置多個節點 來精確控制一個或一組動畫，常用來實現復雜的動畫效果。

1、定義動畫的步驟

（1）通過@keyframes定義動畫；

（2）將這段動畫通過百分比，分割成多個節點；然后各節點中分別定義各屬性；

（3）在指定元素里，通過 animation 屬性調用動畫。

之前,我們在 js 中定義一個函數的時候，是先定義，再調用：

 js 定義函數：
 function fun(){ 函數體 }
 調用：
 fun();

同樣，我們在 CSS3 中定義動畫的時候，也是先定義，再調用：

 定義動畫：
 @keyframes 動畫名{
 from{ 初始狀態 }
 to{ 結束狀態 }
 }
 調用：
 animation: 動畫名稱 持續時間；

其中，animation屬性的格式如下：

 animation: 定義的動畫名稱 持續時間 執行次數 是否反向 運動曲線 延遲執行。(infinite 表示無限次)
 animation: move1 1s alternate linear 3;
 animation: move2 4s;

定義動畫的格式舉例：

注意好好看代碼中的注釋。

效果如下：

2、動畫屬性

我們剛剛在調用動畫時，animation屬性的格式如下：

animation屬性的格式如下：

 animation: 定義的動畫名稱 持續時間 執行次數 是否反向 運動曲線 延遲執行。(infinite 表示無限次)
 animation: move1 1s alternate linear 3;
 animation: move2 4s;

可以看出，這里的 animation 是綜合屬性，接下來，我們把這個綜合屬性拆分看看。

（1）動畫名稱：

 animation-name: move;

（2）執行一次動畫的持續時間：

 animation-duration: 4s;

備注：上面兩個屬性，是必選項，且順序固定。

（3）動畫的執行次數：

 animation-iteration-count: 1; //iteration的含義表示迭代

屬性值infinite表示無數次。

（3）動畫的方向：

 animation-direction: alternate;

屬性值：normal 正常，alternate 反向。

（4）動畫延遲執行：

 animation-delay: 1s;

（5）設置動畫結束時，盒子的狀態：

 animation-fill-mode: forwards;

屬性值： forwards：保持動畫結束后的狀態（默認）， backwards：動畫結束后回到最初的狀態。

（6）運動曲線：

 animation-timing-function: ease-in;

屬性值可以是：linear ease-in-out steps()等。

注意，如果把屬性值寫成steps()，則表示動畫不是連續執行，而是間斷地分成幾步執行。我們接下來專門講一下屬性值 steps()。

steps()的效果

我們還是拿上面的例子來舉例，如果在調用動畫時，我們寫成：

 animation: move2 4s steps(2);

效果如下：

有了屬性值 steps()，我們就可以作出很多不連續地動畫效果。比如時鐘；再比如，通過多張靜態的魚，作出一張游動的魚。

step()舉例：時鐘的簡易模型

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 div {
 width: 3px;
 height: 200px;
 background-color: #000;
 margin: 100px auto;
 transform-origin: center bottom; /* 旋轉的中心點是底部 */
 animation: myClock 60s steps(60) infinite;
 }
 @keyframes myClock {
 0% {
 transform: rotate(0deg);
 }
 100% {
 transform: rotate(360deg);
 }
 }
 </style>
</head>
<body>
<div></div>
</body>
</html>

上方代碼，我們通過一個黑色的長條div，旋轉360度，耗時60s，分成60步完成。即可實現。

效果如下：

動畫舉例：擺動的魚

現在，我們要做下面這種效果，為了作出上面這種效果，要分成兩步。

（1）第一步：讓魚在原地擺動

魚在原地擺動并不是一張 gif動圖，她其實是由很多張靜態圖間隔地播放，一秒鐘播放完畢，就可以了

圖片的url是http://img.smyhvae.com/20180209_1245.gif，圖片較大，如無法觀看，可在瀏覽器中單獨打開。

上面這張大圖的尺寸是：寬 509 px、高 2160 px。

我們可以理解成，每一幀的尺寸是：寬 509 px、高 270 px。270 * 8=2160。讓上面這張大圖，在一秒內從 0px 的位置往上移動2160px，分成8步來移動。就可以實現了。

代碼是：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 .shark {
 width: 509px;
 height: 270px; /*盒子的寬高是一幀的寬高*/
 border: 1px solid #000;
 margin: 100px auto;
 background: url(images/shark.png) left top; /* 讓圖片一開始位于 0 px的位置 */
 animation: sharkRun 1s steps(8) infinite; /* 一秒之內，從頂部移動到底部，分八幀， */
 }
 @keyframes sharkRun {
 0% {
 }
 /* 270 * 8=2160 */
 100% {
 background-position: left -2160px; /* 動畫結束時，讓圖片位于最底部 */
 }
 }
 </style>
</head>
<body>
<div class="sharkBox">
 <div class="shark"></div>
</div>
</div>
</body>
</html>

我們不妨把上面的動畫的持續時間從1s改成 8s，就可以看到動畫的慢鏡頭

這下，你應該恍然大悟了。

（2）第二步：讓魚所在的盒子向前移動。

實現的原理也很簡單，我們在上一步中已經讓shark這個盒子實現了原地搖擺，現在，讓 shark 所在的父盒子 sharkBox向前移動，即可。完整版代碼是：

最后效果很好

這是我在學習CSS3動畫的時候收藏的一篇好文，現在分享在這里，既方便大家學習參考，也方便日后查閱，最后感謝作者

鏈接文章

https://www.cnblogs.com/qianguyihao/p/8435182.html

在完成前面的基本概念的學習以后，今天開始我們來學習HTML。

在百度上搜索HTML，你會看到一大片的描述，很多讀者會陷入迷惑中，到底什么是HTML？我們在這里給出一些關鍵概念的理解。首先我們要明確的是，我們通過編寫HTML的代碼并通過瀏覽器運行，就能得到我們想到的界面。HTML提供了很多基本的元素、標簽用于我們構建界面，你可能你并不明白什么是元素和標簽，沒關系我們可以直接開始一個例子來講解和體會這些概念。

先練后理，我認為是很好的一個學習辦法。因為計算機包含了太多東西，先想理清楚所有的知識在開始寫軟件，這是不現實的。

<!-- 首先，利用VS Code 創建一個demo.html，并在里面完成一下代碼的編寫，如圖一所示 -->

<!-- 這些都是注釋，并不會影響實際的效果 -->
<!-- 下面的代碼是一個HTML的基本框架，我們會通過注釋的方式一一講解-->

<!-- 第一行代碼是用于表示這是一個HTML的文檔，這樣瀏覽器就會用正確的方式展示這個頁面 -->
<!DOCTYPE html>
  
<!-- html標簽是每個HTML文檔的開始 -->
<html lang="en">

<!-- head標簽主要提供一些基本的設置，其中title是指你打開頁面的時候，顯示的結果 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- body標簽是頁面的內容部分，我們想向界面添加新的元素的話，就在這里添加 -->
<body>
    
</body>

</html>

注釋：在HTML中，使用語法 可以在代碼中書寫注釋，注釋是指在代碼中沒有實際的功能，主要是用于給其他程序員提供一些信息，就如例子中，我們的注釋就是告訴你第一步該怎么做，實際上它不會變成頁面中的任何一部分
標簽：在HTML中，用<>括起來的稱為標簽，一般來說，標簽是構建界面的基本單元，就像造房子一樣，標簽就是一塊一塊的磚，或者是一些水泥用于粘合，一根鋼筋之類的。而我們在寫界面的時候，只需要合理的使用這些已經提供好的標簽，就能夠完成。標簽有很多是成對的，比如body標簽，它的形式是<body> </body>，在這對標簽的中間，可以放其他的內容。
屬性：標簽里面的形式如xx="yy"的稱為屬性，屬性就是更好的控制標簽的效果。

圖一

在沒有給上面的代碼添加任何東西的時候，打開的效果如圖二，你會發現上面顯示的Document就是我們在title里面設置的值。

任務一：修改代碼里面<title> </title>兩個標簽中間的值，從Document改為我的主頁，并且查看打開頁面是否生效

圖二


<!DOCTYPE html>
  
<!-- html標簽是每個HTML文檔的開始 -->
<html lang="en">

<!-- head標簽主要提供一些基本的設置，其中title是指你打開頁面的時候，顯示的結果 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- body標簽是頁面的內容部分，我們想向界面添加新的元素的話，就在這里添加 -->
<body>
    
</body>

</html>

圖三

非常簡單并且快速，我們只需要向body標簽內部添加h1和h2標簽，在界面中就能出現對應的標題和二級標題。那么我們還有什么標簽呢？我們可以簡單的介紹幾個

<a>標簽，超鏈接標簽。這個非常常見，平時你在網站上看到的可以點擊的鏈接，都是可以通過這個標簽來完成的。
<button>標簽，按鈕。平時你看到的按鈕都是可以通過這個標簽來完成的

任務二：百度搜索HTML標簽了解一下，還有哪些常見的標簽。

<!-- 首先，利用VS Code 創建一個demo.html，并在里面完成一下代碼的編寫，如圖一所示 -->

<!-- 這些都是注釋，并不會影響實際的效果 -->
<!-- 下面的代碼是一個HTML的基本框架，我們會通過注釋的方式一一講解-->

<!-- 第一行代碼是用于表示這是一個HTML的文檔，這樣瀏覽器就會用正確的方式展示這個頁面 -->
<!DOCTYPE html>
  
<!-- html標簽是每個HTML文檔的開始 -->
<html lang="en">

<!-- head標簽主要提供一些基本的設置，其中title是指你打開頁面的時候，顯示的結果 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<!-- body標簽是頁面的內容部分，我們想向界面添加新的元素的話，就在這里添加 -->
<body>
    <!-- body中間添加新的內容來豐富我們的界面 -->
      
    <!-- h1標簽是用于在界面中添加一個 一級標題 -->
    <!-- 如果你需要添加一個標題，那肯定就會用h1標簽 -->
    <h1> HTML課堂開課啦 </h1>

	 	<!-- 同樣的,h2標簽是用于在界面中添加一個 二級標題 -->
    <!-- 讓我們看看效果 -->
    <h2> 二級標題-HTML課堂開課啦 </h2>
    
    <!-- 添加的新標簽，效果如圖四 -->
    <!-- 這里開始涉及到屬性，href屬性是用于指定當你點擊這個超鏈接的時候，跳轉到網站 -->
    <!-- href="www.baidu.com"  意味著會跳轉到百度，快試試吧！--> 
    <a href="www.baidu.com">超鏈接</a>
    <button>一個按鈕</button>
    <!-- 同樣的，這里的src屬性是指定顯示的圖片地址，你可以試試改為其他地址 -->
    <img src="http://t7.baidu.com/it/u=3616242789,1098670747&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1583627811&t=0dcfb9b5461a7ceaf634f834e00ef93a" alt="">
</body>

</html>

圖四

任務三：從了解到標簽里面選幾個添加到代碼中，并驗證效果

本節我們完成了基本的HTML的認識，我們能夠清楚的知道，界面是完全由我們寫的代碼控制的。我們需要什么組件，就通過對應的標簽就能夠完成效果。有的同學會覺得當前的頁面很丑，但是不用著急，因為那是CSS部分的知識了。就像修房子一樣，HTML是造房子，CSS就是裝修的事兒了。

小建議：

多使用搜索引擎去搜索問題，從新手到入門，搜索是最需要鍛煉的一個能力
多練習，每個標簽都是可以加一個到代碼里面看看效果的，何樂而不為？

謝謝大家的閱讀，有任何問題可以提出來，一定會盡力解答。

在線咨詢

上一篇：瀏覽器內核大揭秘
下一篇：uniapp純CSS實現圓形進度條組件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在你的hexo博客中使用nodeppt，一款迄今為止

家好，我是明說網絡的小明同學。

NODEPPT這可能是迄今為止最好的網頁版演示庫

NODEPPT Demo

NODE PPT Github

Hexo中使用PPT Demo

如何在Hexo中添加Nodeppt

首先熟悉nodeppt的build方法

源文件目錄說明

那么怎么使用呢？

最后附上本次示例的PPT

參考資料

靜態壓縮

添加自定義網頁

原文的體驗更好

過渡：transition

2D 轉換

動畫

您的項目需求