如何创建html文件，三种主流方式

如何创建html文件可以通过系统自带记事本、代码编辑器、在线网页编辑器完成，记事本适合临时快速写简单页面，无需额外安装软件，代码编辑器自带语法高亮、自动补全，适合长期写代码调试，在线编辑器不用保存本地文件，适合临时演示小段代码；该操作适合已经了解基础标签语法、只想快速产出网页文件的学习者，完全不认识标签结构、没有基础认知的新手优先先学习标签基础再动手创建，避免文件打开后无法正常渲染。

如何创建html文件，记事本操作流程

你在Windows系统里右键空白区域，选择新建文本文档，双击打开文档，写入基础的HTML骨架代码，写完之后点击左上角文件菜单，选择另存为，文件名末尾手动写上.html，保存类型选择所有文件，编码优先选用UTF-8，防止中文文字出现乱码。Mac系统可以使用文本编辑，先在偏好设置里把格式改成纯文本，再粘贴代码并修改后缀。直接把后缀txt重命名改成html，如果系统隐藏了文件扩展名，修改后依旧是文本文件，浏览器只会展示源码，不会渲染页面，这是比较常见的失误。

扩展名，必须显示。

Windows系统打开文件资源管理器，在顶部查看选项卡勾选文件扩展名，勾选完成之后，文件名称后方就会显示后缀，修改后缀才会生效。保存完成后，双击这个文件，系统会调用默认浏览器打开页面，你修改源码之后，保存文件，再刷新浏览器页面就能看到改动效果。记事本没有语法提示，标签写错不会给出提醒，适合几十行以内的简短测试页面。

如何创建html文件，专业编辑器操作流程

你安装VSCode、SublimeText这类编辑器之后，打开软件，新建空白文件，粘贴或者手写HTML代码，在右下角把文件格式切换成HTML，或者直接按下快捷键保存，文件名后缀设置为html。VSCode内置Emmet快捷语法，输入英文感叹号之后按下Tab键，能够一键生成完整的基础页面骨架，减少手动输入基础结构的工作量，编辑器会用不同颜色区分标签、文本和属性，更容易发现书写错误。这类编辑器还可以安装插件，实现实时预览、代码格式化、校验语法等附加能力，适合长期开发网页。

在线编辑器以CodePen、JSFiddle为代表，打开网页之后，找到HTML编辑分区，直接输入标签代码，页面侧边会实时展示渲染结果，你可以把代码链接分享给其他人查看，文件不会保存在本地电脑，网络断开之后未保存的内容会丢失，不适合用来制作正式上线的网页文件。

标准HTML5的基础骨架包含doctype声明、html、head、body标签，doctype用来告诉浏览器使用HTML5规范解析页面，缺少这个声明，浏览器会切换到怪异模式，页面布局样式出现意料之外的偏差。head区域放置页面标题、字符编码声明，body内部写页面上可见的文字、图片、按钮等内容。

编码声明建议写在head靠前位置，设置为UTF-8，UTF-8可以兼容全球绝大多数文字字符，降低中文、特殊符号乱码的概率，如果你选择其他编码，文件保存编码和代码内声明编码保持一致，页面文字才能正常展示。

文件命名尽量只用英文小写字母、数字和短横线，不要使用中文、空格以及特殊符号，服务器读取文件时，中文文件名容易出现路径识别异常，导致网页加载失败。主页面文件常用index.html，大部分网页服务器会优先读取这个文件作为站点入口。

你完成文件创建之后，如果浏览器打开只看到源码，依次排查两个点，第一确认文件后缀确实是html，不是隐藏的txt，第二检查文档第一行有没有doctype声明，同时确认代码没有缺失成对闭合标签。