如何自己建设一个网站免费网络营销推广软件
000、本人编写前言
前言：本笔记来源于莫振杰的书《HTML、CSS、Javascript从零到一快速上手》，经过修改制成的自学笔记，本书很适合小白学习入门web的相关知识，你也可以先看看我从中学到了什么，再考虑是否去认真学习这本书。
001、HTMl简介
（1）前端技术解说
①从“网页制作”到“前端开发”
- “网页制作”是web1.0时代（2005前）的产品，主要是静态网页，即仅仅供用户浏览图片和文字，而无法与服务器进行数据交互的页面。那个时候的网页开发工具三大件：Dreamweaver、Fireworks、Flash
- “前端开发”是web2.0时代（2005后）的产品，由网页制作演变而来，这个时候网页分成两种（静态网页和动态网页）这个时候的网页开发工具三大件：HTML、CSS、JavaScript
②从“前端开发”到“后端开发”
- 前端开发最为核心的技术就是：HTML、CSS、Javascript。
- “HTML控制网页结构，CSS控制网页外观、Javascript控制网页行为”相当于一个盖房子的流程
i、使用HTML设置网页的字体类型、背景颜色等
ii、使用CSS修饰字体类型、字体大小、背景颜色等
iii、使用Javascript定义鼠标事件，当鼠标挪到某个按钮时，按钮的颜色会改变
- 掌握了前端技术的核心就可以开始开发网站了。但是开发的只是静态网页，只能用于浏览不能和服务器交互，因此学完三大核心后就还要学习后端技术
- 几种常见的后端技术：PHP（比较通用的开源脚本语言）、JSP（类似ASp技术，可以在传统的HTML网页中插入Java程序段（scriptlet）和JSP标记（tag），从而形成JSP文件用JSP开发的网站是跨平台的，既可以在windows下运行也可以在Linux等操作系统上运行）、ASP.NET（前生就是ASP技术）
③学习路线推荐
- HTML----CSS----Javascript----jQuery----HTML5----CSS3----ES6----移动web----Vue.js
- 另外不一定要等到精通一门后才学习下一门（这也是很难的），很多技术都具有交叉关系。我很喜欢折本书里的一句话“只有‘通’十行，才可能做到‘精’一行”
（2）什么是HTML
①HTML全称是“HyperText Markup language”，即超文本标记语言，严格来说HTML不属于一种编程语言，而属于标记语言
②HTML通过多对标签来描述网页，学习HTML就相当于学习这些标签，用来搭建网页的骨架
<p>一段文字</p> <!--<p>和</p>就是一对标签-->
③有时候也会叫“标签”为“元素”，如把“p标签”说成“p元素”
④通过HTML标签来描述一个网页生成一个.html文件，再由浏览器解读（打开）这个文件，就可以将网页的效果呈现给用户
002、开发工具
前期只是写HTML的话，推荐使用VScode即可，安装一些有关web开发的插件吧，或者你有其他能编写HTML的编辑器也可以。
003、基本标签
HTML的基本结构如下：
<!DOCTYPE html> <!--文档声明-->
<html> <!--HTML标签，以下到此标签结束都是HTML文档--><head> <!--页头--></head><body> <!--页身--></body>
</html>
（1）文档声明
“!DOCTYPE html”标签是文档声明，表示这是一个HTML页面，最好是必须携带有这个标签
（2）html标签
告诉浏览器，这个页面是从开始，到结束的。
- 有的时候还会在里面看到有一个属性为xmlns的代码，例如表示当前页面使用的是W3C的XHTML标准，不过这点可以暂时不理会
（3）head标签
是网页的头部，用于定义一些特殊的内容，例如：页面标题、定时刷新、外部文件等，一般来说只有六个标签能放在里面
- title标签，定义网页标题
<!DOCTYPE html>
<html><head><title>网页标题</title></head><body></body>
</html>
- meta标签，定义页面的特殊消息，例如页面关键字、页面描述。这些信息很重要，是给搜索引擎蜘蛛看的，方便我们平时通过关键字等搜索得到这个页面，而mate标签有两个重要的属性（name、http-equiv）
- name可以描述网页的信息，在实际开发中最重要的其实只有keywords和description
- http-equiv可以描述网页所使用的编码和定义网页自动刷新跳转，如果不加上有可能会产生乱码的问题
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--这里定义了字符编码，或者可以写成<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">--><meta http-equiv="refresh" content="5;url=https://www.baidu.com"/><!--10秒后跳转到百度网站--><title>网页标题</title><meta name="keywords" content="网页的关键字:学习HTML的练手网站"/><meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/><meta name="author" content="网页的作者:limou3434"/><meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用，禁止转载"/></head><body></body>
</html>
- style标签，用于定义页面的CSS样式，等学到了CSS后再进行讨论
- link标签，用于引入外部样式文件（CSS文件），等学到了CSS后再进行讨论
- script标签，用于定义页面的Javascript代码，也可以引入外部的JavaScript文件，等学到了Javascript后再进行讨论
- base标签，这个标签我们暂时忽略不讲，只需要知道有这个标签就好了
（4）body标签
是网页的身体，大部分的网页标签都会被写在这里面，比如在里面写入p标签（段落标签，显示一段文字）
<!DOCTYPE html>
<html><head><meta charset="utf-8"><!--这里定义了字符编码，或者可以写成<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">--><meta http-equiv="refresh" content="5;url=https://www.baidu.com"/><!--10秒后跳转到百度网站--><title>网页标题</title><meta name="keywords" content="网页的关键字:学习HTML的练手网站"/><meta name="description" content="网页的描述:本网站是一个新手学习使用的静态网站"/><meta name="author" content="网页的作者:limou3434"/><meta name="copyright" content="网页的版权信息:本站所有代码仅供本人使用，禁止转载"/></head><body><p>网页第一段内容……</p> <!--这里是p标签。可以写长长的一段话，并且会在浏览器显示中自动换行噢！--><p>网页第二段内容……</p> <p>网页第三段内容……</p><p>网页第四段内容……</p><p>网页第五段内容……</p><p>网页第六段内容……</p><p>网页第七段内容……</p></body>
</html>
（5）注释标签用于编写注释
用于编写注释
<!--这是一段注释…-->
/*这也是一段注释*/