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