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

【重构前端知识体系之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、</code></p> <p>定义文档的标题。</p> <p>5、<code><body></code></p> <p>定义文档的主体。</p> <p>6、<code><br></code></p> <p>定义换行。</p> <p>7、<code><h1> - <h6></code></p> <p>定义 HTML 标题。</p> <p>8、<code><p></code></p> <p>定义段落。</p> <p>9、<code><!-- --></code></p> <p>定义注释。</p> <h4 id="示例">示例</h4> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是一个标题

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

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

效果

image-20220118151800653

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

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

修饰文本（格式化）

列表

1、

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

nszhd

image-20220118155417168

2、

显示斜体文本效果。

3、

呈现粗体文本效果。

4、

定义强调文本。

5、

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

6、

定义下划线文本。

示例




	
	我是一个标题


		
我是一个i段落

    
我是一个u段落

    
我是一个em段落

    
我是一个strong段落

    
我是一个b段落

效果

image-20220118160731574

表单

列表

1、

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

2、

定义输入控件。

3、

select：

效果

image-20220118162520792

图像、音频与视频

列表

1、

定义图像。

2、

定义图形。

3、

定义 SVG 图形的容器。

4、

定义声音内容。

5、

定义视频。

6、

定义媒介源。

示例





    
    我是一个标题




    

        img: 
    

    

        canvas: 
    

    

        svg: 
            
        
    

    
audio: 
        
    

    
 video:

效果

image-20220118164420834

链接

列表

1、

定义锚。

我是百度

2、

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

列表类型

列表

1、