html用什么软件写代码

写html代码的软件：1、SublimeText；2、Dreamweaver；3、WebStorm；4、HBuilder；5、Notepad；6、VSCode；7、Vim；8、AptanaStudio；9、IntelliJIDEA。

本教程 *** 作环境：windows7系统、HTML5版、DellG3电脑。

1、SublimeText

SublimeText是一个跨平台的代码编辑器，同时支持Windows、Linux、MacOSX等 *** 作系统，也是HTML和散文先进的文本编辑器。SublimeText具有漂亮的用户界面和强大的功能，主要功能包括:拼写检查，书签，完整的PythonAPI，Goto功能，即时项目切换，多选择，多窗口等等。

2、Dreamweaver

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，拥有可视化编辑界面，支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，初学HTML5的人可以无需编写任何代码就能快速创建Web页面。

3、WebStorm

WebStorm是一款Java开发工具，目前已经被广大中国JS开发者誉为”Web前端开发神器”、”最强大的HTML5编辑器”、”最智能的JavaIDE”等。WebStorm具有的优势是：智能的代码补全、代码格式化、html提示、联想查询、代码重构、代码检查和快速修复、代码调试、代码结构浏览、代码折叠、包裹或者去掉外围代码。

4、HBuilder

HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写的。速度快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。Hbuilder是由有我国的前端开发人员编写的一款前端开发IDE，所以在使用上比较符合我们中国人的开发习惯，用HBuilder写HTML代码还是很方便的。

5、Notepad

Notepad++是旨在替代Windows默认的notepad而生，比notepad的功能强大很多很多。notepad++支持插件，添加对应不同的插件，以支持不同的功能。里面除了一些常见的插件之外，还有一些好玩的插件，比如将文字读出来的speech插件。Notepad++属于轻量级的文本编辑类软件，比其他一些专业的文本编辑类工具，启动更快，占用资源更少，但是从功能使用等方面来说，不亚于那些专业工具。

6、visualstudiocode(简称VSCode)

VSCode是一款免费，开源，跨平台的编辑器，生态好，插件丰富，界面美观，其代码补全，高亮等体验也不错。

支持多种编程语言，可以直接在编辑器上进行代码的调试，它还内置了git，终端。

7、Vim

Vim初学的时候还是会比较困难些，全程使用键盘进行 *** 作，需要记住很多的按键组合和命令，但是学会之后你会发现它的好处，尤其是常用Linux系统的，学会Vim真的能让工作变得高效很多。

Vim本身启动速度快，可配置性非常强，有着各种各样的插件，具有高度的定制化，目前算是用户最喜欢的编辑器之一了，编写小脚本特别合适。

8、AptanaStudio

AptanaStudio是一个基于Eclipse的集成式Web开发环境，其最广为人知的是它非常强悍的JavaScript编辑器和调试器。AptanaStudio可以支持多种AJAX和JavaScript工具箱，包括JavaScript编辑和调试。

9、IntelliJIDEA

IDEA全称IntelliJIDEA，是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具之一，它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。

html网页计算器代码编写过程如下：

1.首先我们要做好一个计算器的界面，主要用到html与css的知识，下面是代码

<table id="calculater" onClick="calculater()">

<tr>

<td id="display" colspan="5">0</td>

</tr>

<tr>

<td class="numberkey" >1</td>

<td class="numberkey" >2</td>

<td class="numberkey" >3</td>

<td class="numberkey" >+</td>

<td class="numberkey"  id="deletesign">c</td>

</tr>

<tr>

<td class="numberkey" >4</td>

<td class="numberkey" >5</td>

<td class="numberkey" >6</td>

<td class="numberkey" >-</td>

<td rowspan="3" id="equality" onclick="resultscalcaulte()">=</td>

</tr>

<tr>

<td class="numberkey" >7</td>

<td class="numberkey" >8</td>

<td class="numberkey" >7</td>

<td class="numberkey" >*</td>

</tr>

<tr >

<td class="numberkey" >+/-</td>

<td class="numberkey" >0</td>

<td class="numberkey" >.</td>

<td class="numberkey" >/</td>         

</tr>

上面设置一个简单的table表格，主要内容是计算器的数字键盘和符号，还有就是class名和ID名，函数名，主要是用作css样式设计和javascript程序设计，后面会用到，就先贴出来了

colspan="5" 是合并五列的意思，表示这个单元格要占五列

rowspan="3"是合并三行的意思，表示这个单元格要占三行

效果如下，这样一个简单的架构就完成了

2.接下来就是css的设计，下面是代码

*{

padding:0

margin:1px

}

#calculater{

margin: auto

margin-top: 30px

border: solid 6px #2371D3

border-spacing: 0px

}

#display{

width: 100%

height: 30px

border-bottom: solid 4px #2371D3

font-weight: bold

color: #193D83

font-family: 黑体

padding-left: 2px

}

.numberkey{

cursor: pointer

width: 40px

height: 30px

border: solid 1px #FFFFFF

background: #2371D3

color: #ffffff

text-align: center

font-weight: bold

font-family: 黑体

}

#equality{

cursor: pointer

width: 40px

height: 100%

background: #2371D3

border: solid 1px #FFFFFF

color: #ffffff

text-align: center

font-weight: bold

font-family: 黑体

}

.numberkey:hover{

background: #EA6F30

}

#equality:hover{

background: #EA6F30

}

以上是css代码，比较简单

border-spacing: 0px

这里代码的意义是：table中单元格与单元格，表格边缘都有默认距离，这里border-spacing: 0px能使其默认距离为零，没有这句会比较难设计好看的样式。

cursor: pointer

这里代码的意义是：使鼠标放在上面时变成一个手的标志

效果如下

3.接下来是javascript的代码，按照思路来一点点写

首先我们要设计，当鼠标点击某个单元格时我们能获取这个单元格上的内容，即数字或符号

所以我们在table标签里加上onClick="calculater()"，添加一个点击事件

然后用event.srcElement.innerText获取单元格上的内容，event是事件的意思，在这里这个事件当然是点击了，srcElement就是事件的元素，在这里是被点击的单元格，innerText是获取这个单元格的内容。

这里我们就可以写出这个函数第一行代码，获取被点击的单元格的内容

function calculater(){

results=event.srcElement.innerText

}

results就是单元格的内容

4.当然获取了什么要显示在第一个单元格那里，这里我们还是用innerText，来输出这个点击的值

display.innerText=results

这里代码的意义是：display是第一格单元格的id,就是在第一行显示你点击了什么

calculater()的代码就变成这样

function calculater(){

results=event.srcElement.innerText

display.innerText=results

}

这样我们就能输出我们点击的单元格内容

5.但这样我们只能输出一次单击的内容，为了把内容串起来，我们把代码改为

var results=""

function calculater(){

results+=event.srcElement.innerText

display.innerText=results

}

设置results为全局变量，event.srcElement.innerText用+=累加进results，

这样我们就能输入并显示一条算式

6.我们在“=”单元格标签里加上onClick="resultscalcaulte()"，计算这个结果

function resultscalcaulte(){

calresults=eval(results)

display.innerText=calresults

}

eval()能运行括号里的javascript语句的字符串，并返回其值，如果results等于7+8，那eval就会计算7+8，并返回56，然后后面一条代码把56显示出来

7.加入上面的运算后，还是无法显示结果，原因是点击“=”单元格会先触发resultscalcaulte()函数，再触发calculater()函数，所以我们在resultscalcaulte()得到的结果就被calculater()的结果覆盖了，我们需要再在calculater()里加上

if (event.srcElement.innerText=="=") {

return

}

使点击“=”单元格触发的calculater()函数得不到任何结果

最后得到最简单的计算器运算代码

var results=""

var calresults=""

function calculater(){

if (event.srcElement.innerText=="=") {

return

}

results+=event.srcElement.innerText

display.innerText=results

}

function resultscalcaulte(){

calresults=eval(results)

display.innerText=calresults

}

8.下面是计算7*8的结果

简单的htm的编写过程如下：

先新建一个文本文件，可以自己命名，如下图，我命名为测试。

编译文本，以最简单的代码格式为例<html>     <head>         <title>         </title>     </head>     <body>     </body></html>

在<body></body>写入你要写的内容,下面以hello world为例。

修改文件后缀名，将txt改为html。

测试是否成功，双击  测试.html，如果出现了下面的内容，恭喜你，你已经学会了最简单的html编写。

---