整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb3.0指的是第三代互聯網服務，他是基于區塊鏈技術，存儲在分布式存儲服務器上。
我創建的第一個Web3網頁
目前Web3.0概念非常火，不過依然有很多同學不了解Web3.0是什么？以下內容，做個闡釋，本文會涉及到三方面知識《Web3域名是Web3身份憑證》《IPFS是什么？看這篇文章就夠了》《加密錢包是區塊鏈生態的“接口”》。
-是去中心化域名，好處是不歸中心化機構管，永遠存儲在區塊鏈上，不會被下架或被取消。
-IPFS，去中心化存儲，網頁數據必須要存儲在去中心化的系統上，只要有節點存在，網頁永遠存在，可以一直被訪問，不存在被關掉和拔網線的情況
-都是在區塊鏈上進行的，包括社交、支付等。
在這里，我們將展示如何使用Unstoppable Domains創建和托管一個去中心化網站。您只需付費購買一個域名，其他目前均免費。
使用Unstoppable Domains注冊Web3域名的特點
可以...
構建Web3網站
完全屬于您的
無需續訂費用
簡單的加密貨幣支付
解析更多錢包
冗長變的簡單
配置您的數字身份
驗證社交賬戶
顯示NFT頭像
今天只展示如何購買web3域名 和 如何搭建web3網頁。
以下內容建議使用Chrome瀏覽器或Brave瀏覽器，并需要安裝MetaMask小狐貍錢包。MetaMask小狐貍錢包官網：https://metamask.io
第1步：輸入您要注冊的域名
第2步：選擇您喜歡的后綴。
-任何后綴沒有差異化，可以使用以下結尾，作為域名的后綴。
第3步：付款。
-支付的方式有3種，信用卡 & PayPal & 加密貨幣。上面的優惠券領了可抵扣10美元，＞20美元可用。
第4步：進入Website界面。
-域名買完后，點右上角【Account】-【MyDomains】-【Manage】-【Website】。
-該界面展示，3個功能
-我們使用①【CreateWebsite】模板
第5步：建站。
-目前已開放了3個模板，Blog還未上線
-選擇①Personal=個人站
第6步：選擇模板。
-目前共有5個模板供選擇，以最后一個模板Portfolio示例
第7步：編輯網頁信息。
第8步：上傳至IPFS星際文件系統。
-點擊右上角【Publish to IPFS】，這時需要連接您的MetaMask小狐貍錢包，不清楚小狐貍錢包的，請閱讀《加密錢包是區塊鏈生態的“接口”》，MetaMask小狐貍錢包官網：https://metamask.io
第9步：上傳大概5~10分鐘后，查詢即可。
第10步：編輯Web3網頁全部完成。
這時您也擁有了一個可以終生擁有的一個Web3網頁。
不過大家可以留意到，該Web3網頁的地址是：https://ipfs.io/ipfs/QmSsphThrX3TWENmLYetqoT2bFPR222UUCs4FUVTzSLgCm 這是因為Web3網頁是存儲在IPFS星際文件系統上。
我的第一個Web3網頁
第11步：訪問Web3網頁，有2種方式
-需要安裝擴展程序Unstoppable Extension，輸入您的web3域名.后綴，即可。Chrome應用商店https://chrome.google.com/webstore/detail/unstoppable-extension/beelkklmblgdljamcmoffgfbdddfpnnl?hl=zh-CN
-直接輸入 您的web3域名.后綴 ，Brave瀏覽器會自動適配IPFS對等列表
至此全部完成，您的 web3域名.后綴 可解析到 https://ipfs.io/ipfs/IPFSHash......
創建一個完全屬于您控制的，永不下線的，存儲在IPFS上的Web3網頁吧。
本文原創，轉發請標注來源。
#web3.0##元宇宙##web3##開始學習火熱的web3#
擴展閱讀：
們都知道互聯網的發展，是因為網站的存在。
一個個網站連接成了互聯網，比如我們購物買東西，使用搜索引擎搜東西，用社交網站來聊天，它們給我們生活帶來了極大的樂趣。
你有沒有曾經想要擁有一個自己的網站？
所以今天教大家來自己創建一個自己的網站，你可以隨意添加按鈕，數據，還可以自己動手設計。
而這些都是免費的，僅僅需要花費幾分鐘時間就可以完成。
有沒有很心動，跟著我一起來吧！
在教大家之前，我先給大家介紹一下可以創建網站的這些網站，分析它們的特點，它們使用都大同小異，然后你們可以自己來選擇。
Wix
www.wix.com
Wix 是一個網頁開發平臺，你可以拖拽就可以創建HTML 5 工具網站，你可以免費創建，但是額外的功能需要付費了。
它也是老牌的免費創建網站的網站，它的模板豐富，樣式齊全，有專業的設計師設計模板。
180 個國家的900 萬用戶使用他們的服務，也看出他們的出色。
你只需要注冊登錄，選擇模板，自定義發布文本，圖片等等，然后發布你的網站，所有人都可以訪問你的網站。
由于是國外的網站，不太穩定。
Weebly
www.weebly.com
Weebly 也是類似Wix 的通過拖拽可以創建網站。
它的網站本身就是高顏值，它的模板也是一樣的很精美的。
而且它幾乎幫你完成了一切，比如默認的各種樣式，文本，圖片，表單等等。
它還內置了很多高清圖片庫，還有豐富的模板和樣式，讓你隨意挑選。
它也一樣有很多外置的服務，但是一樣需要付費的。
而且它的空間還是無限的，你可以隨意上傳自己想要的東西。
總感覺崇洋媚外不太好，所以下面也推薦幾個國內做的很不錯的，而且訪問速度很快，你分享給其他人，也不會尷尬的打不開。
竹子建站
www.zhuzi.me
竹子建站算是比較符合國人風格的建站網站。
打開網站，琳瑯滿目的模板，你只需挑選一個自己喜歡的模板，比如像個人網站，婚紗網站，甚至是自己的簡歷也是可以的，你可以提前預覽，或者直接來修改。
打開編輯頁面，頁面的任何一個按鈕圖片，你只需要選中，就會顯示修改工具欄。
你可以修改字體類型大小，顏色，高度，居中等等。
你還可以插入圖片，網址，表格等。
你還可以隨意拖拽控件的位置，或者隨時插入刪除。
修改圖片時，還有內置的高清圖庫，還有各種Icon 可以選擇。
同時它還支持不同的格式，比如像視頻，文檔，PDF，PPT 等。
而且還能做到隨見即所得，真的很方便，編輯好即可發布。
同時它還適配了手機，電腦，平板，讓你在不同的設備上體驗都是非常的棒的。
Strikingly
www.strikingly.com
Strikingly 是面向海外的便捷建站網站，當然它出自國內的團隊之手。
而且它還針對國內發布了，上線了：http://www.sxl.cn
和Strikingly 一樣的服務，而且速度更快，它還有各種強大的功能。
它也是選中就可以隨時編輯。
而且你還可以選擇網站類型，網站描述，添加關鍵詞。
同時它還有數據分析功能。
更多強大的功能需要專業付費版了。
而且它的網頁就沒有那么美觀了。
對于個人用戶不太友好。
題目只能有30個字，不能寫全，其實今天我們要學習的內容有三個，第一，下拉列表表單，第二，多行文字輸入表單，第三，數據集表單。
開始學習吧！
前天和昨天我們在《HTML表單元素初識1——零基礎自學網頁制作》和《HTML表單元素初識2——零基礎自學網頁制作》中基本上把<input/>標簽的type屬性里不同的值進行了講解與實踐，今天我們來學習其他包含在<form></form>之間的元素。
帶有下拉列表的表單
我們在一些網站填寫注冊信息時，經常會遇到選擇"生活所在地"的操作，因為中國的地名是固定的，因此頁面會為我們提供一個下拉列表選項，我們直接點選即可，就不需要輸入文字了，這樣操作的好處在于不會出現拼寫錯誤。例如：
寫這個功能我們需要介紹一組新標簽<select></select>。"select"（選擇）。在這個標簽中再添加<option></option>。"option"（選項）。這樣就可以寫出帶有下拉列表的表單了，示例代碼如下：
<select><option></option></select>這段代碼我們繼續在昨天的"表單.html"文件中添加即可，在<input type="image" src="img/示例圖片/submit.jpg"/><br>這段代碼之前即可！與這個圖片提交按鈕共用一個<form></form>標簽！
下面我們為多選表單添加名稱，示例代碼如下：
請選擇省份<select><option></option></select>下面我們添加不同選項，示例代碼如下：
請選擇省份
<select >
<option >河北</option>
<option >山東</option>
<option >河南</option>
<option >海南</option>
<option >江蘇</option>
<option >安徽</option>
</select>
<br><br>為了規范起見，我們為表單信息添加name和value屬性，示例代碼如下：
請選擇省份
<select name="province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan">河南</option>
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br>大家要注意的是，在下拉列表表單中，name寫在<select>中，value寫在<option>中。
頁面效果如下：
這里告訴大家一個規律，下拉列表表單默認顯示第一個<option></option>中的文字內容。
如果您想改變這個默認顯示，請在需要顯示的<option>中添加selected屬性，并賦值為"selected"。
示例代碼如下：
請選擇省份
<select name="province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option>
<!--選中這個選項--><option value="Hainan">海南</option><option value="Jiangsu">江蘇</option><option value="Anhui">安徽</option></select><br><br>頁面效果如圖：
多行文字輸入表單
我們在西瓜視頻上發布視頻時會被要求填寫視頻描述，頁面中的輸入框不是像下圖這么短的單行輸入框。
而是多行輸入框，如圖：
使用<textarea></textarea>標簽即可添加這樣的輸入框，不過要設置row（列）和cols（行）屬性的數值。示例代碼如下：
<br>請簡要描述您的劇本的情節<br><textarea row="3" cols="20"></textarea><br>這段代碼添加到</select><br><br>之后，與其共同使用一個<form></form>標簽。
下面我們為這個多行輸入框添加一些提示和限制。
首先，添加提示文字，和type="text"的<input/>標簽一樣，都是使用placeholder屬性。
第二，我們限制一下字數，使用maxlength（最大長度）屬性。
第三，在頁面加載完成后，直接讓光標停留在輸入框中，使用autofocus屬性。
下面看看如何寫吧，示例代碼如下：（不要忘記寫好name屬性！）
<br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea><br>頁面效果如圖：
如果刷新頁面不能正確顯示，請嘗試關閉后重新打開！
數據集表單
數據集表單實際上就是一個將不同選項或信息打包上傳的設置。
當一組表單元素放到 <fieldset> 標簽內時，瀏覽器會以特殊方式來顯示它們，它們可能有特殊的邊界、3D 效果，或者甚至可創建一個子表單來處理這些元素。（W3school）
這個數據集有三個部分組成，首先是<fliedset></fliedset>,這個標簽不會顯示，只是告訴瀏覽器這里的數據要打包。
第二是<legend></legend>,"legend"(說明)，這里添加數據集名稱。
第三就是我們之前學到的那些標簽了。
示例代碼如下：
<fliedset> <legend>信息打包</legend> </fliedset>下面我們使用這段代碼把form2打包一下吧。示例代碼如下：
<form>
<fieldset><!--開始-->
<legend>信息打包</legend><br>
<!--標題-->興趣愛好：<br>
<input type="checkbox" name="hobby" value="reading"/>讀書
<input type="checkbox" name="hobby" value="film"/>電影
<input type="checkbox" name="hobby" value="painting"/>繪畫
<input type="checkbox" name="hobby" value="music"/>音樂
<br>
最高學歷：<br>
<input type="radio" name="education" value="highSchool"/>高中
<input type="radio" name="education" value="bachelor"/>本科
<input type="radio" name="education" value="master"/>碩士
<input type="radio" name="education" value="doctor"/>博士
<br>
請選擇省份
<select name="province">
<option value="Hebei">河北</option>
<option value="Shandong">山東</option>
<option value="Henan" selected="selected">河南</option><!--選中這個選項-->
<option value="Hainan">海南</option>
<option value="Jiangsu">江蘇</option>
<option value="Anhui">安徽</option>
</select>
<br><br><br>
請簡要描述您的劇本的情節<br>
<textarea row="3" cols="20" name="storyOutLine"placeholder="最多輸入80字"maxlength="80"autofocus></textarea>
<br>
</fieldset><!--結尾-->
<input type="image" src="img/示例圖片/submit.jpg"/><br>
<input type="reset" /><br>
<input type="submit" value="submit"/>
</form>頁面效果如下：
今天的內容結束了！
如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
