整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
有一个好的编辑器我们可以方便地的开发项目，编写代码，配置和管理我们的项目。所以我们开始编写html代码之前需要搭建开发环境。
基于html项目的开发和代码编写现在网上有很多编辑器，也有免费的，也有收费的编辑器。基于在Windows系统环境下开发和编写html代码最简单的编辑器就是Windows自带的记事本，我们可以使用记事本编辑html代码。
使用记事本编写html的步骤是首先新建一个文本文档，按照html的语法规则编写相关的代码和保存文件，然后把文件的后缀名改为.html，使用电脑上的浏览器打开就可以查看我们代码的运行结果。
虽然记事本也能编写html代码，但是效率不高也不方便，所以我们使用专业的编辑器来开发项目，编写代码和管理项目。
常用html代码编写的免费软件有HBuilderX，vs code，Sublime Text 等等。
HBuilderX官网下载地址：
https://www.dcloud.io/hbuilderx.htmlvs code的官网下载地址：
https://code.visualstudio.com/Sublime Text官网下载地址：
http://www.sublimetext.com/我们以后的教程都使用HBuilderX，所以下面为了同学们的学习方便，对HBuilderX的下载和安装做详细的教程。
一，下载
首先访问HBuilderX的官网网址：
https://www.dcloud.io/hbuilderx.html打开上面的HBuilderX下载网址后点击页面上download，在弹出的对话框里选择适合自己电脑的HBuilderX版本下载。
在Windows10环境下下载后的文件是一个压缩的.zip文件。
二，安装
鼠标右击下载下来的压缩文件进行解压。
解压完成后是一个名为HBuilderX的文件夹。
解压完成后鼠标双击HBuilderX文件夹：
双击运行名为HBuilderX.exe的应用程序文件即可启动HBuilderX编辑器：
因为HBuilderX是一个绿色软件所以没有桌面快捷方式和开始菜单快速启动程序，我们可以右击HBuilderX.exe文件创建桌面快捷方式。
小百科：
绿色软件指一类小型软件，多数为免费软件，最大特点是软件无需安装便可使用，可存放于闪存中，移除后也不会将任何记录留在本机计算机上。通俗点讲绿色软件就是指不用安装，下载直接可以使用的软件。绿色软件不会在注册表中留下注册表键值，所以相对一般的软件来说，绿色软件对系统的影响几乎没有，所以是很好的一种软件类型。
三，新建项目
HBuilderX编辑器初次启动时的默认界面是下图所示：
按照下图所示可以创建一个新的名为demo1空白项目：
名为demo1的空白项目创建成功后的界面如下图所示：
接下来在刚我们新建的demo1项目下创建名为helloworld的html文件
鼠标右击创建的demo1项目选择新建在选择.html文件：
在弹出的对话框里填入html文件的名称：
编写一段代码：
运行：
在浏览器上观察效果：
好了，到这里html的开发环境搭建和HBuilderX的安装教程结束了。
下面再给大家教一下怎样修改HBuilderX的主题风格，HBuilderX自身提供了修改软件主题的功能，使用者可以自身需求和喜好修改HBuilderX的风格。在喜欢自己喜欢的环境下做开发也是令人羡慕的一件事。
按照以下步骤可以修改HBuilderX的主题，默认主题是绿柔，我们可以改成雅黑，雅蓝或者自定义主题：
雅黑主题：
雅蓝主题：
好了本节全部内容全部结束了，希望我准备的内容对你有所帮助
你的支持是我的最大动力，若觉得我的教程还可以或对你有帮助为我点赞加关注！谢谢！
有试过自己写一个网页吗？听上去难，其实操作起来很简单，不夸张地说——有手就行。来试试看吧。
1）一个网站由若干个网页构成，这些网页是用超级链接有逻辑地联系起来的。
2）网站由网址来识别和存取。
3）网页需要上传到网络空间中，才能供浏览者访问网站中的内容。
即，一个网站需要有域名（网址）、网页、网络空间三部分。
1）语言
我们可以使用HTML来编写网页，HTML文件就是增加了标记的普通文本文件。
可以简单地使用记事本来编写一个网页，只需将文件后缀名改为html，然后用浏览器打开。
现在编写网页的语言其实由三部分构成：HTML,CSS,JavaScript。
1）HTML：早期编写网站的语言。
2）CSS：负责网站内容的表现形式。是在HTML原来的功能中分离出来的，这种分离可以使维护站点外观更容易，也让文档代码更简练，网页加载快。
3）JavaScript：负责动态部分。 使网页更加生动活泼，增加和用户的互动。
2）软件
前面已经讲到，可以简单地使用记事本来编辑网页。
这里在提出两款编辑软件：EditPlus，Dreamweaver。它们的能力是递增的。
EditPlus:
EditPlus相比记事本的优点是，可以带有html语言的语法高亮，而且可以在这个编辑页面中直接预览网页（点击左上角部分的小地球图标）。
前面已经提到，html语言文件就是增加了标记的普通文本。
那么首先，我们就要了解标记的作用：
一些简单的标记，可以让文本在网页中以另一种形式呈现出来。
简单起见，接下来就使用记事本来编写我们的网页。
首先，新建一个文本文件（txt），给它起个随便的名字。
然后用记事本打开它，输入以上内容，记得保存。
重命名文件，将文件后缀名改为html。
（<br>的意思是换行）
接着选择打开方式为某个浏览器（系统默认的浏览器就可以），就可以显示出我们刚刚编写的网页了。
是不是感觉朴素地有点过头了？没关系，第一次嘛。
<html>
<body>
<br>
<br>
<br>
这是我们的第一个网页。
<br>
<br>
<br>
</body>
</html>
这里我们用到了三个基本的标签：<html>、<body>和<br>。
其中<html>标志着我们html文件的开始，<body>则表示正文内容的开始。而</html>和</body>分别代表着对应部分的结束。<body>和</body>之间的一行文本，则是我们要展现的内容。而<br>则是换行，我们经常用这个标签来调整网页的上下距离。
增加一些其它的标签，让我们的网页更加生动一点。
<!doctype html>
<html>
<title>第一个网页</title>
<body
background = "宇宙.jpeg"
text = "#ccff66"
leftmargin = "300">
<h1>这是我们的第一个网页！</h1>
<p>可以简单留作一个纪念。</p>
<p>但我们的征途，是星辰大海！</p>
</body>
</html>标签 | 功能 |
<!doctype html> | 标识文件的语言标准，这里指的是html5 |
<title> | 网页的标题，即浏览器中页面的名字 |
<h1> | 一级标题 |
<p> | 一个段落的开始 |
在<body>标记中，还可以控制一些全局的呈现效果：
标识符 | 控制内容 |
background | 背景图片（需要在html文件相同目录下，加入相应的图片文件） |
text | 文本内容的颜色 |
leftmargin | 两边间距大小 |
下面是新的网页：
位小伙伴好，黑客技术离不开代码，做为一个渗透测试工程师，也一定要有一些代码基础。网络安全行业，现在人才缺口大，再加上就业形势又很严峻，介于这些，我们想培养一批优秀的网络安全人才，将对网络安全行业、黑客技术，以及渗透测试技术感兴趣的小白培养成精英。
跟随我们，不管你有多白，都可以逐步进入网络安全行业，并最终在这个行业找到高薪职业。
然后呢，我要说一句，关于“黑客”可能并不是大多数人所了解的那样。关于这些，可以参考：什么是黑客？什么是渗透测试？2分钟看完这800多字你就懂了
那么，我们就先从代码基础——HTML的基本语方开始。
首先给大家描述三个概念：语言、程序、代码之前的关系。
首先我们就要搞清楚什么是语言？可能说HTML语言不太好理解，那么我们想一想日常生活当中比较常见的我们中国人彼此之间都会交流，是不是叫做汉语呢？所以说汉语就是一门语言。
那么这时候大家脑子里面就可以构思一下啊什么样的东西大致就是语言了。它应该是一种沟通交流的一种方法的一个集合，包括我们如何发音，如何写字，这些字如何拼在一起，能够产生具体的意义，有一定的含义，这些所有所有的集合在一起，形成了一套规则，然后大家都去遵循这套规则，就能够彼此交流，那么这就叫做语言。
我们再举一个例子，比如说英国人或者美国人，他们也有自己的语言，叫做英语，那么我在这里就是换了另一种语言，
了解了语言之后，我们就再来看一看，什么是代码，那代码跟我们日常生活中的这种能够联系起来的又是什么东西呢？
我们还是拿汉语来做比喻哈，我们说汉语就是一种交流沟通的一种规则，它是一门语言。在大家小的时候肯定就会去学这门语言。这门学科在小学的时候就叫语文，对吧。那么我们上语文课的时候，就要学一些最基础的有关语言的东西，比如说汉语拼音生字词，当时要记很多的这种生字生词，那么他是不是可以理解成是我们汉语的一种最基本的那种组成结构？
那么英语呢？我们在学习英语的时候也会去记一些东西啊，就比如英文字母，紧接着就是背各种各样的单词，是不是当我们单词量有了一定的积累之后，我们对这个语言呢就掌握得更深刻了。
那么汉语要背生字词，英语呢要背单词，这些最基本的组成结构。那么在程序语言里面，代码就可以理解成是生字词或者是单词。
最后，我们再来看看什么是程序。它是由很多很多一行一行的代码组成在一起，能够完成一个综合性的或者一个比较大的一个目标的这样的一个代码的集合。
那么我们对照一下自然的这种语言，比如说汉语英语呢它是什么样？好多的文字放在一起，是不是句子？或者说再多一点儿就是一篇文章。一篇文章甚至再大一点儿可能是一本书，
那么汉语能写文章，用英语英文也能写文章，这个文章可大可小，可能几千字能大一点儿的一本书，也可以理解成是文章，那么用生字词组成的这种集合就成了文章了。然后我们再谈程序，它是什么呢？对照一下大家可能就理解了，它就是一个由代码组成的文章。
那么回过头来我们看我们要学的HTML语言，它也是一门语言，只不过呀它跟我们理解的汉语和英语有一定的区别。
汉语的主流是中国人之间交流的时候沟通的时候用的语言。那么英语呢应用的比较广泛，是一些英语国家之间彼此交流沟通的时候用的语言。那么HTML语言它也是一种语言，只不过它不是人和人之间去交流的语言，那么它到底是做什么用的呢？我们来看一下HTML的概念。
HTML中文名称叫做超文本标记语言，用HTML编写的超文本文档称为HTML文档。它能够独立于各种操作系统平台，使用HTML语言将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件翻译成可以识别的信息，即现在所见到的网页。
那么从中我们能看到什么呢？首先我们知道它的中文名称了。HTML叫做超文本标记语言。
那么再往下我们看他提到了。
在这里浏览器是吧？提到了浏览器，那么这时候我们就知道了HTML语言啊它是一种与浏览器之间进行交流的这么一种语言。就是我们去写一些代码，那么写这些代码的目的是什么呢？目的就是为了和浏览器去交流，只要我们写的这个东西浏览器能看得懂，他就会根据我们写的代码呈现出最终的网页。这就是HTML语言的一个基本概念。
（1）HTML中的各种元素都是通过标记（标签）来表示。
（2）HTML当中的标签分为单标签和双标签。
（3）单标签格式为<名称/>，双标签格式为<名称></名称>。
（4）HTML对大小写不敏感。
然后，我们可以对照一下HTML的基本结构
（1）<html></html>
（2）<body></body>
（3）<head></head>
（4）<title></title>
首先，我们打开一个记事本。
单击窗口图片，在列表中找到记事本
然后在记事本中输入<html></html>,这表示告诉浏览器，这是一个标准的HTML网页。
在记事本中输入<html></html>
那么为什么是两个呢？前面1个，后面1个，这就有点类似于我们标点符号里边的括号，前面有一个开始，左半边括号后面有一个结束。右半边括号在这里也是前面的HTML表示网页从这儿开始，那么后边这个-html表示网页呢至此结束。
那我们网页这才刚开始就结束了呢，别着急，我们来看我在这里敲了几次回车把它分开了。那么表示什么意思呀？表示中间呀是有很多内容的，就是在网页开始到网页结束的中间是会有其他的东西的。
分开html开始和结束标签
我们接着往下看，第二个标签呢叫做<body></body>,里面的单词呢表示的是身体，那么它呢表示的就是网页的主体，这个网页的主体也属于基本结构，那么它在哪儿呢？注意啊网页的主体也属于网页，那么它呀要放在<html></html>的中间。
将<body></body>标签插入到<body></body>中
下面，我们开始将第3个标签<head></head>写入记事本，它代表头部。他表示头是吧？我们可以想象一下，这个脑袋注意它和身体之间到底应该是个什么样的关系呢？就我们想象有一个人站在那儿，脑袋应该是在上面，身子应该是在下边哈。所以注意我们这个<head>标签呀要放在<body></body>标签的上方。注意！它们之间没有包含关系！是一上一下的。
在<body></body>标签的上方插入<head></head>
最后一个叫做<title></title>这个单词的意思呢叫做标题。那么这个标题你应该放在哪？告诉大家，它属于网页的头部，在头部的里边。
好了，整理一下格式
插入<title></title>标签
我们来看4个基本结构的组成标签，我们都已经写到了这个文档里面了。
大家需要注意的是，我写的这种结构啊这个包含的关系非常重要。最外边是html表示网页开始，到网页结束，中间呢有头、身子，还有标题，那么头和身子是一上一下的关系，那么标题呢属于头部里边儿。要记住这个格式！
那么到现在为止呀我们这个网页的基本结构就算是真正写完了，我们把它保存一下。现在这个文档里边啊我们写的是网页的程序，虽然很简单，但它也是一个完整的网页了。
那么既然是一个网页，那我们如何能打开它看这个网页呢？注意这个HTML写出来的这个程序啊需要放在HTML文件里边，
那么我们怎么做呢？直接把这个记事本改后缀，他现在是个.txt文档，我们把这个文件的后面的txt扩展名改成html。
将.txt格式改成.html格式
双击“网页.html”，就会打开一个网页。
用代码创建的第1个初始网页
果然是用浏览器打开的一个网页，但是里边呢还没有东西是吧？空白的。
那么我们就来看一下，重新用记事本的方式把它打开。
我现在要想在里边简单的写点文字，哎我看看我这个网页是否能够正常显示。
那么在哪儿能够写文字呢？跟大家说一下，
在我们这个基本结构里啊有两个地方是可以写内容的，一个就是<body></body>主体，另外一个呢就是<title></title>标题，这两个地方中是可以写文字内容的。
右键单击这个html文件，选择打开方式→打开其他应用，然后找到记事本，用记事本打开。
用记事本打开html文件
然后在<title></title>中间写上“我的第一个网页”，<body></body>中间写上“这里是主体文字”
标签中间插入文字，让网页中有内容
好了，写完之后我们再保存。关闭这个窗口，重新打开看一下效果。那么大家看这会儿在网页里面显示出来了。首先呢在网页主体里边显示出了“这里是主体文字”，并且在页面的上方的标签呢显示的是“我的一个网页”。
用代码创建的第1个网页
那么我们今天的讲解你看懂了么？
带你学代码、学编程、学语言、学网络安全、学黑客技术、学渗透技术，逐步成为网络高手，拿到年薪30W+的offer，在网络江湖，从小刀客变成大侠。如果感兴趣，请关注我，私信我，可获得更多学习资料。
*请认真填写需求信息，我们会在24小时内与您取得联系。
