【HTML基础篇001】超详细认识HTML标签种类

365在线体育官方网站入口 📅 2026-02-04 09:47:35 ✍️ admin 👁️ 5742
【HTML基础篇001】超详细认识HTML标签种类

🏆一、HTML是什么又不是什么？

👤1.1、HTML是什么

超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

网页文件的扩展名：.html或.htm

👤1.2、HTML不是什么

HTML是一种标记语言（markup language），它不是一种编程语言。HTML使用标签来描述网页。

🏆二、HTML文档基本结构

css样式优先级

对HTML基本格式的说明

声明为HTML5文档。

、是文档的开始标记和结束的标记。是HTML页面的根元素，在它们之间是文档的头部（head）和主体（body）不会显示在网页上。

、定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。

、定义了网页标题，在浏览器标题栏显示。

、之间的文本是可见的网页主体内容。

注意：对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器会设置 GBK 为默认编码，则你需要设置为 。

👤2.1、head内部常用标签

head内常用标签

标签

意义

定义网页标题

定义内部样式表

定义JS代码或引入外部JS文件

引入外部样式表文件

定义网页原信息

My First HTML

👥2.1.1、对Meta标签的再补充

元素可提供有关页面的元信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

标签位于文档的头部，不包含任何内容。

提供的信息是用户不可见的。

meta标签的组成：meta标签共有两个属性，它们分别是http-equiv属性和name 属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

1.http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

2.name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

🏆三、Body内部常用的标签

👤3.1、基本标签

加粗

斜体

下划线

删除

段落标签

标题1

标题2

标题3

标题4

标题5

标题6


👤3.2、img标签

图片未加载成功时的提示

img标签中除了自带的属性，我们还可以给它添加一些自定义的属性

如以下的代码：

👤3.3、a标签

👥3.3.1、a标签的介绍

a标签也就是我们常见的超链接标签，所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

默认情况下，链接将以以下形式出现在浏览器中：

一个未访问过的链接显示为蓝色字体并带有下划线。

访问过的链接显示为紫色并带有下划线。

点击链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

👥3.3.2、a标签的语法格式

点我

href属性指定目标网页地址。该地址可以有几种类型：

绝对URL - 指向另一个站点（比如 href="http://www.jd.com）

相对URL - 指当前站点中确切的路径（href="index.htm"）

锚URL - 指向页面中的锚（href="#top"）

target 属性：

_blank表示在新标签页中打开目标网页

_self表示在当前标签页中打开目标网页

id 属性:

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

值得注意:

在HTML文档中插入ID:

现在是ID为1的位置

在HTML文档中创建一个链接，点击此链接就可以调到相对应id的位置

点我跳到ID为1的位置

👤3.4、HTML中特殊字符

显示结果

描述

实体名称

实体编号

空格

 

 

<

小于号

<

<

>

大于号

>

>

&

和号

&

&

"

引号

"

"

'

撇号

' (IE不支持)

'

￠

分

¢

¢

£

镑

£

£

¥

人民币/日元

¥

¥

€

欧元

€

€

§

小节

§

§

©

版权

©

©

®

注册商标

®

®

™

商标

™

™

×

乘号

×

×

÷

除号

÷

÷

值得注意的是：虽然 html 不区分大小写，但实体字符对大小写敏感。

下面来看一个实际的例子

海 燕

上面不论两个字之间空的有多宽，都会默认是看做只有一个空格，如果想在两个字之间显示多个空格，就可以使用以下的方式

海   燕

👤3.5、div和span标签

span和div区别在于，div是一个块级元素，它包含的元素会自动换行。而span是行内元素，在它的前后不会换行。

span没有结构上的意义，只是单纯的应用样式，其他元素不适合时，就可以使用span元素。span可以作为div的子元素，但div不能是span的子元素，如果出现span中出现div不符合ws3c的页面标准。

👤3.6、重点：标签的分类

👥3.6.1、第一种：块级标签

特点：标签独占一行，可指定宽、高。

特性：

能够识别宽高

margin和padding的上下左右均对其有效

可以自动换行

多个块状元素标签写在一起，默认排列方式为从上至下

可以使用margin:0 auto居中对齐

常用的块状元素有：

、

、

...

、
    、