我的第一个网页之----使用HTML编辑器编写HTML文档

news2025/2/22 6:03:54

HTML篇_三、使用HTML编辑器编写HTML文档

为了满足使用HTML语言进行学习、开发需求我们还需要选择使用一款开发工具来使用。我们可以选择更专业的开发工具来使用,在这里简单介绍几款本人使用过的开发工具,选择你的趁手武器。

一、简述几款HTML编辑器

1.1Windows基带的Notepad

这款软件相比大家都十分了解了,他是Windows基带的一款编辑器。简单、轻便、无需下载安装等特点,但是试用这一款软件进行HTML的开发,效率则相对较低。在此不做赘述。

1.2Notepad++

请添加图片描述

Notepad++ 是在微软视窗环境之下的一个免费的代码编辑器。它使用较少的 CPU 功率,降低电脑系统能源消耗,但轻巧且执行效率高,使得 Notepad++ 可完美地取代微软视窗的记事本。作为一个开源工具,它还支持用户制作的插件。

1.3Visual Studio Code

请添加图片描述

Visual Studio Code 是一个免费的开源文本编辑器,其中包含一个扩展库,用于自定义你的体验。它包含对JavaScript,TypeScript和Node.js的内置支持。该平台的各种扩展设计为在单独的进程中运行,以防止减慢编辑器的速度。这一款工具的插件功能绝对称得上是一大亮点,它不仅可以作为HTML的开发工具,还可以作为Java语言的开发工具。它甚至可以玩小霸王,曾是我们学生时代备受追捧的一款软件。

1.4Sublime Text

请添加图片描述

Sublime Text不仅是一个文本编辑器,同时更是一款先进的代码编辑器。不仅拥有漂亮的界面,更有强大的功能。更是一款跨平台的编辑器,支持Windows、Linux、Mac OS X等操作系统。支持多种编程的语法高亮,且拥有优秀的代码完成功能。虽然这一款软件是收费的,但是这款软件可以无限期试用。

1.5WebStorm

请添加图片描述

WebStorm 是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源,继承了IntelliJ IDEA强大的JS部分的功能。它的功能非常强大,有智能代码辅助的功能,支持语言和框架等等特性。好处良多。

###1.6 HBuilder X

请添加图片描述

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。它基于Eclipse,所以顺其自然的兼容了Eclipse的插件。正是我在使用的一款软件。很喜欢它的设计风格,是我的一位老师推荐给我的,沿用至今。功能性自然很不错,说的上是有颜值,有才华。

好了,关于HTML的编辑器就说到这里吧,上述的这些编辑器仅仅只是我接触使用过的几款,当然市面上还有很多实用的开发工具,也
许会有你更钟意的选择,慢慢去发现吧。

二、使用编辑器编写HTML文档

2.1使用Windows基带的Notepad编写HTML文件

详细操作步骤:

  1. 在Windows系统的桌面或者自定义的文件夹中(个人建议单独创建一个文件夹,将编写的HTML文件单独存放,便于管理)单击鼠标右键,选择新建,选择文本文档
  2. 接下来编辑该文本文档,输入代码,例如:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文档标题</title>
	</head>
	<body>
		<h1>学习HTML的第一个标题</h1>
		<p>学习HTML的第一个段落</p>
	</body>
</html>
  1. 编辑完成后一定要保存,然后关闭这个文件。
  2. 将文本文档重新命名,修改文档后缀为“.html”,例如:“index.html”
  3. 鼠标双击打开,就可以在浏览器内看到完成的效果了。

运行效果:

请添加图片描述


希望有所帮助!
关注我,持续更新。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/51761.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Proxmox VE 彻底删除本地存储

作者&#xff1a;田逸&#xff08;formyz&#xff09; 问题描述 从Proxmox VE web管理后台添加本地存储&#xff0c;如LVM、LVM-Thin&#xff08;精简逻辑卷&#xff09;等&#xff0c;有时候可能需要删除这些存储&#xff0c;但其Web管理后台却没有提供菜单或者按钮。要删除这…

手把手教你写Linux线程池

手把手教你写Linux线程池 如果需要线程池源码&#xff0c;关注Linux兵工厂&#xff0c;并由大量Linux资料赠送。 线程池 顾名思义&#xff0c;存储线程的池子。线程池是线程的一种使用模式。在平常业务开发中常规的逻辑是遇到任务然后创建线程去执行。但是线程的频繁创建就类…

NR小区搜索(五)S准则

微信同步更新欢迎关注同名modem协议笔记 UE根据支持的频段进行小区搜索过程&#xff0c;检测PSS/SSS->PBCH&#xff0c;然后就可以读到MIB&#xff0c;根据MIB中的pdcch-ConfigSIB1&#xff0c;可以找到CORESET0 和SearchSpace0的信息&#xff0c;进而可以确定一块时频域资…

软件测试 -- 进阶 6 软件缺陷

上工治未病之病&#xff0c;中工治欲病之病&#xff0c;下工治已病之病。-- 孙思邈 .《千金方药方》 释译&#xff1a;未病之病&#xff1a;未病&#xff0c;未发之病&#xff08;及早干预&#xff0c;防止病发&#xff09;&#xff1b;欲病之病&#xff1a;小病&#xff0…

MIR7创建预制发票BAPI

1、事务代码MIR7 前台输入采购订单等相关字段进行开票 2、代码实现 调用BAPI&#xff1a;BAPI_INCOMINGINVOICE_PARK创建发票 "--------------------斌将军-------------------- DATA:ls_headerdata TYPE bapi_incinv_create_header,lv_invoicedocnumber LIKE ba…

桌面画图工具:Pointofix(fertig)

Pointofix桌面画图工具 Pointofix - der virtuelle Textmarker fr Ihren Bildschirm - Freeware 一、软件下载 官方网址https://www.pointofix.de/ 二、进入下载页面&#xff0c;需要下载安装文件和语言包两个文件 三、网站还提供了一个语言设置小程序&#xff0c;但我没用 …

JavaSE笔记——抽象类和接口

文章目录前言一、抽象类和方法二、接口创建1.默认方法2.多继承3.接口中的静态方法三、抽象类和接口四、完全解耦五、使用继承扩展接口六、接口适配七、接口字段八、接口和工厂方法模式总结前言 接口和抽象类提供了一种将接口与实现分离的更加结构化的方法。 一、抽象类和方法 …

传奇外网架设教程

外网架设前需准备&#xff1a; 准备工具:传奇版本源码&#xff0c;服务器&#xff0c;备案域名&#xff0c;DBC数据库&#xff0c;周年客户端 服务器和备案域名需要自备或者租用&#xff0c;这东西自己造不出来&#xff01;&#xff01;&#xff01; 其他的工具&#xff0c;…

Flink被阿里收购4年,最开心的却是Spark背后的Databricks

最近&#xff0c;Flink Forward Asia&#xff08;FFA&#xff09;峰会成功举行&#xff0c;有关Flink的讨论&#xff0c;又开始在国内热闹起来。 2022 年&#xff0c;Apache Flink 社区保持快速发展&#xff1a;GitHub Star 数突破 2 万&#xff0c;单月下载量突破 1400 万次&…

学习总结 | 下一代人工智能

文章目录 一、前言二、底层逻辑三、六大维度今后发展的方向是第三代人工智能,最主要的措施就是把第一代人工智能知识驱动的方法和第二代人工智能数据驱动的方法结合起来,发展安全、可信、可靠和可扩展的人工智能技术,从而推动人工智能的创新应用。 一、前言 中国科学院院士…

iTOP3A5000开发板多路PCIE、SATA、USB3.0等

iTOP3A5000开发板多路PCIE、SATA、USB3.0等 桥片&#xff1a;支持PCIE3.0、USB3.0、SATA3.0、显示接口2路、HDMI和1路VGA、可直接连显示器&#xff0c;另外内置一个网络PHY&#xff0c;片内集成了自研GPU、搭配32位DDR4显存接口&#xff0c;支持16GB显存容量。 底板引出多路PCI…

第3关:添加数据、删除数据、删除表

为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.如何使用HBase shell命令添加数据、2.如何使用命令删除表。 首先启动HBASE 启动HBASEshell 添加数据 我们来给上一关创建的test表的列data添加一些数据&#xff1a; hbase(main):002:0> create test,data Created t…

在 Python 中构建一体化音频分析工具包,在一个地方分析您的音频文件

语言构成了人类之间每次对话的基础。因此,自然语言处理(或简称 NLP)领域无疑在帮助人类日常生活方面具有巨大潜力。 简而言之,NLP 领域包含一组旨在理解人类语言数据并完成下游任务的技术。 NLP 技术涵盖许多领域,例如问答 (QA)、命名实体识别 (NER)、文本摘要、自然语言…

0111 栈与队列Day1

剑指offer09.用两个栈实现队列 用两个栈实现一个队列。队列的声明如下&#xff0c;请实现它的两个函数 appendTail 和 deleteHead &#xff0c;分别完成在队列尾部插入整数和在队列头部删除整数的功能。(若队列中没有元素&#xff0c;deleteHead 操作返回 -1 ) 示例 1&#x…

音视频开发入门小知识

什么是视频 视频就是由一系列图片构成的&#xff0c;当画面快速切换时&#xff0c;人眼看起来就感觉是连贯的动作。 视频帧 帧&#xff0c;表示一张画面&#xff0c;就是一帧。一个视频就是由许许多多帧组成的。 帧率 帧率&#xff0c;表示单位时间内帧的数量&#xff0c;…

KingbaseES数据库 kdb_schedule 自动定时任务

KingbaseES数据库 kdb_schedule 自动定时任务 文章目录KingbaseES数据库 kdb_schedule 自动定时任务前言一 安装插件 kdb_schedule1. 添加kdb_schedule2. 修改kdb_schedule所需参数&#xff1a;3. 重启数据库4. 加载kdb_schedule插件二 dbms_scheduler2.1 创建program创建progr…

(四) 共享模型之管程【Monitor 概念】

一、Java 对象头&#xff08;P75&#xff09; 二、原理之 Monitor(锁) Monitor 被翻译为监视器或管程。 每个 Java 对象都可以关联一个 Monitor 对象&#xff0c;如果使用 synchronized 给对象上锁&#xff08;重量级&#xff09;之后&#xff0c;该对象头的 Mark Word 中就被设…

Cookie Session JSP

这里写目录标题1 Cookie1.1 会话介绍1.2 Cookie 介绍1.3 Cookie 属性1.4 Cookie 方法1.4.1 Cookie 添加和获取1.5 Cookie 的使用1.6 Cookie 的细节2 Session2.1 HttpSession 介绍2.2 HttpSession 常用方法2.3 HttpSession 获取2.4 HttpSession 的使用2.5 HttpSession 的细节3 J…

高压功率放大器在超声驻波声场的听声器中的应用

实验名称&#xff1a;高压功率放大器在超声驻波声场的听声器声压测量中的应用 研究方向&#xff1a;3D打印 测试目的&#xff1a;利用听声器对声场的测量是一种基于对声压的采集&#xff0c;利用CPB分析及FFT分析处理&#xff0c;得到涉入点声压的方法。介于听声器采集信号为时…

单字段纵向分栏

【问题】 Hi, I’m trying to display BIRT report Data (only one field) first vertically till the page ends and then it should continue in the next column of the same page. For example as A E I B F J C G D HBy using list element I’m able to get the data …