整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喜欢互联网的一点是在互联网放置静态页面是如此简单。今天有人问我该怎么做，所以我想我会快速地写下来！
-- 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小时内与您取得联系。
