网站很简单
写网站其实不算编程, 只是平时由编程的人顺手把网站写了.
这篇文章是写给不懂网页的人看的, 内容可能略显粗浅.
做网站很简单, 就是部署它有点复杂.
在中国, 搭建网站最难的是备案, 就像学习编程最难的是翻墙.
部署放最后, 先说说网站功能, 我个人很懒, 一直没有用收藏夹的习惯,反正不记得名字就百度一下网址就好.
百度最大的流量来源于 测试网络 和 网站名字转网址 这两个需求
但有些小众网站也许连名字都记不起来也就无法再访问了. 既然网站搭建这么简单, 我自己搭一个永久在线的小众网站导航就好了.
于是就有了以下网站, 原谅网站有个那么中二的名字 世界·新, 手头上备案的域名就剩下这个了.
世界·新
源码概览
正式开始我们的网站编写前, 先看看网站全部源码如下:
<html>
<head>
<title>世界·新</title>
<meta charset="utf-8" />
<style type="text/css">
body{
line-height: 1.8;
font-size: 13px;
color:#666;
text-align: center;
}
a {
color:#666;
text-decoration: none;
}
hr {
height: 10px;
border: none;
border-bottom: 1px solid #ccc;
}
h1, h2 {
font-size:15px;
color:#333;
line-height: 1.6;
font-weight: normal;
}
ul {
list-style: none;
margin:0px;
padding:10px;
}
.container {
max-width:200px;
margin:0 auto;
padding: 20px
}
</style>
</head>
<body>
<div class="container"/>
<a href="/">
<h1><b>世界·</b>新</h1>
</a>
<hr/>
<section>
<h2>媒</h2>
<ul>
<li><a target="_blank" href="http://www.theoutlookmagazine.com">新视线</a></li>
<li><a target="_blank" href="http://www.yitiao.tv/">一条</a></li>
<li><a target="_blank" href="http://meiriyiwen.com/">每日一文</a></li>
<li><a target="_blank" href="http://www.15yan.com/">十五言</a></li>
<li><a target="_blank" href="https://knewone.com/">knewone</a></li>
<li><a target="_blank" href="http://www.kinfolk.com.cn/">Kinfolk杂志</a></li>
<li><a target="_blank" href="http://www.imanpin.com/">慢品</a></li>
</ul>
</section>
<section>
<h2>店</h2>
<ul>
<li><a target="_blank" href="http://you.163.com/">严选</a></li>
<li><a target="_blank" href="http://www.iliangcang.com/">良仓</a></li>
<li><a target="_blank" href="http://www.sopool.com/">素铺</a></li>
</ul>
</section>
<hr/>
<footer>
提交 hi@tianseh.org
</footer>
</div>
</body>
</html>
对照截图和源码一看,其实网站也就是那么一回事了. 读不明白不要紧, 慢慢往下看.
标签的世界
首先要知道的是标签, 标签就是<html></html>, <hr/> 这种用尖括号括着一个单词让浏览器去显示的语法.
网页都是固定最外层一个<html>标签
<html>
</html>
然后<html>里面有一个头部<head>和正文<body>
<html>
<head></head>
<body></body>
</html>
头部是定义一下网站的隐藏信息, 例如网站是什么字符格式<meta charset="utf-8" />, 网站的标题是什么<title>世界·新</title>,
网站的样式 <style>....</sytle>.
<html>
<head>
<title>世界·新</title>
<meta charset="utf-8" />
<style>....</sytle>
</head>
<body>
</body>
</html>
现在为止内容都是空的, 其实浏览器能解析很多标签, 大概常用的就20个左右吧.
这里用到的有<div>, <section>,<footer> 其实对于浏览器来说都是一样的.负责包裹其他标签而已.
网页中最重要的是<a>标签, <a>就是我们常常看到的链接, 是开放互联网最重要的元素. (这里要声讨一下微信这方面的封闭)
一个普通的超链接是这么写的<a href="http://sekai.xin">世界·新</a>, 效果如 世界·新
网站每一块内容就是一个标题<h2>,一个链接列表<ul><li>, 一个标题<h2>, 一个链接列表<ul><li>.
所以<body>里面是这样写的
<body>
<section>
<h2>媒</h2>
<ul>
<li><a target="_blank" href="http://www.theoutlookmagazine.com">新视线</a></li>
...
</ul>
</section>
<section>
...
</section>
</body>
然后就是要给网站加个样式, 没有样式浏览器自己画是很丑的. 具体样式的写法无非是定义一下字体大少, 行高, 颜色, 空间间隔.
回头再看仔细读一下源码是不是基本能理解,其实网站本来就是那么回事, 但是这些标签语法包括样式的写法是有很多细节要记忆的, 还会遇到不同浏览器显示不一致等问题. 右键网页有一个查看源代码的菜单, 点击可以看一下其他人的网站是怎么写的.
发布
最后说一下写好的网站放哪里. 把源码保存成 index.html 文件, 放到一些云空间服务,然后买个域名指过去就好(前提是域名要备一下案).
现在免费的云空间其实很多. 建议放七牛就好.
我的是放到coding上面, 因为之前已经在coding上面免费搭建了一个博客-在Coding上搭建Hexo博客
如果大家有什么好的网站, 希望推荐给我(hi@tianshe.org), 让我丰富一下 世界·新
网友评论
我的coding.net后缀是liuqun
https://coding.net/u/liuqun