【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签

网友投稿 562 2022-05-29

【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签

引言

上节，说了HTML是标记语言，那么最重要的就是标记，也就是标签。

那标签那么多？要在这里全部写出来？

当然否。这里会讲解常用的标签。（常用达到70%）

希望在各种前端框架频出的年代，HTML依然牢记于心。

回顾

在刚开始介绍的时候，讲了一个简单的demo，这里贴出来。

我是一个标题

我是一个页面内容的标题

我是一个美男子，你信吗？

HTML元素

什么是HTML元素？

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

具体什么意思呢

我是一个美男子，你信吗？

像上述代码就是一个div元素，它包含了div开始标签，div元素内容，div结束标签，它们一起组合成为了一个div元素。

我是一个页面内容的标题

我是一个美男子，你信吗？

同样的以上的代码描述了一个body元素。

空HTML元素

在之后的标签学习中，有那么一个标签
， 这个标签定义换行。像这种HTML 元素被称为空元素，它是在开始标签中关闭的。

但！为了以后版本迭代和规划，在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

未来的 HTML 版本不允许省略结束标签！

HTML标签

这里按照功能分类讲解

基础标签

1、

定义文档类型。

2、

定义 HTML 文档。

3、

定义关于文档的信息。

4、</p><p>定义文档的标题。</p><p>5、<body></p><p>定义文档的主体。</p><p>6、<br></p><p>定义换行。</p><p>7、<h1> - <h6></p><p>定义 HTML 标题。</p><p>8、<p>定义段落。</p><p>9、<!-- --></p><p>定义注释。</p><p><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是一个标题

我是一个页面内容的标题h1

我是一个一个段落
我是一个一个段落
我是一个一个段落
我是一个一个段落
我是一个一个段落

看起来，学会了这些基础标签，就可以在网上发一篇小作文啦。实现文字自由？

单独的文本未免太过于单调，来点修饰

修饰文本（格式化）

1、

定义文档类型。最初是在 HTML 4.0 中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。

nszhd

2、

显示斜体文本效果。

3、

呈现粗体文本效果。

4、

定义强调文本。

5、

把文本定义为语气更强的强调的内容

6、

定义下划线文本。

我是一个标题

我是一个i段落

我是一个u段落

我是一个em段落

我是一个strong段落

我是一个b段落

表单

1、

定义供用户输入的 HTML 表单。

2、

定义输入控件。

3、

select：

图像、音频与视频

1、

定义图像。

2、

定义图形。

3、

定义 SVG 图形的容器。

4、

定义声音内容。

5、

定义视频。

6、

定义媒介源。

我是一个标题

img:

canvas:

svg:

audio:

video:

链接

1、

定义锚。

我是百度

2、

定义文档与外部资源的关系。

列表类型

1、