带你领略什么是HTML！

心已赠人 2022-12-25 14:54 165阅读 0赞

# 一、带你领略HTML的信息！ #

## 1、HTML的概述： ##

**html**全称为HyperText Markup Language，译为**超文本标记语言**，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。

普通文本：只包含文字。

富文本：图片，文字简单的样式。

*  超文本：可以连接到其他文档的文本（音频，视频，图片等）。
 *  标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成 **标记内容的语义**。

**作用**：HTML是负责描述文档**语义**的语言。

**注意**：HTML语言不是一个编程语言(有编译过程)，而是一个**标记语言**(**没有编译过程**)，HTML页面直接由浏览器解析执行。

HTML是负责描述文档语义的语言

html中，除了**语义**，其他什么都没有。

html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。 所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。

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

## 2、HTML的基本框架 ##

**1、<!DOCTYPE html>：**文档声明类型  声明这是一个html5网页文件。就像是每个人都有一个身份证，身份证上说明了你的名字。身份证就像是<!DOCTYPE >,html就像是名字。来声明这是网页。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70][]

### 2.<html>标签 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1][]

标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。就像是人的整个身体，包含头部和身体。

**02.1.head标签**

网页的头部，里面的内容是给浏览器看的，主要是一些网页的配置。

**02.2.body标签**

网页的主体，里面的内容都是给用户看的。body标签就像是人的身体，人的身体里有各种器官，网页主体里也有各种标签为网页添加内容，像以下一些标签。

## 2、HTML的一些标签介绍及用法 ##

### 2.1、头标签 ###

头标签都放在头部分之间。包括：`<title>`、`<base>`、`<meta>`、`<link>`

*  `<title>`：指定整个网页的标题，在浏览器最上方显示。
 *  `<base>`：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。
 *  `<meta>`：提供有关页面的基本信息
 *  `<body>`：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
 *  `<link>`：定义文档与外部资源的关系。

### 2.2常用标签 ###

> HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。

### `src`属性：图片的相对路径和绝对路径 ###

这里涉及到图片的一个属性：

在写**图片的路径**时，有两种写法：相对路径、绝对路径

1、**写法一：相对路径**

相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和父路径。

举例1：

<img src="2.jpg">
    <img src=".\2.jpg">
    
    <img src="..\2.jpg">

img 是image“图片”的简写，src 是英语source“资源”的缩写。

相对路径不会出现这种情况：

aaa/../bbb/1.jpg

`../`要么不写，要么就写在开头。

举例2：

上方代码的意思是说，当前页面有一个并列的文件夹`images`，在文件夹`images`中存放了一张图片`1.jpg`

2、写法二：**绝对路径**

绝对路径包括以下两种：

（1）以盘符开始的绝对路径。举例：

（2）网络路径。举例：

大家打开上面的img中的链接，扫一扫，可能有惊喜哦。

### 相对路径和绝对路径的总结 ###

相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

问题：我的网页在C盘，图片却在D盘，能不能插入呢？

答案： 用相对路径不能，用绝对路径也不能。

注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。

下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：

总结一下：

### img标签的其他属性 ###

*  *div：用来存放内容*
 *  *p:段落*
 *  **img：** 代表的就是一张图片。是单边标记。是自封闭标签，也称为单标签。从当前网页引入外部图片。
 *    能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
 *  不能往网页中插入的图片格式是：psd、ai
 *  `src`属性：指图片的路径。
 *  我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。
 *  相对路径，就是../ image/ 这种路径。从自己出发，找到别人；
 *  绝对路径，就是http://开头的路径。
 *  绝对不允许使用file://开头的东西，这个是完全错误的！
 *  `width`：宽度
 *  `height`：高度
 *  `Align`：指图片的水平对齐方式，属性值可以是：left、center、right
 *  `title`：**提示性文本**。公有属性。也就是鼠标悬停时出现的文本。
 *  `border`：给图片加边框（描边），单位是像素，边框的颜色是黑色
 *  `Hspace`：指图片左右的边距
 *  `Vspace`：指图片上下的边距
 *  `Alt`：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持）
 *

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70]: /images/20221120/f6a8c674b3ff4a828181c2e38102d4e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201202191802943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3NTQzMzQ1OTk=,size_16,color_FFFFFF,t_70