整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
019年的到来，我们看到了互联网覆盖了各行各业，无论是老板、高管、自由职业、创业ing、网店店主、B2B/B2C、网红卖家等等，大都需要用到互联网做事情。很多人都拥有自己的网站，但是这些网站却大致相同，毫无特点，并且关键的数据信息和网页访问都受制于人。所以，拥有一个自己的网站，对于一些网店店家、网红卖家、知名博主、创业者、企业家等人来说，是十分有必要的。
用相关工具做好网页
把网页复制到别人可以访问到的地方
让别人用一个网址可以访问你的网页
五分钟演示如下：
本地双击打开文件，即可在浏览器看到
别人可以访问的地方，我们称之为“网站空间”，也就是我们的“服务器”。
把文件传输到服务器上，我们需要一个传输工具“FlashFTP”，购买好网站空间“服务器”之后，我们能看到服务器的详细信息，如：IP地址，端口号，账号，密码等等，选择默认配置好网站服务的“服务器”，把我们编写的文件使用“FlashFTP”上传到网站空间中的“www”文件夹中，等待上传成功即可。
这个时候，我们可以用“IP地址+网址的路径”进行访问编写的网页，如下：
我们需要购买一个域名，比如我们访问百度网站时输入的网址 就是域名——“www.****.com”
购买好域名之后，我们在域名服务中找到解析，添加一条解析记录，填写主机记录——www，类型——A，记录值——[您购买的服务器IP地址]，保存等待几秒钟即可。
此时，我们就可以使用域名访问网页了
此时，三步做完，简单的网页就做好啦。
网站制作工具的三个基本组成：HTML、CSS、JavaScript
HTML（HyperText Markup Language）：超文本标记语言，创建浏览器可以识别的文本内容
CSS（CascadingStyleSheets）：层叠样式表，用于网页的样式和布局
JavaScript：世界上最流行的脚本语言，为向 HTML 页面增加交互性
HTML是一个十分钟就能入门的语言，新手不需要掌握，现在的开发工具普遍可以自动生成，会打字就会写网页。从HTML开始做网页就像从造螺丝开始做一部汽车，后来慢慢有了更简便快捷的方法。
学习资源网上有很多，找到HTML、CSS、JavaScript即可开始入门学习，每一个知识点都可以进行实战练习。
在任何浏览器上，点击右键，可看到如下：
可以看到具体代码，不过目前大多数是开发工具生成，完全手写出来的很少
推荐使用开发工具：DreamWeaver，Sublime text，WebStorm，VS Code等等
新手工具（DW）使用介绍：
目前DW已经被开发人员淘汰，但是作为入门学习使用，仍然是一大利器。
使用到的工具：FlashFTP
ftp是指文件传输协议，文件传输协议ftp(file transfer protocol)是internet传统的服务之一。ftp使用户能在两个联网的计算机之间传输文件，它是internet传递文件最主要的方法。使用匿名(anonymous)ftp，用户可以免费获取internet丰富的资源。除此之外，ftp还提供登录、目录查询、文件操作及其他会话控制功能。flashfxp是一款功能强大的fxp/ftp软件，集各种优秀ftp工具软件的优点于一身，同时还具备无需安装，解压即可使用的绿色软件标准。
需要拥有的网站空间：服务器
购买渠道有某里云，某讯云等，购买最便宜的1核1G服务器即可够用，购买时选择已经配置好网站环境的服务器，先获得服务器的详细信息，如IP地址，端口，账号密码(可在购买时的网站里设置或重新设置)，通过FlashFTP登陆，弹出的鉴权窗口选择允许，找到配置到的web服务器地址，这里找到www文件夹即可，把文件从桌面拖到www文件夹中，上传成功即可使用IP地址+文件名访问。
我们熟知的网址其实是一种域名，比如某宝的网址www.***.com，这里我们也去购买一个域名，跟服务器购买渠道相同即可，域名几十块上下一年，即买即用。
域名介绍：域名使用DNS解析协议，DNS解析协议将域名地址解析到IP地址，在全世界能上网的地方，只要输入网址，即可看到我们的网页。
域名购买成功后，进入域名解析，添加一条解析记录，如上述过程中解说
等待几分钟即可生效，此时再访问输入网址即可
介绍一下大家访问网站的过程
想即刻体验网站开发效果的，可以下载自动生成模版的工具，即拖即看，各种模块一应俱全，适合敏捷开发，需要一定基础和时间去做微调。
什么学习HTML？
理解HTML代码是制作网页的基本技能。在互联网高度发达的今天，网页制作技术开始变的和修图、处理视频一样重要。
第一，学会制作网页就可以把自己想要展示的信息让其他人使用浏览器观看，无论是文字、照片还是视频都可以通过浏览器观看，甚至是分享自己制作的小游戏。
第二，理解网页运行的基本原理后可以更好的浏览他人的网页，寻找有用信息，更合理的使用第三方工具，简单高效的制作自己的网页。
HTML学习难度与重要性
HTML代码本身非常容易理解，使用也非常简单，但是单纯使用HTML代码写出的网页效果和我们平时看到的网页相差甚远。要想做出一个漂亮的页面，我们还需要CSS和JavaScript的帮助。
HTML、CSS、JavaScript这些不同的代码都有什么作用呢？简单来说，HTML代码可以为网页提供基本内容，比如文字、图片、音乐、视频等。CSS代码可以为页面安排布局，比如标题的位置、字体、颜色、大小等，笼统的说就是为HTML代码添加的内容增加样式信息，例如修改位置、尺寸、颜色等属性。JavaScript代码可以为页面提供交互（互动）功能，例如通过按钮控制页面内容的隐藏、出现，或者为多张图片添加轮播功能等。
对比起来，HTML的学习难度最低，但作用是最重要的，因为一切页面的基础是内容，没有内容，样式与交互都不存在。
认识HTML基本结构
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
以上七行代码是一个网页文件的HTML代码的基本结构。
大家观察一下可以发现一个规律，每一行的内容都是写在“<>”里面的。原因说来话长，先记住就行。每个写在“<>”里面的内容叫做“标签”。以后“标签”这个词会经常出现。
第一行<!DOCTYPE HTML>标签指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令（这句话可以暂时不必理解）。重要的是这句傲娇的代码只能存在在HTML代码的第一行！
第二行<html>标签与第七行的</html>标签是一对，“<html>”叫做开始标签，“</html>”叫做结束标签。他们之间的区别在于结束标签比开始标签多一个“/”。这是HTML代码的一个重要规律，以后我将要学到的大部分标签都是这样的，可能浏览器有些强迫症吧，如果没有结束标签它会很不舒服，有可能会消极怠工而产生麻烦（不能正常显示）。不过遗憾的是<!DOCTYPE HTML>太傲娇，至今没有另一半。<html> 与 </html> 标签限定了文档的开始点和结束点。
第三行与第四行组成一对，叫做“head”标签。顾名思义，这个“头”标签里的内容统领全局，比如控制布局与样式的CSS代码文件和添加互动功能的JavaScript代码文件在这里添加或导入；搜索页面用的关键词信息在这里添加；页面信息的编码方式也是由此指定；浏览器窗口的标题也在这里显示。
第五行与第六行组成一对，叫做“body”标签。用来显示所有的页面内容信息。
画个图来表示一下这四个标签的层级关系（就是谁包含谁的意思，或者谁在谁的势力范围内出现）：
边学边练------写一个最简单的页面
正所谓万丈高楼平地起，下面我们就动手做我们的第一个网页文件。
工具：电脑，安装一个浏览器（IE 火狐 谷歌浏览器都可以），确定“记事本”工具可用。
有了以上工具我们就可以写了。
Step1 新建一个.txt文件。
操作如下：
（1）选择合适的磁盘，比如D盘或F盘新建一个文件夹，命名为“网页”。点击进入。
（2）在空白处点击鼠标右键新建一个文本文件，命名为“第一个页面”。这时我们就有了一个“第一个页面.txt”文件了。
如果你的电脑不显示“.txt”这样的文件后缀，可以在屏幕左上方寻找“查看”菜单，如图2
图 2
点击后，出现如下菜单如图3，点击“选项”。
图 3
点击“查看”，去掉“隐藏已知文件类型的扩展名”选项前的“对号”，如图4所示。这时就能显示或修改文件后缀了。
图 4
Step2 添加内容
（1）双击打开“第一个页面.txt”文件，把HTML基本结构共七行代码输入进去。
（2）保存，关闭文件，在“第一个页面.txt”文件上点击鼠标右键，选择“重命名”，将“.txt”修改为“.html”。这时，系统会提示，如图1，大胆点“是”。
图 1
这时我们的文件就变成了html网页文件了。
我们双击这个文件发现浏览器内一片空白，这就好比我们在桌子上摆了个碟子，里面并没有放美食。浏览器中的一片白就是空碟子的颜色，而HTML基本结构就是这个碟子。
下面我们往碟子里加点东西。
Step3 添加内容
（1）在“第一个页面.html”文件上点击鼠标右键，选择“打开方式”，选择“记事本”，如果没有“记事本”选项，请点击“选择其他应用”，点击选择最下面的“更多应用”，选择“记事本”。下一次选择“打开方式”时，“记事本”就会出现了。
（2）在<head></head>标签之间添加“<title>学习写第一个网页</title>”。在<body></body>之间添加“<h1>第一个网页</h1>”；“<p>随着学的内容越来越多，网页就会越来越漂亮了！</p>”完成如图5
图 5
（3）保存，关闭，双击打开！效果如图6
图6
今天的边学边做就到这里，下一次会详细解释<head>标签、<body>标签中常出现的子标签以及它们各自的作用。
第二篇《边学边做网页篇——<head>标签里装点啥？》http://mp.toutiao.com/preview_article/?pgc_id=6738988870622249479
*请认真填写需求信息，我们会在24小时内与您取得联系。
