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

迷南。 2023-10-04 22:43 10阅读 0赞

#### 文章目录 ####

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

## html ##

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

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

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

1、首先在桌面建立一个 **文本文档**。  
  
![4107d3ceab314217b7d56f456143c02a.png_pic_center][]

2、将其改名为 “hello world”，后缀改为 **.html**。  
  
![40c75d886d7f4b9e953f43793d2465ae.png_pic_center][]  
  
改了之后就会变成上述的情况，图标是谷歌浏览器，这是默认打开的浏览器，是可以选择改变的。  
  
如果要更改就右击这个文本文档，选择属性这一栏。  
  
![be876e28be6849949cf25e901f86dca6.png_pic_center][]  
  
点击属性后，在出现框框中选择更改。  
  
![67e8375fdf9a4225816c34c93fb0a468.png_pic_center][]  
  
可以在这里选择打开这个文本文档的方式  
  
![30bbfdd920e947b49f7af92d81bdfa06.png_pic_center][]

3、右击这个文本文档选择记事本打开，在记事本中写入 “hello world”，然后 **Ctrl + S** 保存。  
  
![5096672a1376456782fd5e9db158f299.png_pic_center][]

4、最后双击运行后，就可以看到在谷歌浏览器中显示出来了。  
  
![dd0c7f3c7e654443ab9087179ce8de6e.png_pic_center][]  
  
html 的执行是浏览器的工作，浏览器会解析 html 的内容，根据里面的代码，、往页面上放东西。  
  
这样建立一个文本文档的方式虽然比较简单，但是它不是很合法。  
较为合法的方式是利用标签的方式。

### 2. 标签的方式编写 ###

打开记事本，在记事本中书写 html 代码。（写完不要忘记保存）  
  
![2ac071a9a8d642d6837bcc5ea7398552.png_pic_center][]  
  
依然可以在网页上看到 hello world 。  
  
![015f9fd5c8c54d5b92819b7c4b3a05e8.png_pic_center][]  
  
这次的执行效果和刚才是一样的，但是代码是更加合法的写法。

### 3. 补充：更改后缀的方式 ###

1、打开此电脑，点击查看。  
  
![5fcba0f0ce71454a8cbbe98dc966393d.png_pic_center][]

2、在出现的页面中，勾选文件扩展名。  
  
![7ad37ac0ce3546f7bf9a2fe4d999d5ec.png_pic_center][]  
  
勾选后即可对后缀名的修改。

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

#### 4.1 VS Code 的下载 ####

首先要先下载 **VS Code**，搜索 VS Code，找到以下界面。  
  
![669f455b91384383ad593b8f42cd27d6.png_pic_center][]  
  
要认准 **code.visualstudio.com** 这个网址，这才是官网。

在出现的界面中点击 **Download** 。  
![753fb29a604a4772a7f492d0cc82295f.png_pic_center][]

在出现的界面中，选择适合自己的。  
  
![b36260e4af8b4ee9b4db30390edac59c.png_pic_center][]

#### 4.2 VS Code 的使用 ####

1、**点击打开文件夹**  
  
![43a2eabb31fd4187b7494cf738d3d709.png_pic_center][]

2、**选择一个目录。**  
  
![c5e4340d211f47d5832480d57378d614.png_pic_center][]  
  
3、**在右边这一栏右键，创建一个代码文件**  
  
![cf4f3643db6c4ea1b5ce22146492d29b.png_pic_center][]  
  
![】][ce616f26c1f0414aaae70d7c852a005e.png_pic_center]

4、**编写代码**  
  
![25d842a100ef4f7bb89256f4e4e7de03.png_pic_center][]

代码写完的时候要注意 **Ctrl + S 保存**，如果有如下图上的点就说明没有保存。  
  
![743c99c7056247978a3be7579dc8349f.png_pic_center][]

如果是如下的叉叉，则表示已经保存。  
  
![05ef1a5115a946e6ad809e02e85bf5a7.png_pic_center][]

当然也是可以设置 **自动保存**  
  
第一步、打开设置  
  
![732c1cb8af9b4b04bedb470cb4514d36.png_pic_center][]

第二步、搜索 save，更改 off 选项为  
  
![b708ffd5a5a3429185e694c1197c028b.png_pic_center][]  
  
![d279af69fc5c4403b2c3b057ac5e74a8.png_pic_center][]  
  
选择如图的选项即可完成自动保存设置。

也可以打击左上角的 文件，勾选以下的自动保存选项。  
  
![0433d18ae44f4ec59ae22a5f4cb3a1f4.png_pic_center][]

5、**运行代码**  
  
右击文件，选择图下方式。  
  
![76ce881f015f4ceaa5bb9d931361aa7c.png_pic_center][]

双击图中的 **.html** 后缀的文件。  
  
![c9b2d59d8af04285ba60f63ebb66c6de.png_pic_center][]  
  
运行成功  
  
![570581b4658d4fbea3e9eb9787b8e48f.png_pic_center][]

### 5. 代码的特点 ###

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

比如，**< html > < /html>** 是用尖括号组织的，成对出现的这个就是 “标签”（tag），也可以叫做 “元素”（element）。  
  
  
2、一个标签通常是成对出现的。（少数标签是单标签）

< html> 是 **开始标签**，< /html> 是 **结束标签**，这两个标签之间的是标签的内容。  
  
  
3、标签是可以嵌套的

一个标签的内容可以是其他一个或多个标签，此时这些标签就组成了一个 “树形结构”。  
  
![5eb3bf3a4c4247838c6af0611dae72bb.png_pic_center][]  
  
  
4、可以在开始标签中给标签赋予属性（Attribute），属性就相当于是键值对，可以有一个或者多个。

![c169e4aaf67543028ff682f49796a8e5.png_pic_center_pic_center][]

[4107d3ceab314217b7d56f456143c02a.png_pic_center]: https://img-blog.csdnimg.cn/4107d3ceab314217b7d56f456143c02a.png#pic_center
[40c75d886d7f4b9e953f43793d2465ae.png_pic_center]: https://img-blog.csdnimg.cn/40c75d886d7f4b9e953f43793d2465ae.png#pic_center
[be876e28be6849949cf25e901f86dca6.png_pic_center]: https://img-blog.csdnimg.cn/be876e28be6849949cf25e901f86dca6.png#pic_center
[67e8375fdf9a4225816c34c93fb0a468.png_pic_center]: https://img-blog.csdnimg.cn/67e8375fdf9a4225816c34c93fb0a468.png#pic_center
[30bbfdd920e947b49f7af92d81bdfa06.png_pic_center]: https://img-blog.csdnimg.cn/30bbfdd920e947b49f7af92d81bdfa06.png#pic_center
[5096672a1376456782fd5e9db158f299.png_pic_center]: https://img-blog.csdnimg.cn/5096672a1376456782fd5e9db158f299.png#pic_center
[dd0c7f3c7e654443ab9087179ce8de6e.png_pic_center]: https://img-blog.csdnimg.cn/dd0c7f3c7e654443ab9087179ce8de6e.png#pic_center
[2ac071a9a8d642d6837bcc5ea7398552.png_pic_center]: https://img-blog.csdnimg.cn/2ac071a9a8d642d6837bcc5ea7398552.png#pic_center
[015f9fd5c8c54d5b92819b7c4b3a05e8.png_pic_center]: https://img-blog.csdnimg.cn/015f9fd5c8c54d5b92819b7c4b3a05e8.png#pic_center
[5fcba0f0ce71454a8cbbe98dc966393d.png_pic_center]: https://img-blog.csdnimg.cn/5fcba0f0ce71454a8cbbe98dc966393d.png#pic_center
[7ad37ac0ce3546f7bf9a2fe4d999d5ec.png_pic_center]: https://img-blog.csdnimg.cn/7ad37ac0ce3546f7bf9a2fe4d999d5ec.png#pic_center
[669f455b91384383ad593b8f42cd27d6.png_pic_center]: https://img-blog.csdnimg.cn/669f455b91384383ad593b8f42cd27d6.png#pic_center
[753fb29a604a4772a7f492d0cc82295f.png_pic_center]: https://img-blog.csdnimg.cn/753fb29a604a4772a7f492d0cc82295f.png#pic_center
[b36260e4af8b4ee9b4db30390edac59c.png_pic_center]: https://img-blog.csdnimg.cn/b36260e4af8b4ee9b4db30390edac59c.png#pic_center
[43a2eabb31fd4187b7494cf738d3d709.png_pic_center]: https://img-blog.csdnimg.cn/43a2eabb31fd4187b7494cf738d3d709.png#pic_center
[c5e4340d211f47d5832480d57378d614.png_pic_center]: https://img-blog.csdnimg.cn/c5e4340d211f47d5832480d57378d614.png#pic_center
[cf4f3643db6c4ea1b5ce22146492d29b.png_pic_center]: https://img-blog.csdnimg.cn/cf4f3643db6c4ea1b5ce22146492d29b.png#pic_center
[ce616f26c1f0414aaae70d7c852a005e.png_pic_center]: https://img-blog.csdnimg.cn/ce616f26c1f0414aaae70d7c852a005e.png#pic_center
[25d842a100ef4f7bb89256f4e4e7de03.png_pic_center]: https://img-blog.csdnimg.cn/25d842a100ef4f7bb89256f4e4e7de03.png#pic_center
[743c99c7056247978a3be7579dc8349f.png_pic_center]: https://img-blog.csdnimg.cn/743c99c7056247978a3be7579dc8349f.png#pic_center
[05ef1a5115a946e6ad809e02e85bf5a7.png_pic_center]: https://img-blog.csdnimg.cn/05ef1a5115a946e6ad809e02e85bf5a7.png#pic_center
[732c1cb8af9b4b04bedb470cb4514d36.png_pic_center]: https://img-blog.csdnimg.cn/732c1cb8af9b4b04bedb470cb4514d36.png#pic_center
[b708ffd5a5a3429185e694c1197c028b.png_pic_center]: https://img-blog.csdnimg.cn/b708ffd5a5a3429185e694c1197c028b.png#pic_center
[d279af69fc5c4403b2c3b057ac5e74a8.png_pic_center]: https://img-blog.csdnimg.cn/d279af69fc5c4403b2c3b057ac5e74a8.png#pic_center
[0433d18ae44f4ec59ae22a5f4cb3a1f4.png_pic_center]: https://img-blog.csdnimg.cn/0433d18ae44f4ec59ae22a5f4cb3a1f4.png#pic_center
[76ce881f015f4ceaa5bb9d931361aa7c.png_pic_center]: https://img-blog.csdnimg.cn/76ce881f015f4ceaa5bb9d931361aa7c.png#pic_center
[c9b2d59d8af04285ba60f63ebb66c6de.png_pic_center]: https://img-blog.csdnimg.cn/c9b2d59d8af04285ba60f63ebb66c6de.png#pic_center
[570581b4658d4fbea3e9eb9787b8e48f.png_pic_center]: https://img-blog.csdnimg.cn/570581b4658d4fbea3e9eb9787b8e48f.png#pic_center
[5eb3bf3a4c4247838c6af0611dae72bb.png_pic_center]: https://img-blog.csdnimg.cn/5eb3bf3a4c4247838c6af0611dae72bb.png#pic_center
[c169e4aaf67543028ff682f49796a8e5.png_pic_center_pic_center]: https://img-blog.csdnimg.cn/c169e4aaf67543028ff682f49796a8e5.png#pic_center#pic_center