javaEE初阶 — 如何用 HTML 编写一个简易代码

文章目录

  • html
    • 1. 建立一个文本文档的方式编写
    • 2. 标签的方式编写
    • 3. 补充:更改后缀的方式
    • 4. 如何使用 VS Code 来编写一个 html 代码
      • 4.1 VS Code 的下载
      • 4.2 VS Code 的使用
    • 5. 代码的特点

html


html 用来描述网页的骨架,这是一个非常有特点的 标签化 的语言。

下面来写一个非常简单的 hello world 。

1. 建立一个文本文档的方式编写


1、首先在桌面建立一个 文本文档

javaEE初阶 — 如何用 HTML 编写一个简易代码_第1张图片


2、将其改名为 “hello world”,后缀改为 .html

javaEE初阶 — 如何用 HTML 编写一个简易代码_第2张图片

改了之后就会变成上述的情况,图标是谷歌浏览器,这是默认打开的浏览器,是可以选择改变的。

如果要更改就右击这个文本文档,选择属性这一栏。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第3张图片

点击属性后,在出现框框中选择更改。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第4张图片

可以在这里选择打开这个文本文档的方式

javaEE初阶 — 如何用 HTML 编写一个简易代码_第5张图片


3、右击这个文本文档选择记事本打开,在记事本中写入 “hello world”,然后 Ctrl + S 保存。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第6张图片


4、最后双击运行后,就可以看到在谷歌浏览器中显示出来了。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第7张图片

html 的执行是浏览器的工作,浏览器会解析 html 的内容,根据里面的代码,、往页面上放东西。

这样建立一个文本文档的方式虽然比较简单,但是它不是很合法。
较为合法的方式是利用标签的方式。

2. 标签的方式编写


打开记事本,在记事本中书写 html 代码。(写完不要忘记保存)

javaEE初阶 — 如何用 HTML 编写一个简易代码_第8张图片

依然可以在网页上看到 hello world 。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第9张图片

这次的执行效果和刚才是一样的,但是代码是更加合法的写法。

3. 补充:更改后缀的方式


1、打开此电脑,点击查看。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第10张图片


2、在出现的页面中,勾选文件扩展名。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第11张图片

勾选后即可对后缀名的修改。

4. 如何使用 VS Code 来编写一个 html 代码

4.1 VS Code 的下载


首先要先下载 VS Code,搜索 VS Code,找到以下界面。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第12张图片

要认准 code.visualstudio.com 这个网址,这才是官网。


在出现的界面中点击 Download
javaEE初阶 — 如何用 HTML 编写一个简易代码_第13张图片


在出现的界面中,选择适合自己的。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第14张图片

4.2 VS Code 的使用


1、点击打开文件夹

javaEE初阶 — 如何用 HTML 编写一个简易代码_第15张图片


2、选择一个目录。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第16张图片

3、在右边这一栏右键,创建一个代码文件

javaEE初阶 — 如何用 HTML 编写一个简易代码_第17张图片

】


4、编写代码

javaEE初阶 — 如何用 HTML 编写一个简易代码_第18张图片


代码写完的时候要注意 Ctrl + S 保存,如果有如下图上的点就说明没有保存。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第19张图片


如果是如下的叉叉,则表示已经保存。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第20张图片


当然也是可以设置 自动保存

第一步、打开设置

javaEE初阶 — 如何用 HTML 编写一个简易代码_第21张图片


第二步、搜索 save,更改 off 选项为

javaEE初阶 — 如何用 HTML 编写一个简易代码_第22张图片

javaEE初阶 — 如何用 HTML 编写一个简易代码_第23张图片

选择如图的选项即可完成自动保存设置。


也可以打击左上角的 文件,勾选以下的自动保存选项。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第24张图片


5、运行代码

右击文件,选择图下方式。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第25张图片


双击图中的 .html 后缀的文件。



运行成功

javaEE初阶 — 如何用 HTML 编写一个简易代码_第26张图片

5. 代码的特点


1、 html 代码是通过标签来组织的。

比如,< html > < /html> 是用尖括号组织的,成对出现的这个就是 “标签”(tag),也可以叫做 “元素”(element)。


2、一个标签通常是成对出现的。(少数标签是单标签)

< html> 是 开始标签,< /html> 是 结束标签,这两个标签之间的是标签的内容。


3、标签是可以嵌套的

一个标签的内容可以是其他一个或多个标签,此时这些标签就组成了一个 “树形结构”。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第27张图片


4、可以在开始标签中给标签赋予属性(Attribute),属性就相当于是键值对,可以有一个或者多个。

javaEE初阶 — 如何用 HTML 编写一个简易代码_第28张图片

你可能感兴趣的:(java,EE,从入门到进阶,java-ee,前端,html)