【不完全指南】从零开始的搭建网站P1
【不完全指南】从零开始的建站P1
网页是一个共享文档
这是一个共享文档，我们可以在上面编辑文字，加入图片等，并分享给其他人，每个人都能看到相同的内容。同时每个人都可以在这个文档上进行编辑评论，即进行互动。相似的，所谓网页其本质就是一个共享文档，我们作为发布者可以在上面进行编辑内容，而作为访问者则可以查看和互动。
网站是网页的集合
一个网站可以是由多个网页组成，也可以是由一个网页单独组成。在网站中，我们可以为每个网页设置不同的功能，显示不同的内容。那么共享文档可以是word，excel，ppt等文件，也有专门的office，wps等处理工具。对应的，网站也有属于自身的工具链。
首先我们来做一个小实验： 第一步，新建一个文本文档，并输入”hello，world！”。之后将其另存为“index.html”。此时你就会发现生成的.html的文件是浏览器的图标，我们双击打开它，就可以在浏览器中看到“hello，world！”。接着我们回到刚刚记事本，改成
<h1>hello world</h1>另存并替换原来的“index.html”，双击打开，此时发现与原来相比字体变大了不少。我们继续回到记事本，改成
<h1 style="color:66ccff;">hello world</h1>再次保存为html文件，并打开“index.html”，此时发现字体颜色也变成了蓝色。继续替换如下代码
<html><head> <title>hello world</title></head><body> <h1 style="color:66ccff;">hello world</h1> <button id="click-me">点击我</button></body><script> document.getElementById("click-me").addEventListener("click", function() { alert("你点击了按钮"); });</script></html>保存后，再次打开“index.html”,点击按钮，会弹出一个提示框。好了，我们通过三次修改已经速通了网页的前端三件套。这里我们引入一个概念-前端。前端在计算机中可以简单理解是软件的主题皮肤，使用软件时能直接看到的内容，比如操作界面，交互元素，各种按钮对话框等。当然也存在后端，后端是实现软件功能的部分，比如我们点击按钮，前端就会告诉后端用户点击哪个按钮，然后进行相应的处理。就像我们把账号密码输入进前端的界面之中，前端会将信息发送到正不正确后端，后端的代码逻辑就是去数据库中查找用户存不存在，密码整。
username=luotianyi;password=66ccff;
if(username=="luotianyi" && password=="66ccff"){ alert("登录成功");}else{ alert("登录失败");}所谓网页前端三件套就是指html、css、js。其中html负责网页的结构，css负责网页的样式，js负责网页的交互。可以简单理解成用代码去制作设计ppt或是ps。
<html><head> <title>hello world</title> //css负责网页的样式 <style> h1 { color: 66ccff; } </style></head><body> //html通过提供各种标签如h1、p、button等来描述网页的结构 <h1>hello world</h1> <p>这是一个段落</p> <button id="click-me">点击我</button></body>//js是一种脚本语言，可以在网页中执行代码<script> document.getElementById("click-me").addEventListener("click", function() { alert("你点击了按钮"); });</script></html>而此时浏览器的作用就与wps，office类似，不过浏览器只能打开网页，对于开发者而言，要编写网站还需要使用更加专业的编辑器/编译器，这里暂时不展开叙述。
本篇通过与共享文档的对比，引入网页网站的概念，下期将介绍网络基本知识。
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！