【重构前端知识体系之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、``</p> <p>定义注释。</p> <h4>示例</h4> <pre><code class="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、

    定义无序列表。

    2、

      定义有序列表。

      3、

    1. 定义列表的项目。

      4、

      定义定义列表。

      5、

      定义定义列表中项目的描述。

      6、

      定义定义列表中的项目。

      示例

      
      
      
      
          
          我是一个标题
      
      
      
      
          
      • 我是第一
      • 我是第二
      • 我是第三
      1. 我是第一
      2. 我是第二
      3. 我是第三
      很帅
      帅吗

      效果

      image-20220118170046796

      表格

      列表

      1、

      定义表格

      2、

      定义表格中的行。

      5、

      定义表格中的表头内容。

      7、

      定义表格中的主体内容。

      8、

      定义表格中的表注内容(脚注)。

      示例

      
      
      
      
          
          我是一个标题
      
      
      
      
          

      定义表格标题。

      3、

      定义表格中的表头单元格。

      4、

      定义表格中的单元。

      6、

      姓名 分数
      小明 100
      小红 70
      小东 80

      效果

      image-20220118172018318

      其他

      列表

      1、

      2、

      定义嵌入的对象。

      3、

      为外部应用程序(非 HTML)定义容器。

      
      

      4、

      定义关于文档的信息。

      5、

      定义关于 HTML 文档的元信息。

      6、

      定义页面中所有链接的默认地址或默认目标。

      总结

      HTML的标签很多,相信大多数的xdm都了解。但并非都能记得。

      告诉你们一件事,我在做HTML的面试题集,准确率竟然只有60%多。这也是我写本篇文章的目的。查漏补缺。

      重构前端知识体系,你要一起吗?

      博客说明与致谢

      文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。

      引用的资料如有侵权,请联系本人删除!

      感谢万能的网络,W3C,菜鸟教程等!

      感谢勤劳的自己,个人博客,GitHub学习,GitHub

      公众号【归子莫】,小程序【子莫说】

      如果你感觉对你有帮助的话,不妨给我点赞鼓励一下,好文记得收藏哟!关注我一起成长!

      所属专栏:重构前端知识体系(HTML)

      幸好我在,感谢你来!

      你可能感兴趣的:(【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签)