HTML基础（一）：了解HTML&基础结构元素

Dear 丶 2023-07-22 10:26 19阅读 0赞

交掉了第一份作业，往后学咯，把学习大纲过了一遍，乖乖，其实就是记住各类标签是做什么的，该怎么用。而网课教的基本就是，不，不是基本，全是如何使用Dreamweaver的快捷功能去直接插入编辑，个人不喜欢这种学法，这不算是学会了HTML，充其量学会了如何使用Dreamweaver，学着玩的就罢了，但是是这个专业里的，不能这样糊弄自己。要自己找各类知识，自己学。  
一篇显然会很长，于是乎从这一篇文章开始逐步如何纯靠源码编写网页。  
*由于不去使用DW的快捷键，索性也不用DW，全部转用VS Code。个人喜好，随意选择编辑器，只是VS Code会自动补齐标签，比较方便*

--------------------

### 文章目录 ###

*  什么是HTML？
 *   *  标签、元素和属性
     *  常见的HTML结构元素
     *   *  DOCTYPE（文档类型）的含义与选择
         *  基本结构元素

# 什么是HTML？ #

HTML的全称是Hyper Text Markup Language，中文名为**超文本标记语言**，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。  
想看一下它真正的样子？  
在任意一个网站上鼠标右键你会发现一个检查或者查看源代码，点击你就是看到满屏幕的代码，看不懂吧，不要慌，学HTML就是学这个，学会了以后不仅能看懂，还能自己设计编写它们。  
仔细观察，你是否发现了许多"<… …>"?这是什么呢？这就是HTML的组成部件标签。

## 标签、元素和属性 ##

什么是标签？

HTML标签由一对尖括号“<”和“>”，以及标签名组成。标签分为“起始标签”和“结束标签”两种。

--------------------

那元素呢？  
HTML元素是组成HTML文档的最基本的部件，按照有无内容来划分，可以分为“有内容的元素”和“空元素”。  
为什么要在这里提及元素呢，这是额外的补充，因为我在刚接触标签后，立即又Get到了新名词，元素&属性，书上咋说的：

> 1.元素：HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。  
> 2. 标签： 标签就是`<head>、<body>、<table>`等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如`<table></talbe>、<form></form>`。当然还有少部分不是成对出现的，如`<br>、<hr>`等。 标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。  
> 3. 属性： 为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。

怎么理解这三者关系呢？以元素为基，属性是用来描述修饰元素的“形容词”，标签则是元素的具体组成。  
建一座高楼，得从一砖一瓦进行。而对HTML来说，元素就是“砖”和“瓦”，标签则是构成“砖”和“瓦”的“泥土”。因此前期学习HTML就是学习各种元素（标签）的意义与用途。  
这是第一篇，我们来了解HTML的基础结构元素。

## 常见的HTML结构元素 ##

### DOCTYPE（文档类型）的含义与选择 ###

这是一个声明标签，是每一个html文档都**不可缺少**的第一个头标签，用于先浏览器表明这是一个html文档，告诉浏览器要把当前文档转成网页形式表现出来。  
具体的使用形式为：

<!DOCTYPE html>

***记住了，第一行一定是这一个声明标签，必不可少的标签！***

### 基本结构元素 ###

HTML网页中基本结构元素有3个，分别是html元素、head元素和body元素。这些元素一定出现在每个网页上，且仅出现一次。  
其中，html元素包括了head元素和body元素，是一个html的具体内容；  
head元素和body元素同级，如同它的名字，一个是头一个是身体，这里不讲里面具体有什么，后面再具体介绍别的元素，注意，这三种元素都是成对的标签，不要让它们少了头或缺了脚。  
下面是使用举例：

<html>
    <head>
    这里是网页文档的头部… …
    …
    </head>
    <body>
    这里是网页文档的主体 … …
    …
    </body>
    </html>

这是在VS Code中的实际表现：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70]

--------------------

这一篇就到这里，日更，嘿嘿。  
同为小白，若有缺漏，敬请指出。  
转载请注明出处。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NzAwMjE1_size_16_color_FFFFFF_t_70]: /images/20230528/849ab6c3837c47ab9b325428a34b90db.png