JavaWeb学习之路(5)--编写第一段HTML网页代码

逃离我推掉我的手 2022-09-11 02:15 154阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 什么是HTML
 *  2. 为啥叫HTML
 *  3. 什么是标记
 *  4. HTML的标记
 *  5. 编写第一段HTML网页代码
 *  6. 小结

# 1. 什么是HTML #

在上一章的学习中，我们已经开发了一个空白的网页。但是空白的网页啥作用呢？

毫无作用啊！！

所以我们需要设计一个好看的，有内容的网页，而HTML语言，就是用来编写网页内容的语言。

我们使用HTML语言规范编写的网页，浏览器就能按照相应的规则展示我们设计的内容。

# 2. 为啥叫HTML #

HTML，英文全称`HyperText Markup Language`，翻译为中文：`超文本标记语言`。

OK，语言很好理解，编程语言就是程序员和计算机之间的沟通工具，HTML是程序员设计网页内容的语言。

文本也很好理解，就是文字的意思。

那么`超文本`是啥意思呢？这里的`超`其实是超越的意思，也就是说这门语言超越了文本。因为HTML网页不光能展示文本，还能展示图片、音乐、视频的内容，所以是超越了文本的。

最后是重点：`标记`，这体现了这门语言的特点。HTML是通过`标记`来描述网页的各个部分的。

# 3. 什么是标记 #

举个例子先，我们看一下信封的格式。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]  
我们分析下，左上角是邮编，右上角是邮票，中间依次是地址、姓名、寄信人。

这其实就是一种标记，通过不同的位置标记出来这个区域代表的内容。

所以寄信人发出邮件后，邮政公司就能根据不同位置标记的内容，获得对应的邮编、地址等信息。

# 4. HTML的标记 #

HTML的标记不是通过位置来实现的，它是通过标签。

例如`<title>淘宝网</title>`就是一个网页标题的标签，都是以`<xxx>`开头，且以`</xxx>`结束，这就是标记，标记名称`xxx`代表标记的用途，`<xxx>`和`</xxx>`中间的部分表示标记的内容。

所以对于`<title>淘宝网</title>`来说，这个标签的用途就是`title`，也就是设置网页的标题；这个标签的内容是`淘宝网`，也就是网页的标题设置为淘宝网。

# 5. 编写第一段HTML网页代码 #

我们学习最简单的3个标签：`<html>`、`<head>`、`<title>`，第一个标签表示HTML网页，第一个表示网页的头部，第三个表示网页的标题。

打开记事本，新建一个`hello.html`，然后内容如下。这样的话，标签中间的部分就是网页的内容了。

然后在中间添加`<head>`标签，因为网页的头部属于网页，所以放到`<html>`标签的中间。

最后，我们在网页的头部，设置网页的标题，标题的内容为：`hello`。

<html>
    <head>
    	<title>hello</title>
    </head>
    </html>

此时我们使用浏览器打开这个网页，效果如下，可见我们已经成功设置了标题。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 6. 小结 #

其实HTML语言的规则及其简单，标签几乎都是以`<xxx>`开头，对应的以`</xxx>`结束，而开始和结束中间的部分就是标签对应的内容。

常用的标签也就十几二十个，所以学习HTML就是熟悉这些常用的标签的过程。

不算困难吧。

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/2e3cb14f57134897af6c09feb208e1b3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_15_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220829/f831a3b6ec9542d7b3582488f2432379.png