【重构前端知识体系之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、
【【重构前端知识体系之HTML】带你重忆HTML那些记忆模糊的标签】定义关于文档的信息。
4、
定义文档的标题。
5、
定义文档的主体。
6、
定义换行。
7、
-
定义 HTML 标题。
8、
定义段落。
9、
定义注释。
示例
我是一个标题 - 锐客网
我是一个页面内容的标题h1我是一个一个段落
我是一个一个段落
我是一个一个段落
我是一个一个段落
我是一个一个段落
效果
文章图片
看起来,学会了这些基础标签,就可以在网上发一篇小作文啦。实现文字自由?
单独的文本未免太过于单调,来点修饰
修饰文本(格式化)
列表 1、
定义文档类型。最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。
nszhd
文章图片
2、
显示斜体文本效果。
3、
呈现粗体文本效果。
4、
定义强调文本。
5、
把文本定义为语气更强的强调的内容
6、
定义下划线文本。
示例
我是一个标题 - 锐客网 我是一个i段落
我是一个u段落
我是一个em段落
我是一个strong段落
我是一个b段落
效果
文章图片
表单
列表 1、
定义供用户输入的 HTML 表单。
2、
定义输入控件。
3、
定义多行的文本输入控件。
4、
定义按钮。
5、
定义选择列表(下拉列表)。
6、
定义选择列表中的选项。
示例
我是一个标题 - 锐客网
效果
文章图片
图像、音频与视频
列表 1、
文章图片
canvas:
svg:
audio:
video:
效果
文章图片
链接
列表 1、
定义锚。
我是百度
2、
定义文档与外部资源的关系。
列表类型
列表 1、
定义无序列表。
2、
定义有序列表。
3、
定义列表的项目。
4、
定义定义列表。
5、
定义定义列表中项目的描述。
6、
定义定义列表中的项目。
示例
我是一个标题 - 锐客网
- 我是第一
- 我是第二
- 我是第三
- 我是第一
- 我是第二
- 我是第三
- 我
- 很帅
- 你
- 帅吗
效果
文章图片
表格
列表 1、
定义表格
2、
定义表格标题。
3、
定义表格中的表头单元格。
4、
定义表格中的行。
5、
定义表格中的单元。
6、
定义表格中的表头内容。
7、
定义表格中的主体内容。
8、
定义表格中的表注内容(脚注)。
示例
我是一个标题 - 锐客网
姓名
分数
小明
100
小红
70
小东
80
效果
文章图片
其他
列表
1、
2、
定义嵌入的对象。
3、
为外部应用程序(非 HTML)定义容器。
4、
定义关于文档的信息。
5、
定义关于 HTML 文档的元信息。
6、
定义页面中所有链接的默认地址或默认目标。
总结
HTML的标签很多,相信大多数的xdm都了解。但并非都能记得。
告诉你们一件事,我在做HTML的面试题集,准确率竟然只有60%多。这也是我写本篇文章的目的。查漏补缺。
重构前端知识体系,你要一起吗?
博客说明与致谢
文章所涉及的部分资料来自互联网整理,其中包含自己个人的总结和看法,分享的目的在于共建社区和巩固自己。
引用的资料如有侵权,请联系本人删除!
感谢万能的网络,W3C,菜鸟教程等!
感谢勤劳的自己,个人博客,GitHub学习,GitHub
公众号【归子莫】,小程序【子莫说】
如果你感觉对你有帮助的话,不妨给我点赞鼓励一下,好文记得收藏哟!关注我一起成长!
所属专栏:重构前端知识体系(HTML)
幸好我在,感谢你来!
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 宽容谁
- 我要做大厨
- 增长黑客的海盗法则
- 画画吗()
- 2019-02-13——今天谈梦想()
- 远去的风筝
- 三十年后的广场舞大爷
- 叙述作文
- 20190302|20190302 复盘翻盘
- 学无止境,人生还很长