HTML入门：01认识HTML

Corone

已于 2024-01-19 14:43:19 修改

阅读量832

点赞数 23

分类专栏： # HTML 文章标签： html 前端

于 2024-01-19 14:40:10 首次发布

本文链接：https://blog.csdn.net/ZYB1300704781/article/details/135696711

版权

HTML 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文介绍了HTML的基本概念，包括其作为标记语言的特性、标签的使用方法（如开始标签、结束标签、属性等），并详细解析了HTML文档结构，重点讲解了head标签中的title和meta标签的作用。

摘要由CSDN通过智能技术生成

HTML入门：01认识HTML

1 HTML标签的特点
2 HTML标签剖析
3 HTML文档基本结构
- 3.1 head标签内的常用标签
- - 3.1.1 title标签
  - 3.1.2 meta标签

HTML全称是 HyperText Markup Language，它是用来描述网页的一种语言。实际上，HTML不是一种编程语言，而是一种标记语言(markup language)，它是通过一组经过预定义的一套标记标签(markup tag)来描述文档结构的。

下面是一个简单的HTML代码及页面效果显示。

<!doctype html>
<html>
<head>
    <meta charset='UTF-8'  />
    <title>HTML入门</title>
</head>
<body>
    <font color="red" face="宋体" size="20">HTML入门：01认识HTML</font>
</body>
</html>

页面效果显示

1 HTML标签的特点

HTML标记标签通常也称为HTML标签(HTML tag)，具有以下特点：

标签总是用尖括号包围，多数情况下标签是成对出现的；
```
<html> </html>
```
结束标签总是用反斜杠"/"开头；
标签可以嵌套的，但不能交叉；
```
 
```
多数标签具有参数，这些参数一般能精确地确定这种标签的显示方式，称为该标签的属性。
```
 
```

2 HTML标签剖析

先来剖析一个HTML标签：

开始标签：名称为p，表示一个段落的开始；
结束标签：与开始标签相同，只是在名称后面包含一个斜杠，表示这个段落的结束；
HTML入门：01认识HTML为段落的正文内容；
另外，前面我们提到过，标签是有属性的，属性用来描述元素特征，属性总是以 <属性名> =“<属性值>” 的形式出现，这里的align是属性名，center是属性值，align=“center”表示这个段落的对齐方式为居中对齐。

3 HTML文档基本结构

以下是一个HTML的基本结构：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    
    <body>
        HTML入门：01认识HTML
    </body>
</html>

DOCTYPE是DOCUMENT TYPE的简写，用于声明文档的类型，必须声明在文档的第一行；

实际上，网页有多种浏览模式，DOCTYPE标签就是定义文档基于何种标准，在网页中出现意味着网页的呈现标准基于HTML5；

原则上，每个文档必须包含DOCTYPE，如果省略，默认的标准是HTML4.0；
HTML标签包含了整个完整的页面是一个根元素，在html和/html标签内有两个重要的标签head和body；
- 文档的头部以head标签开始，它是一个容器标签，包含了一些不在浏览器页面中显示的内容，例如：在搜索结果中出现的关键字、页面描述、css样式、字符及声明等等；
- 文档的主体以body标签开始，包含的内容将全部显示在浏览器页面上，例如：文本、图片、音频等等；

请添加图片描述

3.1 head标签内的常用标签

头部容器内的常用标签有title标签、meta标签、style标签、link标签等，下面先讲解title标签和meta标签。

3.1.1 title标签

title标签标记网页标题；
title与/title之间的之间的内容将显示在浏览器窗口的标题栏中；
title标签也用于网页被添加到收藏夹时默认显示的收藏标题。

3.1.2 meta标签

用于提供页面的源信息，这些信息不会直接显示在页面上，但是对于机器是可读的，通常用来定义网页的字符集、刷新频率、关键字等等。

在HTML5中定义网页的字符集，直接指定charset属性，设定该网页的字符集为utf-8编码格式；
```
<meta charset="utf-8"/>
```
设定网页刷新时间：content属性值是30表示页面每隔30秒刷新一次；
```
<meta http-eguiv="Refresh" content="30" />
```
name="keywords"表明搜索引擎可以搜索到该网页，content的值是设定搜索的关键字列表；
```
<meta name="keywords" content="HTML,css,meta" />
```
name="description"是显示页面的描述，以便content的值会在搜索引擎中显示，例如在搜索引擎中搜索CSDN，那么CSDN网站的描述信息与其代码中的content的值一致。
```
<meta name="description" content="......" />
```