整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
喜歡互聯網的一點是在互聯網放置靜態頁面是如此簡單。今天有人問我該怎么做，所以我想我會快速地寫下來！
-- Julia Evans（作者）
我喜歡互聯網的一點是在互聯網放置靜態頁面是如此簡單。今天有人問我該怎么做，所以我想我會快速地寫下來！
我的所有網站都只是靜態 HTML 和 CSS。我的網頁設計技巧相對不高（ https://wizardzines.com 是我自己開發的最復雜的網站），因此保持我所有的網站相對簡單意味著我可以做一些改變/修復，而不會花費大量時間。
因此，我們將在此文章中采用盡可能簡單的方式 —— 只需一個 HTML 頁面。
我們要放在互聯網上的網站只是一個名為 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一個 Github 倉庫，其中只包含一個文件。
HTML 文件中包含一些 CSS，使其看起來不那么無聊，部分復制自 https://example.com 。
有以下幾步：
上面的 index.html 頁面位于 julia-example-website.neocities.com 中，如果你查看源代碼，你將看到它與 github 倉庫中的 HTML 相同。
我認為這可能是將 HTML 頁面放在互聯網上的最簡單的方法（這是一次回歸 Geocities，它是我在 2003 年制作我的第一個網站的方式）:)。我也喜歡 Neocities （像 glitch ，我也喜歡）它能實驗、學習，并有樂趣。
這絕不是唯一簡單的方式，在你推送 Git 倉庫時，Github pages 和 Gitlab pages 以及 Netlify 都將會自動發布站點，并且它們都非常易于使用（只需將它們連接到你的 GitHub 倉庫即可）。我個人使用 Git 倉庫的方式，因為 Git 不會讓我感到緊張，我想知道我實際推送的頁面發生了什么更改。但我想你如果第一次只想將 HTML/CSS 制作的站點放到互聯網上，那么 Neocities 就是一個非常好的方法。
如果你不只是玩，而是要將網站用于真實用途，那么你或許會需要買一個域名，以便你將來可以更改托管服務提供商，但這有點不那么簡單。
如果你熟悉在 Git 中編輯文件，同時想練習 HTML/CSS 的話，我認為將它放在網站中是一個有趣的方式！我真的很喜歡它的簡單性 —— 實際上這只有一個文件，所以沒有其他花哨的東西需要去理解。
還有很多方法可以復雜化/擴展它，比如這個博客實際上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在網絡中，但從基礎開始總是不錯的。
via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/
作者： Julia Evans 選題： lujun9972 譯者： geekpi 校對： wxy
本文由 LCTT 原創編譯， Linux中國 榮譽推出
建HTML網頁時，可以采用多種布局和設計風格。以下是一些常見的網頁形態名稱，可用于不同的網站設計和功能需求：
1. **門戶網站** - 集成了新聞、天氣預報、郵箱等服務的網站。
2. **企業網站** - 用于展示公司信息、產品和服務。
3. **電子商務網站** - 用于在線銷售商品。
4. **博客** - 用于個人或公司發布文章和日志。
5. **社交媒體網站** - 如Facebook和Twitter，用于社交互動。
6. **論壇** - 用戶可以發帖和回帖討論特定主題。
7. **新聞網站** - 提供新聞文章和更新。
8. **教育網站** - 用于在線課程和學術資源。
9. **政府網站** - 提供政府服務和信息。
10. **非營利組織網站** - 用于宣傳和籌款。
11. **個人作品集** - 展示個人作品，如設計師和藝術家。
12. **在線百科全書** - 如維基百科，提供大量信息。
13. **食譜網站** - 提供食譜和烹飪技巧。
14. **健康與健身網站** - 提供健康和健身相關內容。
15. **旅行網站** - 提供旅行信息和預訂服務。
16. **房地產網站** - 展示房產信息和經紀人。
17. **汽車網站** - 提供汽車信息和銷售服務。
18. **科技新聞網站** - 關注最新科技發展和產品。
19. **音樂網站** - 提供音樂播放和下載。
20. **視頻分享網站** - 如YouTube，用戶可以上傳和分享視頻。
21. **電影數據庫** - 如IMDb，提供電影信息和評論。
22. **體育網站** - 提供體育新聞和賽事信息。
23. **財經網站** - 提供股票市場和財經新聞。
24. **攝影網站** - 展示和分享攝影作品。
25. **時尚網站** - 提供時尚新聞和趨勢。
26. **寵物網站** - 提供寵物護理和相關信息。
27. **美食博客** - 分享美食制作和餐廳評論。
28. **兒童網站** - 提供兒童教育和娛樂內容。
29. **DIY網站** - 提供手工制作和DIY項目。
30. **游戲網站** - 提供在線游戲和游戲新聞。
31. **星座占卜網站** - 提供星座運勢和占卜。
32. **招聘網站** - 提供職位信息和求職服務。
33. **個人博客** - 個人分享生活和觀點的博客。
34. **科技博客** - 關注科技產品和公司動態。
35. **書評網站** - 提供書籍評論和推薦。
36. **旅游博客** - 分享旅行經歷和攻略。
37. **藝術畫廊網站** - 展示和銷售藝術品。
38. **在線市場** - 如Etsy，提供手工藝品和獨特商品。
39. **在線課程平臺** - 提供各種在線課程和培訓。
40. **語言學習網站** - 提供語言學習和練習工具。
41. **健康咨詢網站** - 提供健康和醫療建議。
42. **心理健康網站** - 提供心理健康信息和資源。
43. **個人財務網站** - 提供個人理財建議和工具。
44. **投資網站** - 提供投資策略和市場分析。
45. **環境與自然網站** - 關注環境保護和自然話題。
46. **歷史與文化網站** - 提供歷史和文化知識。
47. **宗教與靈性網站** - 提供宗教和靈性內容。
48. **政治評論網站** - 提供政治新聞和評論。
49. **在線論壇** - 用戶可以討論各種主題。
50. **慈善網站** - 用于宣傳和籌集慈善捐款。
這些形態的名稱代表了不同的網站類型和功能，可以根據您的需求和目標受眾選擇合適的網站形態。
為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。
昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。
建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。
示例代碼如下：
<form>
最高學歷：<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>
<input type = "submit" value = "submit"/>
</form>因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。
向服務器提交時，name叫做"education"（教育），value對應不同層次。
頁面效果如下：
大家可以點點試試，每次只能有一個被選中。如圖：
綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼：
<input type = "text" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
興趣愛好：
<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>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>頁面效果如下：
密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：
如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：
會員密碼：
<input type = "password" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "password" name="confirmPassWord"/><br>頁面效果如下：
上傳文件：使用type="file"可以上傳文件！
示例代碼如下：寫在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>頁面效果如下：
點擊"瀏覽"看下效果：
神奇！
使用圖片制作按鈕：將type="image"即可，代碼如下：
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>頁面效果如下：用一個src導入圖片即可。
示例圖片：路徑自行設置即可！
為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：
<input type="reset" /><br>頁面如圖所示：
大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！
舉個例子，如圖：
下面我們點擊"重置"后效果如下：
form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！
type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。
button值以后在JavaScript部分還會細說，這里也先略過。
除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！
今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。
碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！
喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！
喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
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小時內與您取得聯系。
