初学者写网站（零基础）

学习前，首先准备工具：

1、常用工具下载：google浏览器，调试页面用，360压缩软件，我觉得比较好用。

2、要有html的编辑工具，txt,sumline text ,nodpad++,idea,hbuilder等，推荐下载Hbuilder( 下载地址：HBuilderX-高效极客技巧) ,哦 或者更轻量级的 sublime txt3 ,同样有语法提示。

Sublime Text - Text Editing, Done Right

下载-解压 -打开-Hbuilder.exe。

可以右键发送快捷方式到桌面

 

 双击打开，即可，可以新建目录或者文件。我下面已windows自带的txt演示。

新建txt，右键重名为 1.html

手写<input value='兄弟加油' type='text'> ，保存，双击打开看效果。

这个txt会打开乱码问题，先用nodepad++吧。

传送门 ：链接: https://pan.baidu.com/s/138gF8aF0YSKZUK8mfsAZrg 提取码: khpj 复制这段内容后打开百度网盘手机App，操作更方便哦

或sublime txt 3  地址Sublime Text - Text Editing, Done Right

安装64位版本的，看电脑版本安装。

input 表单标签是html语言的最基础的标签之一，

还有 <select>标签，<div>盒子 标签，就是页面上的方块，<table>，列表标签。

详细看 www3c 或菜鸟教程 HTML 教程 | 菜鸟教程

每一标签 都要试一试。

<input value='兄弟加油' type='text'>

<input value='兄弟加油' type='button'>

<input  type='number'>

<input  type='date'>

<select>
    <option value='A'>男<option>
    <option value='A'>女<option>
<select>

<img src='1.png' style='width=400px;height:400px;'>

<div style='width:400px;height:400px;;background-color:green' ></div>

2、静态网页（html）的服务器，nginx或者appche。额，这会是发布的时候才有用，自己开发的话，跳过这一步，直接写静态页面就可以，一个浏览器就可以了。htmL文件双击用浏览器打开。

ngixn下载地址：nginx: download

appache下载地址 ：Download - The Apache HTTP Server Project

参考（Apache下载、安装及配置（Windows版））

现在以nginx为例介绍网页的编写。

下载比较慢，传送门：链接: https://pan.baidu.com/s/1DpvkThWRaHbp1qJ92hVrbg 提取码: qykm 复制这段内容后打开百度网盘手机App，操作更方便哦

第二步 运行nginx,访问默认文件。双击nginx.exe启动

 

 双击 nginx.exe看下效果

这就是成功了，看些默认html的内容，是否跟他一样。

一样的。

把刚才的1.html 复制到index路径下

重名为 index.html,之前的index随便命名个名字 比如index0.保存后刷新刚才的访问地址：

http://localhost:80http://localhost:80

图片不显示，路径不对，吧图片粘贴到同一路径下，

用   法外狂徒.jpeg 改为 1.png 

行了。 

这里 nginx 修改了修改了文件应该是需要重新加载 或者重启下

cmd进入到 nginx的安装目录

这里

或者shift + 右键鼠标 调出 cmd poweshell 

使用  nginx.exe -s reload  命令，回车就可以。

start nginx.exe       ## 启动服务
nginx.exe -s stop      ## 快速停止服务
nginx.exe -s quit      ## 优雅的 停止服务

nginx.exe -s reload      ## 重新加载 配置文件，这命令可以不用停止nginx
nginx.exe -s reopen      ## 重新打开日志文件
 

到此说下概念：

html标签语言是前端展示页面的一种可以被浏览器 识别解析渲染的语言，此外还有css样式语言，给html页面调整样式的，比如长宽高，距离左右，背景颜色，背景图片，布局的位置，在网页上的位置。还有js语言，全称javascript，一种可以上页面动起来的语言，比如监控动作，点击，数量上移的监视动作，轮播图等等等。一般一个绚丽网站的展示都是html + css + js 。关于这三种语言的版本，css是3.0，js已经出到了es6了，对类，继承，高阶函数的支持，有点向jAVA，php等高级语言的语法学习了。

 

        再深入入门的话，可以去菜鸟   CSS 简介 | 菜鸟教程

或者 w3school HTML 教程  学习每个html标签的用法和css的用法，很简单，我当时学了几天就能做京东那样的页面了，虽然有有不协调的地方，入门很快。html标签就是小朋友摆积木，然后css给积木涂颜色变形，js让积木动起来。